๐ŸŒŸ ๋””ํ…Œ์ผ์˜ ๊ฐ„๊ฒฉ ์‹œ๋ฆฌ์ฆˆ! [โœ๏ธ ์•„์ฝ”๋””์–ธ UI ๊ตฌ์„ฑ ์‹œ ์ฐธ๊ณ ํ•ด์•ผ ํ•  ๋‚ด์šฉ] (๐Ÿ‘€๊ฐ„๋‹จ ์š”์•ฝ) ๐Ÿ“Œ ๊ณต์ง€์‚ฌํ•ญ ๋“ฑ์—์„œ ์‰ฝ๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์•„์ฝ”๋””์–ธ UI๋Š” ๋‚ด์šฉ์„ ์ ‘๊ณ  ํŽผ์น˜๋Š” ๊ตฌ์กฐ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ฝ˜ํ…์ธ ๋ฅผ ์ˆจ๊ธฐ๊ฑฐ๋‚˜ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณต๋˜๋Š” ๋ฐฉ๋ฒ•์ธ๋ฐ์š”. ์•„์ฝ”๋””์–ธ UI๋ฅผ ํ™œ์šฉํ•˜๋Š” ์ด์œ ๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ฐ•์ œ๋กœ ๋ชจ๋“  ์ •๋ณด๋ฅผ ๋…ธ์ถœํ•˜์ง€ ์•Š๊ณ , ์ œ๋ชฉ ๋“ฑ ํ•„์š”ํ•œ ์ •๋ณด๋งŒ ๋…ธ์ถœํ•ด ์›ํ•˜๋Š” ๊ฒƒ๋งŒ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•œ ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ๐Ÿ“Œ ๊ณต์ง€์‚ฌํ•ญ์„ ์˜ˆ๋กœ ๋“ค๋ฉด, ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—์„œ ๋ชจ๋“  ๋‚ด์šฉ์„ ํŽผ์ณ๋†จ์„ ๋•Œ ์ „์ฒด ๋‚ด์šฉ์„ ํ™•์ธํ•˜๋ ค๋ฉด ์Šคํฌ๋กค์„ ๋งŽ์ด ํ™œ์šฉํ•ด์•ผ ํ•˜๋ฉฐ, ์‚ฌ์šฉ์ž ๊ฐœ๊ฐœ์ธ์—๊ฒŒ ํ•ด๋‹นํ•˜์ง€ ์•Š๋Š” ๋ชจ๋“  ๋‚ด์šฉ์„ ํ™•์ธํ•ด์•ผ ํ•˜๊ธฐ์— ์ธ์ง€ ๋ถ€ํ•˜์˜ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์•„์ง‘๋‹ˆ๋‹ค. ๋•Œ๋ฌธ์— ๊ณต์ง€์˜ ์ œ๋ชฉ๋งŒ ๋ฆฌ์ŠคํŠธ๋กœ ์ œ๊ณตํ•˜๊ณ , ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๋‚ด์šฉ์„ ์Šค์Šค๋กœ ํŽผ์น˜๊ณ  ์ ‘์–ด ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ์œ ๋„ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๐Ÿ“Œ ์•„์ฝ”๋””์–ธ UI ๊ตฌ์„ฑ์€ ํฌ๊ฒŒ 4๊ฐ€์ง€๋กœ ์ด๋ค„์ง‘๋‹ˆ๋‹ค. ํƒ€์ดํ‹€์ด๋‚˜ ๋ ˆ์ด๋ธ”, ํŽผ์น˜๊ธฐ ๋ฐ ๋‹ซ๊ธฐ ์•„์ด์ฝ˜, ๊ทธ๋ฆฌ๊ณ  ์ƒ์„ธ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ์ด๋•Œ ์ค‘์š”ํ•œ ๊ฑด, ๋‹ซ๊ธฐ์™€ ํŽผ์น˜๊ธฐ ์•„์ด์ฝ˜์ž…๋‹ˆ๋‹ค. ๋ณดํ†ต์€ ์•„๋ž˜ ๋ฐฉํ–ฅ ํ™”์‚ดํ‘œ๊ฐ€ ํŽผ์น˜๊ธฐ, ์œ„ ๋ฐฉํ–ฅ ํ™”์‚ดํ‘œ๊ฐ€ ์ˆจ๊ธฐ๊ธฐ์˜ ์˜๋ฏธ๋กœ ํ™œ์šฉ๋ฉ๋‹ˆ๋‹ค. ํŽผ์น˜๊ธฐ์™€ ๋‹ซ๊ธฐ๋ฅผ ์กฐ๊ธˆ ๋” ๋ช…ํ™•ํ•œ ํ–‰๋™์œผ๋กœ ์—ฐ๊ฒฐ๋  ์ˆ˜ ์žˆ๋„๋ก ํƒ€์ดํ‹€ ๋˜๋Š” ๋ ˆ์ด๋ธ” ์˜์—ญ๊นŒ์ง€ ํ„ฐ์น˜ ๊ฐ€๋Šฅํ•˜๋„๋ก ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ™”์‚ดํ‘œ๋Š” ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ ๋“ฑ์—์„œ ์ƒ๋Œ€์ ์œผ๋กœ ์ž‘๊ฒŒ ๋Š๊ปด์ง€๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๐Ÿ“Œ ์•„์ฝ”๋””์–ธ์˜ ์ข…๋ฅ˜๋Š” ํฌ๊ฒŒ ๋‹ค์„ฏ ๊ฐ€์ง€๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค. ๋‹จ์ผ, ์Šคํƒ, ๊ณ„์ธต, ํ…Œ์ด๋ธ”, ํ•„ํ„ฐ๊ฐ€ ๊ทธ ์ฃผ์ธ๊ณต์ธ๋ฐ์š”. ์šฐ๋ฆฌ๊ฐ€ ์ž์ฃผ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์ข…๋ฅ˜๋Š” ์Šคํƒํ˜• ์•„์ฝ”๋””์–ธ์œผ๋กœ ์•„์ฝ”๋””์–ธ์ด ๋ฆฌ์ŠคํŠธ๋กœ ๊ตฌ์„ฑ๋œ ํ˜•ํƒœ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์•ž์„œ ๋งํ•œ ๊ณต์ง€์‚ฌํ•ญ ๋“ฑ์— ์ž์ฃผ ํ™œ์šฉ๋˜๊ณ  ์žˆ์–ด์š”. ๐Ÿ“Œ ์•„์ฝ”๋””์–ธ์„ ๊ตฌ์„ฑํ•  ๋•Œ ์œ ์˜ํ•ด์•ผํ•  ์ ์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋จผ์ €, ๊ฐ ์•„์ฝ”๋””์–ธ ๊ฐ„ ๋ช…ํ™•ํ•˜๊ฒŒ ๊ตฌ๋ถ„์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ๊ตฌ๋ถ„์„ ์ด ์ œ๊ณต๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ตต์€์„  ๋“ฑ์„ ์ œ๊ณต, ๋‹ค๋ฅธ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ์•ˆ๋‚ดํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด์ฃ . ๊ตฌ๋ถ„์„ ์œผ๋กœ ๊ตฌ๋ถ„์ด ์–ด๋ ต๋‹ค๋ฉด ์นด๋“œ ํ˜•ํƒœ๋กœ ์•„์ฝ”๋””์–ธ์„ ๊ฐœ๋ณ„ ์ ์šฉํ•˜๋Š” ๊ฒƒ๋„ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ๋˜ ๋‚ด์šฉ์„ ํŽผ์ณค์„ ๋•Œ, ํฌํ•จ๋œ ๋‚ด์šฉ์„ ๋‹ค๋ฅธ ๋ฐฐ๊ฒฝ๋“ฑ์„ ์ ์šฉํ•ด ๊ตฌ์ฒด์ ์œผ๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ๋„ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํฐ์ƒ‰ ๋ฐฐ๊ฒฝ์— ํšŒ์ƒ‰ ๋ฐฐ๊ฒฝ์„ ์ ์šฉํ•˜๋Š” ์‹! ๐Ÿ“Œ ๊ทธ๋ ‡๋‹ค๋ฉด, ์•„์ฝ”๋””์–ธ์€ ์–ด๋–ป๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”? ์ •๋ง ๋‹ค์–‘ํ•œ ์„œ๋น„์Šค์— ์ ์šฉ๋˜์–ด ์žˆ์ง€๋งŒ, ๋Œ€ํ‘œ์ ์œผ๋กœ ์ œํ’ˆ ์ƒ์„ธํŽ˜์ด์ง€ ๋‚ด ๋ฐฐ์†ก์ •๋ณด, ์‚ฌ์ด์ฆˆ ๋“ฑ์„ ํŽผ์ณ๋ณด๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณต์ง€์‚ฌํ•ญ ๋“ฑ ์ผ์ •์ฃผ๊ธฐ์— ๋”ฐ๋ผ ์—…๋ฐ์ดํŠธ ๋˜๋Š” ๋‚ด์šฉ์ด ์žˆ๋Š” ํ™”๋ฉด์—์„œ๋„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์–ด์š”. ์ž์ฃผ ํ•˜๋Š” ์งˆ๋ฌธ ๋“ฑ์—๋„ ์‰ฝ๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ํผ์ด ํฌํ•จ๋œ ํ™”๋ฉด์—์„œ๋Š” ๊ฐ ํผ์˜ ํƒ€์ดํ‹€๋งŒ ๋ณด์—ฌ์ค€ ๋’ค ์‚ฌ์šฉ์ž๊ฐ€ ๋‚ด์šฉ์„ ํŽผ์ณ ์ž…๋ ฅํ•˜๊ฒŒ ํ•˜๋Š” ๊ณผ์ •์—์„œ ์•„์ฝ”๋””์–ธ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ’ฌ ๋ง๋ถ™์ž„ ์•„์ฝ”๋””์–ธ UI๋Š” ๋ชจ๋ฐ”์ผ์—์„œ ๋” ์ž์ฃผ ํ™œ์šฉ๋˜๋Š” ๊ฒƒ ๊ฐ™์•„์š”. ํ™”๋ฉด์„ ํšจ์œจ์ ์œผ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ•˜๋‚˜์˜ ๋ฐฉ๋ฒ•์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์— ์ถฉ์‹คํ•˜๋˜ ์•„์ฝ”๋””์–ธ์ด ์ ์šฉ๋œ ๋‚ด์šฉ๊ฐ„ ๊ตฌ๋ถ„์ด ์ž˜ ๋˜์ง€ ์•Š๊ฑฐ๋‚˜, ๊ณ„์ธต๊ตฌ์กฐ๋กœ ์ ์šฉํ•˜๋Š” ๊ณผ์ •์—์„œ ๋˜๋ ค ํ”ผ๋กœ๊ฐ์„ ๋ถˆ๋Ÿฌ์ผ์œผํ‚ค๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์–ด์š”. ์•„์ฝ”๋””์–ธ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ•˜๋ฉด ์ข‹์„ ์ง€, ์ž์„ธํžˆ ์ •๋ฆฌ๋œ ๊ธ€์ด๋ผ ํ•จ๊ป˜ ์‚ดํŽด๋ณด๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์œผ๋กœ ์ฝ”๋ฉ˜ํŠธ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

UI cheat sheet: Accordions

Medium

UI cheat sheet: Accordions

2021๋…„ 11์›” 9์ผ ์˜ค์ „ 6:27

๋Œ“๊ธ€ 0