Penpot: Figma의 오픈소스 대안, 디자인과 코드의 완벽한 협업

Penpot Banner

디자인 도구의 세계에는 오랫동안 하나의 왕이 있었습니다. Figma. 클라우드 기반, 실시간 협업, 강력한 기능. 하지만 한 가지 치명적인 약점이 있었습니다 — 폐쇄 소스입니다.

Penpot은 이 균형을 무너뜨립니다. 44,737+ 스타를 기록한 이 오픈소스 디자인 도구는 단순한 “무료 Figma 대안”이 아닙니다. 디자이너와 개발자 사이의 핸드오프 지옥을 끝내기 위해 태어났습니다.

왜 Penpot인가

기존 디자인 도구의 문제

디자이너와 개발자의 협업은 늘 고통스러웠습니다.

핸드오프 지옥 — 디자인을 개발자에게 전달하는 과정에서 정보가 손실된다
벤더 락인 — 폐쇄 소스 포맷에 모든 디자인이 갇힌다
배포 통제 불가 — 클라우드 서비스에 의존, 자체 호스팅 불가
비용 문제 — 팀이 커질수록 비용이 기하급수적으로 증가

Penpot의 철학: Design as Code

Penpot은 근본적으로 다른 접근법을 취합니다.

디자인을 코드로 표현하라

SVG, CSS, HTML, JSON. 이것이 Penpot의 네이티브 포맷입니다. 벤더 락인이 없습니다. 디자인 파일이 어디에 있든, 어떤 도구로든 열 수 있습니다.

핵심 기능

1. CSS Grid Layout (Penpot 2.0)

Penpot 2.0의 가장 혁신적인 기능입니다.

CSS Grid Layout

기존 디자인 도구는 CSS Grid를 지원하지 않거나, 제한적으로만 지원했습니다. Penpot은 CSS Grid를 1등 시민으로 대우합니다.

디자인 타임에 Grid 레이아웃 정의
개발자가 그대로 사용 가능한 CSS 코드 생성
반응형 디자인을 위한 Grid 템플릿

이것이 의미하는 바:

디자이너가 Grid로 디자인하면, 개발자는 그대로 display: grid 코드를 가져갑니다. 번역 과정이 없습니다.

2. Design Tokens

디자인과 개발 사이의 단일 소스 오브 트루스입니다.

colors.primary = #3B82F6
spacing.md = 16px
typography.heading.fontSize = 24px

색상, 타이포그래피, 스페이싱, 그림자 등을 토큰으로 정의
디자인 시스템 전체에 일관성 유지
코드로 내보내기 가능 — CSS 변수, JSON, Tailwind 설정

개발자 경험:

:root {
  --color-primary: #3B82F6;
  --spacing-md: 16px;
  --font-size-heading: 24px;
}

3. Components & Variants

재사용 가능한 UI 컴포넌트 시스템입니다.

Components: 버튼, 카드, 입력 필드 등을 컴포넌트로 정의
Variants: Primary, Secondary, Disabled 등 상태별 변형
Overrides: 인스턴스에서 개별 수정 가능

Figma의 컴포넌트 시스템과 동등한 수준이면서, SVG 기반으로 작동합니다.

4. Inspect 탭: 즉시 사용 가능한 코드

디자인을 선택하면 코드가 나옵니다.

<!-- SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <rect x="2" y="2" width="20" height="20" rx="4" fill="#3B82F6"/>
</svg>

