๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Frontend Dev/๐Ÿฅ ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  FE ๋ถ€ํŠธ์บ ํ”„

Section4 Unit4 [UX/UI] Design System - ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๊ธฐ

๋ฐ˜์‘ํ˜•


Section4 Unit4 [UX/UI] Design System - ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๊ธฐ

 

๐Ÿ“Œ Chapter3. ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๊ธฐ

๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋„์ž…ํ•˜๊ธฐ ์ข‹์€ ์‹œ๊ธฐ : ์ œํ’ˆ๊ตฐ ๋ฐ ๊ธฐ๋Šฅ์ด ํ™•์žฅ๋  ๋•Œ, ๊ด€๋ จ๋œ ์ธ์›์ด ๋Š˜์–ด๋‚  ๋•Œ, ์ฑ„๋„์ด ํ™•์žฅ๋  ๋•Œ

 

 

 

 

โญ๏ธ ๊ณผ์ œ. ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๊ธฐ

 ์ง€๋‚œ ๊ณผ์ œ์˜€๋˜ Component Library๋Š” ๊ฒจ์šฐ ์–ด๋–ป๊ฒŒ ํ•ด์„œ ์ œ์ถœ์„ ํ–ˆ๋Š”๋ฐ, ์ด๋ฒˆ ๊ณผ์ œ์ธ ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๊ธฐ๋Š” ํ•  ์—„๋‘๊ฐ€ ์•ˆ๋‚˜์„œ ํฌ๊ธฐํ–ˆ๋‹ค. ์–ด๋–ค ๋ถ€๋ถ„์ด ํ•  ์—„๋‘๊ฐ€ ๋‚˜์ง€ ์•Š์•˜๋ƒํ•˜๋ฉด, ์Šคํ† ๋ฆฌ๋ถ์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ์„œ ๋ง‰ํ˜”๋‹ค. ๋ผ์ด๋ธŒ ์„ธ์…˜ ๊ฐ•์˜๋ฅผ ๋ณด๊ณ  ์Šคํ† ๋ฆฌ๋ถ์„ ์„ธํŒ…ํ•˜๊ณ , ์ปดํฌ๋„ŒํŠธ ํ•˜๋‚˜๋ฅผ ๋งŒ๋“ค๊ธฐ๋Š” ํ–ˆ๋Š”๋ฐ ๊ธ€์Ž„... ์ง€๋‚œ Section3 ์—์„œ๋„ ์Šคํ† ๋ฆฌ๋ถ์„ ์ œ๋Œ€๋กœ ๋ณด์ง€ ์•Š์•„์„œ ์ด๋ฒˆ Section์—์„œ ๋‹ค์‹œ ํ•ด๋ณด๋ ค๋‹ˆ ๋นˆ ์Šค์ผ€์น˜๋ถ์— ๋ญ˜ ํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๋Š” ๊ธฐ๋ถ„์ด์—ˆ๋‹ค. 

 

 ๊ทธ๋ž˜์„œ! ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋””์ž์ธ ์‹œ์Šคํ…œ์— ์ถ”๊ฐ€ํ•  ๊ฒƒ์ธ์ง€ ๋ถ„์„๊นŒ์ง€๋งŒ ํ–ˆ๋‹ค ^-^

 (์ด๊ฒƒ๋„ ๊ฑฐ์˜ ๋ญ, ๊ฐ•์˜๋ณด๊ณ  ๋”ฐ๋ผํ•œ ์ˆ˜์ค€...์ด์ง€๋งŒ ์š”๋Ÿฐ๊ฑด ๋‹น์—ฐ ์ดํ•ด๋Š” ํ–ˆ๋‹ค๊ตฌ,,)

