안녕하세요 메이토입니다 🍅 오늘 우아콘에 운좋게 당첨되어 다녀왔는데, 우아콘 신청 때부터 기대하고 있던 세션인 "당연해진 디자인 시스템, 그다음 이야기: AST와 MCP로 여는 미래" 를 듣고 제가 느낀 인사이트와 후기를 남겨보고자 합니다 🎯
많은 서비스들이 일관된 UI를 위해 디자인 시스템을 갖추게 되는데, 컴포넌트가 많다보면 디자인 시스템에서 벗어나는 컴포넌트를 디자인하거나 개발하게 되는 경우도 발생합니다.
이번 세션에서 소개된 우아한 형제들의 디자인 시스템인 "우아한 공방"에서도 역시나 동일한 문제를 경험하였습니다. 우아한 공방 TF 팀에서 이미 처리하고 있던 티켓 수가 거의 연 1000건에 달할 정도로 많았고, 그 과정에서 디자인 시스템 내에 없는 컴포넌트를 디자이너가 만들게 됩니다. 이 때 개발자도 커스텀 컴포넌트로 개발을 하다 보니 디자인 토큰이 변경되어도 서비스에 반영되지 않는 문제가 발생하고, 여기서
"디자인 시스템과 단절된 컴포넌트"
가 생겨나게 됩니다.
이를 해결하기 위해 Atelier Analytics 라는 우아한 공방 애널리틱스를 만들어 Figma API + Code AST 분석을 통한 사용 현황 시각화를 시도 하셨습니다.
Figma 측면 에서는 색상, 간격, 타이포그래피, 모서리 등 토큰 사용 여부를 분석하고 이모지 네이밍 규칙으로 컴포넌트 판별하여 규칙을 지키지 않고 있는 컴포넌트에 대해 찾아 내었습니다. 이에 도움이 되기 위해 가이드를 지키지 않은 사용 요소를 하이라이팅 해주는 피그마 플러그인도 개발하셨다고 합니다
Code 측면에서는 Babel Parser + Traverser로 AST 분석하고, import된 컴포넌트, 토큰 사용, 하드코딩을 감지하였습니다. 결과를 JSON 으로 S3에 저장하고 Dashboard를 통해 시각화하였습니다. Codemod라는 자동 수정 도구를 통해 하드코딩된 스타일을 토큰으로 자동 변환 + 커밋 메시지까지 자동 생성할 수 있었습니다.
이후에는 문제를 재 정의 해보았는데, 아래와 같은 두 문제로 정의할 수 있었습니다.
1. 문의가 너무 많다 → 정보가 흩어져 있음
2. 컴포넌트가 자주 끊어진다 → 개발자가 가이드 찾기 어렵고, 직접 커스텀함.
해결 접근은
"AI가 맥락을 이해하고 자동으로 코드와 답변을 생성하면 어떨까?”로 시작되었습니다.
MCP(Model Context Protocol)를 도입하였고 이는 AI 에이전트에게 “우아한 공방”의 내부 맥락(Resource & Tool)을 제공하는 구조를 의미 합니다. 여기서 리소스와 툴이란 다음과 같습니다.
* 리소스(Resource): 가이드·문서·토큰·컴포넌트 데이터
* 툴(Tool): 질의 수행 및 코드 자동생성 함수
이후 MCP 구축과정에서는 ...
- 공통 문서, Figma 가이드, Storybook 문서 등 흩어진 정보를 모두 통합하였습니다.
- HTML 파싱 대신 MarkItDown으로 PDF/HTML을 Markdown으로 변환하였고,
- MCP에 디자인 규칙, 컴포넌트 정의, 마크다운 데이터, 체인지로그 등 자산을 연결하였습니다.
- => 이렇게 3년간 축적된 공방 데이터를 통해 AI가 참고 가능한 “내부 데이터베이스”가 완성되게 됩니다 !
퍼지 매칭(Levenshtein 거리) 적용
→ “무공방” “데이터피커” 같은 오타/유사어도 자동 교정
가이드라인 기반 코드 생성
- 예: “대시보드 페이지 구성해줘”
- → 내부 규칙(컬럼 수, UI 구조, UX 라이팅 등)에 따라 자동 구성
- “민트 컴포넌트를 사용해 피그마 디자인을 구현해줘”
- → MCP를 통해 올바른 컴포넌트 매칭 및 코드 자동 생성
인사이트 👼
🎯 1. 디자인 시스템 일관성은 ‘기술적 유지보수’의 문제다
나는 프로젝트 시작할 때 디자인 토큰을 만들고 디자인 시스템을 팀원들과 만들어가며 느낀 것은 거의 디자인 시스템을 "정의" 해놓았다는 것입니다. 사실 정의해 두는 것만 해도 일관된 UI 를 만드는 것에는 굉장히 큰 도움이 됩니다. 하지만, 이것이 추후 서비스가 확장되면서 "얼마나 잘 지켜지고 있는가" 에 대해 지켜보는 것이 결국 디자인 시스템으로 서비스를 유지할 수 있는 것에 있어 핵심이라고 생각합니다.
그런 점에서 우아한 공방이 디자인 시스템을 만들고 그 자체를 “유지보수”하는 과정에 집중했다는 점이 인상 깊었습니다. 단순히 정의된 규칙에 머무르지 않고, 실제로 그 규칙이 서비스 전반에서 지켜지고 있는지를 꾸준히 확인하고 개선하려는 시도가 있었기 때문입니다.
결국 디자인 시스템은 한 번 만들어두는 게 아니라, 지속적으로 점검하고 업데이트해야 살아있는 시스템이 된다는 걸 느꼈습니다.
2. 자동 수정 플러그인을 통해 디자인과 개발 사이의 간극이 크게 줄었다.
우아한 공방에서는 코드 수준에서 하드코딩된 스타일을 자동으로 찾아내고 디자인 토큰으로 변환하는 Codemod 자동화 도구를 개발하였습니다. 하나의 Lint와 같은 도구라고 이해를 하였는데, 휴먼 에러를 방지할 수 있다는 점에서 굉장히 생산성에 도움이 될 것 같다는 생각이 들었습니다.
3. AI 자동 생성(MCP) - 환각이 발생하지 않을까?
이건 조심스레 제가 AI를 전문적으로 아는 것은 아니나, 익히 알려져 있기로는 “환각” 증상으로 인해 간혹 부정확한 답변을 제공하는 것으로 알고 있습니다. 세션을 들으면서 정말 궁금했던 부분이지만 AI가 잘못된 문맥을 학습하거나, 문서가 업데이트되지 않은 상태에서 존재하지 않는 컴포넌트나 규칙을 ‘환각’으로 생성할 위험이 있지 않을까싶었습니다.
디자인 시스템의 신뢰는 ‘정확성’에 있는데,
AI가 잘못된 컴포넌트를 생성하거나, 토큰 이름을 착각해 자동으로 코드에 반영한다면 오히려 혼란을 키울 수도 있을 것 같습니다. 물론 우아한 공방에서는 이를 방지하기 위해 가이드라인을 굉장히 상세하게 적는 등의 방법으로 보완 중이시라고 하였는데 혹시 MCP를 이용하여 디자인 시스템과 관련하여 개발하시는 분들이 계시다면 꼭 여쭤보고 싶은 부분이었습니다🥹
저도 요즘 피그마 API를 이용한 플러그인을 만들어보고 싶다는 막연한 생각을 가지고 있는데, 오늘 우아콘 이 세션이 저에게는 큰 인사이트와 디자인 시스템에 대한 더 높은 관심을 이끌어냈던 것 같습니다. 기회가 된다면 저도 대규모 디자인 시스템을 유지 보수 해보는 경험을 쌓고 싶습니다 🥺