์‹ค์Šต

[3/6] 2์ฃผ์ฐจ HW - ๋””์ž์ธ ์›์น™ ๊ธฐ๋ฐ˜์œผ๋กœ ์•ฑ ๋ถ„์„ํ•˜๊ธฐ

soom_ly 2024. 3. 6. 21:34

๐Ÿ“ ์‹ค์Šต ๋ชฉํ‘œ

๋””์ž์ธ ์›์น™(๊ฒŒ์ŠˆํƒˆํŠธ ์‹ฌ๋ฆฌํ•™, UX ๋น„์ฃผ์–ผ ๋””์ž์ธ ์›์น™) ๊ธฐ๋ฐ˜์œผ๋กœ ์•ฑ ํ™”๋ฉด์„ ๋ถ„์„ํ•ด๋ณด์ž!

 

๐ŸŒˆ ์ด๋ก  ์ •๋ฆฌ

๊ฒŒ์ŠˆํƒˆํŠธ ์‹ฌ๋ฆฌํ•™

๋”๋ณด๊ธฐ

1. ์œ ์‚ฌ์„ฑ์˜ ์›๋ฆฌ :

๋ชจ์–‘๊ณผ ํฌ๊ธฐ, ์ƒ‰์ƒ๊ณผ ๋ฐฉํ–ฅ ๋“ฑ ํŠน์„ฑ์ด ๋น„์Šทํ•œ ๊ฒƒ๋ผ๋ฆฌ ๋ฌถ์–ด์„œ ์ง€๊ฐํ•˜๋ ค๋Š” ๊ฒฝํ–ฅ์ž…๋‹ˆ๋‹ค.

๋ชจ์–‘์ด๋ผ๋Š” ํŠน์„ฑ๋ณด๋‹ค ํฌ๊ธฐ์™€ ์ƒ‰์ƒ์ด ์‚ฌ๋žŒ์˜ ๋ˆˆ์— ์œ ์‚ฌํ•˜๋‹ค๊ณ  ์ธ์‹ํ•˜๋Š” ๋ฐ์— ๋” ํฌ๊ฒŒ ์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค.

์œ ์‚ฌ์„ฑ์ด ๋›ฐ์–ด๋‚œ ํ™”๋ฉด์€ ์ •๋ณด์˜ ๊ทธ๋ฃนํ™”๊ฐ€ ์ž˜๋˜์–ด ์‚ฌ์šฉ์ž๊ฐ€ ๋‚ด์šฉ์„ ํŒŒ์•…ํ•˜๊ธฐ๊ฐ€ ํŽธํ•ฉ๋‹ˆ๋‹ค.

๋ชจ์–‘ / ์ƒ‰๊น”์— ๋”ฐ๋ฅธ ์œ ์‚ฌ์„ฑ
ํฌ๊ธฐ / ๋ฐฉํ–ฅ์— ๋”ฐ๋ฅธ ์œ ์‚ฌ์„ฑ

 

๋”๋ณด๊ธฐ

2. ๊ทผ์ ‘์„ฑ์˜ ์›๋ฆฌ : 

๊ฐ€๊นŒ์šด ๊ฒƒ๋ผ๋ฆฌ ๋ฌถ์–ด์„œ ์ง€๊ฐํ•˜๋ ค๋Š” ๊ฒฝํ–ฅ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ๋žŒ๋“ค์€ ์„œ๋กœ ๊ฐ€๊นŒ์ด ์žˆ๋Š” ์š”์†Œ๋“ค์ด ๋ฉ€๋ฆฌ ์žˆ๋Š” ์š”์†Œ๋ณด๋‹ค ๊ด€๋ จ์ด ๋งŽ์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  ์š”์†Œ๋“ค์ด ๊ฐ™์€ ๊ฐ„๊ฒฉ์„ ์œ ์ง€ํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ๋ชจ๋‘ ์„œ๋กœ์—๊ฒŒ ํŠน๋ณ„ํ•œ ์—ฐ๊ด€์„ฑ์ด ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์š”์†Œ๋“ค์ด ๊ฐ™์€ ๊ฐ„๊ฒฉ์„ ์œ ์ง€ํ•  ๋•Œ / ์„œ๋กœ ๋‹ค๋ฅธ ๊ฐ„๊ฒฉ์œผ๋กœ ๋ฐฐ์น˜๋˜์–ด ์žˆ์„ ๋•Œ
์ƒ‰์ƒ < ์—ฌ๋ฐฑ (์—ฌ๋ฐฑ์ด ๋” ํฐ ํž˜์„ ๊ฐ€์ง)

 

3. ํ์‡„์„ฑ์˜ ์›๋ฆฌ : 

