당연해진 디자인시스템, 그다음 이야기: AST와 MCP로 여는 미래 #우아콘2025 #우아한형제들

우아한테크·우아콘 2025 2025·7개월 전·

#design-system#figma#mcp#developer-tools#abstract-syntax-tree#codemod

AI 요약

2022년부터 구축한 우아한형제들 디자인 시스템 '우아한공방'이, 네 명 이하 web developer가 연 천 건 넘는 문의를 처리하고 Figma·코드가 시스템에서 이탈하는 문제에 부딪힌다. 발표는 사용 현황 분석과 AST 기반 탐지·codemod를 거쳐, 문의를 더 빨리 답하는 대신 질문 자체를 없애는 MCP 통합으로 확장한 과정을 소개한다.

핵심 포인트

Figma component detach나 custom tag·style 사용으로 update·bug fix가 사용처에 전파되지 않던 이탈을, Figma REST API 집계와 plugin으로 시스템 밖 node를 표시해 designer가 바로 고치게 함
코드는 GitLab CI에서 Babel AST visitor로 import·design token·hardcoded value를 file·line 단위로 찾고, codemod로 custom style을 공식 token으로 변환해 분석을 개선 행동까지 연결
90여 개 component의 TypeScript·Storybook·Markdown·guide를 Markdown/구조화 데이터로 변환해 MCP server에 통합하고, 공통 규칙 조회·component 검색을 tool로 노출(Levenshtein·alias·한영 대응 fuzzy search)
dashboard 구성 규칙·조합 제한·UX writing을 MCP rule로 쓰고, Figma MCP와 함께 호출해 design을 시스템 component로 구현하며 migration prompt가 분석 tool·codemod를 순서대로 실행

왜 읽나디자인 시스템의 이탈·문의 폭증을 겪는 팀에게, AST 탐지·codemod와 MCP로 AI가 시스템 맥락에 맞는 코드 생성·전환까지 수행하게 만든 확장 설계.

챕터별 상세

012:43 – 6:15

당연해진 디자인 시스템이 마주한 연결 단절

2022년부터 구축한 우아한공방은 core·clay·mold 계층과 공식 문서, Storybook, Figma, plugin을 갖췄지만 네 명 이하의 web developer가 연간 천 건이 넘는 문의를 처리해야 했다. 촉박한 일정에서 Figma component를 detach하거나 custom tag와 style을 쓰면 디자인 시스템의 update와 bug fix가 사용처에 전파되지 않아, 실제 사용 현황을 파악하고 다시 연결하는 일이 우선 과제가 됐다.

Figma REST API의 JSON에서 token과 component 사용률을 집계하고 plugin으로 시스템 밖 node를 표시해 designer가 이탈 지점을 바로 고칠 수 있게 했다. Code 영역은 GitLab CI에서 Babel AST visitor로 import, design token, hardcoded value를 찾아 file과 line을 제시하고, codemod로 custom style을 공식 token으로 변환해 분석이 실제 개선 행동까지 이어지도록 만들었다.

발표자는 많은 문의에 더 빨리 답하는 대신 질문 자체를 없애고 답변을 자동화할 수 있는지 문제를 다시 정의한다. 90개가 넘는 component마다 TypeScript, Storybook, Markdown과 조합별 design guide가 흩어져 있어 사용자가 정확한 정보를 찾기 어렵고, AI 역시 이 맥락을 모르면 그럴듯하지만 규칙을 어긴 코드를 생성하므로 정보 통합과 명시적 사용법이 함께 필요했다.

공식 website와 Figma PDF, Storybook example, type declaration, changelog asset을 Markdown과 구조화 데이터로 변환해 MCP server 아래에 모았다. Resource만 제공하면 agent가 필요한 정보를 안정적으로 선택하지 못해 공통 규칙 조회와 component 검색을 tool로 노출하고, Levenshtein distance, alias, 한영 이름 대응을 적용한 fuzzy search로 사용자의 부정확한 표현도 실제 component에 연결했다.

통합한 정보만으로는 AI가 맥락을 어떻게 적용해야 할지 몰라 dashboard 같은 domain별 구성 규칙, component 조합 제한, UX writing guideline을 MCP rule로 작성했다. Figma MCP와 우아한공방 MCP를 함께 호출하면 design을 시스템 component로 구현하고, migration prompt가 분석 tool과 codemod를 순서대로 실행하게 해 agent가 세부 변환 규격을 외우지 않아도 기존 코드를 공식 token과 component로 옮길 수 있다.