카카오모빌리티 웹FE개발팀에서 디자인 시스템 MODI를 AI 에이전트가 더 잘 이해하고 구현할 수 있도록 MCP(Model Context Protocol)를 활용해 변환 계층을 설계한 사례를 소개합니다. Figma의 공식 MCP가 제공하는 범용적인 React/Tailwind 응답을 MODI의 컴포넌트와 토큰 체계에 맞게 변환하기 위해, 정답이 명확한 영역(토큰, 아이콘)은 코드로 처리하는 '결정형' 방식을, 판단이 필요한 영역(레이아웃, 조합)은 LLM에게 맡기는 '비결정형' 방식을 채택했습니다. 또한, 도구 스키마를 통해 에이전트의 판단 범위를 좁히고, 구현된 결과물이 디자인과 일치하는지 검증하는 프로세스를 시스템화하여 AI를 활용한 디자인-to-코드 워크플로우의 안정성을 높인 과정을 상세히 다루고 있습니다.