UXUI ์ฃผ๊ฐ„ ์•„ํ‹ฐํด

๐Ÿ”– 2021๋…„ 5์›” 2์ฃผ TOP3

๋ธŒ๋žœ๋“œ ๋ถ&๊ฐ€์ด๋“œ๋ผ์ธ / ์•„ํ† ๋ฏน ๋””์ž์ธ๊ณผ ๋ชจ๋“ˆ์‹ ์•ฑ / ๊ตฌ๊ธ€ ๋จธํ„ฐ๋ฆฌ์–ผ ๋””์ž์ธ ๊ฐ€์ด๋“œ 10๊ฐ€์ง€ ํ•ต์‹ฌ ์‚ฌํ•ญ

2021.05.14 | ์กฐํšŒ 990 |
0
|

from.designer

ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” ๋””์ž์ด๋„ˆ ์ปค๋ฎค๋‹ˆํ‹ฐ

๐Ÿ”– 2021๋…„ 5์›” 2์ฃผ TOP3

  1. ๋ธŒ๋žœ๋“œ ๋ถ & ๊ฐ€์ด๋“œ๋ผ์ธ
  2. UX/UI ๋””์ž์ธ์˜ ์•„ํ† ๋ฏน ๋””์ž์ธ๊ณผ ๋ชจ๋“ˆ์‹ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ 
  3. Google ๋จธํ‹ฐ๋ฆฌ์–ผ ๋””์ž์ธ ๊ฐ€์ด๋“œ ๋ผ์ธ์˜ 10๊ฐ€์ง€ ํ•ต์‹ฌ ์‚ฌํ•ญ

๋ธŒ๋žœ๋“œ ๋ถ & ๊ฐ€์ด๋“œ๋ผ์ธ 

 

ํ›Œ๋ฅญํ•œ ์•„์ด๋ดํ‹ฐํ‹ฐ๋ฅผ ๋งŒ๋“ค๊ณ  ๋ธŒ๋žœ๋“œ ์ด๋ฏธ์ง€๋ฅผ ๊ฐœ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•

"๋ธŒ๋žœ๋“œ ๋ถ์ด์—ฌ? ์™œ ํ•„์š”ํ• ๊นŒ์š”? โ€” ์†Œ๊ทœ๋ชจ ํšŒ์‚ฌ์˜ ๋Œ€ํ‘œ๊ฐ€ ๋ฌด๊ด€์‹ฌํ•˜๊ฒŒ ๋งํ•ฉ๋‹ˆ๋‹ค. โ€” ์ €๋Š” ์ž‘์€ ์‚ฌ์—…์„ ํ•˜๊ณ  ์žˆ์–ด์š”. ๋กœ๊ณ ๊ฐ€ ์žˆ๋Š”๋ฐ, ๋” ํ•„์š”ํ•œ ๊ฒŒ ์žˆ์„๊นŒ์š”? ๋ธŒ๋žœ๋“œ ๋ถ์€ ํ•„์š” ์—†์–ด์š”.โ€


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

์™œ ๋ธŒ๋žœ๋“œ ๋ถ์ด ํ•„์š”ํ• ๊นŒ์š”?

๋ธŒ๋žœ๋“œ ๋ถ์€ ๊ธฐ์—…์˜ ์ฃผ์š” ๊ฐ€์น˜์™€ ์›์น™, ๊ทธ๋ฆฌ๊ณ  ๋ธŒ๋žœ๋“œ ์•„์ด๋ดํ‹ฐํ‹ฐ ๊ฐ€์ด๋“œ๋ผ์ธ์„ ๋‹ด์€ ๋ฌธ์„œ์ž…๋‹ˆ๋‹ค. ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ  ํ™๋ณดํ•˜๋Š” ๋ฐ ๊ด€์‹ฌ์ด ์žˆ๋Š” ์‚ฌ๋žŒ๋“ค์€ ํšŒ์‚ฌ์˜ ๊ทœ๋ชจ์— ์ƒ๊ด€์—†์ด ๋ธŒ๋žœ๋“œ ์ฑ…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

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

