디지털 제품을 만들 때, UI/UX 디자인은 사용자 경험을 결정짓는 중요한 요소입니다.
최근에는 Figma, Sketch, Adobe XD 등의 클라우드 기반 디자인 툴이 주류를 이루지만,
Penpot은 오픈 소스라는 강점을 앞세워 점차 인기를 얻고 있습니다.

본 글에서는 Penpot의 특징과 장점, 그리고 실제 프로젝트에 적용해볼 수 있는 방법을 소개하겠습니다.

1. Penpot 소개

1.1 Penpot이란?

오픈 소스로 제공되는 웹 기반 디자인 툴
UI/UX 디자인부터 프로토타이핑까지 지원하며, 팀 협업 기능 탑재
브라우저에서 실행되므로, 플랫폼 제약 없이 어디서나 접근 가능
SVG 포맷을 기반으로 하여, 크기 조절이나 변형 시에도 높은 품질 유지

1.2 주요 특징

오픈 소스 프로젝트
- 소스 코드가 공개되어 있어 원하는 방식으로 커스터마이징 가능
- 커뮤니티 에디션을 직접 서버에 설치하여 사내 전용 디자인 툴로 활용 가능
실시간 협업
- 팀원이 동시에 하나의 프로젝트를 편집하고, 피드백을 주고받을 수 있음
- 주석(Comment) 기능을 통해 디자인에 대해 토론 가능
프로토타이핑 기능
- 단순한 화면 설계뿐 아니라, 페이지 전환이나 인터랙션을 연결하여 작동 방식을 미리 확인
SVG 기반 파일 호환성
- Penpot에서 작업한 디자인 결과물을 SVG로 내보내거나, 외부의 SVG 파일을 가져올 수 있음
- 벡터 그래픽 처리에 특화되어 있어 반응형 UI에 유리

2. Penpot 시작하기

2.1 회원 가입 및 로그인

Penpot 공식 웹사이트 접속
이메일 또는 GitHub/GitLab 계정으로 회원 가입
로그인 후, 대시보드에서 프로젝트(Workspace) 관리

2.2 새 프로젝트 생성

New Project 버튼 클릭
프로젝트 이름, 설명 등을 입력
팀원(협업자) 초대를 통해 공동 작업 환경 구성

2.3 호스팅 옵션

공식 클라우드: Penpot.app에서 제공하는 호스팅을 이용 (간편 시작)
셀프 호스팅: Docker 이미지를 받아 내부 서버에서 구동 (보안 강화, 사내망 활용)

3. 인터페이스 살펴보기

Penpot의 인터페이스는 다른 디자인 툴(Figma, Sketch 등)과 유사하여 진입 장벽이 낮습니다.

좌측 패널: 레이어(요소) 트리, 라이브러리, 컴포넌트 등
우측 패널: 선택한 요소의 속성(Property) 제어 (컬러, 위치, 테두리, 그림자 등)
상단 툴바: 기본 도형(Rectangle, Circle), 펜 툴, 텍스트 툴, 프레임 등 주요 기능
캔버스 영역: 실제 디자인이 표현되는 공간

 -------------------------------------------------
| Layers     |                Canvas               |
| and Tools  |                                     |
|(Left Panel)|               (Center)              |
|            |                                     |
| Properties |-------------------------------------|
|(Right Panel)|
 -------------------------------------------------

4. 기본 기능

4.1 프레임(Frame) 구성

웹/모바일 등 다양한 화면 크기에 맞춰 디자인을 구성할 수 있도록,
Frame 기능을 이용해 캔버스 영역을 지정합니다.

프레임 도구 선택
가로/세로 크기를 설정 (예: 1920x1080, iPhone 화면 크기 등)
프레임 안에 버튼, 텍스트, 이미지를 배치해 UI를 구상

4.2 컴포넌트(Component) 생성

반복되는 UI 요소(버튼, 카드, 네비게이션 바 등)를 컴포넌트로 만들면,
한 곳에서 수정 시 전체 인스턴스에 동일하게 반영
디자인 시스템을 구축해 일관성 있는 UI를 손쉽게 유지

4.3 프로토타이핑(Prototype)

각 프레임을 링크로 연결해 화면 전환을 모의할 수 있음
“버튼 A를 클릭하면 프레임 B로 이동” 등의 인터랙션 설정
데스크톱/모바일용 미리보기(Preview) 모드를 통해 실제 사용 환경 시뮬레이션

