๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ

2025๋…„ 4์›” 17์ผ

ํ”Œ๋žซํผ ์Šค์ฟผ๋“œ ์ฃผ๊ฐ„ ํšŒ์˜๋ก

๊ฐœ์ธ๋ณ„ ์•„์  ๋‹ค

๊ณต์œ ํ•˜๊ณ  ์‹ถ๊ฑฐ๋‚˜, ๋…ผ์˜ํ•ด์•ผํ•  ์‚ฌํ•ญ์„ ์ ์–ด์ฃผ์„ธ์š”.

๋ชฉํ‘œ

๋ฏธํŒ…์˜ ์ฃผ์š” ๋ชฉํ‘œ ๋ฐ ๋…ผ์˜ํ•  ์‚ฌํ•ญ์„ ์ ์–ด์ฃผ์„ธ์š”.
โ€ข
์–ด๋А์ •๋„ ์™„๊ฒฐ์„ฑ์„ ๊ฐ–์ถ˜ ๋””์ž์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ (์Šคํ† ๋ฆฌ๋ถ)
Why
โ—ฆ
DE - Figma์—์„œ๋Š” ๊ทธ๋ž˜๋„ ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” ๊ฐ–์ถฐ์ ธ ์žˆ์Œ
โ—ฆ
FE ์‹œ๊ฐํ™”๋œ ์ž๋ฃŒ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์—…๋ฐ์ดํŠธ๋‚˜ ์ˆ˜์ • ๋“ฑ์— ๊ต‰์žฅํžˆ ๋ณ€์ˆ˜๊ฐ€ ๋งŽ์Œ ๋””์ž์ธ - ์ฝ”๋“œ ์ƒ์˜ ์ด๊ฒฉ์ด ๋งŽ์ด ํฐ ์ƒํƒœ์ž„
โ—ฆ
์Šคํ† ๋ฆฌ๋ถ์ด ๊ฐ€์žฅ ์ตœ์‹ ํ™”๋œ ๊ธฐ์ค€์ด ๋˜์–ด์•ผ ํ•œ๋‹ค.
โ–ช
๋””์ž์ด๋„ˆ์™€ ์—”์ง€๋‹ˆ์–ด์—๊ฒŒ ์•ฝ์†๋œ ๊ธฐ๋Šฅ
โ—ฆ
Docs๊ฐ€ ๋ถ€์‹คํ•˜๋‹ค.
โ–ช
DE ์‚ฌ์šฉ์„ฑ ๋ฐ ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ๊ฐ€์ด๋“œ๊ฐ€ ๋ถ€์‹คํ•˜๊ฑฐ๋‚˜ ์—†์Œ
โ–ช
FE ์–ด๋–ป๊ฒŒ ์ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”๊ฐ€ ๊ฐ€์ด๋“œ๊ฐ€ ์—†์Œ
โ—ฆ
ํ”ฝ์…€ ํผํŽ™ํŠธ ๋“ฑ์˜ ์ด๊ฒฉ
โ—ฆ
๋‹น์—ฐํžˆ ์‹ ๊ทœ ์ปดํฌ๋„ŒํŠธ ์ถ”๊ฐ€ ๋ฐ ๊ด€๋ฆฌ์—์„œ ์˜ˆ์ธกํ•˜์ง€ ๋ชปํ•œ ๋ณ€์ˆ˜๋“ค์ด ๋ฐœ์ƒํ•˜๊ธฐ ๋งค์šฐ ์‰ฌ์›€
โ€ข
ํ”Œ๋žซํผ ์ƒ์—์„œ์˜ ๊ณตํ†ตํ™” ๋ถ€์žฌ
โ—ฆ
์•กํ‹ฐ๋น„ํ‹ฐ๋ฅผ ๋„์›Œ์ฃผ๋Š” ํ™”๋ฉด๋“ค์ด ๊ณตํ†ตํ™”๋˜์ง€ ์•Š์•˜๋‹ค ๋ณด๋‹ˆ๊นŒ 1๊ฐœ๋ฅผ ๋งŒ๋“ค์–ด์„œ N๊ฐœ์˜ ํ™”๋ฉด์— ๋‹ค ํ…Œ์ŠคํŠธ ํ•ด์•ผํ•˜๋Š” ์ˆ˜๊ณ ๋กœ์›€
โ–ช
์ƒ๊ฐํ•ด ๋ณด๋‹ˆ ํŠธ๋ฆฌ UI๋กœ ๊ฐค๋Ÿฌ๋ฆฌ ๋ทฐ๋กœ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋“ฑ๋„ ์žˆ์Œ
โ—ฆ
์ž‘์—…์ž์™€ ์œ ์ €๋Š” (์ธํ’‹์„ ๋„ฃ์—ˆ์œผ๋‹ˆ๊นŒ ์•„์›ƒํ’‹์ด ์ œ๋Œ€๋กœ ์ถœ๋ ฅ๋ ๊ฑฐ๋ผ๋Š” ๋ง‰์—ฐํ•œ ๋ฏฟ์Œ์ด ์žˆ์Œ)
โ€ข
MCP AI ๋„์ž…
โ—ฆ
LLM์„ ํ†ตํ•œ ํ”ฝ์…€ ํผํŽ™ํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์Œ โ†’ DS๋ฅผ ๊ธฐ์ค€์œผ๋กœ
โ—ฆ
DS์™€ ๊ตฌํ˜„์˜ ์ผ์น˜๊ฐ€ ๋†’์•„์•ผ ์ˆ˜์›”ํ•˜์ง€ ์•Š์„๊นŒ?