์ด๋Ÿฐ ๋ฉ‹์ง„ ๋ฐœ๊ฒฌ์€ ์—ฌ๋Ÿฌ๋ถ„์ด ๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ ๋ธŒ๋žœ๋“œ ์ฑ…์„ ๋งŒ๋“ค๋ผ๊ณ  ์ง€์‹œํ•˜์ง€๋งŒ ์ง์ ‘ ์ฐธ์—ฌํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค๋ฉด ์ผ์–ด๋‚˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ตœ๊ณ ์˜ ํ•ด๊ฒฐ์ฑ…์€ ์—ฌ๋Ÿฌ๋ถ„๊ณผ ์—ฐ์ฃผ์ž ์‚ฌ์ด์˜ ์ข‹์€ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ

๋ธŒ๋žœ๋“œ ๋ถ์˜ ๋ชฉํ‘œ

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

 ๋ธŒ๋žœ๋“œ ๋ถ์˜ ๋ฉ”์ธ ๋ชฉํ‘œ :
โ€ข ๋ธŒ๋žœ๋“œ ์ •๋ณด๋ฅผ ํ•˜๋‚˜์˜ ๋ฌธ์„œ๋กœ ์ฒด๊ณ„ํ™”ํ•ฉ๋‹ˆ๋‹ค.
โ€ข ๋ธŒ๋žœ๋“œ์˜ ๋ชฉํ‘œ์™€ ์‚ฌ๋ช…์— ๋Œ€ํ•ด ์ง์›๋“ค์—๊ฒŒ ์•Œ๋ฆฝ๋‹ˆ๋‹ค.
โ€ข ๋งˆ์ผ€ํŒ… ํ™œ๋™์˜ ํšจ์œจ์„ฑ์„ ์ฆ๋Œ€์‹œํ‚ต๋‹ˆ๋‹ค.
โ€ข ๋ธŒ๋žœ๋“œ ์ด๋ฏธ์ง€์™€ ํ‰ํŒ์„ ๋งŒ๋“œ๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.
โ€ข ๊ธฐ์—… ์•„์ด๋ดํ‹ฐํ‹ฐ ์š”์†Œ์˜ ์‚ฌ์šฉ ํ”„๋กœ์„ธ์Šค๋ฅผ ํ‘œ์ค€ํ™”ํ•ฉ๋‹ˆ๋‹ค.

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

 


UX/UI ๋””์ž์ธ์˜ ์•„ํ† ๋ฏน ๋””์ž์ธ๊ณผ ๋ชจ๋“ˆ์‹ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ 

1. โ€‹โ€‹์•„ํ† ๋ฏน ๋””์ž์ธ ๋ฐ ๋ชจ๋“ˆ์‹ ์‚ฌ๊ณ 

