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

๐Ÿ”– UXUI ํ•ด์™ธ ์ธ๊ธฐ ์•„ํ‹ฐํด

2022๋…„ 4์›” 2์ฃผ TOP3

2022.04.21 | ์กฐํšŒ 1.42K |
0
|

from.designer

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

๐Ÿ”– 2022๋…„ 4์›” 2์ฃผ TOP3

1๏ธโƒฃ ์šฐ๋ฆฌ๊ฐ€ ๋งค์ผ ์ง๋ฉดํ•˜๋Š” UX ๋””์ž์ธ์˜ 15๊ฐ€์ง€ ๋ฒ•์น™ (2๋ถ€)

2๏ธโƒฃ ์Šคํฌํ‹ฐํŒŒ์ด ์•„์ด์ฝ˜ ์‹œ์Šคํ…œ ์—…๋ฐ์ดํŠธ

3๏ธโƒฃ 10๊ฐ€์ง€ ํ•„์ˆ˜ UI(์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค) ๋””์ž์ธ ํŒ


1๏ธโƒฃ ์šฐ๋ฆฌ๊ฐ€ ๋งค์ผ ์ง๋ฉดํ•˜๋Š” UX ๋””์ž์ธ์˜ 15๊ฐ€์ง€ ๋ฒ•์น™ (2๋ถ€)

์ด ๊ธฐ์‚ฌ์˜ 1๋ถ€์—์„œ ์šฐ๋ฆฌ๋Š” ๋””์ž์ธ ํ”„๋กœ์„ธ์Šค์—์„œ ์ธ๊ฐ„ ํ–‰๋™์˜ ์ค‘์š”์„ฑ์— ๊ด€ํ•ด ์ด์•ผ๊ธฐํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

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

#6 โ€” ํ”ผํฌ ์—”๋“œ ๋ฒ•์น™

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

์‚ฌ์šฉ ๋ฐฉ๋ฒ•

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

2. ๋” ๋‚˜์€ ์ธ์ƒ ๋””์ž์ธํ•˜๊ธฐ ์ด๊ฒƒ์€ ๊ธ์ •์ ์ธ ํ”ผํฌ๋ฅผ ๋” ๋งŽ์ด ๋งŒ๋“ค๊ณ  ๋ถ€์ •์ ์ธ ํ”ผํฌ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

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

3. ๋งˆ์ง€๋ง‰ ๋ถ€๋ถ„์„ ์ง‘์ค‘ํ•˜๊ธฐ ํŠนํžˆ ๋ณต์žกํ•œ ์ œํ’ˆ์˜ ๊ฒฝ์šฐ ๋”์šฑ ๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค.

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

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

์ฃผ์š” ๋‚ด์šฉ

  1. ๋” ๋‚˜์€ UX ๋ฆฌ์„œ์น˜๋ฅผ ๋””์ž์ธํ•˜๋ ค๋ฉด ํ”ผํฌ ์—”๋“œ ๋ฒ•์น™์„ ์‚ฌ์šฉํ•˜์„ธ์š”.
  2. ๋ฐ์€ ์ธ์ƒ์˜ ์ค‘์š”์„ฑ์„ ๊ธฐ์–ตํ•˜์„ธ์š”. ๊ทธ๋“ค์ด ์ „์ฒด ๊ฒฝํ—˜์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  3. ๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„์˜ ์ข‹์€ ๋””์ž์ธ์€ ๋ถ€์ •์ ์ธ ์ธ์ƒ์„ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„๋Š” ํ•ญ์ƒ ๊ธ์ •์ ์ธ ์ธ์ƒ๋ณด๋‹ค ๋” ์ƒ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•˜๋ฉด ๋ถ€์ •์ ์ธ ํ”ผํฌ๋ฅผ ์ œ๊ฑฐํ•˜๋„๋ก ๋…ธ๋ ฅํ•˜์„ธ์š”.

