Penpot: 오픈소스 Figma

1 week ago 5

Penpot은 디자이너와 개발자가 함께 사용할 수 있는 오픈소스 디자인 및 프로토타이핑 도구로, 브라우저 기반 또는 자체 호스팅 형태로 제공됨
SVG, CSS, HTML, JSON 등 개방형 표준을 기반으로 하며, 디자인 토큰, 컴포넌트 시스템, CSS Grid Layout 등 최신 기능을 포함
플러그인 시스템과 API·웹훅 통합 기능을 통해 외부 애플리케이션과 연동 가능하며, Inspect 모드로 즉시 사용 가능한 코드 확인 지원
커뮤니티 중심의 프로젝트로, 라이브러리·템플릿 공유, 버그 리포트, 번역 참여 등 다양한 기여 방식 제공
Mozilla Public License 2.0 하에 공개되어 있으며, 디자인과 개발의 협업 효율성을 높이는 오픈소스 생태계 확장에 기여

Penpot 개요

Penpot은 디자인과 코드 협업을 위한 최초의 오픈소스 디자인 도구로, 디자이너는 인터랙티브 프로토타입과 디자인 시스템을 제작하고 개발자는 즉시 사용 가능한 코드를 활용할 수 있음
- 브라우저에서 바로 사용하거나 자체 서버에 설치 가능
- 무료로 제공되며, SVG·CSS·HTML·JSON 등 표준 기술 기반
최신 버전에서는 디자인 토큰을 네이티브로 통합하여 디자인과 개발 간의 효율적 협업을 지원
2.0 릴리스에서는 CSS Grid Layout, UI 전면 개편, 새로운 컴포넌트 시스템 등 대규모 업데이트 포함
팀 단위의 추가 서비스가 필요한 조직은 별도 문의 가능
매년 Penpot Fest 행사를 통해 오픈소스 디자인 커뮤니티와 교류

Why Penpot

Penpot은 디자인을 코드 형태로 표현하여 디자이너와 개발자 간 양방향 협업을 가능하게 함
플러그인 시스템을 통해 기능 확장 및 외부 앱 통합 지원
개발자 친화적 구조로, 실시간 협업 또는 단독 작업 선택 가능
Inspect 모드에서 즉시 사용 가능한 SVG·CSS·HTML 코드 확인 가능
자체 호스팅 기능으로 조직이 완전한 소유권을 가진 협업 환경 구축 가능
API 및 웹훅 통합을 통해 개발 툴체인과 연동
디자인 토큰·컴포넌트·Variants를 활용해 일관된 UI 시스템 구축

Getting Started

Penpot은 배포 환경에 구애받지 않는 유일한 디자인·프로토타입 플랫폼으로, SaaS 또는 자체 배포 방식 모두 지원
Docker, Kubernetes, Elestio 등 다양한 설치 옵션 제공
설치 및 배포 가이드는 공식 웹사이트에서 확인 가능

Community

오픈소스 커뮤니티 중심으로 운영되며, 디자인·코드·아이디어 기여를 환영
커뮤니티 포럼에서 질문, 문제 해결, 개선 제안, 이벤트 참여 가능
주요 카테고리: Ask the Community, Troubleshooting, Help us Improve Penpot, #MadeWithPenpot, Events and Announcements, Inside Penpot, Penpot in your language, Design and Code Essentials
모든 참여자는 Code of Conduct를 준수해야 하며, 긍정적이고 안전한 환경 조성 필요

Contributing

다양한 방식으로 프로젝트에 기여 가능
- 라이브러리·템플릿 제작 및 공유
- 팀 초대 및 커뮤니티 참여
- 버그 리포트 또는 GitHub 이슈 등록
- 번역 참여 및 피드백 제공
- Penpot 코드 기여를 위한 개발자 가이드 및 영상 제공
기여 관련 세부 내용은 Contributing Guide에서 확인 가능

Resources

문서, 튜토리얼, 개발 아키텍처, Dev Diaries 등 다양한 자료 제공
- [Documentation], [Getting Started], [Tutorials], [Architecture], [Dev Diaries] 링크 제공

License

Penpot은 Mozilla Public License 2.0 (MPL-2.0) 하에 배포
저작권은 Kaleidos Inc. 에 있으며, 오픈소스 프로젝트로 공개됨

Read Entire Article