์•„ํ† ๋ฏน ๋””์ž์ธ์˜ ๊ฐœ๋…์€ ๋””์ง€ํ„ธ ํ™”๋ฉด์„์œ„ํ•œ ๊ฐ„๋‹จํ•œ ๋ชจ๋“ˆ์‹ ๋””์ž์ธ ์‹œ์Šคํ…œ ์ž…๋‹ˆ๋‹ค. ๋‹จ์ผ ์š”์†Œ (์›์ž)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ „์ฒด ํ™”๋ฉด(์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ํ™”๋ฉด)์„ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.  
์ด ์‹œ์Šคํ…œ์€ ํ™”ํ•™์—์„œ ์ฐจ์šฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

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

  • ์œ ๊ธฐ์ฒด๋Š”  ํ™”๋ฉด์˜ ํŠน์ • ๋ถ€๋ถ„์„ ์ฐจ์ง€ํ•˜๋Š” ๋‹จ์ผ ์š”์†Œ / ์›์ž์™€ UI ๋‹จ์œ„๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ํ˜•์„ฑ๋ฉ๋‹ˆ๋‹ค.
  • UI ๋‹จ์œ„์˜ ์กฐํ•ฉ์€ ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ ์ž‘์šฉ ๋˜๋Š” ํ™”๋ฉด์—์„œ์˜ ์ƒํ˜ธ ์ž‘์šฉ ์˜๋„๋ฅผ ๊ณต์‹ํ™” ํ•ฉ๋‹ˆ๋‹ค.
  • UI ๋‹จ์œ„๋Š” ์š”์†Œ (์›์ž)๋กœ ๊ตฌ์„ฑ๋˜๋ฏ€๋กœ ใ…กใ…ก์œ ๊ธฐ์ฒด๋Š” ๋ฐ˜๋ณต ํŒจํ„ด ๋˜๋Š” ๊ณ ์œ  ํ•œ ๋‹จ์ผ ๊ณต์‹์œผ๋กœ ๋งŽ์€ ๊ฐœ๋ณ„ ์š”์†Œ๋ฅผ ํฌํ•จ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ˜๋ณต ํŒจํ„ด์˜ ์œ ๊ธฐ์ฒด  
ํ•˜๋‚˜์˜ UI ๋‹จ์œ„์˜ ๋ฐ˜๋ณต ํŒจํ„ด์˜ ์˜ˆ์ž…๋‹ˆ๋‹ค.  
์ด ์œ ๊ธฐ์ฒด๋Š” 9๊ฐœ์˜ UI ๋‹จ์œ„๋กœ ๊ตฌ์„ฑ๋œ ๋ฐ˜๋ณต ํŒจํ„ด์œผ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.  
์‚ฌ์šฉ์ž๋Š” ์ธํ„ฐํŽ˜์ด์Šค ๊ธฐ๋Šฅ์„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (์ˆซ์ž ํ„ฐ์น˜).

ํŒจํ„ด์—์„œ ํ…œํ”Œ๋ฆฟ๊นŒ์ง€   
๋…ํŠนํ•œ ๊ตฌ์„ฑ ์œ ๊ธฐ์ฒด๊ฐ€ ์ด ํ™”๋ฉด ์ธํ„ฐํŽ˜์ด์Šค์˜ ํ…œํ”Œ๋ฆฟ์„ ํ˜•์„ฑํ•ฉ๋‹ˆ๋‹ค. 10์ž๋ฆฌ ์ˆซ์ž ํ‘œ์‹œ์™€ ๊ฐ™์€ ํŠน์ • ๊ธฐ์ค€์ด ์ถฉ์กฑ ๋  ๋•Œ๊นŒ์ง€ ์‚ฌ์šฉ์ž ๊ฒฝ๋กœ ์ „์ฒด์—์„œ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” UI ๋‹จ์œ„์™€ ์š”์†Œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ช…ํ™•ํ•œ ์œ ๊ธฐ์ฒด ๊ตฌ์กฐ์˜ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์Šคํฌ๋ฆฐ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
.

๐Ÿ‘‡ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์›๋ฌธ์—์„œ ํ™•์ธํ•ด์ฃผ์„ธ์š”.


Google ๋จธํ‹ฐ๋ฆฌ์–ผ ๋””์ž์ธ ๊ฐ€์ด๋“œ ๋ผ์ธ์˜ 10๊ฐ€์ง€ ํ•ต์‹ฌ ์‚ฌํ•ญ


Google์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ ๋ฌธ์„œ์˜ UI ๋ฐ UX ๊ถŒ์žฅ ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค.
Google์€ ๊ธฐ์ˆ  ๋ถ„์•ผ์—์„œ ๊ฐ€์žฅ ํฌ๊ณ  ๊ฐ€์žฅ ์˜ํ–ฅ๋ ฅ์žˆ๋Š” ์—…์ฒด ์ค‘ ํ•˜๋‚˜์ด๋ฏ€๋กœ. ๊ทธ๋“ค์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ์ด ๋””์ง€ํ„ธ ์ œํ’ˆ ๋””์ž์ธ ๋ฐฉ์‹์— ์—„์ฒญ๋‚œ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ์ด์œ ๋Š” ๋‹น์—ฐํ•ฉ๋‹ˆ๋‹ค.