..

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


2๏ธโƒฃ ์Šคํฌํ‹ฐํŒŒ์ด ์•„์ด์ฝ˜ ์‹œ์Šคํ…œ ์—…๋ฐ์ดํŠธ

๋ณ€๊ฒฝ ์ด์œ ์™€ ๋น„ํ•˜์ธ๋“œ ์Šคํ† ๋ฆฌ

์šฐ๋ฆฌ์˜ ํ˜„์žฌ ์•„์ด์ฝ˜ ๋ชจ์Œ์€ 2016๋…„ ๋งˆ์ง€๋ง‰ ์žฌ์„ค๊ณ„ ์ดํ›„๋กœ ์šฐ๋ฆฌ์™€ ํ•จ๊ป˜ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ๋“ค์ด ์šฐ๋ฆฌ์—๊ฒŒ ์ข‹์€ ์—ญํ• ์„ ํ–ˆ์ง€๋งŒ ์ตœ๊ทผ์— ์šฐ๋ฆฌ๋Š” ์‹œ๊ฐ์  ์–ธ์–ด์˜ ์ง„ํ™”์— ๋งž์ถฐ ์•„์ด์ฝ˜์„ ์—…๋ฐ์ดํŠธํ•  ํ•„์š”๊ฐ€ ์žˆ์Œ์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ฌธ์ œ ๊ตฌ์„ฑํ•˜๊ธฐ

์•„์ด์ฝ˜์„ ์ƒˆ๋กœ ๊ณ ์น˜๊ธฐ ์œ„ํ•ด ๋””์ž์ธ ์‹œ์Šคํ…œ ํŒ€ ์ค‘ ํ•˜๋‚˜์ธ Encore Foundation์€ 2016๋…„ ์žฌ์„ค๊ณ„์— ์ฐธ์—ฌํ•œ ์ˆ™๋ จ๋œ ์•„์ด์ฝ˜ ์ œ์ž‘์ž Rob Bartlett์™€ ํ˜‘๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•จ๊ป˜ ์šฐ๋ฆฌ๋Š” ๊ทธ๋“ค์ด ํ•ด๊ฒฐํ•ด์•ผ ํ•  ์ฃผ์š” ๊ณผ์ œ๋ฅผ ์‹๋ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.์„ ์˜ ๋ฌด๊ฒŒ์™€ ๊ตต๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ๊ฐ€๋Š˜์—ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๋‹ค์Œ ๋ช‡ ๊ฐ€์ง€๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์•„์ด์ฝ˜์˜ ๋ฌด๊ฒŒ๋ฅผ ์žฌ๊ฒ€ํ† ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

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

๋ณ‘ํ•ฉํ•  ๋ช‡ ๊ฐ€์ง€ ๋‹ค๋ฅธ ์•„์ด์ฝ˜ ์„ธํŠธ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ„์ด ์ง€๋‚จ์— ๋”ฐ๋ผ Encore์‹œ์Šคํ…œ์€ ๋‹ค์–‘ํ•ด์กŒ์œผ๋ฉฐ ์šฐ๋ฆฌ๋Š” ๋ชจ๋“  ๊ฒƒ์„ ์ˆ˜์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ƒˆ๋กœ์šด ์„ธํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