UI ์ธ๋ฒคํ† ๋ฆฌ ์ž‘์„ฑ ๋ฐ ๋ถ„์„ ๋‹จ๊ณ„

 ์ž, ์ด์ œ ์Šคํ† ๋ฆฌ๋ถ์„ ์‚ฌ์šฉํ•  ์ค„ ์•ˆ๋‹ค๋ฉด, ์ด๊ฑธ ์Šคํ† ๋ฆฌ๋ถ ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค๋ฉด ๋œ๋‹ค! ใ…Ž-ใ…Ž ์ฆ๊ฑฐ์›Œ๋ž

 ๋ผ์ด๋ธŒ ์„ธ์…˜ ๋ณด๋ฉฐ ์ € ๊ท€์—ฌ์šด ๋ถ๋งˆํฌ ๋ณ„ ํ•˜๋‚˜ ์Šคํ† ๋ฆฌ๋ถ์— ์ปดํฌ๋„ŒํŠธ๋กœ ์ถ”๊ฐ€ํ–ˆ๋‹ค ๐Ÿ™‚

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

 ์˜ค๋Š˜ ๊ณผ์ œ๋Š” ํ•˜์ง€๋„ ์•Š๊ณ ์„œ ์ฃผ์ €๋ฆฌ์ฃผ์ €๋ฆฌ ๋ง์ด ๋งŽ์•˜๋„ค..ใ…Žใ…Ž


