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

์Šค์ผ€์น˜์•ฑ ๋””์ž์ธ ๊ธฐ์ดˆ๋‹ค์ง€๊ธฐ[Sketch]

์Šค์ผ€์น˜ ํˆด์˜ ๊ธฐ๋ณธ์ ์ธ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋Š” ํด๋ž˜์Šค์ž…๋‹ˆ๋‹ค.

Thumbnail

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

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

  • ๋ชจ๋ฐ”์ผ์›น, ์•ฑ ๋””์ž์ธ์„ ์œ„ํ•œ ์Šค์ผ€์น˜ ์‚ฌ์šฉ๋ฐฉ๋ฒ•

  • ์Šค์ผ€์น˜ ์•ฑ์„ ํ™œ์šฉํ•œ UI๋””์ž์ธ

  • ์Šค์ผ€์น˜ ์•ฑ์˜ ๊ธฐ๋ณธ์ ์ธ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•๊ณผ ์ดํ•ด

๊ธฐ๋ณธ์ ์ธ ์Šค์ผ€์น˜ ๋””์ž์ธ ํˆด์„ ์ตํžˆ๊ณ 
๋ชจ๋ฐ”์ผ ์•ฑ์„ ๋””์ž์ธํ•ด์š”! ๐Ÿ’Ž

์˜ˆ๋น„ ๋””์ž์ด๋„ˆ ์—ฌ๋Ÿฌ๋ถ„,
๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค ๐Ÿ’๐Ÿปโ€โ™‚๏ธ

Sketch

๋ชจ๋ฐ”์ผ ๋””์ž์ธ๊ณผ ์›น ๋””์ž์ธ์„ ํ•˜๋ฉด์„œ ์Šค์ผ€์น˜๋Š” ๋””์ž์ด๋„ˆ์—๊ฒŒ
๊ฐ€๋ฒผ์šฐ๋ฉด์„œ๋„ ํ˜๋ช…์ ์ธ ๋””์ž์ธ ๋„๊ตฌ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์Šค์ผ€์น˜๋Š” ํฌ๊ฒŒ ์–ด๋ ค์šด ํˆด์€ ์•„๋‹™๋‹ˆ๋‹ค. Photoshop์ด๋‚˜ Ai๊ฐ€ ๋” ๋ณต์žกํ•œ ๊ธฐ๋Šฅ์„ ๋งŽ์ด ์ œ๊ณตํ•˜๋‹ˆ๊นŒ์š”. ๋””์ž์ด๋„ˆ์˜ ์—…๋ฌด ์†๋„๋ฅผ ํ–ฅ์ƒ์‹œ์ผœ์คฌ๊ณ , ๊ท€์ฐฎ์€ ๋ฐ˜๋ณต ์ž‘์—…์„ ์ค„์—ฌ์ค˜์„œ ์•ผ๊ทผ์„ ์•ˆํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์คฌ์ฃ .

ํ•˜์ง€๋งŒ ์‹ค๋ฌด๋ฅผ ํ•˜๋Š” ๋””์ž์ด๋„ˆ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ๊ฐ™์€ ์Šค์ผ€์น˜ ์•ฑ์œผ๋กœ ์ž‘์—…์„ ํ–ˆ๋”๋ผ๋„ ์ด๋Ÿฐ ๊ธ์ •์ ์ธ ๊ธฐ๋Šฅ์„ ์ œ๋Œ€๋กœ ํ™œ์šฉํ•˜๊ณ  ์žˆ์ง€ ๋ชปํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ๋””์ž์ธ๋œ ํ™”๋ฉด๋งˆ๋‹ค ๊ณตํ†ต์ ์ธ ์š”์†Œ๊ฐ€ ์žˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋ชจ๋‘ ๋‹ค๋ฅด๊ฒŒ ๋””์ž์ธ์ด ๋˜์–ด์žˆ๋Š” ๋“ฑ ํ†ค์•ค๋งค๋„ˆ๊ฐ€ ์ผ์ •ํ•˜์ง€ ์•Š๊ฒŒ ๋””์ž์ธ ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์ฃ . ๋ฌผ๋ก  ์•„์ง ์‹ค๋ ฅ์ด๋‚˜ ๊ฒฝํ—˜์ด ๋ถ€์กฑํ•ด์„œ์ผ ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๊ฒฐ๊ตญ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ ํ†ค์•ค๋งค๋„ˆ๋ฅผ ์ง€์ผœ์ค„ ์ˆ˜ ์žˆ๋„๋ก ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์ž˜ ๋‹ค์ง€๋Š” ๊ฒƒ์ด๊ณ  ์‹ค์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ํˆด์˜ ๋„์›€์„ ์ž˜ ๋ฐ›๋Š”๊ฒ๋‹ˆ๋‹ค.