์•„์ด์ฝ˜์„ ๋งŒ๋“ค๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ƒ๊ฐ๋งŒํผ ์‰ฝ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ํŒ€์„ ์œ„ํ•œ ์•„์ด์ฝ˜ ์‹œ์Šคํ…œ์„ ๋‹จ์ˆœํ™”ํ•ด์•ผ ํ•  ํ•„์š”์„ฑ์„ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ํ•œ ๊ฐ€์ง€ ์ฃผ์š” ์ธก๋ฉด์€ ์•„์ด์ฝ˜ & ์ƒ์„ฑ ํ๋ฆ„์— ๋Œ€ํ•œ ๋””์ž์ธ ์†Œ์Šค ํŒŒ์ผ์„ ์™„์ „ํžˆ ๊ฐ€์ ธ์™€์„œ ์ตœ๊ทผ Figma๋กœ์˜ ์ „ํ™˜์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์€ ์‹œ์Šคํ…œ์— ์ถ”๊ฐ€๋˜๋Š” ๋ชจ๋“  ๋‹จ์ผ ์•„์ด์ฝ˜์— ๋Œ€ํ•ด ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š” ์•„์ด์ฝ˜ ํฌ๊ธฐ์˜ ์ˆ˜๋ฅผ ์ค„์ด๋Š” ๊ฒƒ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋‘๋ฅผ ์œ„ํ•œ ์›ํ™œํ•œ ์ „ํ™˜ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ์ด ์—…๋ฐ์ดํŠธ๊ฐ€ ์ตœ์ข… ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ์›ํ™œํ•œ ์ „ํ™˜์ฒ˜๋Ÿผ ๋Š๊ปด์ง€๊ธฐ๋ฅผ ์›ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋‹ค์ˆ˜์˜ ์•„์ด์ฝ˜์— ๋Œ€ํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ๊ธธ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์ง€๋งŒ ์ƒˆ๋กœ์›Œ์ง„ ์•„์ด์ฝ˜ ์Šคํƒ€์ผ์„ ์ฆ๊ธธ ์ˆ˜ ์žˆ๋„๋ก ๋ฐ”๋กœ ์ด๋Ÿฌํ•œ ์ด์œ ๋กœ ํ˜„์žฌ์˜ ๋น„์œ ๋ฅผ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ƒˆ๋กœ์šด์ ์€?

์ „๋ฐ˜์ ์ธ ์—…๋ฐ์ดํŠธ์™€ ํ•จ๊ป˜ ์ฃผ์š” ์ฐจ์ด์ ์€ ๊ธฐ๋ณธ ์„ ์˜ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ ์•„์ด์ฝ˜์˜ ๊ฐ€์ค‘์น˜๋ฅผ ๋Š˜๋ฆฌ๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. 24px ์•„์ด์ฝ˜ ํฌ๊ธฐ์—์„œ 1px์—์„œ 2px๋กœ ๋‘๊ป˜๋ฅผ ๋Š˜๋ฆฝ๋‹ˆ๋‹ค.

๋” ๊ตต์€ ํฌ๊ธฐ: 24 & 16ํ”ฝ์…€ ์•„์ด์ฝ˜์˜ ์„  ๋‘๊ป˜๋ฅผ ๋Š˜๋ฆฌ๊ณ  ์ด์ œ ๋‹ค์Œ ๋‘ ๊ฐ€์ง€ ํฌ๊ธฐ์˜ ์•„์ด์ฝ˜๋งŒ ์œ ์ง€ํ•˜์—ฌ ์•„์ด์ฝ˜ ์‹œ์Šคํ…œ์„ ๋‹จ์ˆœํ™”ํ•ฉ๋‹ˆ๋‹ค.

  • 2px ๋‘๊ป˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” 24ํ”ฝ์…€ (๋ฉ”์ธ/๊ธฐ๋ณธ ํฌ๊ธฐ๋กœ ๊ฐ„์ฃผ)
  • 1.5px ๋‘๊ป˜ ์‚ฌ์šฉํ•˜๋Š” 16ํ”ฝ์…€

ํ•„์š”ํ•œ ๋‹ค๋ฅธ ๋ชจ๋“  ํฌ๊ธฐ๋Š” ์ด๋Ÿฌํ•œ ๊ณ ์œ ํ•œ ํฌ๊ธฐ์˜ ํฌ๊ธฐ ์กฐ์ • ๋ฒ„์ „์ž…๋‹ˆ๋‹ค. ๊ทธ ๊ฒฐ๊ณผ ๋” ์ฝ๊ธฐ ์‰ฌ์šด ์•„์ด์ฝ˜๊ณผ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ์˜ ๊ท ํ˜• ์žกํžŒ ์„ธํŠธ๊ฐ€ ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค.