๋จธํ‹ฐ๋ฆฌ์–ผ ๋””์ž์ธ ๊ฐ€์ด๋“œ ๋ผ์ธ์€  ๋ชจ๋“  ๋””์ž์ด๋„ˆ๊ฐ€ iOS ๋˜๋Š” Android ์šฉ์œผ๋กœ ๋””์ž์ธํ•˜๋“  ๊ด€๊ณ„์—†์ด ๋”ฐ๋ผ์•ผ ํ•  ๊ฐ€์น˜์žˆ๋Š” ์›์น™์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ธ€์—์„œ๋Š” ๋จธํ‹ฐ๋ฆฌ์–ผ์˜ ๊ฐ€์ด๋“œ ๋ผ์ธ์„ ๊ฒ€ํ† ํ•˜๋ฉด์„œ ์ฐพ์€ ์ฃผ์š” ๋‚ด์šฉ์„ ๊ณต์œ ํ•˜๊ณ 
๊ทธ ๊ทœ์น™๊ณผ ๋ฐฉ๋ฒ•์„ ๊ฐ€์žฅ ์ž˜ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋จธํ‹ฐ๋ฆฌ์–ผ ๊ฐ€์ด๋“œ ๋ผ์ธ์— ๋‚˜์™€์žˆ๋Š” ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ๊ฒ€ํ† ํ•˜๊ณ  ์ œํ’ˆ์— ์ ์šฉ ํ•  ๋•Œ ๋ชจ๋ฒ” ์‚ฌ๋ก€์— ๋Œ€ํ•œ ์ €์˜ ๊ฒฝํ—˜๊ณผ ํŒ์„ ๊ณต์œ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

1. ์ œ์Šค์ฒ˜๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐํ˜ธ์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜

1-1 ๋‹ค๋ฅธ ์กฐ๊ฑด์ด ์—†๋Š” ๊ฒฝ์šฐ ์•„์ด์ฝ˜์€ ์ œ์Šค์ฒ˜๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Œ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

The Design of Everyday Things์—์„œ ์ธ๊ฐ„ ์ค‘์‹ฌ ๋””์ž์ธ์˜ ์•„๋ฒ„์ง€๋กœ ์•Œ๋ ค์ง„ Don Norman์€  ์ผ์ƒ ๋””์ž์ธ์—์„œ ์–ด๋–ค ํ–‰๋™์ด ๊ฐ€๋Šฅํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋Š”์ง€ ๋‚˜ํƒ€๋‚ด๋Š” ๋ชจ๋“  ๊ฒƒ์œผ๋กœ ๊ธฐํ˜ธ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

๋””์ง€ํ„ธ ์ œํ’ˆ์„ ๋””์ž์ธ ํ•  ๋•Œ ์šฐ๋ฆฌ๋Š” ํ•ญ์ƒ ๊ธฐํ˜ธ๋ฅผ ๋ช…์‹œ ์ ์œผ๋กœ ํ‘œํ˜„ํ•  ํ•„์š”๋Š” ์—†์œผ๋ฉฐ  
"๋” ๋ณด๊ธฐ ์œ„ํ•ด ์ขŒํšŒ์ „"๊ณผ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ๋งํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.์•„์ด์ฝ˜, ๋†’์€ ์šฉ๊ธฐ ๋˜๋Š” ์ƒ‰์ƒ๊ณผ ๊ฐ™์€ ๊ฐ„๋‹จํ•œ ์š”์†Œ๋Š”  ๋‹ค์–‘ํ•œ ์ œ์Šค์ฒ˜์™€ ๋™์ž‘์„ ์ง€์‹œํ•˜๋Š” ํ‘œ์‹œ์ž ์—ญํ• ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