์Šค์ผ€์น˜์•ฑ์ธ ์ฒ˜์Œ์ธ
๋ชจ๋“  ๋””์ž์ด๋„ˆ๋ฅผ ์œ„ํ•ด ๐Ÿ’ซ

์Šค์ผ€์น˜๋Š” Adobe๊ตฐ์˜ ๋””์ž์ธ ํˆด๊ณผ ๋‹ค๋ฅด๊ฒŒ ํ•œ๊ธ€ํ™”๊ฐ€ ๋˜์–ด์žˆ์ง„ ์•Š์•„์š”. ์•ž์œผ๋กœ ๋” ๋‚˜์˜ค๊ฒŒ ๋  ๋‹ค์–‘ํ•œ ์†Œํ”„ํŠธ์›จ์–ด๋“ค๋„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์˜์–ด๋กœ๋งŒ ์ œ๊ณต๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๊ณ  ์–ด๋ ค์šด๊ฑด ํ•˜๋‚˜๋„ ์—†์–ด์š”, ์Šค์ผ€์น˜์— ๋Œ€ํ•œ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์™„๋ฒฝํ•˜๊ฒŒ ๋‹ค์ ธ๋ด์š”!

#1.
์Šค์ผ€์น˜์˜ ๊ธฐ๋ณธ
์•„ํŠธ๋ณด๋“œ ์ดํ•ดํ•˜๊ธฐ


์•„ํŠธ๋ณด๋“œ๋Š” ๋ชจ๋ฐ”์ผ ๋””์ž์ธ ๋ ˆ์ด์–ด๋ฅผ ์Œ“์•„์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•œ ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. ์•„ํŠธ๋ณด๋“œ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ์ดํ•ด๋ถ€ํ„ฐ ์œ ์šฉํ•œ ๊ฟ€ํŒ๋„ ์‚ดํŽด๋ด…์‹œ๋‹ค

#2.
์•„์ด์ฝ˜๋ถ€ํ„ฐ
UI 6๊ฐ€์ง€ ๋„ํ˜•๊นŒ์ง€

์•„์ด์ฝ˜์„ ๋””์ž์ธํ•˜๋Š” ๊ฒƒ๋ถ€ํ„ฐ ๋ชจ๋“  ๋””์ž์ธ์„ ์™„์„ฑํ•˜๋Š”๋ฐ ๊ฐ€์žฅ ํฐ ์—ญํ• ์„ ํ•˜๋Š” ๊ธฐ๋ณธ ๋„ํ˜•์„ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

#3.
์ด๋ฏธ์ง€๋ฅผ ์ฑ„์šฐ๋Š”
๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•๋“ค

ํ™”๋ฉด์˜ ์ด๋ฏธ์ง€๋ฅผ ์ขŒ์šฐํ•˜๋Š” ์นด๋“œ ๋””์ž์ธ ํ•˜๋‚˜์˜ ์‹ฌ๋ณผ๋กœ 5๊ฐ€์ง€์˜ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์นด๋“œ ๋””์ž์ธ์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ์‹ฌ๋ณผ๋กœ ๊ตฌ์กฐํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•๊นŒ์ง€!

#4.
๋„ํ˜•,
ํ…์ŠคํŠธ ์Šคํƒ€์ผ


์Šคํƒ€์ผ ๊ธฐ๋Šฅ์€ ๋””์ž์ธ ์ž‘์—…์˜ ํ†ค์•ค ๋งค๋„ˆ๋ฅผ ์œ ์ง€ํ•ด์ฃผ๋Š” ๊ธฐ๋ณธ์ž…๋‹ˆ๋‹ค. 

#5.
๊ธฐ๋ณธ์ ์ธ
์‹ฌ๋ณผ ์ดํ•ด


์Šค์ผ€์น˜์˜ ํ•ต์‹ฌ, ์‹ฌ๋ณผ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ดํ•ด์™€ ์˜ˆ์ œ๋กœ ์™„์„ฑํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ก ๊ฐ•์˜ ์ˆ˜๊ฐ•์„ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ฒƒ!

  • ์Šค์ผ€์น˜ ์•ฑ์ด ์„ค์น˜๋œ ๋งฅ๋ถ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
  • Mac OS๋Š” ์ตœ์‹  ์‚ฌ์–‘์œผ๋กœ ์—…๋ฐ์ดํŠธ ๋˜์–ด์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด์ „ ๋ฒ„์ „์€ ๋™์ผํ•œ ๊ธฐ๋Šฅ์ด ์ œ๊ณต๋˜์ง€ ์•Š๊ฑฐ๋‚˜ ํ™”๋ฉด์ด ๋‹ค์†Œ ์ฐจ์ด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Sketch ์•ฑ์€ ์œ ๋ฃŒ ์•ฑ์ž…๋‹ˆ๋‹ค. ์•„์ง ๊ตฌ๋งคํ•˜์ง€ ์•Š์•˜๋‹ค๋ฉด 14์ผ๊ฐ„์˜ ๋ฌด๋ฃŒ ์‚ฌ์šฉ๊ธฐ๊ฐ„์ด ์ œ๊ณต๋˜๋Š” Trial ๋ฒ„์ „์„ ์„ค์น˜ํ•ด์ฃผ์„ธ์š”.


