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

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

2022๋…„ 3์›” 3์ฃผ TOP3

2022.03.17 | ์กฐํšŒ 1.25K |
0
|

from.designer

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

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

  • UI ์œ ํ˜•์„ ๊ฐœ์„ ํ•˜๋Š” 4๊ฐ€์ง€์˜ ๋ฐฉ๋ฒ•
  • ๋…ธ์ธ์„ ์œ„ํ•œ UX ๋””์ž์ธ
  • ๋””์ž์ด๋„ˆ๋ฅผ ์œ„ํ•œ 10๊ฐ€์ง€ ์ตœ๊ณ ์˜ Chrome ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ

UI ์œ ํ˜•์„ ๊ฐœ์„ ํ•˜๋Š” 4๊ฐ€์ง€์˜ ๋ฐฉ๋ฒ•

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

ํƒ€์ž…ํŽ˜์ด์Šค ๋ฐ ํฐํŠธ

์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ํƒ€์ž…ํŽ˜์ด์Šค์™€ ํฐํŠธ์˜ ์ฐจ์ด์ ์„ ์—ผ๋‘์— ๋‘๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ํƒ€์ž…ํŽ˜์ด์Šค๋Š” ํฐํŠธ ๋ชจ์Œ์„ ์ •์˜ํ•˜๋Š” ๋ฐ˜๋ฉด ํฐํŠธ๋Š” ํƒ€์ž…ํŽ˜์ด์Šค ์Šคํƒ€์ผ์˜ ๋ณ€ํ˜•์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ UI์—์„œ ์œ ํ˜•์„ ๊ฐœ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•œ๋ฒˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

1. ๋ผ์ธ ๋†’์ด (Line-Height)

๋ณธ๋ฌธ์˜ ๊ฒฝ์šฐ, ์นดํ”ผ๋Š” ํƒ€์ž… ํฌ๊ธฐ(Type Size)์˜ 1.3~1.6๋ฐฐ์˜ ๋ผ์ธ ๋†’์ด(line-height)๋ฅผ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.

์ œ๋ชฉ์˜ ๊ฒฝ์šฐ ํƒ€์ž…ํฌ๊ธฐ์˜ 1~1.2๋ฐฐ์˜ ๋ผ์ธ ๋†’์ด๋ฅผ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.

2. ๋ผ์ธ ๊ธธ์ด (Line Lenght)

ํฐ ํ™”๋ฉด์—์„œ ๋ณธ๋ฌธ์€ 45~75์ž์˜ ์ •๋„์˜ ๋ฒ”์œ„๋ฅผ ์œ ์ง€ํ•˜์„ธ์š”.

์ž‘์€ ํ™”๋ฉด ํฌ๊ธฐ์—์„œ์˜ ๋ณธ๋ฌธ์€ 40~60์ž ๋ฒ”์œ„๋ฅผ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.

3. ๋‹จ๋ฝ ๊ฐ„๊ฒฉ (Paragraph Spacing)

๋‹จ๋ฝ ๊ฐ„๊ฒฉ์€ ํ™œ์ž ํฌ๊ธฐ์˜ 0.75~1.25๋ฐฐ ๋ฒ”์œ„๋ฅผ ์œ ์ง€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

4. ์œ ํ˜• ์ •๋ ฌ (Type alignment)

์˜์–ด์˜ ๊ฒฝ์šฐ ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ ๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ด๋ฉฐ UI์˜ ๋Œ€๋ถ€๋ถ„์˜ ํ…์ŠคํŠธ์— ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ : ์˜ค๋ฅธ์ชฝ ์ •๋ ฌ ๋ฐ ์ค‘์•™ ์ •๋ ฌ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์†Œ๋Ÿ‰์˜ ํ…์ŠคํŠธ์—๋งŒ ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ  ์†Œ์Šค:

(1) ๋จธํ‹ฐ๋ฆฌ์–ผ ๋””์ž์ธ

(2) ๋” ๋‚˜์€ ์›น์„ ์œ„ํ•œ ๋” ๋‚˜์€ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ โ€” Matej Latin์˜ ์ €์„œ

(3) ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๋””์ž์ธ โ€” Michaล‚ Malewicz & Diana Malewicz์˜ ์ €์„œ 

..

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


๋…ธ์ธ์„ ์œ„ํ•œ UX ๋””์ž์ธ

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

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

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

UX ๋ฆฌ์„œ์น˜

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

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

UI ๋””์ž์ธ

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

UI์— ๋Œ€ํ•œ ๋ช‡ ๊ฐ€์ง€ ์ œ์•ˆ ์‚ฌํ•ญ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

