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

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

๋” ๋‚˜์€ UI ๋””์ž์ธ(๊ณต๋ฐฑ, ํ…์ŠคํŠธ) / ์•„์ฝ”๋””์–ธ ๋””์ž์ธ / ๊ทธ๋ฆฌ๋“œ ์„ค์ •

2021.11.18 | ์กฐํšŒ 998 |
0
|

from.designer

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

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

  • ๋” ๋‚˜์€ ๊ณ„์ธต ๊ตฌ์กฐ(UI)๋ฅผ ์œ„ํ•œ ๊ณต๋ฐฑ๊ณผ ํ…์ŠคํŠธ ์‚ฌ์šฉ ์ดํ•ด
  • ์•„์ฝ”๋””์–ธ ๋””์ž์ธ: ๋ชจ๋ฒ” ์‚ฌ๋ก€
  • UI/UX ๋””์ž์ธ: ๊ทธ๋ฆฌ๋“œ ์„ค์ •

๋” ๋‚˜์€ ๊ณ„์ธต ๊ตฌ์กฐ(UI)๋ฅผ ์œ„ํ•œ ๊ณต๋ฐฑ๊ณผ ํ…์ŠคํŠธ ์‚ฌ์šฉ ์ดํ•ด


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

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

๊ณต๋ฐฑ ์š”์†Œ์˜ ์˜ˆ์‹œ๋กœ๋Š” ํŒจ๋”ฉ, ํ…Œ๋‘๋ฆฌ(margin, ์—ฌ๋ฐฑ)์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณต๋ฐฑ์€ UI์—์„œ ๋‘ ๋ฒˆ์งธ๋กœ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋””์ž์ธ ์š”์†Œ์ด๊ณ  ํ…์ŠคํŠธ๋Š” ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ์š”์†Œ์ž…๋‹ˆ๋‹ค. UI์˜ ๋ชฉํ‘œ๋ฅผ ๋ง์น˜์ง€ ์•Š์œผ๋ ค๋ฉด ๊ณต๋ฐฑ์„ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ณ  ๋…๋ฆฝ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด ์‹œ์ ์—์„œ ๊ณต๋ฐฑ์ด ๋ฌด์—‡์„ ์˜๋ฏธํ•˜๊ณ  ์ผ๋ฐ˜์ ์œผ๋กœ ํ”„๋กœ๋•ํŠธ์˜ UI์— ๋ฌด์—‡์„ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์ดํ•ดํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ์‚ฌ์—์„œ ๋”ฐ๋ผ์•ผ ํ•  ๋ช‡ ๊ฐ€์ง€ ์ง€์นจ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณ„์† ์ฝ์–ด๋ณด์„ธ์š”.

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

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

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

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

์˜ˆ๋ฅผ ๋“ค์–ด, 4px์˜ ๋ฐฐ์ˆ˜์™€ ๊ฐ™์ด ๊ธฐ๋ณธ ๊ฐ’์„ ์–ป๋Š” ๊ฒƒ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ , ์ž์‹ ์„ ํฌ๊ฒŒ ์ œํ•œํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, 4px์˜ ๋ฐฐ์ˆ˜๊ฐ€ ์–ด๋Š ์‹œ์ ์—์„œ UI์— ์ ํ•ฉํ•˜์ง€ ์•Š์„ ๋•Œ ๋‹ค๋ฅธ ๊ฒฐ์ •์„ ๋‚ด๋ฆด ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ•˜๋‚˜๋Š” ๋””์ž์ธํ•  ๋•Œ ์—„๊ฒฉํ•˜๊ฒŒ ๋งŒ๋“ค๋ ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ‘œ์ค€์„ ์ดํ•ดํ•˜๊ณ  ํ•„์š”ํ•  ๋•Œ ์ตœ์„ ์˜ ํŒ๋‹จ์„ ๋‚ด๋ฆฌ๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

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


์•„์ฝ”๋””์–ธ ๋””์ž์ธ: ๋ชจ๋ฒ” ์‚ฌ๋ก€