Q&A ๐Ÿค”

Q. ๋””์ž์ธ์„ ์ฒ˜์Œ ๋ฐฐ์›๋‹ˆ๋‹ค. ์–ด๋ ต์ง€ ์•Š์„๊นŒ์š”?

๋””์ž์ธ ๋น„์ „๊ณต์ž๋„ ์‰ฝ๊ฒŒ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์Šค์ผ€์น˜์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ๊ฐœ๋…์ด ํ•„์š”ํ•˜๋‹ค๋ฉด '๊ธฐ๋ณธ๊ธฐ ๋‹ค์ง€๊ธฐ' ๊ณผ์ •์„ ๊ผญ ํ•จ๊ป˜ ํ•ด์ฃผ์„ธ์š”.

Q. ์™œ ์Šค์ผ€์น˜์•ฑ์„ ๋ฐฐ์šฐ๋Š”๊ฒŒ ์ข‹์€๊ฐ€์š”?

์Šค์ผ€์น˜ ์•ฑ์ด ๋งŒ๋“ค์–ด์ง€๊ณ  Adobe XD๋ฅผ ๋น„๋กฏํ•œ ํƒ€์‚ฌ์˜ ์ œํ’ˆ์ด ์šฐ๋ฅด๋ฅด ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ค‘ ๋ฌด์—‡์ด ๋” ์ข‹๋‹ค ๊ณ  ์ด์•ผ๊ธฐํ•˜๊ธฐ ์–ด๋ ค์šด ๊ฒƒ์€ ์‚ฌ์‹ค์ด์ง€๋งŒ ์ด๋Ÿฌํ•œ ๋””์ž์ธ ํˆด์˜ ๋ฐœ์ „๊ณผ ๋‹ค์–‘์„ฑ์˜ ์‹œ์กฐ์ƒˆ ์—ญํ• ์ด ๋ฐ”๋กœ ์Šค์ผ€์น˜ ์•ฑ ์ž…๋‹ˆ๋‹ค. ์Šค์ผ€์น˜ ์•ฑ์„ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์ด ์ต์ˆ™ํ•˜๋‹ค๋ฉด ๊ทธ ์ดํ›„์— ๊ฐœ๋ฐœ๋œ ๋ชจ๋“  ํˆด์€ ๋ณด๋‹ค ์‰ฝ๊ฒŒ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Q. ์œˆ๋„์šฐ PC๋„ ๊ฐ€๋Šฅํ•œ๊ฐ€์š”?

์•„์‰ฝ๊ฒŒ๋„ ์œˆ๋„์šฐ์šฉ Sketch๋Š” ์—†์Šต๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋žจ์„ ๊ฐœ๋ฐœํ•œ ํšŒ์‚ฌ๊ฐ€ ๋ฏธ๊ตญ์ด๋‹ค ๋ณด๋‹ˆ ํ•ด์™ธ์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” Mac์—์„œ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์†Œํ”„ํŠธ์›จ์–ด์ž…๋‹ˆ๋‹ค. ์•ž์œผ๋กœ๋ฅผ ์œ„ํ•ด์„œ๋Š” Mac ํ•˜๋‚˜ ์Šค์œฝ ์งˆ๋Ÿฌ๋ณด์‹œ๋Š”๊ฒƒ๋„... 

Q. ์Šค์ผ€์น˜๋ฅผ ๊ตญ๋‚ด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ์—…์ด ์žˆ๋‚˜์š”?

๋„ค, ์นด์นด์˜ค ๋“ฑ ๊ตญ๋‚ด ๊ธฐ์—…์—์„œ ๋Œ€๋ถ€๋ถ„ ๋ชจ๋ฐ”์ผ ์•ฑ์„ ๋””์ž์ธ ํ•˜๋Š” ํšŒ์‚ฌ์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ โœ”๏ธ

์•ˆ๋…•ํ•˜์„ธ์š”, ์—ฐ๋‚จ๋™์ด์žฌ์šฉ์ž…๋‹ˆ๋‹ค.

