디자인 도구와 개발 환경을 직결하는 혁신적 솔루션으로 AI 코드 생성의 정확도 대폭 향상

피그마가 AI 코딩 도구와 디자인을 직접 연결하는 ‘Dev Mode MCP 서버’의 베타 버전을 출시한다고 발표했다. 이번 출시는 개발자들이 VS Code의 Copilot, Cursor, Windsurf, Claude Code 등 AI 코딩 도구에서 피그마 디자인 컨텍스트를 직접 활용할 수 있게 해주는 획기적인 솔루션이다.

기존에는 AI 도구에 디자인 맥락을 제공하는 유일한 방법이 디자인 이미지나 API 응답을 챗봇에 입력하는 것뿐이었다. 하지만 최근 등장한 MCP(Model Context Protocol)라는 새로운 표준을 통해 애플리케이션이 LLM에 컨텍스트를 제공하는 방식이 혁신적으로 변화했다. 피그마는 이 표준을 적용해 개발자가 아토믹 컴포넌트 생성부터 다층 애플리케이션 플로우 구축까지 더욱 효율적이고 정확한 디자인-코드 워크플로우를 구현할 수 있도록 지원한다.

피그마의 Dev Mode MCP 서버는 디자인 의도를 LLM이 이해할 수 있도록 패턴 메타데이터, 스크린샷, 상호작용성, 콘텐츠 등 다양한 맥락 정보를 제공한다. 특히 이미 디자인 시스템에 투자한 팀들의 경우, 컴포넌트, 변수, 스타일 등의 패턴을 AI가 정확히 활용할 수 있어 생성되는 코드의 품질이 크게 향상된다. 예를 들어, 단순한 스크린샷만 제공했을 때 AI가 컴포넌트 라이브러리를 검색하는 데 소요되는 시간을 줄이고, 정확한 컴포넌트 경로를 직접 제공해 더 정밀한 코드를 생성할 수 있다.

현재 베타 버전에서는 현재 선택된 요소나 특정 노드 ID에 대한 컨텍스트를 가져오는 세 가지 도구를 제공한다: 코드용, 이미지용, 변수 정의용. 사용자는 서버 설정에서 코드 도구가 반환하는 응답 유형을 변경할 수 있으며, React와 Tailwind를 활용한 더욱 인터랙티브한 코드 표현도 가능하다. 또한 Code Connect 기능을 통해 생성된 코드가 기존 코드베이스와 일치하도록 보장한다.

피그마는 향후 몇 달간 원격 서버 기능과 더 깊은 코드베이스 통합 등 다양한 업데이트를 계획하고 있다고 밝혔다. 특히 피그마 데스크톱 앱 없이도 MCP 경험을 제공해 팀 온보딩과 협업을 더욱 용이하게 만들고, 더 직관적인 Code Connect 설정 환경을 구축할 예정이다. 이번 출시는 더 빠른 핸드오프, 더 스마트한 출력, 더 효율적인 워크플로우를 통한 향상된 디자인-코드 경험 구축을 위한 첫 번째 단계라고 회사는 설명했다.

태그: #피그마 #AI코딩 #MCP서버