디자인 도구 Penpot(펜팟) 설치부터 활용까지

안녕하세요?
글루시스 웹 개발팀에서 근무하고 있는 이현태입니다.
프로젝트 개발 과정 중 애플리케이션 또는 웹페이지의 레이아웃과 요소를 보여주기 위해 사용되는 디자인의 시각적 표현 또는 프로토타입을 목업이라 합니다.
목업은 개발로 넘어가기 전에 애플리케이션 또는 웹사이트의 제품이나 디자인을 시각적으로 표현하는 것으로, 이러한 디자인 작업을 하는 도구인 Penpot(펜팟)을 소개하고자 합니다.
Penpot은 오픈소스 프로그램으로, Figma와 유사한 기능을 제공합니다. 디자인 도구로써 다양한 기능을 제공하며, 디자인 프로젝트를 효율적으로 관리할 수 있습니다.
저는 완전한 제어와 보안을 위해 툴킷을 내부적으로 호스팅하는 것을 선호하기 때문에 Penpot을 자체적으로 호스팅하고 사용하면서 느꼈던 장단점들과 활용 방법을 소개하도록 하겠습니다.

Docker로 셀프 호스팅 구성하기

Penpot은 Elestio와 Docker로 설치가 가능합니다.
저는 Windows 환경에서 개발하기 때문에 도커 데스크톱(Docker Desktop)에서 WSL2(Linux용 Windows 하위 시스템, 버전 2)를 사용하도록 설정해 Linux 컨테이너를 실행하는 환경에서 설치를 하였습니다.
WSL2에서 별도로 Docker 인스턴스를 설치하고 실행할 수 있지만, 저는 초보자이기 때문에 Docker와 관련된 모든 설정과 작업을 CLI를 통해 작업할 자신이 없었습니다.
그러므로 여기서는 WSL2를 활성화하고 Linux를 설치한 뒤, Docker Desktop을 사용해 Penpot은 설치해 보도록 하겠습니다.

항목 설명
Docker 컨테이너(소프트웨어를 실행하는 데 필요한 모든 파일, 라이브러리, 설정 파일 등을 포함하는 패키지) 기반의 오픈소스 가상화 시스템
Docker Desktop Windows 및 macOS 운영 체제에서 Docker를 쉽게 설치하고 사용할 수 있게 해주는 애플리케이션
WSL Windows 운영 체제에서 Linux 커널을 실행할 수 있게 해주는 기능

WSL2 활성화 후 Windows에 Linux를 설치

  1. Windows - PowerShell - 관리자로 실행을 시켜줍니다. images_1.JPG

  2. PowerShell

    • WSL 기능 활성화 
       wsl --install
    • 시스템 재부팅 
       Restart-Computer
    • WSL 버전을 WSL2로 설정 
       wsl --set-default-version 2
    • 사용 가능한 배포판 목록 확인 
       wsl --list --online
    • 원하는 Linux 배포판 설치 
       wsl --install -d Ubuntu
    • WSL에 설치된 배보판 목록 
       wsl --list --verbose
    • 설치한 Ubuntu 배포판 실행 
       wsl

Docker Desktop 설치 및 WSL2 설정

  1. Docker Desktop 공식 홈페이지에서 [Download for Windows]를 클릭해 다운로드하고 설치합니다. images_2.JPG
  2. Docker Desktop 실행 후 작업 표시줄의 숨겨진 아이콘 메뉴에서 Docker 아이콘을 선택합니다. 아이콘을 마우스 오른쪽 단추로 클릭해 Docker 명령 메뉴를 표시하고 “설정”을 선택합니다. images_3.JPG
  3. 설정 > 일반에서 “WSL 2 기반 엔진 사용”이 선택되어 있는지 확인합니다. images_4.JPG
  4. 설정 > 리소스 > WSL 통합으로 이동해 Docker 통합을 사용하도록 설정하려는 설치된 WSL 2 배포판에서 선택합니다. images_5.JPG
  5. Docker가 설치되었는지 확인하려면 PowerShell에서 확인을 합니다. 
      docker --version
  6. Docker가 이미지를 실행할 수 있도록 올바르게 설치되었는지 아래와 같은 명령을 PowerShell에서 실행합니다. 
      docker run hello-world

Penpot 설치/시작하기