ย ์ƒˆ๋กœ์šด ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ๋„์ž…ํ•œ๋‹ค.

- Figma โ†’ MCP โ†’ ์• ๋‹ˆ๋งˆ โ†’ Figma - ํฌ๋กœ๋งคํ‹ฑ์„ ๋˜์‚ด๋ฆฌ๊ธฐ - ํŽ˜์ด์ง€ ๋‹จ์œ„์˜ ๊ณตํ†ตํ™”

โ€ข
ํฌ๋กœ๋งคํ‹ฑ ๋‹ค์‹œ ์‚ฌ์šฉํ•˜๊ธฐ (๋ฆฌ๋ทฐ์–ด : ๋””์ž์ด๋„ˆ) (์ง€๊ธˆ ๋ฐ”๋กœ ์›Œํฌํ”Œ๋กœ์šฐ)
โ—ฆ
์ž‘์—…์„ ์™„๋ฃŒํ•˜๋ฉด ํฌ๋กœ๋งคํ‹ฑ์— ์˜ฌ๋ ค์„œ ๋‹ด๋‹น ๋””์ž์ด๋„ˆ์—๊ฒŒ ๋ฆฌ๋ทฐ ์š”์ฒญ์„ ํ•œ๋‹ค.
โ—ฆ
๊ธฐ๋Šฅ์€ ๋ฒ„๊ทธ๋ฐฐ์‹œ๋ฅผ ํ†ตํ•ด์„œ ๊ฒ€์ˆ˜ํ•œ๋‹ค.
โ€ข
StoryBook 1์ฐจ ์ •๋ฆฌ (ํ”ผ๊ทธ๋งˆ๋ฅผ ๊ธฐ์ค€์œผ๋กœ) (5์›”์ดˆ์—์„œ ๋ง๊นŒ์ง€)
โ€ข
ํ”„๋ก ํŠธ ๋‹จ์—์„œ ์ž๋ฐœ์  ์ •๋ฆฌ๋ฅผ ํ•˜๋Š” ๊ฒƒ์œผ๋กœ
โ€ข
๋””์ž์ธ ์‹œ์Šคํ…œ (Figma 2.0) (6์›”๊นŒ์ง€)

Design System 2.0 (์‚ด์•„์žˆ๋Š” ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๊ธฐ)

์ฃผ์š” ๋…ผ์˜ ์‚ฌํ•ญ

๋ฏธํŒ… ์ค‘ ๋…ผ์˜๋œ ์ฃผ์š” ์ฃผ์ œ์™€ ๊ฒฐ๋ก ์„ ์ ์–ด์ฃผ์„ธ์š”.
๋…ผ์˜ ์ฃผ์ œ 1
โ€ข
๋…ผ์˜ ๋‚ด์šฉ:
โ€ข
๊ฒฐ๋ก /๊ฒฐ์ •:

์•ก์…˜ ํ”Œ๋žœ

ํ›„์† ์ž‘์—…๊ณผ ํ”Œ๋žœ์„ ์ ์–ด์ฃผ์„ธ์š”.

๊ธฐํƒ€ ์‚ฌํ•ญ

Q&A ๋“ฑ ๊ธฐํƒ€ ๋…ผ์˜๋œ ์‚ฌํ•ญ์„ ์ ์–ด์ฃผ์„ธ์š”.