Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

UX/UI ์‹œ์ž‘ํ•˜๊ธฐ : Adobe XD ์ž…๋ฌธ(Inflearn Original)

์–ด๋„๋น„(Adobe) ์‚ฌ์˜ UX/UI ๋””์ž์ธ ํˆด, Adobe XD์˜ ์ „๋ฐ˜์ ์ธ ๊ธฐ๋Šฅ์„ ์‚ดํŽด๋ณด๊ณ  ์‹ค๋ฌด ๋””์ž์ธ ์ž‘์—…์— ์‘์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

Thumbnail

์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[UX/UI, ๊ทธ๋ž˜ํ”ฝ ๋””์ž์ธ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Adobe XD ๊ธฐ์ดˆ ๊ฐœ๋…

  • Adobe XD ํ™œ์šฉ

๋น ๋ฅด๊ณ , ๊ฐ€๋ณ๊ณ , ๊ฐ•๋ ฅํ•˜๋‹ค!
์–ด๋„๋น„ XD๋กœ UX/UI ๋””์ž์ธ ๋งˆ์Šคํ„ฐ ๐Ÿ”ฎ

 UX/UI ๋””์ž์ธ ํˆด, ์™œ ํ•„์š”ํ• ๊นŒ์š”?

UIUX๋ž€ ๋ฌด์—‡์ผ๊นŒ์š”?

UX/UI ๋””์ž์ธ์ด๋ž€ ๋””์ง€ํ„ธ ๊ธฐ๊ธฐ๋ฅผ ํ†ตํ•ด ์ ‘ํ•˜๋Š” ํ™”๋ฉด์„ ์„ค๊ณ„ํ•จ์œผ๋กœ์จ ์‚ฌ์šฉ์ž์˜ ํ–‰๋™์„ ์œ ๋„ํ•˜๊ณ  ๊ฐœ์„ ํ•˜๋Š” ๋””์ž์ธ์„ ๋œปํ•ด์š”. ์šฐ๋ฆฌ๊ฐ€ ์›น ์‚ฌ์ดํŠธ๋‚˜ ๋ชจ๋ฐ”์ผ ์•ฑ์—์„œ ๋ณด๋Š” ๋ฒ„ํŠผ ํ•˜๋‚˜๋ฅผ ๋ˆ„๋ฅด๋Š” ์ผ์ƒ์ ์ธ ํ–‰๋™ ํ•˜๋‚˜์—๋„ UX/UI ๋””์ž์ธ์˜ ์˜ํ–ฅ์ด ์ˆจ์–ด ์žˆ์–ด์š”. ์ด๋ ‡๋“ฏ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(User Interface, UI)๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(User Experience, UX)์„ ์ด๋Œ์–ด๋‚ด๊ธฐ๊นŒ์ง€์˜ ๋ชจ๋“  ๊ณผ์ •์„ ํ†ตํ‹€์–ด UX/UI ๋””์ž์ธ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

ํŠนํžˆ ์ตœ๊ทผ ๋“ค์–ด UX/UI ๋””์ž์ธ์˜ ์ค‘์š”์„ฑ์€ ์ ์  ๋” ๊ฐ•๋ ฅํ•ด์ง€๊ณ  ์žˆ์–ด์š”. PC, ์Šค๋งˆํŠธํฐ, ํƒœ๋ธ”๋ฆฟ ๋“ฑ ๋””์ง€ํ„ธ ๋””๋ฐ”์ด์Šค ์ƒํƒœ๊ณ„๊ฐ€ ๋‹ค์–‘ํ•ด์ง€๋ฉด์„œ ํ•˜๋‚˜์˜ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋””์ž์ธํ•˜๋”๋ผ๋„ ์—ฌ๋Ÿฌ ๋””์ง€ํ„ธ ์Šคํฌ๋ฆฐ ์ „๋ฐ˜์— ๊ฑธ์นœ ๋ชจ๋“  ํ™”๋ฉด์— ๋Œ€ํ•œ ๋””์ž์ธ์ด ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . ๊ณผ๊ฑฐ์—๋Š” ๋น„ํŠธ๋งต(Bitmap) ๊ธฐ๋ฐ˜์˜ ํฌํ† ์ƒต(Photoshop)๊ณผ ์ผ๋Ÿฌ์ŠคํŠธ๋ ˆ์ดํ„ฐ(Illustrator)๋ฅผ ํ™œ์šฉํ•ด ์›น ํ™”๋ฉด์„ ๋””์ž์ธํ–ˆ์ง€๋งŒ, ํ”„๋กœ๊ทธ๋žจ์ด ๋„ˆ๋ฌด ๋ฌด๊ฒ๊ณ  ๋‹ค์–‘ํ•œ ๋””์ง€ํ„ธ ํ™˜๊ฒฝ์— ๋Œ€์‘ํ•˜๊ธฐ ์–ด๋ ค์›Œ์ง€๋ฉด์„œ ๋ฒกํ„ฐ(Vector) ๊ธฐ๋ฐ˜์˜ ์ „์šฉ UX/UI ๋””์ž์ธ ํ”„๋กœ๊ทธ๋žจ์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์—ˆ์–ด์š”. 

Adobe XD๋Š” ๋ฐ”๋กœ ์ด๋Ÿฌํ•œ ํ™”๋ฉด์„ ์›ํ™œํ•˜๊ณ  ํšจ๊ณผ์ ์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” UX/UI ๋””์ž์ธ ํ”„๋กœ๊ทธ๋žจ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.


๋– ์˜ค๋ฅด๋Š” ํ›„๋ฐœ ์ฃผ์ž,
Adobe XD.

 ์–ด๋„๋น„ XD(์—‘์Šค๋””), ๊ณผ์—ฐ ์–ด๋–ค ํˆด์ผ๊นŒ์š”?

Adobe XD๋Š” ํฌํ† ์‚ฝ, ์ผ๋Ÿฌ์ŠคํŠธ๋ ˆ์ดํ„ฐ ๋“ฑ์œผ๋กœ ์ž˜ ์•Œ๋ ค์ง„ ์–ด๋„๋น„ ์‹œ์Šคํ…œ์ฆˆ์˜ UX/UI ๋””์ž์ธ ์†”๋ฃจ์…˜ ํˆด์ž…๋‹ˆ๋‹ค. Adobe XD๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด PC, ๋ชจ๋ฐ”์ผ ์›น์‚ฌ์ดํŠธ ๋ฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋””์ž์ธํ•˜๊ณ  ํ”„๋กœํ† ํƒ€์ดํ•‘(Prototyping) ํ•  ์ˆ˜ ์žˆ์–ด์š”. ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ์ž๋“ค๊ณผ ์›ํ™œํ•˜๊ฒŒ ๋””์ž์ธ ๊ฐ€์ด๋“œ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋œ ์ „๋ฌธ ๋””์ž์ธ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.

XD๋Š” ์Šค์ผ€์น˜(Sketch), ํ”ผ๊ทธ๋งˆ(Figma)๋ณด๋‹ค ๋Šฆ๊ฒŒ ์ถœ์‹œ๋œ UX/UI ๋””์ž์ธ ํˆด ๊ณ„์˜ ํ›„๋ฐœ ์ฃผ์ž์ด์ง€๋งŒ, ๊ทธ๋งŒํผ ๋งŽ์€ ์žฅ์ ์œผ๋กœ ๋น ๋ฅด๊ฒŒ ๋– ์˜ค๋ฅด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. UI ๋””์ž์ธ์— ๊ผญ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ„๋‹จํ•˜๊ณ  ์ง๊ด€์ ์ธ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์กŒ์–ด์š”. ํ”„๋กœํ† ํƒ€์ž… ์ œ์ž‘๋ถ€ํ„ฐ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ์œ„ํ•œ ํ”ผ๋“œ๋ฐฑ ํ™”๋ฉด๊นŒ์ง€ ํ•˜๋‚˜์˜ ํˆด ์•ˆ์—์„œ ๊ฐ„ํŽธํ•˜๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์ฃ .

๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ธํ„ฐ๋ž™์…˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๊ตฌํ˜„ํ•  ์ˆ˜๋„ ์žˆ๊ณ , ๊ธฐ์กด ์–ด๋„๋น„ ์‹œ์Šคํ…œ์ฆˆ์˜ ํˆด์„ ๊ฒฝํ—˜ํ•ด ๋ณธ ์‚ฌ์šฉ์ž๋ผ๋ฉด ์‰ฝ๊ฒŒ ์ ์‘ํ•  ์ˆ˜ ์žˆ๊ณ ์š”. macOS, Windows ์šด์˜์ฒด์ œ๋ฅผ ๋ชจ๋‘ ์ง€์›ํ•˜๊ณ , ๊ฐœ์ธ์„ ์œ„ํ•œ ๋ฌด๋ฃŒ ๋ฒ„์ „์„ ์ œ๊ณตํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์œ ๋ช… ๊ธฐ์—…, ๋Œ€ํ˜• ๋””์ž์ธ ์—์ด์ „์‹œ, ๋””์ž์ด๋„ˆ๋ฟ ์•„๋‹ˆ๋ผ ๊ธฐํš์ž๋“ค๊นŒ์ง€๋„ ์‹ค๋ฌด์—์„œ ์• ์šฉํ•˜๋Š” ํˆด์ด์—์š”.

์ด ๊ฐ•์˜์—์„œ๋Š” UX/UI ๋””์ž์ธ ์Šคํ‚ฌ์„ ๊ฐ–์ถ”๊ณ ์ž ํ•˜๋Š” ๋ถ„๋“ค์„ ๋Œ€์ƒ์œผ๋กœ Adobe XD๋ฅผ ์ด์šฉํ•ด ์›น/๋ชจ๋ฐ”์ผ ์•ฑ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋””์ž์ธํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค. XD์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ๋ฐฐ์šฐ๋Š” ๊ณผ์ •์—์„œ ์‹ค์ œ UI ๋””์ž์ธ ํ”„๋กœ์„ธ์Šค๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ถ๊ทน์ ์œผ๋กœ๋Š” ์‹ค๋ฌด์—์„œ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋””์ž์ธ ์Šคํ‚ฌ์„ ๋งˆ์Šคํ„ฐํ•˜๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ํ•จ๊ป˜ ๋„์ „ํ•ด๋ณผ๊นŒ์š”?


XD ๋งˆ์Šคํ„ฐ, ํ•œ๋ฒˆ์— ๋„์ „!


์ˆœ์„œ๋Œ€๋กœ ํ•™์Šตํ•ด๋ณด์„ธ์š”!

์ฒ˜์Œ ๋งŒ๋‚˜๋Š” Adobe XD!
Adobe XD๋ฅผ ์จ์•ผ ํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ์š”? XD๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์–ด๋–ค ์ ์ด ์ข‹์„๊นŒ์š”? ํ•™์Šต์— ๋“ค์–ด๊ฐ€๊ธฐ์— ์•ž์„œ UX/UI ๋””์ž์ธ ํˆด XD์˜ ํŠน์ง•์„ ์‚ดํŽด๋ณด๊ณ  ๋ฌด์—‡์„ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.
๊ธฐ๋ณธ์„ ํƒ„ํƒ„ํžˆ, XD์˜ ๋ชจ๋“  ๊ฒƒ.
๋””์ž์ธ ์ž‘์—… ํ™”๋ฉด์„ ์„ธํŒ…ํ•˜๋Š” ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด ์ด๋ฏธ์ง€ ํˆด ์กฐ์ž‘์„ ์œ„ํ•œ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์ตํž™๋‹ˆ๋‹ค. ์ด ๊ณผ์ •์—์„œ ์‹ค์ œ UI ๋””์ž์ธ์— ํ•„์š”ํ•œ ์š”์†Œ๋“ค์„ ๊ตฌ์„ฑํ•˜๊ณ  ๋ฐฐ์น˜ํ•˜๋Š” ํ•ต์‹ฌ ๋…ธํ•˜์šฐ๋ฅผ ํ„ฐ๋“ํ•  ์ˆ˜ ์žˆ์–ด์š”. 
ํ”„๋กœํ† ํƒ€์ดํ•‘๋„ ์ž์‹ ์žˆ์–ด์š”.
๋‚ด๊ฐ€ ๋งŒ๋“  ๋””์ž์ธ์„ ์‹ค์ œ ์„œ๋น„์Šค๋กœ ๊ฐœ๋ฐœํ•˜๊ธฐ ์ „ ํ”„๋กœํ† ํƒ€์ดํ•‘(Prototyping)์„ ๋จผ์ € ์ง„ํ–‰ํ•ด ๋ด…๋‹ˆ๋‹ค. ์ง์ ‘ ํ”„๋กœํ† ํƒ€์ž…์„ ๋งŒ๋“ค๊ณ  ์ ์šฉํ•˜๋ฉด์„œ ์‹ค์ฒด์— ํ•œ ๋ฐœ ๋” ๊ฐ€๊นŒ์šด ๋””์ž์ธ์„ ์„ค๊ณ„ํ•ด ๋ณด์„ธ์š”.
UI ๋””์ž์ธ ๋งˆ์Šคํ„ฐ๋ฅผ ๋ชฉํ‘œ๋กœ!
์™„์„ฑํ•œ UI ๋””์ž์ธ ํ™”๋ฉด์„ ๊ธฐํš์ž, ๊ฐœ๋ฐœ์ž ๋ฐ ํด๋ผ์ด์–ธํŠธ์™€ ๊ณต์œ ํ•ด๋ณผ ์ˆ˜ ์žˆ์–ด์š”. ๋์œผ๋กœ ์‹ค์ œ ์„œ๋น„์Šค์˜ UI ๋””์ž์ธ์„ ๋”ฐ๋ผ ๋งŒ๋“ค์–ด ๋ณด๋ฉฐ UX/UI ์—ญ๋Ÿ‰์„ ํŠผํŠผํ•˜๊ฒŒ ๋‹ค์ ธ๋‚˜๊ฐ‘๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค ์ฃผ๋ชฉํ•˜์„ธ์š”!

UX/UI?

์‹ค์ œ UX/UI ๋””์ž์ธ
๊ณผ์ •์ด ๊ถ๊ธˆํ•œ ์‚ฌ๋žŒ

XD?

XD๋ฅผ ๊ธฐ์ดˆ๋ถ€ํ„ฐ
์ฒด๊ณ„์ ์œผ๋กœ ๋ฐฐ์šฐ์‹ค ๋ถ„

๋‚ด ๊ฟˆ์€ ๋””์ž์ด๋„ˆ

UX/UI ๋””์ž์ธ์„
์‹œ์ž‘ํ•˜๋Š” ๋ˆ„๊ตฌ๋‚˜

ํŒ€์›Œํฌ

UI ๋””์ž์ธ ํˆด์„
์ž˜ ์“ฐ๊ณ ํ”ˆ ๊ธฐํš์ž


UX/UI ์ž…๋ฌธ
์ธํ”„๋Ÿฐ๊ณผ ํ•จ๊ป˜ ๋„์ „ํ•ด๋ด์š”.

์ธํ”„๋Ÿฐ ์˜ค๋ฆฌ์ง€๋„ UX/UI ๋กœ๋“œ๋งต ๋ณด๋Ÿฌ๊ฐ€๊ธฐ โœจ

์ˆ˜๊ฐ• ์ „ ํ™•์ธํ•ด์ฃผ์„ธ์š”!

  • ๋ณธ ๊ฐ•์˜๋Š” ์ˆ˜์—… ๋‚ด์šฉ์— ๋Œ€ํ•œ ์งˆ์˜์‘๋‹ต์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ํ•™์Šต์— ์ฐธ๊ณ ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • UX/UI ๋””์ž์ด๋„ˆ

  • ๋””์ž์ด๋„ˆ์™€ ํ˜‘์—…์ด ํ•„์š”ํ•œ PM

  • XD ํˆด์„ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜๋Š” ์ดˆ๋ณด์ž

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • UX/UI ๋””์ž์ธ ๊ด€๋ จ ๋ฐฐ๊ฒฝ ์ง€์‹์ด ์žˆ์œผ๋ฉด ์ข‹์•„์š”

์•ˆ๋…•ํ•˜์„ธ์š”
์ธํ”„๋Ÿฐ์ž…๋‹ˆ๋‹ค.

671,516

๋ช…

์ˆ˜๊ฐ•์ƒ

4,791

๊ฐœ

์ˆ˜๊ฐ•ํ‰

118

๊ฐœ

๋‹ต๋ณ€

4.7

์ 

๊ฐ•์˜ ํ‰์ 

109

๊ฐœ

๊ฐ•์˜

๋ฐฐ์›€์˜ ๊ธฐํšŒ๋Š” ๊ฒฝ์ œ์ , ๋ฌผ๋ฆฌ์  ํ•œ๊ณ„์—์„œ ์ž์œ ๋กœ์›Œ์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๋Š” ์„ฑ์žฅ๊ธฐํšŒ์˜ ํ‰๋“ฑ์„ ์ถ”๊ตฌํ•ฉ๋‹ˆ๋‹ค.

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

29๊ฐœ โˆ™ (6์‹œ๊ฐ„ 56๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!