์„ธํŠธ ์ „์ฒด์— ๊ฑธ์ณ ์ƒˆ๋กœ์›Œ์ง„ ์Šคํƒ€์ผ ๋” ๋‘๊บผ์šด ์„ ์œผ๋กœ ์ƒˆ ์Šคํƒ€์ผ์˜ ๋ชจ๋“  ๋‹จ์ผ ์•„์ด์ฝ˜์„ ๋‹ค์‹œ ๊ทธ๋ ค ์„ธํŠธ๋ฅผ ๋ณ‘ํ•ฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋‹ค์ˆ˜์˜ ์•„์ด์ฝ˜์€ ์ด์ „๊ณผ ๋™์ผํ•œ ์€์œ ๋ฅผ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.

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

์ด๊ฒƒ์ด ์šฐ๋ฆฌ๊ฐ€ ํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

Rob Bartlett์™€ ํŒŒํŠธ๋„ˆ ๊ด€๊ณ„ Encore Foundation์€ Spotify ๋””์ž์ธ ์–ธ์–ด์˜ ๋ชจ๋“  ํ•ต์‹ฌ ์š”์†Œ๋ฅผ ๋‹ด๋‹นํ•ฉ๋‹ˆ๋‹ค. ๋ช‡ ๋‹ฌ ๋™์•ˆ Rob Bartlett์€ ๋งค์šฐ ๊ธด๋ฐ€ํ•˜๊ณ  ์„ฑ๊ณต์ ์ธ ํ˜‘์—…์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด ํŒ€์— ํ•ฉ๋ฅ˜ํ–ˆ์Šต๋‹ˆ๋‹ค.

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

  • ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ์šฐ๋ฆฌ์˜ ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์ƒˆ๋กœ์šด ๊ฐ€์ค‘์น˜๋Š” ์ด์ „๋ณด๋‹ค ๋ˆˆ์— ๋„๊ฒŒ ๋” ๊ณผ๊ฐํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. 1.5px & 2px๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ 16px ํฌ๊ธฐ์˜ ๊ฒฝ์šฐ 50%, 24px ํฌ๊ธฐ์˜ ๊ฒฝ์šฐ 100%๋กœ ์„  ๋‘๊ป˜๋ฅผ ๋Š˜๋ ธ์Šต๋‹ˆ๋‹ค.
  • ์ƒˆ ์•„์ด์ฝ˜์„ ๋งŒ๋“ค ๋•Œ ์ƒˆ ๊ฐ€์ค‘์น˜๋ฅผ ์‰ฝ๊ฒŒ ๋””์ž์ธํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์„ค๊ณ„์ž๊ฐ€ ๋” ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๋Š” ์ „์ฒด ํ”ฝ์…€ ๋˜๋Š” ์ ˆ๋ฐ˜ ํ”ฝ์…€ ๊ฐ’์— ์ตœ๋Œ€ํ•œ ๊ฐ€๊น๊ฒŒ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ–ˆ์Šต๋‹ˆ๋‹ค.

์•ž์œผ๋กœ ์–ด๋–ค ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ• ๊นŒ์š”? ์ด์ „ ์•„์ด์ฝ˜ ์„ธํŠธ์—๋Š” 220๊ฐœ ์ด์ƒ์˜ ์•„์ด์ฝ˜ x 5๊ฐ€์ง€ ํฌ๊ธฐ ๋ณ€ํ˜• = 1,100๊ฐœ์˜ ๊ฐœ๋ณ„ ์ž์‚ฐ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ์˜ ๋ชฉํ‘œ๋Š” ํŒ€์ด ์‹œ์Šคํ…œ์— ๋” ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐœ๋ณ„ ์ž์‚ฐ์˜ ์ˆ˜๋ฅผ ์ตœ๋Œ€ํ•œ ์ค„์ด๋Š” ๊ฒƒ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