์ถ•์†Œ์™€ ํ™•์žฅ ์ƒํƒœ.  ์Šคํƒ€์ผ๋ง๊ณผ ์ƒ‰์ƒ ์‚ฌ์šฉ๋ฒ•. ์•„์ฝ”๋””์–ธ ์ƒ˜ํ”Œ, ํ…œํ”Œ๋ฆฟ ๊ทธ๋ฆฌ๊ณ  UX ์ผ€์ด์Šค๋กœ ์›ํ™œํ•œ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ €๋Š” ์˜จ๋ผ์ธ ๊ธฐ์—…๊ฐ€์ด์ž UI ๋””์ž์ด๋„ˆ์ž…๋‹ˆ๋‹ค.  Figma์šฉ UI ํ‚คํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์‹œ์ž‘ํ•œ์ง€ โ€‹โ€‹3๋…„์ด ๋„˜์—ˆ์Šต๋‹ˆ๋‹ค.  Setproduct.com์€ ๊ทธ๋ ‡๊ฒŒ ์„ค๋ฆฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.  ์ด ์›น์‚ฌ์ดํŠธ์˜ ์‚ฌ๋ช…์€ ํšŒ์‚ฌ์™€ ํ”„๋ฆฌ๋žœ์„œ๊ฐ€ ํ”„๋กœ๋•ํŠธ๋ฅผ ํ›จ์”ฌ ๋” ๋นจ๋ฆฌ ์ถœ์‹œํ•˜์—ฌ ๋””์ž์ธ์— ๋“œ๋Š” ๋น„์šฉ๊ณผ ์‹œ๊ฐ„์„ ์ ˆ์•ฝํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

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

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

์ €๋Š” ๋˜ํ•œ ๋…์ž๋“ค์—๊ฒŒ ์ฝ˜ํ…์ธ ์˜ ํ˜œํƒ์„ ๋ฐ›์•˜๋Š”์ง€ ๋ฌป๋Š” ์„ค๋ฌธ์กฐ์‚ฌ๋ฅผ ๋งŒ๋“ค๊ฒ ๋‹ค๋Š” ์•„์ด๋””์–ด๋ฅผ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค.  ์‚ฌ์ „ ๊ตฌ์ถ•๋œ ์„ค๋ฌธ์กฐ์‚ฌ ์œ„์ ฏ์„ ์‚ฌ์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฒฐ๊ณผ๋ฅผ ์‰ฝ๊ฒŒ ์ถ”์ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๊ณผ๋Š” ์ƒ๋‹นํžˆ ๊ณ ๋ฌด์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค!  ์ตœ์†Œ 44๋ช…์˜ ์‚ฌ์šฉ์ž๊ฐ€ ๊ธฐ์‚ฌ์— ๊ด€์‹ฌ์„ ๊ฐ–๊ณ  ์™„์ „ํžˆ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค.  ๊ทธ๋ฆฌ๊ณ  ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ์ž˜ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๋Š” ์ ์–ด๋„ ๋‘ ๋ช…์˜ ์‚ฌ์šฉ์ž๊ฐ€์žˆ์—ˆ์Šต๋‹ˆ๋‹ค ๐Ÿคฃ

์ž, ์ด์ œ ๊ธฐ์‚ฌ์˜ ๋‚ด์šฉ์œผ๋กœ ๋„˜์–ด๊ฐ€๊ฒ ์Šต๋‹ˆ๋‹ค.  ์—ฌ๊ธฐ์— ๊ณต๊ฐœํ•  UI ์„ธ๋ถ€ ์ •๋ณด๊ฐ€ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

 ๐Ÿ‘‡ ์‹œ์ž‘ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค!

์•„์ฝ”๋””์–ธ์ด๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
์•„์ฝ”๋””์–ธ(ํ™•์žฅ ํŒจ๋„์ด๋ผ๊ณ ๋„ ํ•จ)์€ ์„ธ๋กœ๋กœ ์Œ“์ด๊ณ  ์ถ”๊ฐ€ ๊ด€๋ จ ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ์ˆจ๊ธฐ๊ธฐ ์œ„ํ•ด ํ™•์žฅ/์ถ•์†Œํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค.

์ฝ˜ํ…์ธ 
1. ์š”์ 
2. ์ปจํ…Œ์ด๋„ˆ(container)์˜ ์Šคํƒ€์ผ
3. ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ ์‚ฌ์šฉ์„ฑ
4. ์‚ฌ๋ก€ ๐Ÿ“ฑ/๐Ÿ’ป

1.์š”์ 

1. ์š”์ 

์ƒํƒœ(States)
์•„์ฝ”๋””์–ธ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋ณธ ์ƒํƒœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
๐Ÿ”ฝ ์ƒ์‡„(Collapsed)
๐Ÿ”ผ ํ™•์žฅ(expanded)
๐Ÿ–ฑ ์˜จ ํ˜ธ๋ฒ„(on hovered)
๐Ÿ‘€ ์ดˆ์ (focused)
๐Ÿšซ ๋น„ํ™œ์„ฑํ™”(disabled)

