๐Ÿ’ช ์‹ ์ž… UX/UI ๊ธฐํš์ž๋ฅผ ์œ„ํ•œ 10๊ฐ€์ง€ | ์ปค๋ฆฌ์–ด๋ฆฌ

๐Ÿ’ช ์‹ ์ž… UX/UI ๊ธฐํš์ž๋ฅผ ์œ„ํ•œ 10๊ฐ€์ง€ ์‹ค์ „ TIP ๐ŸŽˆ ํ•œ ์ค„ ์š”์•ฝ - UX/UI ์—…๋ฌด์— ์ž„ํ•˜๊ธฐ ์œ„ํ•œ ์•„์ฃผ ๊ธฐ์ดˆ์ ์ธ ์‹ค์ „ TIP โœ… UX/UI ๊ธฐํš์ž์˜ ์ฃผ ์—…๋ฌด 1. ํ”„๋กœ์ ํŠธ ์ œ์•ˆ 2. ๋ฆฌ์„œ์น˜ & ์ธํ„ฐ๋ทฐ & ์ปจ์…‰ ์„ค์ • & ์ฃผ์š”ํ™”๋ฉด UI ๊ธฐํš (๋•Œ์— ๋”ฐ๋ผ์„œ ์ธํ„ฐ๋ทฐ ์ƒ๋žต) 3. IA(Information Architecture) ์ž‘์„ฑ 4. UI ํ™”๋ฉด์ •์˜์„œ ์ž‘์„ฑ 5. ๋””์ž์ธ ๊ฒ€์ˆ˜ 6. ํผ๋ธ”๋ฆฌ์‹ฑ ๊ฒ€์ˆ˜ 7. ์‚ฌ์šฉ์„ฑ ํ…Œ์ŠคํŠธ โœ… ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ํˆด๊ณผ ์‚ฐ์ถœ๋ฌผ 1. ํŒŒ์›Œํฌ์ธํŠธ 2. ์—‘์…€ 3. ํ”„๋กœํ† ํŒŒ์ด 4. ์Šค์ผ€์น˜ โœ… ํžˆ์Šคํ† ๋ฆฌ์™€ ๋ฒ„์ „ ๊ด€๋ฆฌ - ๋””์ž์ด๋„ˆ, ๊ฐœ๋ฐœ์ž ๋˜๋Š” ์™ธ์ฃผ์‚ฌ์™€ ์˜์‚ฌ์†Œํ†ตํ•˜๊ธฐ ์œ„ํ•œ ์ˆ˜๋‹จ์ž…๋‹ˆ๋‹ค. ํžˆ์Šคํ† ๋ฆฌ๋Š” ์ˆ˜์ •ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ฅธ ํ˜‘๋ ฅ์‚ฌ ๋˜๋Š” ๊ณ ๊ฐ์‚ฌ์— ๊ณต์œ ํ•˜๋Š” ๊ผญ ํ•„์š”ํ•œ ๋‚ด์šฉ์ด๋ฉฐ, ๋ถ„์Ÿ ๋ฐœ์ƒ ์‹œ ๋˜๋Š” ๋ฐ˜์˜ํ•ด์•ผ ํ•  ์—…๋ฌด์— ๋ˆ„๋ฝ๋œ ๊ฒƒ์€ ์—†๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ์ง€ํ‘œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. โœ… ๊ณตํ†ต(Common)์˜ ์ค‘์š”์„ฑ - ๊ณตํ†ต์€ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ๋‚˜๋ˆ ์„œ ์ž‘์—…ํ•˜๋”๋ผ๋„ ๊ณตํ†ต์ ์ธ ๋ฃฐ๊ณผ ์ปดํฌ๋„ŒํŠธ(์š”์†Œ)๋“ค๋กœ ๋™์ผํ•œ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“œ๋Š” ์ง€์นจ์„œ์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐˆ ๋‚ด์šฉ๋“ค์„ ๊ณตํ†ต์œผ๋กœ ์ •์˜ํ•˜๋ฉด ๋ชจ๋“  ํŽ˜์ด์ง€์— ๋‚ด์šฉ์„ ์ˆ˜์ •ํ•˜์ง€ ์•Š์•„๋„ ๋˜๋Š” ์ด์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. โœ… ๊ณตํ†ต์˜ ์š”์†Œ๋“ค - ๊ณตํ†ต์˜ ์š”์†Œ๋กœ ์ •์˜ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1. GNB (Global Navigation Bar) / Footer / Menu 2. ์Šคํ”Œ๋ž˜์‰ฌ / ์—…๋ฐ์ดํŠธ ์ •์ฑ… / ํŠœํ† ๋ฆฌ์–ผ / ๊ถŒํ•œ ์„ค์ • ํŒ์—… 3. ํŽ˜์ด์ง€ ๋กœ๋”ฉ / ์ด๋ฏธ์ง€ ๋˜๋Š” ํ…์ŠคํŠธ ๋กœ๋”ฉ / ์ƒˆ๋กœ๊ณ ์นจ / ๋ฐ์ดํ„ฐ ์—…๋ฐ์ดํŠธ 4. ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์„ ๋•Œ - ๋‚ด์šฉ์ด ์‚ญ์ œ๋˜์—ˆ๊ฑฐ๋‚˜, ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ (๋งˆ์ดํŽ˜์ด์ง€์˜ ์ฐœ ํ™”๋ฉด/๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ์—†์Œ ํŽ˜์ด์ง€) 5. ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ - ์‚ญ์ œ๋œ ํŽ˜์ด์ง€, ๋„คํŠธ์›Œํฌ ์˜ค๋ฅ˜, ์ ‘๊ทผ๊ถŒํ•œ์ด ์—†๋Š” ๊ฒฝ์šฐ, ์‹œ์Šคํ…œ ์ ๊ฒ€ ๋“ฑ 6. ํŒ์—… ์œ ํ˜• ๋ฐ ์ธํ„ฐ๋ ‰์…˜ - ์‹œ์Šคํ…œ ํŒ์—…(์•Œ๋Ÿฟ) / ์ปค์Šคํ…€ ํŒ์—…(๋ ˆ์ด์–ด, ์•Œ๋ฆผ, ํ† ์ŠคํŠธ ๋“ฑ) 7. ์ž…๋ ฅ๋ž€ ์ธํ„ฐ๋ž™์…˜ - Text ์ž…๋ ฅ ์ „ / ์ž…๋ ฅ ์‹œ / ์‚ญ์ œ ์‹œ / ์ž˜๋ชป ์ž…๋ ฅ ์‹œ 8. ํ…์ŠคํŠธ ํ‘œ๊ธฐ๋ฒ• - ๋‚ ์งœ / ์‹œ๊ฐ„ / ๊ธˆ์•ก / ์ „ํ™”๋ฒˆํ˜ธ / ๋‚˜์ด ๋“ฑ 9. ํŽ˜์ด์ง€ ๋„ค๋น„๊ฒŒ์ด์…˜ / ๋”๋ณด๊ธฐ ๋ฒ„ํŠผ ์ธํ„ฐ๋ž™์…˜ 10. ์„ ํƒ ๋ถˆ๊ฐ€, ์„ ํƒ ๊ฐ€๋Šฅ, ์„ ํƒ๋œ ์ƒํƒœ ๋“ฑ ์ •์˜ - ์„ ํƒ ๋ถˆ๊ฐ€ ์‹œ Dimmed ๋œ ๋ฒ„ํŠผ ๋…ธ์ถœ / ์„ ํƒ ๊ฐ€๋Šฅํ•  ๊ฒฝ์šฐ ์ƒ‰์ƒ ๋ณ€๊ฒฝ 11. ๋Œ“๊ธ€ ์˜์—ญ ๊ด€๋ จ ์ •์˜ - ์ธํ„ฐ๋ž™์…˜ / ๋‹ต๊ธ€ / ์‹ ๊ณ  / ๋ฆฌ์ŠคํŠธ ๋…ธ์ถœ ๊ฐœ์ˆ˜ / ๊ธ€์ž ๋…ธ์ถœ ์ˆ˜ / ๊ณต์œ  / ์ข‹์•„์š” ๋“ฑ 12. ๊ทธ ์™ธ ์„œ๋น„์Šค์— ๋”ฐ๋ฅธ ๊ณตํ†ต ์ •์ฑ… - ํŽ˜์ด์ง€๊ฐ„ ์ด๋™ / ํ”„๋กœํ•„ ๋ฐ ๋ฐฐ์ง€ ๋…ธ์ถœ ์ •์ฑ… โœ… ๋น ๋œจ๋ฆฌ๊ธฐ ์‰ฌ์šด ๊ฒƒ๋“ค - '๊ณต๋ฐฑ'์ด ํ‘œ์‹œ๋˜๋Š” ๊ฒฝ์šฐ 1. ์•„๋ฌด๊ฒƒ๋„ ์—†๋‹ค. 2. ๋‹ค๋ฅธ ์ œ์•ˆ์„ ๋ณด์—ฌ์ค€๋‹ค. โœ… ๋ฒ„ํŠผ์ด๋‚˜ ํ•„ํ„ฐ๋ฅผ ๋‘˜ ๋•Œ์˜ ์œ„๊ณ„์งˆ์„œ - ๊ธฐ๋Šฅ์˜ ์œ„๊ณ„์งˆ์„œ 1. ํˆฌ ๋ฒ„ํŠผ ์œ„์น˜ ๋ฐฐ์น˜ (๋ถ€์ • / ๊ธ์ •) 2. ์œ„์น˜์— ๋”ฐ๋ฅธ ์ƒ์„ธ ์ •๋ณด ์ฐจ์ด โœ… ํด๋ฆญ ์˜์—ญ๊ณผ ์ž…๋ ฅ ์˜์—ญ์˜ ์ตœ์†Œ/์ตœ๋Œ“๊ฐ’ - ํ…์ŠคํŠธ ๋ฐ•์Šค์— ์ž…๋ ฅ๋  ํ…์ŠคํŠธ์˜ ์ตœ์†Œ ๊ธธ์ด์™€ ์ตœ๋Œ€ ๊ธธ์ด๋ฅผ ๊ณ„์‚ฐํ•˜๋ฉฐ, ์˜์—ญ์˜ ํฌ๊ธฐ๊ฐ€ ์ ๋‹นํ•œ์ง€ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค. โœ… ์„œ๋น„์Šค ํ”Œ๋กœ์šฐ - ํ”Œ๋กœ์šฐ ์ฐจํŠธ ๋˜๋Š” ์œ ์ € ์‹œ๋‚˜๋ฆฌ์˜ค๋ผ ๋ถˆ๋ฆฌ๋Š” ํ•ญ๋ชฉ์œผ๋กœ, ํ™”๋ฉด์„ ๊ธฐํšํ•  ๋•Œ ๋ˆ„๋ฝ๋˜๋Š” ๊ฒƒ์€ ์—†๋Š”์ง€ ์ ๊ฒ€ํ•  ์ˆ˜ ์žˆ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. โœ… Why!!!!!!!! - '์™œ ์ด๋ ‡๊ฒŒ ํ–ˆ๋Š”๊ฐ€?'์— ๋Œ€ํ•œ ํƒ€๋‹นํ•œ ๊ทผ๊ฑฐ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ง๊ฐ์ด๋‚˜ ์ต์ˆ™ํ•˜๋‹ค ๋˜๋Š” ๋‚จ๋“ค์ด ๊ทธ๋ ‡๊ฒŒ ํ•ด์„œ๊ฐ€ ์•„๋‹ˆ๋ผ, '~์‚ฌ์šฉ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ, ์„œ๋น„์Šค๊ฐ€ ~์‚ฌ์šฉ์ž๋ฅผ ํƒ€๊ฒŸ์œผ๋กœ ํ•œ ~ํ•œ ์ปจ์…‰์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋˜๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ํ•œ์ •์ ์ด๊ธฐ ๋•Œ๋ฌธ์—' ๋“ฑ ์„œ๋น„์Šค๋ฅผ '์™œ' ๊ทธ๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ ๊ธฐํšํ–ˆ๋Š”์ง€ ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. _____________________________________________________ โœ” ์ €๋Š” ์œ„ 10๊ฐ€์ง€ ์ค‘ ๋‹จ์—ฐ Why๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ธฐํš์˜ ์‹œ์ž‘์ด๋ฉฐ, ๊ธฐํš์˜ ๋์ด๋ผ ์ƒ๊ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ์š”. ์–ธ์ œ๋“  Why์— ๋Œ€ํ•œ ๋‹ต์„ ์œ ์—ฐํ•˜๊ฒŒ ์ž˜ ํ•ด๋‚ธ๋‹ค๋ฉด, ๋ฌด์—‡์ด๋“  ์ž˜ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ, Why๋Š” ํƒ€์ธ์„ ์„ค๋“ํ•  ๋•Œ ํ•„์ˆ˜๋กœ ์š”๊ตฌ๋˜๋Š” ์ง€์ ์ž…๋‹ˆ๋‹ค. โœ” ์ €๋Š” Why๋ฅผ ์ € ์ž์‹ ์—๊ฒŒ ๋ฌผ์–ด๋ณธ ํ›„, 'How-What'์œผ๋กœ ๋‚˜์•„๊ฐ€๋Š” ๋ฐฉํ–ฅ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๊ณจ๋“  ์„œํด์ธ๋ฐ, ์ด ์„ธ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ํ†ตํ•ด ํƒ€์ธ์„ ์„ค๋“ํ•˜๊ณค ํ•ฉ๋‹ˆ๋‹ค. ์œกํ•˜์›์น™์€ ์•„๋‹ˆ์ง€๋งŒ Why, How, What์„ ๊ณ ๋ คํ–ˆ์„ ๋•Œ, ๋‚ด๊ฐ€ ์ƒ๊ฐํ•œ ๊ทธ๋ฆฌ๊ณ  ๊ธฐํšํ•œ ์•ˆ๊ฑด์˜ ํ•„์ˆ˜ ๋‚ด์šฉ์ด ํฌํ•จ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค. โœ” ์‹ ์ž…์˜ ๊ฒฝ์šฐ(์ง€๋„ ์ง€๊ธˆ ์‹ ์ž…์ด๋ฉด์„œ), ๋…ผ๋ฆฌ์ ์ธ ํ๋ฆ„์— ๋”ฐ๋ผ ๊ธฐํš์•ˆ์„ ์ž‘์„ฑํ•œ๋‹ค๋ฉด ํ•จ๊ป˜ํ•˜๋Š” ๊ฐœ๋ฐœ์ž, ๋””์ž์ด๋„ˆ ๋“ฑ ๋™๋ฃŒ๋ฅผ ์„ค๋“ํ•˜๋Š”๋ฐ ํ›จ์”ฌ ์ˆ˜์›”ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•„ ๋˜ํ•œ, Why๋Š” ํ•œ ๋ฒˆ๋งŒ ์ƒ๊ฐํ•  ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๊ผฌ๊ผฌ๋ฌผ(๊ผฌ๋ฆฌ์˜ ๊ผฌ๋ฆฌ๋ฅผ ๋ฌผ๊ณ )ํ•˜์—ฌ ์ƒ๊ฐํ•ด๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค. ํŒŒ๊ณ ๋“ค์ˆ˜๋ก ๋”์šฑ ๋ช…ํ™•ํ•œ ๋ชฉ์ ์˜์‹์ด ๋“œ๋Ÿฌ๋‚˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค! โœ” ๊ทธ๋Ÿผ ์‹ ์ž…์ด๋ฉด์„œ ์‹ ์ž…์ด ์•„๋‹Œ ๊ฑฐ ๊ฐ™๊ณ , ์‹ ์ž…์ธ ๊ฑฐ ๊ฐ™๊ธฐ๋„ ํ•œ, ์‹ ์ž…์€ ๊ทธ๋งŒ ๋งํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋ธŒ๋Ÿฐ์น˜ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”!!!!!! ๋ฌผ๋ก , ๋งํฌ๋Š” ์ €์˜ ๊ธ€์ด ์•„๋‹™๋‹ˆ๋‹ค. ๐Ÿ˜‚

์‹ ์ž… UX/UI๊ธฐํš์ž๋ฅผ ์œ„ํ•œ 10๊ฐ€์ง€ ์‹ค์ „TIP

brunch

2021๋…„ 11์›” 23์ผ ์˜ค์ „ 8:24

๋Œ“๊ธ€ 0

์ฃผ๊ฐ„ ์ธ๊ธฐ TOP 10

์ง€๋‚œ์ฃผ ์ปค๋ฆฌ์–ด๋ฆฌ์—์„œ ์ธ๊ธฐ ์žˆ๋˜ ๊ฒŒ์‹œ๋ฌผ์ด์—์š”!

โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ

ํ˜„์ง์ž๋“ค์˜ '์ง„์งœ ์ธ์‚ฌ์ดํŠธ'๊ฐ€ ๋‹ด๊ธด ์—…๊ณ„ ์ฃผ์š” ์†Œ์‹์„ ๋ฐ›์•„๋ณด์„ธ์š”.

์ปค๋ฆฌ์–ด๋ฆฌ | ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์ปค๋ฆฌ์–ด SNS