์ €๋Š” 2017๋…„ '๋ง›์žˆ๋Š” ์Šค์ผ€์น˜' ๋ผ๋Š” ์Šค์ผ€์น˜ ์•ฑ์— ๋Œ€ํ•œ ์ฑ…์„ ์ผ์Šต๋‹ˆ๋‹ค. ๊ณต๋“ค์ธ ์‹œ๊ฐ„ ๋งŒํผ ์•ˆํŒ”๋ฆฐ ์กธ์ž‘์ด์ง€๋งŒ ใ…œใ…œ ITํšŒ์‚ฌ๋ฅผ ์šด์˜ํ•˜๋ฉด์„œ ๋””์ž์ธ ํˆด์„ ์ ‘ํ•˜๊ฒŒ ๋˜๊ณ , ๋””์ž์ด๋„ˆ๋กœ์„œ ๊ทธ๋ฆฌ๊ณ  ์ง์ ‘ ๋””์ž์ธํ•œ ๋‚ด์šฉ์„ ์‹ค๋ฌผ ์•ฑ์„œ๋น„์Šค๋กœ ์™„์„ฑํ•ด๊ฐ€๋ฉด์„œ  ๋ˆ„์ ๋œ ๋…ธํ•˜์šฐ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ๋” ์ข‹์€ ์•„์ด๋””์–ด๋ฅผ ๋งŒ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ์— ์ฆ๊ฑฐ์›€์„ ๋А๋ผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

  • ์Šค์ผ€์น˜ ์•ฑ์„ ์ฒ˜์Œ ์ ‘ํ•˜์‹œ๋Š” ๋ถ„

  • Adobeํˆด์„ ์‚ฌ์šฉํ•ด์„œ ์•ฑ์„ ๋””์ž์ธํ•˜๋ฉด์„œ ์–ด๋ ค์›€์„ ๋А๋ผ์‹  ๋ถ„๋“ค

  • ์ดˆ๋ณด GUI ๋””์ž์ด๋„ˆ

  • ๋””์ž์ธ ์Šคํ‚ฌ์„ ๋†’์ด๊ณ  ์‹ถ์€ ๋””์ž์ด๋„ˆ

  • ์ทจ์ง ๋˜๋Š” ์ด์ง์˜ˆ์ • ๋””์ž์ด๋„ˆ

์•ˆ๋…•ํ•˜์„ธ์š”
๊น€์ˆ˜์žฌ์ž…๋‹ˆ๋‹ค.

919

๋ช…

์ˆ˜๊ฐ•์ƒ

82

๊ฐœ

์ˆ˜๊ฐ•ํ‰

7

๊ฐœ

๋‹ต๋ณ€

4.6

์ 

๊ฐ•์˜ ํ‰์ 

8

๊ฐœ

๊ฐ•์˜

 

ํ˜„์ง ์Šคํƒ€ํŠธ์—… PO 13๋…„์ฐจ

ํ˜„) ๋ผ์ดํ”„์Šคํƒ€์ผ ํ”Œ๋žซํผ PO

์ „) ํ—ฌ์Šค์ผ€์–ด ํ”Œ๋žซํผ Lead PO

์ „) ํ—ฌ์Šค์ผ€์–ด CRM ์‹œ์Šคํ…œ PO

์ „) ๊ด‘๊ณ  ํ”Œ๋žซํผ PO

 

ํ˜„) ๋ฆฌ๋ฉ”์ธ ๋””์ž์ธํˆด ํ…Œํฌ๋‹‰ ํด๋ž˜์Šค ๊ฐ•์‚ฌ

ํ˜„) ์„œ์šธ์‹œ ์ฒญ๋…„์ทจ์—…์‚ฌ๊ด€ํ•™๊ต ์„œ๋น„์Šค ๊ธฐํš ๊ฐ•์‚ฌ

์ „) ํŒจ์ŠคํŠธ์บ ํผ์Šค UI/UX๋””์ž์ธ ์Šค์ฟจ ๊ฐ•์‚ฌ

์ „) LG์ „์ž ๋””์ž์ธํŒ€ Sketch ๋””์ž์ธ ๊ฐ•์˜

 

์ €์„œ

ํ”„๋กœ๋•ํŠธ ๊ฐœ๋ฐœ์˜ ๋ชจ๋“  ๊ฒƒ

๋ง›์žˆ๋Š” ์Šค์ผ€์น˜ ๋””์ž์ธ

ํ”ผ๊ทธ๋งˆ ๊ฐ€์ด๋“œ๋ถ 

๋”๋ณด๊ธฐ

์ˆ˜๊ฐ•ํ‰

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