์‰๋ธŒ๋ก  ์•„์ด์ฝ˜(Chevron icons, Vํ˜• ์•„์ด์ฝ˜) ๋ฐฐ์น˜
์•„์ฝ”๋””์–ธ์„ ํด๋ฆญํ•˜๋ฉด ์‰๋ธŒ๋ก (Chevron)์ด ํšŒ์ „ํ•˜์—ฌ ์š”์†Œ๊ฐ€ ์„ฑ๊ณต์ ์œผ๋กœ ํ™•์žฅ๋˜์—ˆ์Œ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.  ๋‹ค์‹œ ํด๋ฆญํ•˜๋ฉด ์ถ•์†Œ๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ ์‰๋ธŒ๋ก (Chevron)์ด ์ดˆ๊ธฐ ์œ„์น˜๋กœ ๋Œ์•„๊ฐ‘๋‹ˆ๋‹ค.

์‰๋ธŒ๋ก (Chevron) ๋Œ€์‹  ๋‹ค์Œ ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
โ€ข ์บ๋Ÿฟ (Caret, โ–ฒ)
โ€ข ํ™”์‚ดํ‘œ (Arrow, โ†‘)
โ€ข + / -

์ถ”๊ฐ€ ๊ธฐํ˜ธ
์•„์ฝ”๋””์–ธ์ด ์˜ค๋ฅธ์ชฝ์ธ ๊ฒฝ์šฐ ์ถ”๊ฐ€ ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์˜๋ฏธ๋ฅผ ๊ฐ•์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.  ๊ทธ๋Ÿฌ๋‚˜ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๋‚ด์šฉ์— ๊ณผ๋ถ€ํ•˜๊ฐ€ ๊ฑธ๋ฆด ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ฃผ์˜ํ•ฉ๋‹ˆ๋‹ค.

๋•Œ๋กœ๋Š” ์š”์†Œ๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

2. ์ปจํ…Œ์ด๋„ˆ(container)์˜ ์Šคํƒ€์ผ

ํ™•์žฅ ์š”์†Œ(Expanded element)
์—ฌ๋Ÿฌ ๊ฐœ์˜ ์•„์ฝ”๋””์–ธ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ํ™•์žฅ๋œ ์ƒํƒœ๋ฅผ ๊ฐ•์กฐ ํ‘œ์‹œํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.  ์ด๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ์•„์ฝ”๋””์–ธ ์š”์†Œ๊ฐ€ ์—ด๋ ค ์žˆ๋Š”์ง€ ์ดํ•ดํ•˜๋„๋ก ๋•์Šต๋‹ˆ๋‹ค.  ํ•˜์ด๋ผ์ดํŠธ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

โ€ข ๊ณ ๋„๊ฐ€ ์žˆ๋Š” ๊ทธ๋ฆผ์ž
โ€ข ๋ฐฐ๊ฒฝ ์ฑ„์šฐ๊ธฐ
โ€ข ์œค๊ณฝ์„  ํ…Œ๋‘๋ฆฌ
๋†’์ด๊ฐ€ ํฐ์ƒ‰๊ณผ ๋ฐ์€ ํšŒ์ƒ‰ ํ‘œ๋ฉด์—์„œ ๋ฉ‹์ง€๊ฒŒ ๋ณด์ด์ง€๋งŒ ํ™•์žฅ๋œ ์•„์ฝ”๋””์–ธ  ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ์„ 8-12% ๋ถˆํˆฌ๋ช…๋„๋กœ ์ฑ„์šฐ๋Š” ๊ฒƒ์€ ํ›Œ๋ฅญํ•œ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.  ํฐ์ƒ‰ ํ‘œ๋ฉด๊ณผ๋„ ์ž˜ ์–ด์šธ๋ฆฝ๋‹ˆ๋‹ค.  ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์œค๊ณฝ์„ ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
..
๐Ÿ‘‡ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์›๋ฌธ์—์„œ ํ™•์ธํ•ด์ฃผ์„ธ์š”.


UI/UX ๋””์ž์ธ: ๊ทธ๋ฆฌ๋“œ ์„ค์ •


๊ฑฐ์˜ ๋ชจ๋“  ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ ๊ทธ๋ฆฌ๋“œ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