5. 협업 기능

5.1 실시간 동시 편집

여러 사용자가 동시에 동일한 프로젝트에 접속해 디자인 가능
각 사용자의 커서가 화면에 표시되어, 협업 과정을 직관적으로 파악

5.2 댓글(Comment) & 피드백

특정 요소를 선택하고 Comment를 남겨 팀원과 의견을 교환
태그(@사용자아이디)를 활용해 특정인에게 알림 전송

5.3 버전 관리

Penpot은 히스토리를 통해 이전 버전 상태로 쉽게 되돌릴 수 있음
큰 변화가 있을 때마다 ‘Save version’ 등으로 스냅샷을 생성해두면 안전

6. Penpot 셀프 호스팅 (선택)

회사 내부망에서만 디자인을 진행하거나, 클라우드 환경에 민감한 프로젝트라면 셀프 호스팅을 고려해볼 수 있습니다.

6.1 Docker를 이용한 배포

# Penpot 공식 Docker 이미지를 내려받아 컨테이너 실행
docker run --name penpot -p 9001:9001 penpot/penpot:latest

환경 변수 세팅, 데이터베이스 연결 등이 필요하므로 공식 문서 참고
사내 DNS 설정 등을 통해 팀원이 내부에서 쉽게 접속 가능하도록 구축

6.2 업그레이드 & 백업

Docker 이미지를 최신 버전으로 갱신해주어야 함
프로젝트 데이터는 내부 볼륨(Volume) 혹은 별도의 디렉토리에 백업
DB(PostgreSQL) 또는 파일 스토리지 형태로 디자인 정보가 저장되므로 백업 정책 필요

7. Figma와 비교했을 때

Penpot은 Figma와 기능적으로 비슷하지만, 몇 가지 차이점이 있습니다.

오픈 소스
- Figma는 SaaS(소프트웨어 서비스)로만 이용 가능, Penpot은 소스 코드를 직접 확인 및 수정 가능
라이선스 비용
- Penpot은 기본적으로 무료, 필요 시 자체 서버 운영
- Figma는 유료 플랜(팀 규모, 프로젝트 수 제한 등) 존재
커뮤니티 & 생태계
- Figma는 이미 풍부한 플러그인과 커뮤니티 리소스가 있음
- Penpot은 꾸준히 생태계가 커지고 있지만, 아직은 상대적으로 적은 편
파일 호환성
- Penpot은 SVG 기반, Figma 파일을 바로 가져오긴 어렵지만, 일부 변환 툴 활용 가능

8. 실무 활용 팁

디자인 시스템
- 컴포넌트, 색상 팔레트, 폰트 스타일 등을 ‘Design Library’ 형태로 공유
- 팀 전체가 동일 리소스를 사용하여 UI 일관성 유지
디자인 스펙 문서화
- 개발자에게 전달할 색상 코드, 간격, 폰트 사이즈 등을 Penpot에서 바로 확인 가능
- 캔버스 상의 요소를 클릭하면 속성(스펙)을 바로 볼 수 있어 커뮤니케이션이 쉬워짐
개발자 핸드오프
- Penpot에는 개발자 뷰(Developer View) 기능이 존재하며, 이 기능으로 코드 스니펫(CSS) 제공 가능
- 도형, 폰트, 색상 정보를 코드로 빠르게 변환해 개발 생산성 상승

9. 결론

Penpot은 오픈 소스, 브라우저 기반, 실시간 협업을 특징으로 내세우며,
UI/UX 디자인 툴 시장에서 유의미한 대안으로 자리 잡고 있습니다.

장점: 무제한 프로젝트/사용자, 셀프 호스팅 가능, SVG 기반 호환성
단점: 아직 Figma 대비 플러그인/커뮤니티 지원이 부족할 수 있음
적합한 시나리오: 사내 네트워크 환경에서 보안이 중요한 디자인 작업, 비용 효율을 우선시하는 스타트업, 오픈 소스 생태계에 관심 많은 팀

프로젝트 규모나 보안 요구 사항에 따라 Penpot을 고려해보면,
팀원들과 효율적이고 자유로운 협업을 경험하실 수 있을 것입니다.

자세한 설치 가이드와 최신 기능 정보는 Penpot 공식 문서를 참고하세요.

Penpot으로 디자인 협업하기