/* CSS */
.button {
  display: flex;
  padding: 12px 24px;
  background-color: #3B82F6;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

// JSON
{
  "width": 120,
  "height": 48,
  "fill": "#3B82F6",
  "borderRadius": 8
}

복사해서 바로 사용 가능합니다. “이 색상이 뭐죠?” 질문이 사라집니다.

5. 플러그인 시스템

Penpot은 확장 가능합니다.

커뮤니티 플러그인으로 기능 확장
아이콘 라이브러리 통합
디자인 시스템 동기화
커스텀 워크플로우 자동화

6. 웹훅 및 API

개발 툴체인과 통합됩니다.

# 파일 내보내기 자동화
curl -X POST https://penpot.example.com/api/export \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"file_id": "abc123", "format": "svg"}'

CI/CD 파이프라인에서 디자인 에셋을 자동으로 내보낼 수 있습니다.

배포의 자유: SaaS 또는 셀프 호스팅

Penpot의 가장 큰 장점 중 하나는 배포 선택권입니다.

Penpot Cloud (SaaS)

https://design.penpot.app

회원가입만 하면 바로 사용. Figma처럼.

셀프 호스팅

# Docker로 실행
docker run -d -p 9001:9001 penpotapp/full:latest

또는 Docker Compose로 전체 스택 구성:

version: "3.8"
services:
  penpot-backend:
    image: penpotapp/backend:latest
    environment:
      - PENPOT_FLAGS=enable-registration enable-login
    depends_on:
      - postgres
      - redis

  penpot-frontend:
    image: penpotapp/frontend:latest
    ports:
      - "9001:80"

  postgres:
    image: postgres:15
    volumes:
      - penpot-postgres:/var/lib/postgresql/data

  redis:
    image: redis:7

volumes:
  penpot-postgres:

Kubernetes 배포도 지원됩니다. Helm 차트가 제공됩니다.

셀프 호스팅이 중요한 이유

데이터 주권: 디자인 파일이 내 서버에만 존재
규정 준수: GDPR, HIPAA 등 규제 환경에서 사용 가능
비용 통제: 사용자 수에 관계없이 고정 비용
네트워크 격리: 인트라넷에서도 운영 가능

기술 스택: Clojure/ClojureScript

Penpot은 흥미로운 기술 선택을 했습니다.

구성요소	기술
백엔드	Clojure
프론트엔드	ClojureScript
데이터베이스	PostgreSQL
캐시	Redis
라이선스	Mozilla Public License 2.0

왜 Clojure인가:

불변성: 함수형 프로그래밍으로 상태 관리 복잡성 감소
REPL 기반 개발: 빠른 피드백 루프
JVM 생태계: Java 라이브러리 활용 가능
동시성: 멀티코어 활용에 유리

이것이 Penpot의 안정성과 성능의 비결입니다.

Figma vs Penpot

기능	Figma	Penpot
소스 코드	폐쇄 소스	오픈 소스
파일 포맷	프로프라이어터리	SVG/CSS/HTML/JSON
배포 방식	클라우드 전용	클라우드 + 셀프 호스팅
비용	유료 플랜 (팀당)	무료
CSS Grid	제한적	완전 지원
Design Tokens	서드파티	네이티브
실시간 협업	지원	지원
오프라인 작업	불가	가능 (셀프 호스팅)
데이터 내보내기	제한적	완전 개방

실시간 협업 또는 “Solo” 모드

Penpot은 팀 규모에 맞춰 유연하게 작동합니다.

실시간 협업

Figma처럼 여러 사람이 동시에 같은 파일을 편집할 수 있습니다.

커서 위치 실시간 표시
선택 영역 공유
코멘트 및 피드백
버전 히스토리

Solo 모드

혼자 작업할 때는 가볍게.

불필요한 협업 기능 비활성화
로컬 저장 우선
빠른 로딩

Penpot Fest: 연례 컨퍼런스

Penpot은 활발한 커뮤니티를 가지고 있습니다.

Penpot Fest 2025는 마드리드에서 열렸습니다:

디자인 시스템 구축 워크샵
오픈소스 디자인 철학 발표
커뮤니티 멤버 간 네트워킹
Penpot 2.0 로드맵 공개

매년 열리며, 온라인 스트리밍도 제공됩니다.

빠른 시작

Penpot Cloud

https://design.penpot.app 접속
계정 생성
첫 프로젝트 시작

Docker

# 가장 간단한 실행
docker run -d -p 9001:9001 penpotapp/full:latest

# 접속
open http://localhost:9001

Docker Compose (프로덕션)

git clone https://github.com/penpot/penpot.git
cd penpot/docker
docker compose up -d

언제 Penpot을 선택해야 하나

신중한 고려가 필요한 상황

Figma 생태계 의존 — 기존 Figma 라이브러리가 많다면 마이그레이션 비용
특정 Figma 전용 플러그인 필요 — Penpot 생태계는 아직 성장 중
엔터프라이즈 지원 — Figma의 엔터프라이즈 기능이 필요하면

마치며: No Handoff Drama

Penpot의 슬로건은 단순합니다:

No handoff drama

디자인과 코드 사이의 간극을 없애겠다는 선언입니다.

Penpot이 제시하는 미래

Open Standards — SVG, CSS, HTML로 벤더 락인 없음
Deployment Agnostic — SaaS 또는 자체 서버, 선택의 자유
Design Systems at Scale — 대규모 디자인 시스템 구축
Developer Experience — Inspect 탭에서 바로 코드 획득

44,737+ 스타가 증명합니다: 오픈소스 디자인 도구의 시대가 왔습니다.

디자이너와 개발자가 진정으로 협업하는 세상. Penpot이 그 길을 열고 있습니다.

🔗 관련 정보

GitHub: https://github.com/penpot/penpot
공식 사이트: https://penpot.app
문서: https://help.penpot.app
Penpot Fest: https://penpotfest.com
커뮤니티: https://community.penpot.app
Docker Hub: https://hub.docker.com/u/penpotapp