Design System

Design System

์—ฌ๋Ÿฌ ํŽ˜์ด์ง€์—์„œ ๊ณต์œ  ์–ธ์–ด์™€ ์‹œ๊ฐ์  ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ์ค‘๋ณต์„ ์ค„์—ฌ ๋Œ€๊ทœ๋ชจ๋กœ ๋””์ž์ธ์„ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์ผ๋ จ์˜ ํ‘œ์ค€

  • ๋ช…ํ™•ํ•œ ํ‘œ์ค€์— ๋”ฐ๋ผ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ๋ชจ์Œ์œผ๋กœ, ์—ฌ๋Ÿฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•ด ํ•จ๊ป˜ ์กฐ๋ฆฝํ•ด์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

  • ๋””์ž์ด๋„ˆ, ๊ฐœ๋ฐœ์ž ๋“ฑ ๋‹ค์–‘ํ•œ ๊ด€๋ จ ํŒ€์ด ๋””์ง€ํ„ธ ์ œํ’ˆ์„ ๋””์ž์ธํ•˜๊ณ  ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ๋„์›€์ด ๋˜๋Š” ์ฐธ๊ณ  ์ž๋ฃŒ๋กœ ์‚ฌ์šฉ๋จ

์žฅ์ 

  • ๋””์ž์ธ๋ถ€ํ„ฐ ํ”„๋กœ๋•์…˜ ์›Œํฌํ”Œ๋กœ์šฐ๊นŒ์ง€ ๊ฐ„์†Œํ™”

  • ๋””์ž์ธ - ๊ฐœ๋ฐœํŒ€ ๋‚ด์—์„œ ํ†ตํ•ฉ๋œ ์–ธ์–ด ์ƒ์„ฑ

  • ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ์™€ ๊ณต์œ ๋œ ๋…ผ๋ฆฌ์  ๊ทผ๊ฑฐ๋ฅผ ํ†ตํ•ด ์ œํ’ˆ ๊ฐœ๋ฐœ ์†๋„ ํ–ฅ์ƒ

  • ๋”์šฑ ์‘์ง‘๋ ฅ ์žˆ๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ ์ผ๊ด€๋œ ๋””์ž์ธ ์–ธ์–ด๋ฅผ ํ†ตํ•ด ๋” ๋‚˜์€ ์ œํ’ˆ ์ œ๊ณต

  • ์„ค๊ณ„ ๋ฐ ๊ธฐ์ˆ  ๋ถ€์ฑ„ ๊ฐ์†Œ๋ฅผ ํ†ตํ•œ ์œ ์ง€ ๊ด€๋ฆฌ ๋ฐ ํ™•์žฅ์„ฑ ๊ฐœ์„ 

  • ๊ณตํ†ต๋œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์—ฌ ํŒ€์ด ์‚ฌ์šฉ์ž ์š”๊ตฌ์‚ฌํ•ญ์„ ํ•ด๊ฒฐํ•˜๋Š”๋ฐ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ์Œ

๋‘ ๊ฐ€์ง€ ์ค‘์š”ํ•œ ์š”์†Œ

the design repository

  • Style Guide โ†’ ์ธํ„ฐํŽ˜์ด์Šค ๋˜๋Š” ๊ธฐํƒ€ ๋””์ž์ธ์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๊ตฌ์ฒด์ ์ธ ๊ตฌํ˜„ ์ง€์นจ, ์‹œ๊ฐ์  ๋ ˆํผ๋Ÿฐ์Šค ๋ฐ ๋””์ž์ธ ์›์น™์ด ํฌํ•จ

  • Component Library โ†’ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํฌํ•จ๋˜๋ฉฐ ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž ๋ชจ๋‘ ํŠน์ • UI ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด ๋ฐฐ์šฐ๊ณ  ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์›๋ณธ์˜ ์—ญํ• ์„ ํ•จ

  • Pattern Library โ†’ UI ์ปดํฌ๋„ŒํŠธ ๊ทธ๋ฃน ๋˜๋Š” ๋ ˆ์ด์•„์›ƒ์˜ ์ปฌ๋ ‰์…˜์„ ์ œ๊ณต, ์ผ๋ฐ˜์ ์œผ๋กœ ์ฝ˜ํ…์ธ  ๊ตฌ์กฐ, ๋ ˆ์ด์•„์›ƒ ๋ฐ ํ…œํ”Œ๋ฆฟ์„ ํฌํ•จํ•œ๋‹ค.

the people who manage it

  • ์ง€์†์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” Design-system Team

MFA์™€ Design System ๊ด€๊ณ„

  • ๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋Š” ํ•˜๋‚˜์˜ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด์ง€๋งŒ ๊ฐ ๋งˆ์ดํฌ๋กœ ์•ฑ๋“ค์„ ๊ด€๋ฆฌํ•˜๋Š” ํŒ€๋“ค์ด ์žˆ์Œ

  • ํ•˜๋‚˜์˜ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ธ๋ฐ ์„œ๋กœ ๋‹ค๋ฅธ ์„œ๋น„์Šค์ฒ˜๋Ÿผ ๋ณด์ด๋ฉด ์™„์„ฑ๋„๊ฐ€ ๋–จ์–ด์ ธ ๋ณด์ž„, ์‚ฌ์šฉ์ž์—๊ฒŒ ์ผ๊ด€์ ์ธ ๊ฒฝํ—˜์„ ์ฃผ์ง€ ์•Š์œผ๋ฉด ์‹ ๋ขฐ์— ์˜ํ–ฅ์„ ์คŒ

  • ์—ฌ๋Ÿฌ End-to-End ํŒ€๋“ค์ด ๊ฐ๊ฐ ์ž‘์—…์„ ํ•˜๋‹ค๋ณด๋ฉด ํŒŒํŽธํ™”๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Œ

  • ๋””์ž์ธ๊ณผ ๊ฐœ๋ฐœ์˜ SSOT๊ฐ€ ํ•„์š”ํ•˜๊ณ , ๋””์ž์ธ ์›์น™๊ณผ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ๊ด€๋ฆฌ๊ฐ€ ํ•„์ˆ˜

  • ๋””์ž์ธ ์‹œ์Šคํ…œ์€ ์ผ๋ฐ˜์ ์œผ๋กœ ๊ด€๋ฆฌ๋ฅผ ํ•˜๋Š” ๋งŒํผ ๊ฐ•๋ ฅํ•œ ํž˜์„ ๊ฐ€์ง€๊ฒŒ ๋จ

  • ๊ด€๋ฆฌ์— ๋“ค์–ด๊ฐ€๋Š” ๋…ธ๋ ฅ์ด ํฌ๊ธฐ ๋•Œ๋ฌธ์— ํ˜„์‹ค์ ์ธ ๋ฌธ์ œ๊ฐ€ ์žˆ์ง€๋งŒ ๋„์ž…์„ ๊ผญ ๊ฒ€ํ† ํ•ด์•ผ ํ•˜๋Š” ์‹œ์Šคํ…œ

Last updated