์—ฌ๋ฐฑ์ด ์žˆ๋”๋ผ๋„ ํ‹ˆ์ด๋‚˜ ๊ฐ„๊ฒฉ์„ ๋ฉ”์›Œ์„œ ๋‹ซํžŒ ํ˜•ํƒœ๋กœ ์ธ์‹ํ•˜๋ ค๋Š” ๊ฒฝํ–ฅ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๋‹จ์ˆœํ™”๋œ ๋„ํ˜•์œผ๋กœ ๋งŒ๋“ค์–ด์ง€๋Š” ์•„์ด์ฝ˜์— ๋งŽ์ด ํ™œ์šฉ๋˜๋Š” ์›๋ฆฌ์ž…๋‹ˆ๋‹ค.

ํ์‡„์„ฑ์˜ ์›๋ฆฌ๋ฅผ ์ด์šฉํ•œ ๊ฐ€๋กœ์Šคํฌ๋กค

ํ์‡„์„ฑ์˜ ์›๋ฆฌ ๋•๋ถ„์— ์ด๋ฏธ์ง€์˜ ์ผ๋ถ€๊ฐ€ ์ž˜๋ ค์žˆ์–ด๋„ ์˜†์œผ๋กœ ๊ณ„์†ํ•ด์„œ ์š”์†Œ๋“ค์ด ์ด์–ด์งˆ ๊ฒƒ์ด๋ž€ ๊ฑธ ์ถ”์ธกํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

4. ์—ฐ์†์„ฑ์˜ ์›๋ฆฌ : 

์—ฐ์†์ ์œผ๋กœ ์ง์„ ์ด๋‚˜ ๊ณก์„ ์„ ์ด๋ฃจ๋Š” ์š”์†Œ๋ฅผ ์ž˜ ์ธ์ง€ํ•˜๋Š” ๊ฒฝํ–ฅ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ๋žŒ์€ ์–ด๋–ค ์š”์†Œ๊ฐ€ ๋ฐฉํ–ฅ์„ฑ์„ ๊ฐ€์ง€๊ณ  ์—ฐ์†๋˜์–ด ์žˆ์„ ๋•Œ ํŽธ์•ˆํ•จ์„ ๋А๋‚๋‹ˆ๋‹ค.

์ง์„ ์ด๋‚˜ ๊ณก์„ ์„ ๋”ฐ๋ผ ๋ฐฐ์—ด๋œ ๋Œ€์ƒ์„ ํ•˜๋‚˜์˜ ๋‹จ์œ„๋กœ ์ธ์‹ํ•ฉ๋‹ˆ๋‹ค.

์ƒ‰์ƒ < ๋ฐฉํ–ฅ์„ฑ

์ƒ‰์ƒ๋ณด๋‹ค ์—ฐ์†๋œ ๋ฐฐ์—ด์ด ๋” ํฐ ํž˜์„ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์— ์œ„์˜ ์ด๋ฏธ์ง€์—์„œ๋„ ์ง์„ ๊ณผ ๊ณก์„ ์ด ๋” ๋จผ์ € ๋ˆˆ์— ๋“ค์–ด์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

5. ๊ณตํ†ต์„ฑ์˜ ์›๋ฆฌ : 

๊ฐ™์€ ๋ฐฉํ–ฅ์œผ๋กœ ์›€์ง์ด๋Š” ๊ฒƒ๋“ค๋ผ๋ฆฌ ๋” ๊ด€๋ จ์„ฑ์ด ๋†’๋‹ค๊ณ  ์ธ์‹ํ•˜๋Š” ๊ฒฝํ–ฅ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๋ชจ์–‘, ์ƒ‰์ƒ ๋“ฑ์— ๊ด€๊ณ„์—†์ด ํ•จ๊ป˜ ์›€์ง์ด๊ฑฐ๋‚˜ ๋ฐ”๋€Œ๋Š” ์š”์†Œ๋Š” ์„œ๋กœ ๋” ๊ด€๋ จ์ด ์žˆ๋‹ค๊ณ  ๋А๋‚๋‹ˆ๋‹ค.

์ฃผ๋กœ ๋ชจ์…˜ ๊ทธ๋ž˜ํ”ฝ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์›๋ฆฌ์ž…๋‹ˆ๋‹ค.

๊ฐ€๋กœ๋กœ ํ•จ๊ป˜ ์›€์ง์ด๋Š” ๊ฒƒ์„ ๋ณด๊ณ  ๊ทธ๋ฃนํ™”๋˜๋Š” ๋„ทํ”Œ๋ฆญ์Šค ํ™”๋ฉด

 