Encore Web์ด 24px ์•„์ด์ฝ˜๋งŒ ์‚ฌ์šฉํ•˜๋„๋ก ์„ฑ๊ณต์ ์œผ๋กœ ์ „ํ™˜ํ–ˆ๋‹ค๋Š” ์‚ฌ์‹ค์€ ์ด๋ฏธ ์•Œ๊ณ  ์žˆ์—ˆ์ง€๋งŒ ์ „์ฒด ์‹œ์Šคํ…œ์˜ ์š”๊ตฌ ์‚ฌํ•ญ๋„ ๊ณ ๋ คํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ถ„์„์„ ์‚ฌ์šฉํ•˜์—ฌ 16ํ”ฝ์…€๊ณผ 24ํ”ฝ์…€์ด ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ์•„์ด์ฝ˜ ํฌ๊ธฐ์ž„์„ ๋ถ„๋ช…ํžˆ ์•Œ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

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

์•„์ด์ฝ˜์ด ๋” ํฐ ํฌ๊ธฐ๋กœ ํ•„์š”ํ•œ ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ 24px ํฌ๊ธฐ๋ฅผ ๋Š˜๋ฆฌ๋ฉด ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค๊ณ  ํŒ๋‹จํ–ˆ์Šต๋‹ˆ๋‹ค.

์ตœ์ข… ๊ฒฐ๊ณผ๋Š” 5๊ฐœ ๋Œ€์‹  2๊ฐœ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹œ์Šคํ…œ์˜ ํฌ๊ธฐ ๋ณ€ํ˜• ์ˆ˜๋ฅผ ์ด์ „์˜ 40%๋กœ ์ค„์˜€์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ณ„์ ์œผ๋กœ ๊ทธ๋ ค์ง„ ์•„์ด์ฝ˜์ด 660๊ฐœ๋กœ ์ค„์–ด๋“ญ๋‹ˆ๋‹ค. ์•ž์œผ๋กœ ์„ธํŠธ๋ฅผ ์ƒˆ๋กœ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ๋ณ€๊ฒฝํ•˜๋ฉด ํšจ์œจ์„ฑ ํ–ฅ์ƒ์ด ํฐ ์˜ํ–ฅ์„ ๋ฏธ์น  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

..

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


3๏ธโƒฃ 10๊ฐ€์ง€ ํ•„์ˆ˜ UI(์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค) ๋””์ž์ธ ํŒ 

์›น์‚ฌ์ดํŠธ๋Š” ๋งํฌ๋กœ ์—ฐ๊ฒฐ๋œ ํŽ˜์ด์ง€ ๊ทธ๋ฃน ๊ทธ ์ด์ƒ์ž…๋‹ˆ๋‹ค. ์ธํ„ฐํŽ˜์ด์Šค๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ์‚ฌ๋ฌผ(์ด ๊ฒฝ์šฐ ๊ฐœ์ธ๊ณผ ํšŒ์‚ฌ ๋˜๋Š” ๊ฐœ์ธ์˜ ์›น ์กด์žฌ)์ด ๋งŒ๋‚˜๊ณ , ์†Œํ†ตํ•˜๊ณ , ์„œ๋กœ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ƒํ˜ธ ์ž‘์šฉ์€ ๋ฐฉ๋ฌธ์ž์—๊ฒŒ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ฉฐ ์›น ๋””์ž์ด๋„ˆ๋กœ์„œ ๊ฐ€๋Šฅํ•œ ํ•œ ์ข‹์€ ๊ฒฝํ—˜์„ ๋ณด์žฅํ•˜๋Š” ๊ฒƒ์ด ๋‹น์‹ ์˜ ์ž„๋ฌด์ž…๋‹ˆ๋‹ค.

