오픈소스 디자인 도구 'penpot/penpot' 깃허브 트렌딩… 디자인-코드 협업·네이티브 디자인 토큰·CSS 그리드 레이아웃 (4.6만 스타)

오픈소스 디자인 도구 Penpot의 깃허브 레포지토리 'penpot/penpot'가 트렌딩에 진입했다. 누적 46,313 스타와 일일 +283 스타를 기록하며, 디자인과 코드 협업을 위해 만들어진 첫 오픈소스 디자인 도구로 자리매김했다. 이 프로젝트는 Kaleidos Inc.가 주도하며 Mozilla Public License v2.0으로 배포된다.

Penpot은 디자이너가 인터랙티브 프로토타입과 디자인 시스템을 대규모로 제작할 수 있고, 개발자는 즉시 사용 가능한 코드로 워크플로우를 단순화할 수 있도록 설계됐다. SVG·CSS·HTML·JSON 등 개방형 표준을 기반으로 동작하며, 브라우저에서 사용하거나 자체 호스팅이 가능하고 무료로 제공된다.

최근 업데이트로 Penpot은 네이티브 디자인 토큰(Design Tokens)을 통합한 첫 디자인 도구가 됐다. 디자인 토큰은 제품 디자인과 개발 사이의 효율성과 협업을 끌어올리는 '단일 진실 공급원(single source of truth)' 역할을 한다.

2.0 대형 업데이트는 Penpot 플랫폼을 새로운 단계로 끌어올렸다. CSS 그리드 레이아웃(CSS Grid Layout) 기능 도입, 전면적인 UI 재설계, 새로운 컴포넌트(Components) 시스템이 핵심이다.

개발자는 인스펙트(inspect) 탭에서 SVG·CSS·HTML 코드에 즉시 접근할 수 있다. 웹훅(webhooks)과 액세스 토큰을 통한 API 지원으로 개발 도구체인에 통합되며, 플러그인을 활용해 플랫폼 기능을 확장하거나 다른 앱과 연동해 맞춤형 솔루션을 설계할 수 있다.

디자인 시스템 측면에서는 네이티브 디자인 토큰·컴포넌트·배리언트(Variants)를 활용해 여러 프로젝트와 플랫폼에 걸쳐 확장 가능하고 재사용 가능한 일관된 UI를 구현하도록 한다.

Penpot은 자사 표현대로 디자인·프로토타입 플랫폼 중 유일한 '배포 비종속적(deployment agnostic)' 도구다. Penpot의 SaaS 클라우드 서비스를 이용하거나, Docker·Kubernetes·Elestio 등을 통해 자체 서버에 배포할 수 있다.

커뮤니티 측면에서는 'Penpot in your language'를 포함한 다국어 카테고리, 'Ask the Community'·'Troubleshooting'·'#MadeWithPenpot' 등 다양한 토론 공간을 운영한다. 라이브러리·템플릿 공유, 깃허브 이슈 등록, 번역 기여 등 여러 형태의 참여를 받고 있으며, 라이선스는 Mozilla Public License v2.0이고 저작권은 Kaleidos Inc.가 보유한다.