1-2 ์‚ฌ์šฉ์ž๊ฐ€ ์ œ์Šค์ฒ˜๋ฅผ ์ œ์•ˆํ•˜๊ธฐ ์œ„ํ•ด ์ƒํ˜ธ ์ž‘์šฉํ•˜๊ธฐ ์ „์— ์š”์†Œ์— ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

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

2. ์• ๋‹ˆ๋ฉ”์ด์…˜ ์•„์ด์ฝ˜

์• ๋‹ˆ๋ฉ”์ด์…˜์€ ์•„์ด์ฝ˜์ด ์ˆ˜ํ–‰ํ•˜๋Š” ์ž‘์—…์„ ์„ธ๋ จ๋ฏธ์™€ ์ฆ๊ฑฐ์›€์„ ๋”ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค.

2-1 ์ „ํ™˜์€ ๋‘ ๊ฐ€์ง€ ์‹œ๊ฐ์  ์ƒํƒœ๊ฐ„์— ์• ๋‹ˆ๋ฉ”์ด์…˜ ์•„์ด์ฝ˜์„ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.
๋‘ ์•„์ด์ฝ˜ ์‚ฌ์ด์˜ ์ „ํ™˜์€ ์„œ๋กœ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์Œ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
์•„์ด์ฝ˜ ์ „ํ™˜ ์ถ”๊ฐ€๋Š” ๋‘ ์ž‘์—… ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์˜ˆ์ œ 1) ์žฌ์ƒ / ์ผ์‹œ ์ค‘์ง€ ๋ฒ„ํŠผ ์• ๋‹ˆ๋ฉ”์ด์…˜์ž…๋‹ˆ๋‹ค.

์žฌ์ƒ์„ ํด๋ฆญํ•˜๋ฉด ์•„์ด์ฝ˜์ด ์ผ์‹œ ์ค‘์ง€ ๋ฒ„ํŠผ์œผ๋กœ ๋ฐ”๋€Œ๊ณ  ๊ทธ ๋ฐ˜๋Œ€์˜ ๊ฒฝ์šฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค. ์ด ๋ณ€๊ฒฝ์€ ๋‘ ์ž‘์—… ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ๋ฏธ๋ฌ˜ํ•˜์ง€๋งŒ ์ง๊ด€์ ์ธ ๋ฐฉ์‹์œผ๋กœ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์˜ˆ์ œ 2) ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ๋‹ด๊ธฐ ์ƒํ˜ธ ์ž‘์šฉ์ด๋‚˜ ๊ธฐ๋Šฅ์ด ๋น„ํ™œ์„ฑํ™”๋˜์–ด ์žˆ์Œ์„ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๋” ๋ณต์žกํ•œ ๊ฒฝํ—˜์— ๋ฏธ๋ฌ˜ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์ƒ์ƒํ•ด๋ณด์‹ญ์‹œ์˜ค.

์•„์ด์ฝ˜ ๊ฐ„์— ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋งŒ๋“œ๋Š” ๋ฐ ๋„ˆ๋ฌด ๋งŽ์€ ์‹œ๊ฐ„์ด ์†Œ์š”๋  ํ•„์š”๋„ ์—†์Šต๋‹ˆ๋‹ค.
Adobe XD์—์„œ๋Š” ์ž๋™ ์• ๋‹ˆ๋ฉ”์ดํŠธ ๋ฐ ํŽ˜์ด๋“œ ์•„์ด์ฝ˜์˜ ๋ถˆํˆฌ๋ช…๋„๋ฅผ ์•ˆํŒŽ์œผ๋กœ ์‚ฌ์šฉํ•˜์—ฌ ์œ ์‚ฌํ•œ ํšจ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์• ๋‹ˆ๋ฉ”์ด์…˜ ์•„์ด์ฝ˜ ์ „ํ™˜์€ ์„ ํ˜ธํ•˜๋Š” ๊ฐ•์กฐ ์ˆ˜์ค€์— ๋”ฐ๋ผ ๋‹จ์ˆœํ•˜๊ฑฐ๋‚˜ ๋ณต์žกํ•œ ๋ชจ์…˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ˆˆ์— ๋„์ง€ ์•Š๋Š” ์•„์ด์ฝ˜์€ ๋‹จ์ˆœํ•œ ๊ณต์œ  ๋ชจ์…˜์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

