Penpot for Developers: 개발자의 언어를 이해하는 오픈 소스 디자인 툴

대부분의 디자인 툴은 개발자를 나중에 생각합니다. 파일을 받고, 스펙 패널을 뚫어져라 보다가, 누군가의 픽셀을 수동으로 코드로 번역하는데, 디자인이 바뀌는 순간 동기화가 틀어집니다.

Penpot은 디자인 자체가 실제 코드로 표현되는 오픈 소스 디자인 및 프로토타이핑 플랫폼입니다. SVG, CSS, HTML, JSON과 같이 이미 여러분이 배포하는 웹 표준을 사용합니다. 독점적인 .fig 종속성이나 해석해야 할 '디자이너의 방언'이 없습니다. MPL-2.0 라이선스가 적용되었으며, 주로 Clojure/ClojureScript와 Rust WebAssembly 렌더러로 작성되었고, 작성 시점을 기준으로 GitHub에서 약 47k개의 스타를 보유하고 있습니다.

개발자로서 실제로 얻을 수 있는 이점은 다음과 같습니다.

1. Inspect 모드는 실제 사용 가능한 코드를 제공합니다

Penpot의 모든 디자인에는 기본 SVG, CSS, HTML을 노출하는 'Inspect' 탭이 있습니다. 디자인 자체가 내부적으로 웹 표준이기 때문에, 복사한 것이 곧 배포할 내용입니다. 플러그인으로 역설계된 근사치가 아닙니다. 이는 일반적으로 디자인과 구현 사이에서 발생하는 번역 계층을 제거합니다.

2. 실제 CSS처럼 동작하는 레이아웃

Penpot은 네이티브 CSS Grid 및 Flexbox 레이아웃을 지원합니다. 브라우저에 존재하는 것과 동일한 레이아웃 모델을 사용하여 반응형 인터페이스를 디자인하므로, 캔버스에서 보는 구조가 실제로 작성할 박스 모델에 매핑됩니다. '왜 이 목업처럼 리플로우되지 않을까' 하는 마찰이 줄어듭니다.

3. AI 기반 디자인-투-코드용 MCP 서버

이것은 2026년에 주목할 만한 부분입니다. Penpot은 공식 MCP (Model Context Protocol) 서버를 배포하며, 이는 현재 메인 레포지토리의 /mcp 아래에 직접 통합되었습니다.

이것이 가능하게 하는 것은 다음과 같습니다: Claude Code, Cursor, Claude Desktop, Copilot 스타일 툴과 같은 모든 MCP 호환 AI 클라이언트가 여러분의 Penpot 디자인 파일을 프로그래밍 방식으로 읽고 수정할 수 있다는 것입니다. 디자인 자체가 이미 구조화된 기계 판독 가능한 코드이기 때문에, 에이전트는 스크린샷에서 추측하지 않습니다. 실제 컴포넌트 트리, 스타일 및 토큰을 사용하여 작동합니다.

사람들이 이를 통해 구축하고 있는 워크플로우는 다음과 같습니다:

디자인 토큰 (design tokens)을 준수하며, 보드를 프로덕션 준비가 된 시맨틱 HTML (semantic HTML) 및 모듈형 CSS (modular CSS)로 변환
기존 디자인으로부터 인터랙티브 프로토타입 (interactive prototypes) 생성
거친 낙서를 디자인 시스템 (design system)을 준수하는 컴포넌트 (component)로 변환
파일로부터 디자인 시스템 문서 자동 생성
코드-투-디자인 (Code-to-design, 디자인-투-코드뿐만 아니라) 및 디자인-투-문서 (design-to-documentation) 왕복 프로세스

로컬 서버를 대상으로 한 Claude Code 빠른 시작:

claude mcp add penpot -t http http://localhost:4401/mcp

MCP 코어는 Penpot 플러그인 API (Plugin API)와의 타입 안전한 (type-safe) 상호작용을 위해 TypeScript로 작성되었으며, 호스팅된 (원격) 설정과 셀프 호스팅된 (로컬) 설정을 모두 지원합니다. 반복할 가치가 있는 한 가지 안전 주의 사항: MCP 키는 개인적이고 복구 불가능한 토큰입니다. 이를 비밀번호처럼 취급해야 하며, 에이전트가 특정 페이지에 변경 사항을 쓰도록 허용하기 전에 읽기 전용 프롬프트 (목록화, 조사, 분석)로 먼저 시작하십시오.

4. 단일 진실 공급원(Single source of truth)으로서의 네이티브 디자인 토큰

Penpot는 컴포넌트 (Components) 및 베리언트 (Variants)와 더불어 **일급 객체인 네이티브 디자인 토큰 (native Design Tokens)**을 갖추고 있습니다. 토큰은 디자인과 개발 간에 공유되는 단일 진실 공급원 (one source of truth) 역할을 하므로, 수동으로 토큰을 내보낼 필요가 없으며 색상/간격/타이포그래피 스케일을 동기화하기 위한 별도의 플러그인이 필요하지 않습니다. MCP 서버와 결합하면, 귀하의 디자인 시스템은 AI가 생성하는 코드의 직접적인 컨텍스트 소스 (context source)가 될 수 있습니다.

5. 오픈 API, 플러그인 및 웹훅

자동화하거나 통합하고 싶다면, Penpot는 프로그래밍이 가능합니다:

전체 워크스페이스에 접근할 수 있는 플러그인 시스템 (Plugin system) — 프로그래밍 방식으로 디자인을 읽고 쓰기 가능
액세스 토큰 (access tokens)을 통해 접근 가능한 오픈 REST API (Open REST API)
Penpot를 기존 툴체인 (toolchain)에 연결하기 위한 웹훅 (Webhooks)

도구를 확장하기 위한 앱 스토어 심사 과정이나 기업의 통제(gatekeeping)가 없습니다.

6. 어디에서나 셀프 호스팅 가능

Penpot는 배포 방식에 구애받지 않습니다 (deployment-agnostic). design.penpot.app에서 호스팅되는 SaaS를 사용하거나, Docker, Kubernetes, Elestio 및 기타 옵션을 사용하여 자체 인프라에서 실행할 수 있습니다. 컴플라이언스 제약(의료, 금융, 정부)을 받는 팀의 경우, 이는 디자인 지식재산권(IP)을 제3자 클라우드 없이 완전히 직접 제어하는 서버에 보관할 수 있음을 의미합니다.

개발자가 실제로 관심을 가질 만한 이유

요약하자면: Penpot는 독자적인 포맷을 만들어내는 것을 거부함으로써 디자인과 개발 사이의 간극을 좁힙니다. 웹 네이티브 출력 (Web-native output), 실제 CSS 레이아웃 (CSS layouts), 네이티브 디자인 토큰 (design tokens), 오픈 API (open API), 그리고 전체 과정을 AI가 실행 가능하게 만드는 MCP 서버 (MCP server)는 여러분이 이미 작업 중인 언어로 소통하며, 엔드 투 엔드 (end-to-end)로 소유할 수 있는 디자인 플랫폼을 구축합니다.

Figma는 여전히 완성도, 플러그인의 다양성, 프로토타이핑의 깊이 측면에서 앞서 있으므로, 이것이 기존 도구를 완전히 대체하라는 제안은 아닙니다. 하지만 데이터 소유권, 디자인-코드 정렬 (design-code alignment), 또는 AI-인-더-루프 (AI-in-the-loop) 워크플로우가 중요하다면, Penpot는 진지하게 살펴볼 가치가 있습니다.

시작하기

참조: https://github.com/penpot/penpot