16p ๋ฏธ๋งŒ์˜ ๊ธ€๊ผด ํฌ๊ธฐ๋ฅผ ํ”ผํ•˜๊ณ  ํ…์ŠคํŠธ ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ํ™”๋ฉด ํŒ๋…๊ธฐ๋กœ ํ”„๋กœ๋•ํŠธ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ณ  ๋ช…์•”๋น„์— ์ฃผ์˜ํ•˜์„ธ์š”. ๋น„๋””์˜ค์™€ ์˜ค๋””์˜ค ์ฝ˜ํ…์ธ ์— ๋Œ€ํ•œ ์–ธ์–ด ์„ค์ •์ด ํฌํ•จ๋œ ์ž๋ง‰์„ ์ œ๊ณตํ•˜์„ธ์š”.

์ƒํ˜ธ ์ž‘์šฉ๊ณผ ๋„์›€๋ง ์„น์…˜

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

..

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


๋””์ž์ด๋„ˆ๋ฅผ ์œ„ํ•œ 10๊ฐ€์ง€ ์ตœ๊ณ ์˜ Chrome ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ

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

1. Window Resizer

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

2. Loom

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

3. Toybox

์š”์†Œ๋ฅผ ์ ๊ฒ€ํ•˜๊ณ , ์Šคํฌ๋ฆฐ์ƒท์„ ์บก์ฒ˜ํ•˜๊ณ , ์‚ฌ์ดํŠธ์—์„œ ๋ฒ„๊ทธ๋ฅผ ๊ธฐ๋กํ•˜๋Š” ๋ฐ ๋งŽ์€ ์‹œ๊ฐ„์„ ๋ณด๋‚ด๊ณ  ์žˆ๋‚˜์š”? Toybox ํฌ๋กฌ ํ™•์žฅ ์™ธ์—๋Š” ๋” ๋ณด์ง€ ๋งˆ์„ธ์š”. ํ”ผ๋“œ๋ฐฑ์„ ๋‚จ๊ธฐ๊ณ , ์‚ฌ์ดํŠธ์—์„œ ์ง์ ‘ CSS๋ฅผ ์ ๊ฒ€ํ•˜๋Š” ๊ฐ€์žฅ ๋น ๋ฅธ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. InVision ์ฃผ์„ ๋‹ฌ๊ธฐ ๋ฐ Zeplin Inspecting๊ณผ ๊ฐ™๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋””์ž์ธ ํŒŒ์ผ ๋Œ€์‹  ์‚ฌ์ดํŠธ์— ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋Œ“๊ธ€์„ ๋‚จ๊ธฐ๋ฉด, ์ž๋™์œผ๋กœ ์Šคํฌ๋ฆฐ์ƒท์„ ์ฐ๊ณ  ๋ธŒ๋ผ์šฐ์ € ๋ฐ์ดํ„ฐ, OS ์ •๋ณด, ๋ทฐํฌํŠธ ํฌ๊ธฐ ๋“ฑ์„ ๊ธฐ๋กํ•˜๋ฏ€๋กœ, ๋ฌธ์ œ๋ฅผ ์‰ฝ๊ฒŒ ์žฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ํ”„๋กœ๋•ํŠธ ํŒ€์—๊ฒŒ ํ•„์ˆ˜ํ’ˆ์ž…๋‹ˆ๋‹ค.์ž์ธ์œผ๋กœ ๋ณ€ํ™˜

4. Muzli

์ปคํ”ผ ํ˜น์€ ์ฐจ์— ์˜๊ฐ์ด ํ•„์š”ํ•˜์‹ ๊ฐ€์š”? Muzli ํฌ๋กฌ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค. ์ƒˆ ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์„ ์—ด ๋•Œ๋งˆ๋‹ค ๋ฉ‹์ง„ ๋””์ž์ธ์˜ ์ตœ์‹  ํ”ผ๋“œ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ์ƒˆ๋กญ๊ณ  ํž™ํ•˜๊ณ  ๋ฉ‹์ง„ ๊ฒƒ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ์ˆ˜๋งŽ์€ ๋””์ž์ธ ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

5. SVG Grabber

'๋•Œ๋กœ๋Š” ํŽ˜์ด์ง€์—์„œ ๋กœ๊ณ ๋‚˜ ์•„์ด์ฝ˜๋งŒ ๊ฐ€์ ธ์™€์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. SVG Grabber๋ฅผ ํ™˜์˜ํ•ด์ฃผ์„ธ์š”. ๋‹จ์ผ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ํŽ˜์ด์ง€์— ์žˆ๋Š” ๋ชจ๋“  SVG๋ฅผ ์ž๋™์œผ๋กœ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. ๋ฌด์—‡์„ ์บก์ฒ˜ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์ „์ฒด ๋ณด๊ธฐ๋ฅผ ํ™•์ธํ•˜๊ณ , ํ•„์š”ํ•œ ํ•ญ๋ชฉ์„ ๋น ๋ฅด๊ฒŒ ๋‹ค์šด๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