๐ŸŒ™  ์˜ค๋Š˜์˜ ํšŒ๊ณ 

 ์ด๋ฒˆ์—” ์–ด์ œ ์˜ค๋Š˜, ์ดํ‹€๋™์•ˆ์˜ ํšŒ๊ณ ๋ฅผ ํ•œ๋ฒˆ์— ์ ๋Š”๋‹ค. TIL ๋ธ”๋กœ๊น…์„ ์‹œ์ž‘ํ•˜๊ณ ์ž ํ–ˆ์„ ๋•Œ, ํ•œ ์œ ๋‹›์— ํ•œ๋ฒˆ์”ฉ ๋ฐฐ์šด ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๊ณ  ํšŒ๊ณ  ๊ธ€์„ ์“ธ๊นŒ ํ•˜๋‹ค๊ฐ€ ์œ ๋‹›๋ณ„๋กœ ๋‚ด์šฉ์ด ๋งŽ์€ ๋ถ€๋ถ„์ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ํ•˜๋ฃจ์— ํ•œ๋ฒˆ์”ฉ ๊ธ€์„ ์“ฐ๊ธฐ๋กœ ๊ฒฐ์‹ฌํ–ˆ์—ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ ํ•™์Šตํ•œ ๋‚ด์šฉ์€ ์ œ๋Œ€๋กœ ์ •๋ฆฌ๋ฅผ ๋ชปํ•ด๋„, ์ด๋ ‡๊ฒŒ ํ•˜๋ฃจ๋ฅผ ๋Œ์•„๋ณด๋Š” ์‹œ๊ฐ„์€ ํ•˜๋ฃจ๋„ ๋น ์ง์—†์ด ๋งค์ผ ๊ฐ€์กŒ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ํ•ญ์ƒ ์‹œ์ž‘์€ ํ•ด๋†“๊ณ  ๋๋งบ์Œ์ด ์•„์‰ฌ์› ๋˜ ๋‚˜์—๊ฒŒ ๋๋งบ์Œ์„ ๊ผญ ํ•ด๋ณด๋ผ๊ณ , ๋‚˜๋ฆ„ ๊ณต๊ฐœ์ (? ์•„๋ฌด๋„ ์ฝ์ง€๋Š” ์•Š์ง€๋งŒ..ใ…Žใ…Ž)์ธ ๊ณต๊ฐ„์— ์—…๋กœ๋“œ๋ฅผ ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ์ ์–ด๋„ ๋‹ค์Œ ์ฃผ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์ „๊นŒ์ง€, Section4๋ฅผ ๋งˆ๋ฌด๋ฆฌ ํ•  ๋•Œ๊นŒ์ง€๋Š” ๊พธ์ค€ํžˆ ์ด ์‹œ๊ฐ„์„ ๊ฐ€์ง€๊ฒŒ ๋  ๊ฒƒ์€ ํ™•์‹คํ•ด์กŒ๋‹ค. ๋‚˜๋ฆ„์˜ ๋๋งบ์Œ์„ ํ•˜๊ฒŒ ๋œ ๊ฒƒ ๊ฐ™๋‹ค๋ž„๊นŒ. ํ”„๋กœ์ ํŠธ์— ๋“ค์–ด๊ฐ€๋ฉด ์•„๋งˆ ๋ธ”๋กœ๊ทธ์— ๊ธ€์„ ๋งค์ผ๊ฐ™์ด ์˜ฌ๋ฆด ๊ฒƒ ๊ฐ™์ง€๋Š” ์•Š๋‹ค. ์ปค๋ฆฌํ˜๋Ÿผ ์ƒ์˜ ํ•™์Šต์€ ๋์ด ๋‚˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

 ๋‹ค์Œ์ฃผ ๊ธˆ์š”์ผ์ด ํ”„๋กœ์ ํŠธ์˜ ์‹œ์ž‘๋‚  ์ด๋ผ๋Š” ๊ฒƒ์„ ์–ด์ œ ๋งˆ์น ๋•Œ ์ฏค์— ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋ž˜๋„ 2์ฃผ ์ •๋„๋Š” ๋‚จ์€ ์ค„ ์•Œ์•˜๋Š”๋ฐ, ๋ฒŒ์จ ๋‹ค์Œ์ฃผ๊ฐ€ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘์ด๋ผ๊ณ  ํ•˜๋‹ˆ ๊ฐ‘์ž๊ธฐ ๋ง‰๋ง‰ํ•˜๊ณ , ๋งˆ์Œ์ด ๊ธ‰ํ•ด์กŒ๋‹ค. ์•„์ง react๋„, redux๋„ ๋„ˆ๋ฌด ๋งŽ์ด ๋ถ€์กฑํ•˜๊ณ , ์„œ๋ฒ„๋„ ๊ณต๋ถ€ํ•˜๋‹ค ๋งŒ ๋ถ€๋ถ„์ด ๋„ˆ๋ฌด ๋งŽ์€๋ฐ ๋ฒŒ์จ ํ”„๋กœ์ ํŠธ์— ๋“ค์–ด๊ฐˆ ์ค€๋น„๋ฅผ ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฑธ ๋ถ€์ •ํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค ๐Ÿฅฒ

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

 ๊ทธ๋ž˜์„œ ์–ด์ œ์˜ค๋Š˜ ์กฐ๊ธˆ ๋‹ต๋‹ตํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ๋ฌผ๋ก  ์ง€๊ธˆ๋„ ๋‹ต๋‹ตํ•˜๋‹ค. ์ž ์ž๋Š” ์‹œ๊ฐ„์„ ๋” ์ค„์—ฌ์•ผ ํ•˜๋‚˜, ํŒ€ ํ”„๋กœ์ ํŠธ๋ง๊ณ ๋„ ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค๋„ ์ค€๋น„ํ•ด์•ผํ•˜์ง€ ์•Š๋‚˜, ์ฝ”๋”ฉํ…Œ์ŠคํŠธ ์ค€๋น„๋Š” ์ „ํ˜€ ์•ˆ๋˜์–ด ์žˆ๋Š”๋ฐ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ณต๋ถ€๋ฅผ ํ•  ์‹œ๊ฐ„์„ ๋”ฐ๋กœ ๋นผ๋ด์•ผ ํ•˜๋‚˜, ์•„๋‹ˆ ๊ทธ์ „์— ํŒ€ ํ”„๋กœ์ ํŠธ ์ž˜ ํ• ์ˆ˜ ์žˆ์„๊นŒ, ์ž˜ ์•ˆ๋˜๋ฉด ์–ด์ฉŒ์ง€, ์ž˜ ๋ชปํ•˜๋ฉด ์–ด๋–ปํ•˜์ง€. ์—ด์‹ฌํžˆํ•˜๋ฉด ์ž˜ ๋ ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋˜ ๋ชจ๋“  ๋ถ€๋ถ„๋“ค์ด ๊ฑฑ์ •์œผ๋กœ ๋ฐ”๋€Œ์–ด ์“ฐ๋‚˜๋ฏธ์ฒ˜๋Ÿผ ํ•œ์ˆœ๊ฐ„์— ๋ชฐ๋ ค์™”๋‹ค. ๊ดœ์ฐฎ์„๊นŒ?

 ์ข€ ๋” ๊ณ„ํš์„ ๊ตฌ์ฒดํ™”ํ•˜๊ณ , ์ƒ๊ฐ์„ ํ•ด๋ด์•ผ๊ฒ ๋‹ค. (์•„, ์Šคํ† ๋ฆฌ๋ถ ๊ณผ์ œ ํŒจ์Šคํ•ด๋ฒ„๋ฆฐ๊ฑฐ ์ฐ์ฐํ•ด..๐Ÿซ )

 

 

๋ฐ˜์‘ํ˜•