In-System Design: 코드를 기반으로 한 디자인 시스템 구축 가이드
역량 개발 · UX Collective · 2026.10.27
이 글은 디자인 시스템을 구축할 때 Figma가 아닌 코드를 'Source of Truth(진실의 원선)'로 삼는 새로운 워크플로우를 소개합니다. 기존에는 Figma에서 디자인을 하면 개발자가 코드로 옮기는 방식이었지만, AI를 활용할 때는 이 과정에서 정보의 누락이나 왜곡이 발생하기 쉽습니다. 저자는 코드를 기반으로 Figma 라이브러리를 생성하여 디자인과 코드 사이의 간극을 줄이는 방법을 제안합니다. Storybook와 MCP(Model Context Protocol)를 활용해 토큰, 컴포넌트, 속성 등을 동기화하는 구체적인 단계와, Figma가 표현하지 못하는 부분(GAPS.md)을 관리하는 노하우를 담고 있습니다. 디자인 시스템 팀과 프론트엔드 개발자, 디자이너들에게 매우 유용한 실무 가이드입니다.