2025.11.24

안녕하세요. 커뮤니티에 글쓰기 모듈과 에드온을 업데이트 후 이전에 작성된글을 다시 작성하고 있습니다. 

테스트 및 자료를 조금 더 깔끔하게 정리하기 위해서!? 

 

이전에 글쓰기 모듈은 기본 모듈이라 불편하여 editorjs를 이용하여 글쓰기 작성하고 있습니다.  현재 모듈도 부족한건 많지만, 포스팅 할때에는 조금 더 편리할 것 같아 모듈을 수정하고 있습니다. 

https://editorjs.io/

 

이하 이전글 내용 

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-templeteshttps://penpot.app/penpothub/libraries-templates
• 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
• https://github.com/author-more/penpot-desktop/wiki/Self%E2%80%90hosting
• localhost 로 접속 하는 방법https://github.com/author-more/penpot-desktop/wiki/Instances
• https://github.com/author-more/penpot-desktop/wiki/Instances

 

 

참고사항

• Win/macOS/linux환경에서 tools을 이용하여 사용 가능합니다.
• self-hosting환경에서는 좌측편에 URL만 추가하면 사용할 수 있습니다. 
• 이후 공식 플러그인 등 설치 가능합니다. 

 

시놀로지 설치

 

(참고사항) 현재 환경 구성 - 해봄's 현재 시놀로지 상태

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

 

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

(설치과정 생략! 향후 요청시 업데이트 예정)

 

2. 역방향 프록시 설정 

 

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

 

 

 

소스

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

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

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

 

대상

 - 프로토콜 : http

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

 

 

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

 

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

 

 

위와 같이 설정

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

 

 

 

 

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

• docker container > 프로젝트 이동

 

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

3.1 폴더 생성(수동)

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

 

3.2 환경변수 (.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

아래 값 수정/확인 후 변경 바랍니다 (필수)

• PENPOT_FRONTEND_PORT
• PENPOT_PUBLIC_URI
• VALKEY_DATA_PATH
• POSTGRES_DATA_PATH
• ASSETS_DATA_PATH

 

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

 

# Volume Paths - basic

VALKEY_DATA_PATH=/volume1/docker/penpot/valkey

POSTGRES_DATA_PATH=/volume1/docker/penpot/db

ASSETS_DATA_PATH=/volume1/docker/penpot/assets

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

 

 

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

 

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

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

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

 

이후, 

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

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

 

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

 

 

참고사항

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

 

설치 완료 후

 

 

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

 

 

다시 포스팅하며... 

1. 글자 색상 기능 누락

2. 글자크기 변경을 조금 더 쉽게!

3. 다른곳에서 글 복사/붙여넣기 할때, 글+이미지가 동시에 들어갈 수 있는 기능 필요! 

4. 단축키 ? (윈도우와 충돌 발생)