๐Ÿ“ ๊ธฐํš์ž๋“ค์ด ์•Œ์•„์•ผ ํ•  UI ๊ธฐ๋ณธ ์šฉ์–ด ๏ฟฝ | ์ปค๋ฆฌ์–ด๋ฆฌ

๐Ÿ“ ๊ธฐํš์ž๋“ค์ด ์•Œ์•„์•ผ ํ•  UI ๊ธฐ๋ณธ ์šฉ์–ด ๐ŸŽˆ ํ•œ ์ค„ ์š”์•ฝ - ์ „๋ฌธ์ง ๋Œ€ํ‘œ๋‹˜์ด PM์„ ๋งก๊ณ  ๊ณ„์‹ ๋ฐ, UI ์šฉ์–ด๋ฅผ 1๋„ ๋ชฐ๋ผ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. โœ”๏ธ ์šฐ๋ฆฌ ๋Œ€ํ‘œ๋‹˜์€ ๋ณ€ํ˜ธ์‚ฌ๋‹ค. ์ง€๊ธˆ ํšŒ์‚ฌ๋ฅผ ๋งŒ๋“  ์ง€ 1๋…„ 6๊ฐœ์›” ๋๋‹ค. ๊ทธ๋™์•ˆ ๋ณ€ํ˜ธ์‚ฌ ์—…๋ฌด๋งŒ ํ•ด์„œ IT ์—…๊ณ„์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋ชจ๋ฅธ๋‹ค. ํ—ท๊ฐˆ๋ คํ•˜๋Š” ๊ฒƒ๋„ ์•„๋‹ˆ๊ณ  1๋„ ๋ชจ๋ฅธ๋‹ค. ๋‹ค์–‘ํ•œ ์ž๋ฃŒ๋ฅผ ์ข…ํ•ฉํ•ด์„œ ๋ณด๋‚ด๋“œ๋ ค๋„, ์ฑ…์„ ์ถ”์ฒœํ•ด ๋“œ๋ ค๋„ ์ฝ์ง€ ์•Š๋Š”๋‹ค. ๊ธˆ์„ธ ๋˜ ๋ฌผ์–ด๋ณธ๋‹ค. โœ”๏ธ ๊ทธ๋ ‡๋‹ค๊ณ  ๋Œ€ํ‘œ๋‹˜์ด ๋‚˜์ด๊ฐ€ ๋งŽ์€ ๊ฒŒ ์•„๋‹ˆ๋‹ค. ์ด์ œ 37์‚ด, ํ•˜์ง€๋งŒ ๋ณ€ํ˜ธ์‚ฌ๋กœ ์ปค๋ฆฌ์–ด๋ฅผ ์Œ“๊ณ , ์—ด์‹ฌํžˆ ์‚ด์•„์™”๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋ฅด๋Š” ๊ฑฐ ์ธ์ •ํ•œ๋‹ค. ์—…๊ณ„์— ์žˆ์–ด๋„ ์šฉ์–ด๋Š” ๋ชจ๋ฅด๋Š” ์‚ฌ๋žŒ๋“ค ๋งŽ์œผ๋‹ˆ๊นŒ ๊ทธ ์ •๋„๋Š” ๊ทธ๋Ÿด ์ˆ˜ ์žˆ์ง€ ์ƒ๊ฐํ•œ๋‹ค. ๋˜ํ•œ, ํŒ€์ด๋‚˜ ๋ถ€์„œ๋งˆ๋‹ค ์ง€์นญ ์šฉ์–ด๊ฐ€ ๊ฐ€๋” ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ดํ•ดํ•œ๋‹ค. โœ”๏ธ ํ•˜์ง€๋งŒ!! ์ ์–ด๋„ ์ •๋ฆฌํ–ˆ๊ฑฐ๋‚˜, ๋งŒ๋“ค์—ˆ๊ฑฐ๋‚˜, ์ „๋‹ฌํ•œ ์ž๋ฃŒ๋Š” ์ฝ์–ด์•ผ ํ•˜์ง€ ์•Š์„๊นŒ? ๋งˆ์Œ์†์œผ๋กœ ์ƒ๊ฐ๋„ ํ•ด๋ดค๋‹ค. '๋‚ด๊ฐ€ ์ •๋ฆฌ๋ฅผ ์ œ๋Œ€๋กœ ๋ชป ํ–ˆ๋‚˜? ํ˜น์‹œ ์ด๊ฑฐ ๋•Œ๋ฌธ์— ์•ˆ ์ฝ์œผ์‹œ๋‚˜?' ์ด๋Ÿฐ ๋งˆ์Œ์„ ํ•œํŽธ์— ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ์˜ค๋Š˜๋„ ์ด๋ ‡๊ฒŒ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณธ๋‹ค. โœ… ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” UI ์š”์†Œ์™€ ์ปดํฌ๋„ŒํŠธ ์ •๋ฆฌ 1. GNB (Global Navigation Bar) - ์ผ๋ฐ˜์ ์œผ๋กœ ์›น์‚ฌ์ดํŠธ ์ตœ์ƒ๋‹จ์— ์žˆ๋Š” ์ตœ์ƒ์œ„ ๋ฉ”๋‰ด๋ฅผ ์ง€์นญํ•ด์š”. ์›น์‚ฌ์ดํŠธ ์ „์ฒด์—์„œ ๊ณตํ†ต์ ์œผ๋กœ ๋…ธ์ถœ๋˜๋Š” ๋ฉ”๋‰ด์ด๊ณ , ์ฃผ์š” ๋ฉ”๋‰ด๋กœ ๋น ๋ฅด๊ฒŒ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋Š” ๋งํฌ๋ฅผ ํฌํ•จํ•˜์ฃ . ์•„ํ‹ฐํด์—์„œ๋Š” ์›น์˜ ์ดํƒˆ๋ฅ ๊ณผ ์ „ํ™˜์œจ์— ํฐ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋ฏ€๋กœ ๋ฐฐ์—ด ์ˆœ์„œ๋ฅผ ์ถฉ๋ถ„ํžˆ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ๋ณดํ†ต 'Depth1'๋กœ ๋ด์š”. 2. LNB (Local Navigation Bar) - GNB ๋ฉ”๋‰ด๋ฅผ ๋ˆ„๋ฅด๊ฑฐ๋‚˜ ๋งˆ์šฐ์Šค ์˜ค๋ฒ„ ์ƒํƒœ์ผ ๋•Œ ๋ฐœ์ƒ๋˜๋Š” ๋ฉ”๋‰ด์˜ˆ์š”. Sub Menu๋ผ๊ณ ๋„ ๋งํ•˜์ฃ . ์ด ๋ฉ”๋‰ด๋ฅผ ํ†ตํ•ด ์ตœ์ƒ์œ„ ์นดํ…Œ๊ณ ๋ฆฌ ๋ฐ”๋กœ ์•„๋ž˜ ๋ฉ”๋‰ด๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์–ด์š”. ์ €๋Š” ๋ณดํ†ต 'Depth2'๋กœ ๋ด์š”. 3. Main Banner (Hero Banner) - ํ†ต์ƒ์ ์œผ๋กœ ์›น์‚ฌ์ดํŠธ ๋ฉ”์ธ ์ƒ๋‹จ์— ์œ„์น˜ํ•˜๋Š” ๋ฐฐ๋„ˆ์˜ˆ์š”. ๋ณดํ†ต ์›น์‚ฌ์ดํŠธ์— ์ ‘์†ํ–ˆ์„ ๋•Œ, ๋“ฑ์žฅํ•˜์ฃ . ์—ฌ๊ธฐ์—๋Š” ์˜์ƒ๋„ ๋„ฃ๊ณ , ์ด๋ฏธ์ง€๋„ ๋„ฃ๊ณ , ์Šฌ๋ผ์ด๋“œ ํ˜•ํƒœ๋กœ ํ•˜๊ธฐ๋„ ํ•˜๊ณ , ๊ฐ ๋ธŒ๋žœ๋“œ์˜ ํŠน์„ฑ์— ๋”ฐ๋ผ ํšจ๊ณผ๋ฅผ ์ฃผ์ฃ . ์ด ๋ฐฐ๋„ˆ๋Š” "ํ—ค๋” ์˜์—ญ์— ๋ˆˆ์— ๋„๊ฒŒ ๋ฐฐ์น˜๋˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž์˜ ์ฃผ๋ชฉ์„ ๋„๋Š”๋ฐ ํšจ๊ณผ์ "์ด์—์š”. ๋˜ํ•œ, "๊ฐ€์žฅ ์ค‘์š”ํ•œ ์ฝ˜ํ…์ธ ๋ฅผ ๋“ฑ๋ก"ํ•˜์ฃ . 4. Drop Down List - ๋“œ๋กญ ๋‹ค์šด ๋ฆฌ์ŠคํŠธ๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๊ฑฐ๋‚˜ ์˜ค๋ฒ„ํ–ˆ์„ ๋•Œ, ์„ธ๋ถ€ ํ•ญ๋ชฉ๋“ค์ด ํŽผ์ณ์ง€๊ณ  ๊ทธ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•˜๋Š” ์š”์†Œ์˜ˆ์š”. ๋งŽ์€ ๊ฐ’ ์ค‘ ํ•˜๋‚˜๋ฅผ ํƒํ•ด์•ผ ํ•  ๋•Œ ์‚ฌ์šฉ๋˜์ฃ . ๋‹ค๋ฅธ ๋ง๋กœ๋Š” Pulldown Menu๋ผ๊ณ ๋„ ํ•ด์š”. ์—ฌ๋Ÿฌ ํ•ญ๋ชฉ์„ ์ˆจ๊ฒจ๋‘๊ณ  ๋‚˜์—ด๋œ ์ƒํƒœ๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์—, '๊ฐ„๊ฒฐํ•˜๊ฒŒ ํ‘œํ˜„'ํ•˜๊ธฐ ์ข‹์•„์š”. 5. Modal, Popup (๋ชจ๋‹ฌ, ํŒ์—…) - ๋ชจ๋‹ฌ์€ ๊ธฐ์กด์— ์—ด๋ ค์žˆ๋˜ ํŽ˜์ด์ง€ ์œ„์— ์ƒˆ๋กœ์šด ๋ ˆ์ด์–ด๋ฅผ ๋ฎ๋Š” ๊ธฐ๋Šฅ์„ ์˜๋ฏธํ•ด์š”. ๋ชจ๋‹ฌ๊ณผ ํŒ์—…์˜ ํฐ ์ฐจ์ด์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์•„์š”. ยท ๋ชจ๋‹ฌ: ๊ธฐ์กด์— ์—ด๋ ค์žˆ๋˜ ํŽ˜์ด์ง€ ์œ„์— ์ƒˆ๋กœ์šด ๋ ˆ์ด์–ด๋ฅผ ๋ฎ๋Š” ๊ธฐ๋Šฅ ยท ํŒ์—…: ํŽ˜์ด์ง€ ์œ„์— ๋˜ ํ•˜๋‚˜์˜ ๋ธŒ๋ผ์šฐ์ € ํŽ˜์ด์ง€๋ฅผ ๋„์›€ ์•„, ๋ชจ๋‹ฌ์˜ ๊ฒฝ์šฐ, ๋’ท ํŽ˜์ด์ง€๊ฐ€ ๋น„ํ™œ์„ฑํ™”๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•„์š”. ๋ชจ๋‹ฌ๋กœ ๋„์šด ํŽ˜์ด์ง€์— ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . '๋‘ ์ฐฝ ๋ชจ๋‘ ์ฃผ์˜์‚ฌํ•ญ์ด๋‚˜ ๊ณต์ง€ ๋“ฑ ์œ ์ €์˜ ์ด๋ชฉ์„ ๋Œ๊ณ  ์ค‘์š”ํ•œ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•  ๋•Œ ์‚ฌ์šฉ'ํ•ด์š”. 6. ์Šค๋‚ต๋ฐ”, ํ† ๊ธ€, ํˆดํŒ ยท ์Šค๋‚ต๋ฐ”: ์œ ์ €๊ฐ€ ์ˆ˜ํ–‰ํ•œ ์ž‘์—…์— ๋Œ€ํ•œ ๊ฒฐ๊ณผ(ํ”ผ๋“œ๋ฐฑ)๋ฅผ ๊ฐ„๋‹จํ•œ ํ…์ŠคํŠธ ๋ ˆ์ด๋ธ” ํ˜•ํƒœ๋กœ ๋ณด์—ฌ์ฃผ๋ฉฐ, ๋Œ€๋žต 4์ดˆ ๋’ค ํ™”๋ฉด์—์„œ ์ž๋™์œผ๋กœ ์‚ฌ๋ผ์ง€๋ฉฐ, ์•ก์…˜ ๋ฒ„ํŠผ์ด ํ•จ๊ป˜ ํ‘œ์‹œ๋œ๋‹ค๋Š” ์ ์—์„œ ํ”ํžˆ ๋งํ•˜๋Š” ํ† ์ŠคํŠธ ํŒ์—…๊ณผ ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ยท ํ† ๊ธ€: ์Šค์œ„์น˜(Switch)์™€๋„ ๋งŽ์ด ํ†ต์šฉ๋˜๋ฉฐ, ์„ค์ • ์ผœ๊ธฐ/๋„๊ธฐ์™€ ๊ฐ™์€ ํ•ญ๋ชฉ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ยท ํˆดํŒ: ํŠน์ • ํ™”๋ฉด ์š”์†Œ์— ๋งˆ์šฐ์Šค๋ฅผ ๊ฐ€์ ธ๊ฐ€๋ฉด ๋‚˜ํƒ€๋‚˜๋Š” ์„ค๋ช…์ž…๋‹ˆ๋‹ค. ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ ค๋†“์€ ์ƒํƒœ์—์„œ๋Š” ๊ณ„์† ์œ ์ง€๋˜๋ฉฐ, ๋ถ€์—ฐ ์„ค๋ช…์„ ํ‘œ์‹œํ•  ๋•Œ ์œ ์šฉํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค. 7. Input Field์™€ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ - ์ธํ’‹ ํ•„๋“œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ๋Š” ์ž…๋ ฅ๋ž€์ž…๋‹ˆ๋‹ค. ํ…์ŠคํŠธ ํ•„๋“œ, ๋„˜๋ฒ„ ํ•„๋“œ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ฒƒ์ด ์žˆ์–ด์š”. ๋งŒ์•ฝ ํ…์ŠคํŠธ ํ•„๋“œ์— ์œ ํšจํ•œ ๋‚ด์šฉ์„ ์ž…๋ ฅํ•˜์ง€ ์•Š๊ฑฐ๋‚˜, ์ƒ๋žต ๋“ฑ์„ ํ•˜๋ฉด ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ํ†ตํ•ด ์˜ค๋ฅ˜ ์ƒํƒœ๋ฅผ ํ‘œ์‹œํ•˜์—ฌ ์–‘์‹์— ๋งž๋Š” ๋ฐ์ดํ„ฐ ์ž…๋ ฅ์„ ์œ ๋„ํ•ด์š”. 8. Checkbox - ์ฒดํฌ๋ฐ•์Šค๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ชฉ๋ก์—์„œ ๊ฐ’์„ ๋‹ค์ค‘ ์„ ํƒํ•ด์•ผ ํ•  ๋•Œ ์ž์ฃผ ์‚ฌ์šฉํ•ด์š”. ์ฒดํฌ๋ฐ•์Šค์™€ ๋‹ค๋ฅด๊ฒŒ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์„ ํƒ์ง€ ์ค‘ ํ•˜๋‚˜๋งŒ ์„ ํƒํ•ด์•ผ ํ•  ๊ฒฝ์šฐ '๋ผ๋””์˜ค ๋ฒ„ํŠผ'์„ ์‚ฌ์šฉํ•ด์š”. ์„ค๋ฌธ์กฐ์‚ฌ๋กœ ์˜ˆ๋ฅผ ๋“ค๋ฉด, ๋‹ค์ค‘ ์„ ํƒ์ง€๋ฅผ ์ œ๊ณตํ•˜๋ฉด ์ฒดํฌ๋ฐ•์Šค, ๋‹จ์ผ ์„ ํƒ์ง€๋ฅผ ์ œ๊ณตํ•˜๋ฉด ๋ผ๋””์˜ค ๋ฒ„ํŠผ์œผ๋กœ ์ œ๊ณตํ•˜๋ฉด ๋ผ์š”. 9. Accordion - ๋‚ด์šฉ์„ ํŽผ์ณค๋‹ค๊ฐ€ ์ ‘์„ ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ์˜ˆ์š”. ๋ฆฌ์ŠคํŠธ๋ฅผ ์ ‘๊ธฐ, ํŽผ์น˜๊ธฐ์˜ ํ˜•ํƒœ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, '>'๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•ด์š”. CTA ๋ฒ„ํŠผ์—๋„ '>'๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š”๋ฐ, ์ด๋Š” ํ–‰๋™ ์œ ๋„๋กœ ์ด์–ด์ง€์ง€๋งŒ, ๋ฉ”๋‰ด์— ์žˆ๋Š” '>'๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ ์ ‘๊ณ  ํŽผ์น˜๋Š” ํ˜•ํƒœ๋กœ ํ‘œํ˜„๋ผ์š”. 10. Bread Crumb - ๋ธŒ๋ ˆ๋“œ ํฌ๋Ÿผ์€ ๋นต ๋ถ€์Šค๋Ÿฌ๊ธฐ๋ผ๋Š” ์ด๋ฆ„์ฒ˜๋Ÿผ ์‚ฌ์šฉ์ž๊ฐ€ ์ง€๋‚˜์˜จ ์œ„์น˜, ํ˜„์žฌ ์œ„์น˜๋ฅผ ์‹œ๊ฐ์ ์ธ ๊ณ„์ธต ๊ตฌ์กฐ๋กœ ๋‚˜ํƒ€๋‚ด๋Š” ๋‚ด๋น„๊ฒŒ์ด์…˜์ด์—์š”. ๊ตฌ๋ถ„์ž, ์•„์ด์ฝ˜ ๋“ฑ์„ ํ†ตํ•ด ์›น ์‚ฌ์ดํŠธ์˜ ์ •๋ณด ๊ตฌ์กฐ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ , ์ƒ์œ„ ๋˜๋Š” ํ•˜์œ„ ํŽ˜์ด์ง€๋กœ ์†์‰ฝ๊ฒŒ ์ด๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค˜์š”. ๋ณดํ†ต 'PC ์›น ํ™˜๊ฒฝ์—์„œ ์ž์ฃผ ํ™œ์šฉ๋˜๋Š” ์ •๋ณด ๊ตฌ์กฐ ๊ธฐ๋ฒ•'์ด์ฃ . โœ”๏ธ ์ด์ƒ ๋‚ด์šฉ ์ •๋ฆฌ๋ฅผ ๋๋‚ธ๋‹ค. ๋‹ค์‹œ ํ•œ๋ฒˆ ๋Œ€ํ‘œ์—๊ฒŒ ์ „๋‹ฌํ•  ์˜ˆ์ •์ธ๋ฐ, ์ด๋ฒˆ์—๋Š” ์ฝ์–ด๋ณด๊ฒ ์ง€? ๋” ์ฝ์–ด๋ณด์ง€ ์•Š์œผ๋ฉด? ๋ญ ์–ด์ฉŒ๊ฒ ์–ด, ๋˜ ๋‹ค๋ฅธ ๋‚ด์šฉ์„ ์ฐพ์•„์„œ ์ •๋ฆฌํ•ด์•ผ์ง€. ์•ˆ ๊ทธ๋ ‡์Šต๋‹ˆ๊นŒ? ๐Ÿ˜‚

๊ธฐํš์ž๋“ค์ด ์•Œ์•„์•ผ ํ•  UI ๊ธฐ๋ณธ ์šฉ์–ด | ์š”์ฆ˜IT

Wishket

2022๋…„ 2์›” 18์ผ ์˜คํ›„ 2:17

๋Œ“๊ธ€ 0

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

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

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

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

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