2-2 ์•ฑ์˜ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์ธ ์•„์ด์ฝ˜์€ ๋ณต์žกํ•œ ๋ชจ์…˜์œผ๋กœ ๊ฐ•์กฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์š”์†Œ์™€ ์•„์ด์ฝ˜์ด ์ง€์†์ ์œผ๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜๋˜๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž๋ฅผ ์••๋„ ํ•  ์œ„ํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.
์• ๋‹ˆ๋ฉ”์ด์…˜ ๋‚จ์šฉ์€ ๊ฐ•์กฐ๋ฅผ ์•ฝํ™”์‹œํ‚ค๋ฏ€๋กœ ๋ณต์žกํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์กฐ๊ธˆ ๋” ์ ๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

3. ๋จธํ‹ฐ๋ฆฌ์–ผ ์ปฌ๋Ÿฌ ํŒ”๋ ˆํŠธ ์ƒ์„ฑ๊ธฐ

๋จธํ„ฐ๋ฆฌ์–ผ ํŒ”๋ ˆํŠธ ์ƒ์„ฑ๊ธฐ๋Š” ์ž…๋ ฅํ•œ ๋ชจ๋“  ์ƒ‰์ƒ์— ๋Œ€ํ•œ ํŒ”๋ ˆํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒ‰์กฐ, ์ฑ„๋„ ๋ฐ ๋ฐ๊ธฐ๋Š” ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ณ  ์‹ฌ๋ฏธ์ ์œผ๋กœ ๋งŒ์กฑ์Šค๋Ÿฌ์šด ํŒ”๋ ˆํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜์— ์˜ํ•ด ์กฐ์ •๋ฉ๋‹ˆ๋‹ค.

์ฒ˜์Œ๋ถ€ํ„ฐ ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ Material 's Palette Generator (ํŽ˜์ด์ง€ ํ•˜๋‹จ ๊ทผ์ฒ˜์— ์œ„์น˜)์™€ ๊ฐ™์€ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ์ง€๋ฃจํ•˜๊ณ  ๊ฐ’์„ ์ง์ ‘ ๊ณ„์‚ฐํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋œ ํšจ๊ณผ์ ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒ์„ฑ๋œ ์ƒ‰์ƒ์€ ์ด๋ฏธ ์ ‘๊ทผ์„ฑ ํ‘œ์ค€์„ ์ถฉ์กฑํ•˜๋ฏ€๋กœ WCAG ์ง€์นจ์— ๋”ฐ๋ผ ํŒ”๋ ˆํŠธ๋ฅผ ํ™•์ธํ•ด์•ผํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ Stark์™€ ๊ฐ™์€ ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๋””์ž์ธ์„ ๋‹ค์‹œ ํ™•์ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
.
.
๐Ÿ‘‡ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์›๋ฌธ์—์„œ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

๐ŸŽ„from.designer 

ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” ๋””์ž์ด๋„ˆ ์ปค๋ฎค๋‹ˆํ‹ฐ from.designer ๋Š” ๋””์ž์ด๋„ˆ์˜ ๊ฒฝํ—˜ ๊ณต์œ  ๋ชจ์ž„์„ ๊ธฐ๋ฐ˜์œผ๋กœ UXUI ์Šคํ„ฐ๋””, ๋…์„œ๋ชจ์ž„, ํŠน๊ฐ• ๋“ฑ ๋‹ค์–‘ํ•œ ํ”„๋กœ๊ทธ๋žจ์„ ์šด์˜ํ•˜๋Š” ๋””์ž์ด๋„ˆ ์ค‘์‹ฌ์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ์ž…๋‹ˆ๋‹ค. ๋””์ž์ธ, ๋””์ž์ด๋„ˆ์— ๊ด€์‹ฌ์žˆ๋Š” ๋ˆ„๊ตฌ๋‚˜ ์ฐธ์—ฌ ๊ฐ€๋Šฅํ•œ ์˜คํ”ˆ ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค.