์›น์‚ฌ์ดํŠธ๋Š” ๋งํฌ๋กœ ์—ฐ๊ฒฐ๋œ ํŽ˜์ด์ง€ ๊ทธ๋ฃน ๊ทธ ์ด์ƒ์ž…๋‹ˆ๋‹ค. ์ธํ„ฐํŽ˜์ด์Šค๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ์‚ฌ๋ฌผ(์ด ๊ฒฝ์šฐ ๊ฐœ์ธ๊ณผ ํšŒ์‚ฌ ๋˜๋Š” ๊ฐœ์ธ์˜ ์›น ์กด์žฌ)์ด ๋งŒ๋‚˜๊ณ , ์†Œํ†ตํ•˜๊ณ , ์„œ๋กœ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ƒํ˜ธ ์ž‘์šฉ์€ ๋ฐฉ๋ฌธ์ž์—๊ฒŒ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ฉฐ ์›น ๋””์ž์ด๋„ˆ๋กœ์„œ ๊ฐ€๋Šฅํ•œ ํ•œ ์ข‹์€ ๊ฒฝํ—˜์„ ๋ณด์žฅํ•˜๋Š” ๊ฒƒ์ด ๋‹น์‹ ์˜ ์ž„๋ฌด์ž…๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๊ทธ ํ•ต์‹ฌ์€ ์‚ฌ์šฉ์ž๋ฅผ ์ตœ์šฐ์„ ์œผ๋กœ, ๊ทธ๋ฆฌ๊ณ  ํ•ญ์ƒ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ณ ๋ง™๊ฒŒ๋„ ์›น ๋””์ž์ธ์€ ๋น„๊ต์  ์ƒˆ๋กœ์šด ๋ถ„์•ผ์ด์ง€๋งŒ HCI(์ธ๊ฐ„-์ปดํ“จํ„ฐ ์ƒํ˜ธ ์ž‘์šฉ)์— ๋Œ€ํ•œ ๊ณผํ•™์  ์—ฐ๊ตฌ ๋•๋ถ„์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  HCI ์—ฐ๊ตฌ์—์„œ ๋‚˜์˜จ ์ด 9๊ฐ€์ง€ ํŽธ๋ฆฌํ•œ ์ง€์นจ์€ ๋””์ž์ธ ํ”„๋กœ์„ธ์Šค๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ง‘์ค‘ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ธํ„ฐํŽ˜์ด์Šค์˜ ๊ธฐ๋Šฅ ๋ ˆ์ด์•„์›ƒ์— ์ค‘์ ์„ ๋‘” ์ธํ„ฐํŽ˜์ด์Šค ๋””์ž์ธ์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ๋””์ž์ธ์˜ ํ•˜์œ„ ์ง‘ํ•ฉ์œผ๋กœ, ๋” ํฐ ๊ทธ๋ฆผ, ์ฆ‰ ์ธํ„ฐํŽ˜์ด์Šค๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ „์ฒด ๊ฒฝํ—˜์— ์ค‘์ ์„ ๋‘ก๋‹ˆ๋‹ค.

1. ์‚ฌ์šฉ์ž๋ฅผ ํŒŒ์•…ํ•˜๋ผ

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