6. Page Ruler (ํŽ˜์ด์ง€ ๋ˆˆ๊ธˆ์ž)

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

7. Dark Mode Dev Tools (๋‹คํฌ ๋ชจ๋“œ ๊ฐœ๋ฐœ)

๋‹คํฌ ๋ชจ๋“œ๋Š” ๋ชจ๋“  ๋””์ž์ด๋„ˆ์—๊ฒŒ ์ง„์ •ํ•œ ํ•„์ˆ˜์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ Chrome Dev Tools์— ๋‚ด์žฅ๋˜์–ด ์žˆ๊ณ  ํ™•์žฅ ๊ธฐ๋Šฅ์ด ์•„๋‹ˆ์ง€๋งŒ, ์ €๋Š” ์–ธ๊ธ‰ํ•  ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž ๋„๊ตฌ ์—ด๊ธฐ > ์˜ค๋ฅธ์ชฝ ์ƒ๋‹จ ์  3๊ฐœ ํด๋ฆญ > ์„ค์ • > ๋‹คํฌ๋ชจ๋“œ ์ „ํ™˜. ์ด์ œ ์™„์ „ํ•œ ์–ด๋‘  ์†์—์„œ *DOM์„ ํ†ตํ•ด ๊ธธ์„ ํ”ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (*DOM: ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ(The Document Object Model)์˜ ์•ฝ์ž๋กœ, HTML, XML ๋ฌธ์„œ์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋œปํ•จ. ๋ฌธ์„œ์˜ ๊ตฌ์กฐํ™”๋œ ํ‘œํ˜„์„ ์ œ๊ณตํ•˜๋ฉฐ, ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ DOM ๊ตฌ์กฐ์— ์ ‘๊ทผํ•˜์—ฌ ๋ฌธ์„œ ๊ตฌ์กฐ, ์Šคํƒ€์ผ, ๋‚ด์šฉ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์›€.)

8. ColorZilla

์–ด๋–ค ์ปฌ๋Ÿฌ๊ฐ€ ์‚ฌ์šฉ๋˜์—ˆ๋Š”์ง€ ๋น ๋ฅด๊ฒŒ ์ฐพ๊ณ  ์‹ถ์€ ๋‹น์‹ ์—๊ฒŒ, ColorZilla๊ฐ€ ์ตœ๊ณ ์˜ ์†”๋ฃจ์…˜์ด ๋  ๊ฒ๋‹ˆ๋‹ค. ๊ทธ์ € ํŽ˜์ด์ง€์— ๋งˆ์šฐ์Šค๋ฅผ ๊ฐ–๋‹ค๋Œ€๊ธฐ๋งŒ ํ•˜๋ฉด, hex์™€ rgb ์ปฌ๋Ÿฌ๊ฐ’์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‹ ์˜ ํด๋ฆฝ๋ณด๋“œ์— ๋ฐ”๋กœ ์˜ฎ๊ธฐ๊ธฐ ์œ„ํ•ด ํด๋ฆญํ•˜์„ธ์š”. ๋น ๋ฅด๊ณ , ์‰ฝ๊ณ , ํšจ์œจ์ ์ž…๋‹ˆ๋‹ค.

9. Fontface Ninja

์‰ฝ๊ณ  ์•„๋ฆ„๋‹ค์šด ๋˜ ๋‹ค๋ฅธ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์€ Fontface Ninja์ž…๋‹ˆ๋‹ค. ๋‹น์‹ ์ด ๋งˆ์šฐ์Šค๋ฅผ ๊ฐ–๋‹ค๋Œ€๊ธฐ๋งŒ ํ•˜๋ฉด ์–ด๋–ค ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ™•์žฅ ๋„๊ตฌ ๋ชจ์Œ์„ ์‚ฌ์šฉํ•˜์—ฌ ํฐํŠธ์—์„œ ๋ฐ”๋กœ ๊ตฌ๋งคํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

10. Custom Cursor

๋””์ž์ด๋„ˆ ํŠน์œ ์˜ ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ, ์ €๋Š” ์–ผ๋งˆ์ „ ์ด๊ฒƒ์„ ๋ฐœ๊ฒฌํ•˜๊ณ  ์žฅ๋‚œ๊พธ๋Ÿฌ๊ธฐ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. Custom Cursor๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ธฐ๋ณธ ์ปค์„œ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์‚ฌ์šฉ์ž ์ง€์ • ์ปค์„œ๋ฅผ ์—…๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งค์šฐ ์žฌ๋ฏธ์žˆ๊ณ  ์‹ ์„ ํ•˜์ฃ .

..

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

 

๐ŸŽ„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ํ˜ธ

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