AI
디자인시스템을 문서 대신 MCP 서버로 제공하면 달라지는 것
디자인시스템은 여러 화면이 같은 버튼, 같은 색, 같은 간격을 쓰도록 정한 기준입니다. 지금까지는 웹 문서나 디자인 파일로 배포해 사람이 읽고 따랐습니다. 개발에 AI 코딩 도구를 쓰기 시작하면서 이 방식에 빈틈이 생겼습니다.
문서로만 배포할 때 생기는 일
개발자가 AI 도구에 「로그인 화면을 만들어 줘」라고 맡기면, 도구는 일반적으로 많이 쓰이는 형태로 버튼과 입력 칸을 새로 만듭니다. 회사 디자인시스템에 같은 부품이 있어도, 도구가 그 문서를 조회할 방법이 없으면 쓰지 않습니다. 결국 사람이 결과를 열어 회사 기준으로 다시 바꾸는 시간이 듭니다.
MCP 서버로 제공하면
MCP(Model Context Protocol)는 AI 도구가 외부 데이터와 기능에 접속하는 공통 규격입니다. 2024년 말 Anthropic이 공개했고, Claude·Cursor 같은 AI 도구와 Figma가 지원합니다. 디자인시스템을 MCP 서버로 열면 AI 도구가 작업 중에 직접 물어볼 수 있습니다.
- 자료색·간격·글꼴 값(디자인 토큰), 컴포넌트 정의, 사용 가이드
- 조회 기능「이 버튼의 속성과 상태를 알려 줘」처럼 필요한 정의만 찾아 주는 기능
AI 도구는 새로 만들기 전에 회사의 부품을 먼저 찾아 쓰게 됩니다. 사람은 처음부터 다시 고치는 대신 결과를 검토합니다.
도입 순서
- 토큰 정리색·간격·글꼴을 이름 붙은 값으로 정리
- 컴포넌트 정의속성, 상태, 쓰면 안 되는 경우까지 글로 남김
- 정본 하나문서와 코드가 다르면 어느 쪽이 기준인지 정함
- MCP 서버자료와 조회 기능을 열고 접근 권한을 정함
- 검토AI가 만든 화면을 사람이 기준에 맞춰 확인
세 번째 단계가 가장 자주 빠집니다. 문서와 실제 코드가 서로 다르면 AI는 어긋난 쪽을 그대로 따릅니다. 서버를 만들기 전에 기준을 하나로 맞추는 일이 먼저입니다.
디지털다임의 경험
디지털다임은 사내 AI 허브 D2 AX One을 MCP로 견적·문서·경영정보 시스템에 연결해 전 직원이 쓰고 있습니다. 직원이 AI에게 질문하면 AI가 사내 시스템의 값을 조회해 답합니다. 같은 방식으로 고객사의 디자인시스템과 데이터를 AI 도구가 조회하도록 연결하는 작업을 합니다.
참고 · MCP 규격 modelcontextprotocol.io · Figma 블로그 「Design systems and AI」(figma.com/blog/design-systems-ai-mcp)