๊ณต๊ฐ์˜ ์ˆ˜์ค€์— ๋„๋‹ฌํ•˜๋ ค๋ฉด ํ†ต๊ณ„๋ฅผ ์ฃผ์˜ ๊นŠ๊ฒŒ ๋ถ„์„ํ•˜๋Š” ๊ฒƒ ์ด์ƒ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์›น์‚ฌ์ดํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๊ทธ๋“ค๊ณผ ์–ผ๊ตด์„ ๋งž๋Œ€๊ณ  ์ด์•ผ๊ธฐํ•˜๊ณ , ๊ทธ๋“ค์ด ๋‹น์‹ ์˜ ์ œํ’ˆ(๊ทธ๋ฆฌ๊ณ  ์•„๋งˆ๋„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค)์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ง€์ผœ๋ณด๊ณ , "์ด ๋””์ž์ธ์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜์„ธ์š”?"๋ณด๋‹ค ๋” ๊นŠ์€ ์งˆ๋ฌธ์„ ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋“ค์˜ ๋ชฉํ‘œ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๊ทธ๋“ค์ด ๊ทธ๋Ÿฌํ•œ ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•˜๋Š” ๋ฐ ๋ฐฉํ•ด๊ฐ€ ๋˜๋Š” ๊ฒƒ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ์›น์‚ฌ์ดํŠธ๊ฐ€ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ๊ทน๋ณตํ•˜๊ฑฐ๋‚˜ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ์–ด๋–ป๊ฒŒ ๋„์›€์ด ๋ฉ๋‹ˆ๊นŒ?

์‚ฌ์šฉ์ž๊ฐ€ ๋ฌด์—‡์„ ์›ํ•˜๋Š”์ง€ ์•„๋Š”๊ฒƒ์„ ๋ฉˆ์ถ”์ง€๋งˆ์„ธ์š”. ๋” ๊นŠ์ด ํŒŒ๊ณ  ๊ทธ๋“ค์ด ํ•„์š”ํ•œ ๊ฒƒ์„ ์ฐพ์œผ์„ธ์š”. ๊ฒฐ๊ตญ ์š•๋ง์€ ์š•๊ตฌ์˜ ํŒŒ์ƒ๋ฌผ์ผ ๋ฟ์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž์˜ ๊ทผ๋ณธ์ ์ธ ์š”๊ตฌ ์‚ฌํ•ญ์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์‚ฌ์šฉ์ž์˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ํ•ด๊ฒฐํ•˜๋Š” ๋™์‹œ์— ๋ณด๋‹ค ๊ทผ๋ณธ์ ์ธ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

2. ์‚ฌ๋žŒ๋“ค์ด ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ์ •์˜

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

Tinder: ์•ฑ์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์€ ๋ง ๊ทธ๋Œ€๋กœ ๊ฐ„๋‹จํ•œ ์Šค์™€์ดํ”„์˜ ์šฉ์ด์„ฑ๊ณผ ์ถฉ๋™์œผ๋กœ ์ •์˜๋ฉ๋‹ˆ๋‹ค.

์‚ฌ๋žŒ๋“ค์€ ์›น์‚ฌ์ดํŠธ์™€ ์•ฑ์„ ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ง์ ‘(์ œํ’ˆ์˜ ์ธํ„ฐํŽ˜์ด์Šค ์š”์†Œ์™€ ์ƒํ˜ธ ์ž‘์šฉ) & ๊ฐ„์ ‘์ (์ œํ’ˆ ์™ธ๋ถ€์˜ UI ์š”์†Œ์™€ ์ƒํ˜ธ ์ž‘์šฉ)์ž…๋‹ˆ๋‹ค.

์ง์ ‘์ ์ธ ์ƒํ˜ธ์ž‘์šฉ์˜ ์˜ˆ

  • ๋ฒ„ํŠผ ๋ˆ„๋ฅด๊ธฐ (Tapping a button)
  • ์นด๋“œ ๊ธ๊ธฐ ( Swiping a card)
  • ์†๊ฐ€๋ฝ ๋์œผ๋กœ ํ•ญ๋ชฉ ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญํ•˜๊ธฐ (Dragging and dropping an item with a fingertip)

๊ฐ„์ ‘ ์ƒํ˜ธ์ž‘์šฉ์˜ ์˜ˆ

  • ๋งˆ์šฐ์Šค๋กœ ๊ฐ€๋ฆฌํ‚ค๊ณ  ํด๋ฆญ (Pointing and clicking with a mouse)
  • ์ฃผ์š” ๋ช…๋ น/๋‹จ์ถ•ํ‚ค ์‚ฌ์šฉ(Using key commands/shortcuts)
  • ์–‘์‹ ํ•„๋“œ์— ์ž…๋ ฅ (Typing into a form field)
  • Wacom ํƒœ๋ธ”๋ฆฟ์—์„œ ๊ทธ๋ฆฌ๊ธฐ(Drawing on a Wacom tablet)

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

