Penpot — 디자인-코드 경계의 재설계

OPEN DESIGN INFRASTRUCTURE

Penpot
디자인-코드 경계의 재설계

Self-hosted · Open Standards · Tokens · MCP

시안이 코드로 넘어갈 때 생기는 번역 비용을 줄이는 오픈소스 디자인 플랫폼. Penpot은 디자인 파일을 닫힌 그림이 아니라 SVG, CSS, HTML, JSON, 토큰, 플러그인, MCP가 연결되는 제품 개발 인프라로 다룹니다.

46.9k

GitHub Stars

MPL-2.0

Open Source

Clojure

Core Stack

MCP

AI Workflow

▼ SCROLL · CLICK TO FEED

핵심 장면 6가지

디자인 파일이 코드로 넘어가는 순간 생기는 손실을 줄이려면, 협업 캔버스보다 더 낮은 레이어가 필요합니다. Penpot은 그 레이어를 오픈소스, 열린 표준, 토큰, MCP로 다시 짭니다.

OWN

인프라 소유권

SaaS만이 아니라
자체 배포 가능한 디자인 플랫폼

Self-hosting 공식 지원
환경 변수와 flags로 인증·메일·등록 제어
컴플라이언스와 거버넌스 요구에 대응

OPEN

열린 표준

캔버스 밖에서도
읽히는 디자인 산출물

SVG, CSS, HTML, JSON 지향
Inspect mode로 코드 친화 출력
개발자가 재해석할 면적 축소

TOKENS

디자인 시스템

토큰을 장식이 아니라
운영 단위로 관리

Native Design Tokens
Components와 Variants
linked library token import 등 지속 개선

MCP

AI 연결

에이전트가 디자인 파일을
읽고 수정하는 표면

MCP server + Penpot plugin + client
components/styles/tokens/pages/layers 접근
design-to-code와 design-to-design 자동화

PLUGIN

프로그래머블 워크스페이스

API와 플러그인으로
팀 도구에 붙는 캔버스

Plugin runtime과 예제 앱
webhooks/API access tokens
워크플로 자동화와 내부 통합

CAVEAT

운영 리스크

강력한 자동화에는
검토와 롤백이 필요

MCP write operation 권한 관리
self-hosting은 보안 책임 동반
토큰 변경 이력과 리뷰 프로세스 필요

무엇과 비교해야 하나

접근	강점	대가/초점
Penpot	오픈소스 + self-host + 토큰/MCP	인프라 소유권과 프로그래머블 워크플로
닫힌 디자인 SaaS	빠른 협업, 낮은 운영 부담	벤더 락인과 제한된 데이터 통제
이미지 중심 핸드오프	전달은 쉽지만 재구현 비용 큼	디자인-코드 불일치가 누적
내부 커스텀 툴	맞춤화 가능	툴 자체를 유지보수해야 함

연결되는 작업 표면

🧩

Design Tokens

System

🧱

Components/Variants

Reusable UI

🕸️

MCP Server

AI workflow

🔌

Plugin API

Automation

🏠

Self-hosting

Governance

🔎

Inspect Mode

SVG/CSS/HTML

⚙️

Env Flags

Operations

📚

Open Source

MPL 2.0

🤝

Realtime Collaboration

Teams

⚠️

Permission Review

Caveat

디자인 파일을 개발 파이프라인의 레이어로

Penpot은 예쁜 캔버스보다 더 어려운 질문을 던집니다.
디자인 시스템, 코드, AI 에이전트, 배포 통제권을 한 흐름에 묶을 수 있을까?
github.com/penpot/penpot

github.com/penpot/penpot

Penpot디자인-코드 경계의 재설계

핵심 장면 6가지

무엇과 비교해야 하나

연결되는 작업 표면

디자인 파일을 개발 파이프라인의 레이어로

Penpot
디자인-코드 경계의 재설계

Penpot, 디자인-코드 경계의 재설계

Reference Links

Comments (0)