๐Ÿ—“๏ธ
ํ–‰์‚ฌ ์ผ์ • & UXUI ์ž๋ฃŒ 

๋””์ž์ด๋„ˆ ๊ณต์œ , UXUI ์Šคํ„ฐ๋”” ์ฐธ๊ด€, UX ๋ฐœํ‘œ์ž๋ฃŒ ๊ณต์œ ๋“ฑ ๋‹ค์–‘ํ•œ ์ •๋ณด๋ฅผ ๋…ธ์…˜์—์„œ ํ™•์ธํ•˜์„ธ์š”.

๐Ÿ’ญ ๋‹จํ†ก๋ฐฉ ๊ฐ€์ž…๋ฌธ์˜  (1,900๋ช…)

๐ŸŽฅ ์œ ํŠœ๋ธŒ UXUI ๊ณต๊ฐœ ์˜์ƒ  

๐Ÿ”– ์ด๋ฉ”์ผ 

๐Ÿ“ SNS   @from.designer ํŽ˜์ด์Šค๋ถ , ์ธ์Šคํƒ€๊ทธ๋žจ
 




 

๋‹ค๊ฐ€์˜ฌ ๋‰ด์Šค๋ ˆํ„ฐ๊ฐ€ ๊ถ๊ธˆํ•˜์‹ ๊ฐ€์š”?

์ง€๊ธˆ ๊ตฌ๋…ํ•ด์„œ ์ƒˆ๋กœ์šด ๋ ˆํ„ฐ๋ฅผ ๋ฐ›์•„๋ณด์„ธ์š”

โœ‰๏ธ

์ด๋ฒˆ ๋‰ด์Šค๋ ˆํ„ฐ ์–ด๋– ์…จ๋‚˜์š”?

from.designer ๋‹˜์—๊ฒŒ โ˜•๏ธ ์ปคํ”ผ์™€ โœ‰๏ธ ์ชฝ์ง€๋ฅผ ๋ณด๋‚ด๋ณด์„ธ์š”!

๋Œ“๊ธ€

์˜๊ฒฌ์„ ๋‚จ๊ฒจ์ฃผ์„ธ์š”

ํ™•์ธ
์˜๊ฒฌ์ด ์žˆ์œผ์‹ ๊ฐ€์š”? ์ œ์ผ ๋จผ์ € ๋Œ“๊ธ€์„ ๋‹ฌ์•„๋ณด์„ธ์š” !

ยฉ 2024 from.designer

ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” ๋””์ž์ด๋„ˆ ์ปค๋ฎค๋‹ˆํ‹ฐ

 ์—์„œ ๋‚˜๋งŒ์˜ ๋‰ด์Šค๋ ˆํ„ฐ ์‹œ์ž‘ํ•˜๊ธฐ

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ / ๋ฌธ์˜ํ•˜๊ธฐ

๋ฉ”์ผ๋ฆฌ (๋Œ€ํ‘œ์ž: ์ดํ•œ๊ฒฐ) / ์‚ฌ์—…์ž๋ฒˆํ˜ธ: 717-47-00705
์„œ์šธ ์„œ์ดˆ๊ตฌ ๊ฐ•๋‚จ๋Œ€๋กœ53๊ธธ 8, 8์ธต 11-7ํ˜ธ / admin@team.maily.so

์ด์šฉ์•ฝ๊ด€ / ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ / ์ •๊ธฐ๊ฒฐ์ œ ์ด์šฉ์•ฝ๊ด€