디자인 시스템 플랫폼 & Figma-to-Code 자동화

문제

디자인 시스템이 외부 npm 패키지로 분리 관리되어, 수정 하나에 별도 레포 클론·빌드·배포 사이클이 필요했습니다. MUI 메이저 업그레이드 이후 타입 호환성 문제로 14개 프론트엔드 프로젝트의 빌드가 깨졌고, 디자이너가 Figma에서 바꾼 토큰이 코드에 수동으로 반영되면서 디자인-코드 불일치와 1~2일의 반영 리드타임이 생겼습니다.

무엇을 했나

외부 npm → NX 모노레포 통합

944개 소스 파일의 디자인 시스템을 NX 모노레포로 이관했습니다. tsconfig path mapping 전략으로 14개 앱의 기존 import 경로를 한 줄도 바꾸지 않은 채 마이그레이션했고, MUI v7 업그레이드 과정에서 발생한 TypeScript 오류 52건을 as 타입 단언 없이 타입 가드 패턴으로 해결했습니다.

Figma 토큰 → MUI 테마 자동 PR 파이프라인

직접 개발한 Figma 플러그인에서 색상·타이포그래피·그림자·간격 토큰을 추출해 MUI 테마 구조로 변환하고, AWS Lambda가 브랜치 생성·커밋·Pull Request까지 자동으로 만드는 파이프라인을 설계했습니다. 디자이너가 플러그인에서 버튼 하나로 토큰 변경을 PR로 보낼 수 있습니다.

디자이너·개발자 역할별 플러그인 UX

같은 도구를 쓰는 두 직군의 필요가 달라, 디자이너용 시각 프리뷰와 개발자용 Inspector·코드 복사 화면을 분리했습니다. 선택한 Figma 레이어에 연결된 토큰을 실시간으로 분석해 보여주고, 미선택 상태에는 Empty State 안내를 제공합니다.

MCP 기반 Figma-to-Code 도구

Figma 노드 추출, 스타일 분석, 사내 디자인 토큰 매핑, MUI React 코드 생성을 수행하는 MCP Tool 4종을 구현해, AI 도구에서 Figma 디자인을 곧바로 사내 토큰 기반 React 코드로 변환할 수 있게 했습니다.

성과

• 토큰 반영 리드타임 수동 1~2일 → 수분 단위
• 14개 프로젝트 전체 빌드 성공, 단일 코드베이스에서 버전 일관성 확보
• TypeScript 오류 52건을 타입 단언 없이 해결해 타입 안전성 유지
• 플러그인 UI 모듈화로 App.tsx 1,806 → 264 LOC