์˜ค๋ฒ„๋ทฐ(Overview)
๋””์ž์ด๋„ˆ์—๊ฒŒ ๊ทธ๋ฆฌ๋“œ๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ ‘ํ•˜๋Š” ๋ชจ๋“  ํ”„๋กœ์ ํŠธ์˜ ๊ธฐ๋ณธ ๋„๊ตฌ์˜ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์ œ๋Š” ์—„๊ฒฉํ•œ ์ธ์‡„ ๋””์ž์ธ ์‹œ๋Œ€ ์ดํ›„, ์ƒํ™ฉ์ด ํ›จ์”ฌ ๋” ๋ณต์žกํ•ด์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ˜„๋Œ€ ์›น์˜ ์ถœํ˜„์œผ๋กœ ํฌ๋กœ์Šค ํ”Œ๋žซํผ, ๋ฐ˜์‘ํ˜•, ๋ฉ€ํ‹ฐ ๋””๋ฐ”์ด์Šค ๊ฒฝํ—˜์ด ์ด์ œ ํ‘œ์ค€์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ์œ„ํ•ด ์˜ค๋Š˜ ์šฐ๋ฆฌ๋Š” ๋‹ค์Œ์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  • ๊ทธ๋ฆฌ๋“œ์˜ ์ •์˜์™€ ์šฉ๋„
  • ํ˜„๋Œ€ ๋””์ง€ํ„ธ ๋ ˆ์ด์•„์›ƒ ๊ทธ๋ฆฌ๋“œ์˜ ์œ ํ˜•๊ณผ ์ฐจ์ด์ .
  •  ์ˆ˜์ง ๊ธฐ์ค€์„ ์œผ๋กœ ๊ธฐ๋ณธ 4pt ๊ทธ๋ฆฌ๋“œ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•.
  • ๊ทธ๋ฆฌ๋“œ์— ์ฝ˜ํ…์ธ ๋ฅผ ์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•.
  • ๋ณด๋„ˆ์Šค: ์ž๋™ ๋ ˆ์ด์•„์›ƒ์„ ํ™œ์šฉํ•˜์—ฌ ์‚ถ์„ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•.

๋” ์ด์ƒ ๊ณ ๋ฏผํ•˜์ง€ ์•Š๊ณ  ๋“ค์–ด๊ฐ€ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

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

์‹œ๊ฐ์  ์ผ๊ด€์„ฑ
๊ฐ€์žฅ ์ค‘์š”ํ•œ ์ผ๊ด€์„ฑ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฌธ์„œ๋ฅผ ํ–‰(rows), ์—ด(columns)๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฝ˜ํ…์ธ ๋ฅผ ์ฐจ๋ณ„ํ™”ํ•˜๊ณ  ์ฝ˜ํ…์ธ ๋ฅผ ๋ณด๋‹ค ๊ท ์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌธ์„œ ํ•˜์ด๋ผํ‚ค(Hierarchy)
๊ทธ๋ฆฌ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋˜ ๋‹ค๋ฅธ ์ด์œ ๋Š” ์‹œ๊ฐ์  ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ์œ„ํ•ด ๋ฌธ์„œ ์„น์…˜์„ ์ฐจ๋‹จํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ๋” ๋งŽ์€ ๊ทธ๋ฆฌ๋“œ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜๋Š” ํฐ ์š”์†Œ๊ฐ€ ๋” ์ค‘์š”ํ•œ ๋ฐ˜๋ฉด, ๋” ์ž‘์€ ์š”์†Œ๋Š” ๋œ ์ค‘์š”ํ•œ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

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

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

๊ทธ๋ฆฌ๋“œ ์ •์˜
๋” ๋‚˜์•„๊ฐ€๊ธฐ ์ „์—, ๊ฑฐ์˜ ๋ชจ๋“  ์ตœ์‹  ์›น๊ณผ ๋ชจ๋ฐ”์ผ ๋ ˆ์ด์•„์›ƒ ๊ทธ๋ฆฌ๋“œ๋Š” ๋‹ค์Œ ๋„ค ๊ฐ€์ง€ ์œ ํ˜•์˜ ๊ทธ๋ฆฌ๋“œ ์ค‘ ํ•˜๋‚˜์ž„์„ ๋ง์”€๋“œ๋ฆฌ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

  • ์›๊ณ  ๊ฒฉ์ž ๊ทธ๋ฆฌ๋“œ(Manuscript Grid)
  • ์ปฌ๋Ÿผ ๊ทธ๋ฆฌ๋“œ(Column Grid)
  • ๋ชจ๋“ˆ์‹ ๊ทธ๋ฆฌ๋“œ(Modular Grid)
  • ๊ณ„์ธต์  ๊ทธ๋ฆฌ๋“œ(Hierarchical Grid)

๊ด€์‹ฌ์ด ์žˆ๋Š” ๊ฒฝ์šฐ, ์—ฌ๊ธฐ์—์„œ ํ‘œ์ค€ ๊ทธ๋ฆฌ๋“œ ๋ฒ”์ฃผ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โ˜… ๊ทธ๋ž˜ํ”ฝ ๋””์ž์ด๋„ˆ์—๊ฒŒ ์œ ์šฉํ•œ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ ์œ ํ˜•
๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์€ ์„ฑ๊ณต์ ์ธ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“œ๋Š” ๊ธฐ๋ณธ ์š”์†Œ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜ํ”ฝ ๋””์ž์ด๋„ˆ๊ฐ€ ๊ทธ๋ฆฌ๋“œ ์œ ํ˜•์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.
Types of Grid System Useful for Graphic Designers (graphic-design-institute.com)
..  
๐Ÿ‘‡ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์›๋ฌธ์—์„œ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

 

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

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