3. ๊ธฐ๋Œ€์น˜ ์„ค์ •

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

๋”ฐ๋ผ์„œ ์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•œ ํ›„ ์–ด๋–ค ์ผ์ด ์ผ์–ด๋‚ ์ง€ ๋ฏธ๋ฆฌ ์•Œ๋ ค์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋””์ž์ธ & ๋ณต์‚ฌ๋ฅผ ํ†ตํ•ด ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋””์ž์ธ์œผ๋กœ ๊ธฐ๋Œ€์น˜ ์„ค์ •

  • ์›ํ•˜๋Š” ์ž‘์—…์— ํ•ด๋‹นํ•˜๋Š” ๋ฒ„ํŠผ ๊ฐ•์กฐ ํ‘œ์‹œ
  • ๋„๋ฆฌ ์ดํ•ด๋˜๋Š” ๊ธฐํ˜ธ(์˜ˆ: ์‚ญ์ œ ๋ฒ„ํŠผ์˜ ํœด์ง€ํ†ต, ํ•ญ๋ชฉ ์ถ”๊ฐ€๋ฅผ ์œ„ํ•œ ๋”ํ•˜๊ธฐ ๊ธฐํ˜ธ, ๊ฒ€์ƒ‰์„ ์œ„ํ•œ ๋‹๋ณด๊ธฐ ๋“ฑ)๋ฅผ ๋ณต์‚ฌ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ
  • ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ์ƒ‰์ƒ ์„ ํƒ("์ด๋™" ๋ฒ„ํŠผ์€ ๋…น์ƒ‰, "์ค‘์ง€"๋Š” ๋นจ๊ฐ„์ƒ‰)

์นดํ”ผ๋กœ ๊ธฐ๋Œ€์น˜ ์„ค์ •

  • ํด๋ฆฌ์–ด ๋ฒ„ํŠผ ์นดํ”ผ ์ž‘์„ฑ
  • ๋นˆ ์ƒํƒœ์—์„œ ๋ฐฉํ–ฅ์„ฑ/์œ ๋„์„ฑ ์นดํ”ผ ์ œ๊ณต
  • ๊ฒฝ๊ณ  ์ „๋‹ฌ & ํ™•์ธ ์š”์ฒญ

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

InVision์—์„œ๋Š” ํœด์ง€ํ†ต ์•„์ด์ฝ˜์„ ํด๋ฆญํ•˜์—ฌ ์ฆ‰์‹œ ์‚ญ์ œํ•˜์ง€  ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹ , ํ™•์‹คํ•œ์ง€ ๋ฌป๊ณ  ์ทจ์†Œํ•  ์ˆ˜ ์—†์Œ์„ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

..

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

 

๐ŸŽ„from.designer 

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


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

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

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

๐ŸŽฅ ์œ ํŠœ๋ธŒ UXUI ์ž๋ฃŒ ์˜์ƒ  

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

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




 

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

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

โœ‰๏ธ

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

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

๋Œ“๊ธ€

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

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

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

๋‰ด์Šค๋ ˆํ„ฐ ๋ฌธ์˜from.ddesigner@gmail.com

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ ์„œ๋น„์Šค ์†Œ๊ฐœ์„œ ์˜ค๋ฅ˜ ๋ฐ ๊ธฐ๋Šฅ ๊ด€๋ จ ์ œ๋ณด

์„œ๋น„์Šค ์ด์šฉ ๋ฌธ์˜admin@team.maily.so

๋ฉ”์ผ๋ฆฌ ์‚ฌ์—…์ž ์ •๋ณด

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

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