# 2025.11.13

다른 커뮤니티를 참조하다가 피그마(figma)와 유사한 디자인 툴이 있어 설치를 해보았습니다. 

온라인에 있는 글들을 참조하여 설치를 해보았으나 잘 안되는 곳들이 있어 조금 삽질 후 테스트 완료하였습니다. 

 

Penpot 반나절 정도 사용해봤는데, 처음에 초기 설정이 필요합니다. 

개인적으로는 디자인 작업을 하려면 피그마를 사용하고, 이후 내부 보안 및 Mockup 관련 자료가 필요하다면 Penpot을 사용하시는걸 권장합니다. 

Mockup디자인으로만 사용할 경우, local 환경에서는 속도도 빠른 느낌이네요 (저는 SSD에 설치함) 

 

- (펜팟 설치) 해봄 - 

---

 

 

개요

---

Penpot은 2020년에 첫 출시된 오픈소스 UI/UX 디자인 툴입니다. 이후 꾸준히 발전해 2024년 5월에 Penpot 2.0 버전이 출시되면서 Grid CSS 레이아웃 지원, 컴포넌트 시스템 개선, HTML 코드 생성 등의 기능이 추가되었습니다. 초기 베타 출시는 2020년경으로 보이며, 이후 정식 버전으로 발전해 오고 있습니다. 즉, Penpot은 2020년 첫 출시 이후 발전해온 오픈소스 디자인 툴로, 현재도 활발히 개발되고 있는 상태입니다.

 

참고 

- 피그마와 달리 웹 기반에서 사용하는 것이 기본입니다. 

 

참고자료(Reference)

---

penpot 공식 자료

• self-host guide
• self-host Penpot
• github, https://github.com/penpot/penpot
• libraries-templetes
  • https://penpot.app/penpothub/libraries-templates

 

 

다운로드 전용 (for Windows)

• https://github.com/author-more/penpot-desktop/releases
• self-host 설정
  • https://github.com/author-more/penpot-desktop/wiki/Self%E2%80%90hosting
• localhost 로 접속 하는 방법
  • https://github.com/author-more/penpot-desktop/wiki/Instances

 

 

참고사항

- Win/macOS/linux환경에서 tools을 이용하여 사용 가능합니다.

- self-hosting환경에서는 좌측편에 URL만 추가하면 사용할 수 있습니다. 

- 이후 공식 플러그인 등 설치 가능합니다. 

 

 

 

시놀로지 설치

---

1. 현재 환경 구성 - 해봄's 현재 시놀로지 상태

- 다른 분들은 저와 시놀로지 환경 구성이 다를 수 있으니 참고 바랍니다. 

 

메인 1) 시놀로지에 NPM docker 설치 (역방향 프록시 설정)

 

2. 역방향 프록시 설정 

 

• 제어판 > 로그인 포털 > 고급 > 역방향 프록시

 

- 역방향 프록시 이름 : 사용자 수정 가능

 

소스

- 프로토콜 : https  (역방향 프록시 사용)

- 호스트이름 : penpot.domain.synology.me (예시)

- 포트 : 443 (역방향 프록시, 공유기에서 방화벽 해제)

 

대상

 - 프로토콜 : http

- 호스트 : docker 내부 IP / PORT 정보 입력

 

- 사용자 지정 머리글 > 생성 > WebSocket 선택 (자동으로 값 입력됨)

 

 

 

 

아래 - (NPM 설정 - 미설치 사용자는 별도 설치 필요함)

---

 

위와 같이 설정

- DSM > 제어판 > 역방향프로시 에 설정된 값과 동일하게 작성해야함

 

 

- SSL Certificate : (구매한 도메인으로 설정)

 

 

 

3. docker-compose.yaml을 이용하여 설치

---

 

- docker container > 프로젝트 이동

 

상단과 같이 설치되어야 합니다.  (경로는 환경에 맞추서 수정해야함)

 

 

설치 방법은 다음과 같습니다. 

 

3.1 폴더 생성(수동)

 

- 상위 경로에 환경변수 파일(.env) 파일 작성 후 업로드

 

3.2 환경변수 (.env)

 

docker-compose.yaml 파일에서 환경변수 값을 전부 읽어서 빌드/시작 되도록 수정하였기 때문에 위에 있는 값은 전부 수정해야합니다. 

 

다운로드 - 환경변수(.env) 파일 (Click) 

env.example

- 파일 명 수정: ".env" - 파일이름 꼭 변경하세요!

 

추가 - 소스코드 업로드 

 

# Timezone
TZ=Asia/Seoul

# Frontend Port - 호스트에서 사용할 포트 번호
PENPOT_FRONTEND_PORT=9010

# Public URI - 실제 도메인 또는 IP 주소로 변경하세요
PENPOT_PUBLIC_URI=https://penpot.example.com

# Redis/Valkey Configuration - 강력한 비밀번호로 변경하세요
REDIS_PASSWORD=your-strong-redis-password

# PostgreSQL Configuration - 강력한 비밀번호로 변경하세요
POSTGRES_PASSWORD=your-strong-postgres-password

# SMTP Configuration - 실제 SMTP 서버 정보로 변경하세요
PENPOT_SMTP_HOST=smtp.example.com
[email protected]
[email protected]
PENPOT_SMTP_PORT=587
[email protected]
PENPOT_SMTP_PASSWORD=your-smtp-password
PENPOT_SMTP_TLS=true
PENPOT_SMTP_SSL=false

# Volume Paths - 실제 데이터 저장 경로로 변경하세요
VALKEY_DATA_PATH=/path/to/your/data/valkey
POSTGRES_DATA_PATH=/path/to/your/data/postgres
ASSETS_DATA_PATH=/path/to/your/data/assets

 

 

 

# Volume Paths - basic VALKEY_DATA_PATH=/volume1/docker/penpot/valkey POSTGRES_DATA_PATH=/volume1/docker/penpot/db ASSETS_DATA_PATH=/volume1/docker/penpot/assets

- 시놀로지 기본 경로에 설치를 하였다면 위와 같이 수정하시면 됩니다.  

 

그외 

PENPOT_FRONTEND_PORT, PENPOT_PUBLIC_URI 값은 역방향프록시에 설정된 값으로 꼭 수정 해야합니다. 

 

 

이제 docker-compose.yaml을 사용하기 위해서 다음과 같이 작업합니다. 

 

프로젝트 > 생성 > 해당 값 입력

- 프로젝트 이름 : penpot (소문자로 입력 )

- 경로 : 지정된 경로로 설정

- 원본: docker-compose.yml 만들기 선택 (아래 첨부파일을 Ctrl + C, V)

 

다운로드 파일 (Click)

- docker-compose.yaml

 

이후, 

- 다음 > 다음 > 빌드 수행!

- 위에서 지정한 역방향 프록시로 접속! 

 

설치가 완료되면 container manager 에서는 다음과 같이 되어야 합니다. 

 

 

참고사항

- 접속이 되지 않을 경우 URL/PORT 정보가 틀렸을 경우 실행되지 않음

 

 

설치 완료 후

---

 

 

- 공식 penpot 과 같이 self-hosting에서도 상단과 같이 로그인 할 수 있습니다.