Docker Compose는 Docker 컨테이너들을 정의하고 실행하는 도구인데, 이를 정의하는 docker-compose.yaml 파일을 Penpot GitHub 저장소에서 다운로드해 실행할 수 있습니다.
그러려면 Docker Compose라는 플러그인도 설치가 필요하겠죠?? WSL에서 Docker 엔진으로 설치했다면, Docker Compose도 따로 명령어를 통해 설치하고 복잡한 과정을 거쳐야 합니다.
하지만 저는 Docker Desktop을 설치했기 때문에 docker-compose.yaml 파일만 다운로드하면 됩니다.

  1. 설치한 Ubuntu에서 docker-compose.yaml 파일을 다운로드
    • Windows의 WSL2에서 설치한 Ubuntu를 실행해 다운로드합니다.
    • docker-compose.yaml를 설치할 파일 경로는 따로 신경 쓰실 필요 없어요~!
    • wget: 인터넷에서 파일을 다운로드할 때 사용되는 명령 줄 도구 images_6.JPG 
      wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

        - 실질적으로 Windows에서 Ubuntu 가상 시스템을 실행했기 때문에 파일 경로는 파일 탐색기를 열어보면 확인하실 수 있습니다. (Ubuntu 실행 명령어에서 `ll`을 쳤을 때 실제 경로예요~!)  ![images_7.JPG](/assets/penpot/images_7.JPG)
  2. Penpot 서비스 실행하기
    • 항상 Docker Compose를 통해 명령줄 도구(CLI)를 실행할 땐 Docker Desktop이 실행되고 있어야 합니다.
    • Ubuntu에서 Penpot 서비스를 실행하고, http://localhost:9001로 접속을 합니다.
    • 포트 9001은 wget으로 설치한 docker-compose.yaml 파일에 기본으로 설정되어 있고, 변경해서 사용할 수 있어요~! 
       docker compose -p penpot -f docker-compose.yaml up -d

      images_8.JPG

  3. Penpot 서비스 실행 중지 
      docker compose -p penpot -f docker-compose.yaml down

GitLab 연동하기

앞서 Penpot 컨테이너의 이미지, 환경 변수, 볼륨, 네트워크 설정 등을 명시하는 파일인 docker-compose.yaml을 사용해 서비스를 실행했습니다.
이제 공식 사이트의 가이드에 따라 GitLab을 사용해 로그인 할 수 있게 설정해 보겠습니다.

docker-compose.yaml 파일 수정하기

저는 wget을 통해 docker-compose.yaml을 받았습니다. 파일 경로는 \\wsl.localhost\Ubuntu\home\gluesys 하위에 속해있고,
해당 파일의 확장자는 yaml 파일이기 때문에 docker-compose.yaml 파일의 속성에 들어가서 연결 프로그램을 메모장으로 변경 후 파일 내용을 수정했습니다.

  • 수정된 내용은 아래와 같습니다.
    1. penpot-frontend 밑에 줄에 있는 PENPOT_FLAGS라는 환경 변수를 disable-secure-session-cookies disable-login enable-login-with-gitlab disable-registration로 정의했습니다.
    2. penpot-backend 밑에 줄에 있는 PENPOT_FLAGS라는 환경 변수를 disable-secure-session-cookies disable-login enable-login-with-gitlab로 정의했습니다.
    3. GitLab에 인증에 관련된 PENPOT_GITLAB_BASE_URI, PENPOT_GITLAB_CLIENT_ID, PENPOT_GITLAB_CLIENT_SECRET 환경 변수를 설정했습니다.
  • 직접 수정하기 귀찮다면 docker-compose.yaml 파일을 바로 사용하셔도 됩니다.


이렇게 설정을 변경한 후에 서비스를 재구동해 보면 기존에 보이던 계정 생성 버튼이 없어지고 깃랩(GitLab) 버튼이 생깁니다.

images_9.JPG

GitLab에 Penpot을 인증할 애플리케이션 생성 후 인증키 등록

  1. GitLab 로그인 - 사용자 설정 - 애플리케이션 - [새 애플리케이션 추가] images_10.JPG
    • 이름: Penpot
    • Redirect URL: http:///api/auth/oauth/gitlab/callback
    • 옵션(선택 사항)
    • read_user
    • openid
    • profile
    • email images_11.JPG
  2. 인증키 복사
    • 애플리케이션 ID와 비밀키를 복사합니다. images_12.JPG
    • 여기서 복사한 내용은 docker-compose.yaml파일에서 PENPOT_GITLAB_CLIENT_ID, PENPOT_GITLAB_CLIENT_SECRET에 입력 후 저장해 Penpot 서비스를 재실행합니다. ```yaml # Backend & Frontend PENPOT_FLAGS=”[…] enable-login-with-gitlab”

    # Backend only PENPOT_GITLAB_BASE_URI=https://gitlab.com PENPOT_GITLAB_CLIENT_ID= PENPOT_GITLAB_CLIENT_SECRET= ``` - 마지막으로 서비스 접속 후 - [GitLab] 클릭 - 인증 - 로그인하면 끝~! ![images_13.JPG](/assets/penpot/images_13.JPG)

Penpot 활용하기

이제는 Penpot에서 제공하는 라이브러리를 다운로드하고 해당 디자인 템플릿을 활용해 간단한 로그인 페이지의 목업 작업을 하는 방법을 소개하도록 하겠습니다.
라이브러리를 다운로드하고, 라이브러리 안에 마음에 드는 템플릿을 공유해 개인 프로젝트에서 해당 디자인을 활용해서 작업을 할 것입니다.
Penpot에서 제공되는 라이브러리 중에서 저는 Firefox mockup와 Penpot Design System이라는 라이브러리를 사용하겠습니다.

