지금까지 디자인-개발 협업의 병목은 늘 같은 곳에 있었다. 디자이너가 Figma 파일을 넘기면, 개발자는 스펙 패널을 들여다보며 픽셀을 코드로 '번역'한다. 그리고 디자인이 조금이라도 바뀌는 순간, 그 번역본은 조용히 어긋나기 시작한다. 이 구조적 비효율을 해결하겠다는 시도는 수없이 있었지만, 대부분은 번역 레이어를 줄이는 데 그쳤다. 이제 흐름이 달라지고 있다.
오픈소스 디자인 툴 Penpot이 공식 MCP(Model Context Protocol) 서버를 메인 레포에 통합했다. dev.to의 소개에 따르면, Claude Code나 Cursor 같은 MCP 호환 AI 클라이언트가 Penpot 디자인 파일을 직접 읽고 수정할 수 있게 됐다. 핵심은 '스크린샷을 보고 추측'하는 게 아니라는 점이다. Penpot은 SVG, CSS, HTML, JSON 같은 웹 표준으로 디자인을 표현하기 때문에, AI 에이전트는 실제 컴포넌트 트리, 스타일, 디자인 토큰을 그대로 파싱한다. 번역 레이어 자체가 사라지는 것이다.
실제로 이 워크플로우로 가능한 작업들은 이미 구체적이다. 디자인 보드를 시맨틱 HTML과 모듈러 CSS로 변환하면서 디자인 토큰을 그대로 반영하거나, 러프한 스케치를 디자인 시스템 규칙을 존중하는 컴포넌트로 자동 생성하거나, 디자인 파일에서 시스템 문서를 자동으로 뽑아내는 것들이다. claude mcp add penpot -t http http://localhost:4401/mcp 한 줄로 로컬 서버에 연결할 수 있다. 물론 MCP 키는 비밀번호처럼 다뤄야 하고, 에이전트를 처음 붙일 때는 읽기 전용 프롬프트부터 시작하는 안전한 접근이 중요하다.
여기서 중요한 질문이 생긴다. AI가 디자인 파일을 '읽을 수 있게' 됐다면, 디자인 시스템은 어떻게 설계해야 AI가 제대로 읽을 수 있을까? 이 맥락에서 디자인 시스템 설계 철학을 다룬 또 다른 글이 시사하는 바가 크다. dev.to에 올라온 "Building a Design System Without Recreating CSS"는 디자인 시스템이 CSS를 재발명하는 함정에 빠지는 순간 인지 부하만 늘어난다고 지적한다. 좋은 디자인 시스템은 구현 세부사항을 숨기고, 대신 의도(intent)를 표현하는 언어를 만든다.
이 두 흐름이 만나는 지점이 흥미롭다. <div content adapt="grid" mobile="stack">처럼 '무엇을 하려는가'를 선언하는 컴포넌트 API는, 사람인 개발자에게만 읽기 쉬운 게 아니다. AI 에이전트에게도 의미론적으로 명확한 컨텍스트를 제공한다. 반대로 모든 CSS 옵션을 노출하는 설정 중심의 시스템은, AI가 파싱할 때도 노이즈가 많아진다. 의도 기반 설계는 곧 AI가 읽기 좋은 구조이기도 한 것이다.
디자인 토큰도 같은 맥락에서 재조명된다. Penpot은 네이티브 디자인 토큰을 디자인과 개발의 단일 진실 공급원(single source of truth)으로 다룬다. MCP 서버와 결합하면 이 토큰이 AI 코드 생성의 직접적인 컨텍스트 소스가 된다. 즉, 토큰을 얼마나 잘 구조화했느냐가 AI가 생성하는 코드의 품질을 직접 결정한다. 토큰 설계가 개발자 경험(DX)의 문제였다면, 이제는 AI 생성 코드의 정확성 문제이기도 하다.
시사점은 명확하다. 앞으로 디자인 시스템을 설계할 때 고려해야 할 기준이 하나 더 생겼다. '개발자가 읽기 쉬운가'에서 'AI 에이전트가 파싱하기 좋은 구조인가'까지. 컴포넌트 이름은 용도를 직관적으로 드러내는가, 토큰 네이밍은 의미 계층이 분명한가, 변형(variant)은 의도를 기준으로 분류됐는가. 이 질문들은 이전에도 좋은 설계의 기준이었지만, 이제는 AI 협업 효율의 기준이기도 하다.
물론 Penpot이 Figma의 생태계 깊이나 프로토타이핑 완성도를 당장 따라잡기는 어렵다. 하지만 데이터 소유권, 디자인-코드 정렬, 그리고 무엇보다 AI-in-the-loop 워크플로우를 진지하게 고민하는 팀이라면, 오픈소스 기반의 웹 네이티브 설계 철학은 장기적으로 강력한 레버리지가 된다. 프로토타입을 빠르게 만들고, AI로 검증하고, 디자인 시스템을 점진적으로 고도화하는 흐름—그 흐름의 품질은 결국 디자인 시스템이 얼마나 '읽기 좋은 언어'로 설계됐느냐에서 갈린다.