UX ๋น„์ฃผ์–ผ ๋””์ž์ธ ์›์น™

๋”๋ณด๊ธฐ

1. ์Šค์ผ€์ผ (Scale) : 

์ƒ๋Œ€์ ์ธ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์„ฑ์˜ ์ค‘์š”๋„์™€ ์ˆœ์œ„๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์ค‘์š”ํ•œ ์š”์†Œ๋Š” ๋œ ์ค‘์š”ํ•œ ์š”์†Œ๋ณด๋‹ค ํฌ๊ฒŒ ํ‘œํ˜„ํ•ด์„œ ์ฃผ๋ชฉ๋ฐ›์„ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Šต๋‹ˆ๋‹ค.

์‹œ๊ฐ์ ์œผ๋กœ ๋ณด๊ธฐ ์ข‹์€ ๋””์ž์ธ์€ ์ผ๋ฐ˜์ ์œผ๋กœ 3๊ฐ€์ง€ ์ดํ•˜์˜ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

 

 

2. ์‹œ๊ฐ์  ์œ„๊ณ„ (Visual hierarchy) :

์ค‘์š”ํ•œ ์ˆœ์„œ์— ๋”ฐ๋ผ ์‹œ์„ ์˜ ํ๋ฆ„์ด ์ด๋™ํ•˜๋„๋ก ๋””์ž์ธํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

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

๋ช…ํ™•ํ•œ ์‹œ๊ฐ์  ์œ„๊ณ„๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š” 2~3๊ฐœ ์ •๋„์˜ ํ…์ŠคํŠธ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋Š” ์š”์†Œ๋Š” ์ฑ„๋„๊ฐ€ ๋†’๊ณ  ์ƒ‰์ƒ ๋Œ€๋น„๊ฐ€ ํฌ๊ฒŒ, ๋œ ์ค‘์š”ํ•œ ์š”์†Œ์—๋Š” ์ฑ„๋„๊ฐ€ ๋‚ฎ๊ณ  ์ƒ‰์ƒ ๋Œ€๋น„๊ฐ€ ํฌ์ง€ ์•Š๋„๋ก ์ƒ‰์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

 

 

3. ๊ท ํ˜• (Balance) : 

๋””์ž์ธ ์š”์†Œ ๊ฐ„์— ์ ๋‹นํ•œ ๋ฐฐ์—ด์ด๋‚˜ ๋น„์œจ์„ ์ฃผ๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜์ง์ด๋‚˜, ์ˆ˜ํ‰์˜ ๊ฐ€์ƒ ์ถ•์— ๋น„์Šทํ•œ ์–‘์˜ ์‹œ๊ฐ์  ์ •๋ณด๊ฐ€ ๋ฐฐ์น˜ํ•˜์—ฌ ์‚ฌ์šฉ์ž๋กœ ํ•˜์—ฌ๊ธˆ ์•ˆ์ •๊ฐ์„ ์ฃผ๊ณ , ์ฝ˜ํ…์ธ ๋ฅผ ๋ณด๊ธฐ ํŽธํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ, ๊ผญ ๋Œ€์นญ์ด ์•„๋‹ˆ์–ด๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

 

 

4. ๋Œ€๋น„ (Contrast) :

๋ˆˆ์— ๋„๊ฒŒ ๊ตฌ๋ณ„๋˜๋„๋ก ๊ฐ•์กฐํ•˜๊ธฐ ์œ„ํ•ด ๋‘ ์š”์†Œ ๊ฐ„์˜ ์ฐจ์ด๋ฅผ ๋‘๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

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

๋œ ์ค‘์š”ํ•œ ํ…์ŠคํŠธ์˜ ๊ฐ•์กฐ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•ด ๋ฐฐ๊ฒฝ๊ณผ์˜ ๋ช…๋„ ์ฐจ์ด๋ฅผ ๋„ˆ๋ฌด ์ค„์ด์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ํ๋ฆฟํ•œ ๊ธ€์ž๋Š” ์‚ฌ์šฉ์„ฑ์„ ๋–จ์–ด๋œจ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŒˆ ๊ณผ์ •

 

์žก์ฝ”๋ฆฌ์•„์˜ ํ™ˆํ™”๋ฉด๊ณผ ์žกํ”Œ๋ž˜๋‹›์ด ๋‰ด์Šค ํ™”๋ฉด์„ ๋””์ž์ธ ์›์น™์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ถ„์„ํ•ด๋ณด์•˜๋‹ค. 

 

๐Ÿ“Œ Figma ์‹ค์Šต ํ™”๋ฉด ๋ฐ”๋กœ๊ฐ€๊ธฐ

 

Figma

Created with Figma

www.figma.com