라이브러리 다운로드

  1. 해당 홈페이지에서 Firefox mockup와 Penpot Design System를 다운로드합니다. images_14.JPG images_15.JPG
  2. 다운로드한 라이브러리를 추가해 줍니다.
    • 로그인 - [초안] - 상단 왼쪽 설정 - [Import Penpot files]를 클릭해줍니다. images_16.JPG
    • 다운로드 받은 라이브러리를 선택 후 Import를 해줍니다.
    • 인내심을 갖고 등록된 후 허가까지 해주셔야 해요~! images_17.JPG images_18.JPG images_19.JPG
    • 해당 라이브러리가 추가가 되었다면 추가된 라이브러리가 나타날 것입니다. images_20.JPG
  3. 디자인 템플릿을 공유하기
    • 개인 프로젝트에서 사용하기 위해 Firefox mockup에서 웹 브라우저 화면 디자인을 선택해서 공유해 보겠습니다.
    • Firefox mockup라이브러리를 선택합니다.(더블클릭을 해주셔야 해요~!) images_21.JPG images_22.JPG
    • [LAYERS] - [templates] - [light] 우클릭 - [Create component] 클릭을 해줍니다.
      • 저는 하얀색을 좋아하기 때문에 밝은색 디자인을 선택할게요~! images_23.JPG
    • [ASSETS] - 좌측 하단에 있는 [COMPONENTS]에서 방금 선택한 디자인이 추가가 되었는지 확인합니다. images_24.JPG - 자 이제는 로그인 폼 디자인을 선택해서 공유해 보겠습니다. 똑같은 방법이니 빠르게 넘어가셔도 되요~!
    • Penpot Design System 라이브러리를 선택합니다. images_25.JPG images_26.JPG
    • [LAYERS] - [PAGES] - [Login] 우클릭 - [Create component] 클릭을 해줍니다. images_27.JPG
    • [ASSETS] - 좌측 하단에 있는 [COMPONENTS]에서 방금 선택한 디자인이 추가가 되었는지 확인합니다. images_28.JPG
    • 대시보드 페이지 - [초안] - [해당 라이브러리 우클릭] - [공유 라이브러리로 추가하기] 클릭해 줍니다. images_29.JPG
  4. 개인 프로젝트에서 공유한 디자인으로 목업하기
    • 자 다시 그러면 대시보드(메인 페이지)로 돌아와 프로젝트를 생성해 보겠습니다.
    • [NEW PROJECT] 버튼 클릭 후 생성된 프로젝트를 클릭해 줍니다. (저는 Login이라 할게요!) images_30.JPG
    • [ASSETS] - [LIBRARIES] - Firefox mockup와 Penpot Design System 추가해 줍니다. images_31.JPG
    • 공유된 라이브러리를 확인합니다. images_32.JPG
    • Firefox mockup 라이브러리에 생성한 디자인 컴포넌트를 가운데 화면으로 드래그해 줍니다. images_33.JPG
    • 자 이러면 웹 브라우저 화면의 디자인 UI 목업이 추가했으니 Penpot의 로그인 디자인도 입혀보겠습니다.
    • Penpot Design System 라이브러리에 생성한 로그인 폼 디자인 컴포넌트를 가운데 화면으로 드래그해 줍니다. images_34.JPG
    • 로그인 폼 목업 작업 images_35.JPG
      • 로그인 폼 디자인과 웹 브라우저 창 디자인의 규격이 안 맞을 텐데 이 부분은 사이즈를 잘 조정해서 맞춰야 해요~!

마치면서

전 디자이너가 아니다 보니 제한적으로 몇몇 기능만 사용하고 있는 상황에서 다루지 못한 Penpot의 기능과 디자인 작업에 대한 내용들이 많이 있습니다.
Penpot을 사용하면서 디자인 템플릿(CSS, SVG, HTML 등의 디자인 요소)으로 네이티브하게 표현함으로써, 디자인에서 개발 과정으로 별도의 작업 없이 인터페이스에서 바로 작업하는 장점은 최고의 장점이라 봅니다.
물론 Penpot의 클라이언트와 서버 모두 느리고 비효율적인 부분도 있고, 신생 프로젝트인 만큼, 안정성이나 성능 측면에서는 기존 도구들에 비해 부족할 수도 있습니다.

  • 텍스트 편집 중 영어가 아닌 언어(한글)로 입력할 때 발생하는 버그가 있으니 주의하세요!
    • 이 이슈는 Penpot GitHub 저장소에서도 알려진 이슈입니다.
    • 천천히 입력하는 우회법(?)도 있습니다…

Penpot은 개발 중심의 조직이라면 별도 비용 부담 없이 자체적으로 호스팅해 사용할 수 있다는 점이 최고의 장점이지 않을까 생각합니다.

참고 링크 및 자료