From e8a040a289c0a1867567765c6e2344f404da0b65 Mon Sep 17 00:00:00 2001 From: Jihyeon Gim Date: Thu, 8 Aug 2024 19:09:37 +0900 Subject: [PATCH] tiny improvments for 2024-07-31-penpot post Signed-off-by: Jihyeon Gim --- _posts/blog/2024-07-31-penpot.markdown | 327 ++++++++++++------------- 1 file changed, 158 insertions(+), 169 deletions(-) diff --git a/_posts/blog/2024-07-31-penpot.markdown b/_posts/blog/2024-07-31-penpot.markdown index 2908029..6e3ade9 100644 --- a/_posts/blog/2024-07-31-penpot.markdown +++ b/_posts/blog/2024-07-31-penpot.markdown @@ -4,156 +4,157 @@ title: "디자인 도구 `펜팟(Penpot)` 설치부터 활용까지" date: 2024-07-31 categories: blog author: 이현태 (ht518@gluesys.com) -tags: [Penpot, 목업, 디자인목업, 오픈소스] +tags: [Penpot, 펜팟, 목업, 디자인, 오픈소스, Docker, 도커, WSL] cover: "/assets/penpot/penpot_maincover.JPG" main: "/assets/penpot/penpot_maincover.JPG" --- +# 디자인 도구 `Penpot(펜팟)` 설치부터 활용까지 + 안녕하세요?
글루시스 웹 개발팀에서 근무하고 있는 이현태입니다.
-프로젝트 개발과정 중 애플리케이션 또는 웹페이지의 레이아웃과 요소를 보여주기 위해 사용되는 디자인의 시각적 표현 또는 프로토타입을 목업이라 합니다.
-목업은 개발로 넘어가기 전에 애플리케이션 또는 웹사이트의 제품이나 디자인을 시각적으로 표현하는 것으로, -이러한 디자인 작업을 하는 도구인 `펜팟(Penpot)`을 소개하고자 합니다.
-펜팟은 오픈소스 프로그램으로, 등 Figma와 유사한 기능을 제공합니다. 디자인 도구로써 다양한 기능을 제공하며, 디자인 프로젝트를 효율적으로 관리할 수 있습니다.
-저는 완전한 제어와 보안을 위해 툴킷을 내부적으로 호스팅 하는 것을 선호하기 때문에 펜팟을 자체적으로 호스팅하고 사용하면서 느꼈던 장단점들과 활용 방법을 소개하도록 하겠습니다. +프로젝트 개발 과정 중 애플리케이션 또는 웹페이지의 레이아웃과 요소를 보여주기 위해 사용되는 디자인의 시각적 표현 또는 프로토타입을 목업이라 합니다.
+목업은 개발로 넘어가기 전에 애플리케이션 또는 웹사이트의 제품이나 디자인을 시각적으로 표현하는 것으로, 이러한 디자인 작업을 하는 도구인 `Penpot(펜팟)`을 소개하고자 합니다.
+Penpot은 오픈소스 프로그램으로, Figma와 유사한 기능을 제공합니다. 디자인 도구로써 다양한 기능을 제공하며, 디자인 프로젝트를 효율적으로 관리할 수 있습니다.
+저는 완전한 제어와 보안을 위해 툴킷을 내부적으로 호스팅하는 것을 선호하기 때문에 Penpot을 자체적으로 호스팅하고 사용하면서 느꼈던 장단점들과 활용 방법을 소개하도록 하겠습니다. + +## 셀프 호스팅 -## 셀프호스팅 ### Docker로 설치 -펜팟은 Elestio와 Docker로 설치가 가능합니다.
-저는 Windows 환경에서 개발을 하기 때문에 도커 데스크톱(Docker Desktop)에서 WSL2(Linux 용 Windows 하위 시스템, 버전 2)를 사용하도록 설정하여 Linux 컨테이너를 실행하는 환경에서 설치를 하였습니다.
+Penpot은 Elestio와 Docker로 설치가 가능합니다.
+저는 Windows 환경에서 개발하기 때문에 도커 데스크톱(Docker Desktop)에서 WSL2(Linux용 Windows 하위 시스템, 버전 2)를 사용하도록 설정해 Linux 컨테이너를 실행하는 환경에서 설치를 하였습니다.
WSL2에서 별도로 Docker 인스턴스를 설치하고 실행할 수 있지만, 저는 초보자이기 때문에 Docker와 관련된 모든 설정과 작업을 CLI를 통해 작업할 자신이 없었습니다.
-그러므로 여기서는 WSL2를 활성화 하고 Linux를 설치한 뒤, Docker Desktop을 사용하여 Penpot을 설치해보도록 하겠습니다.
+그러므로 여기서는 WSL2를 활성화하고 Linux를 설치한 뒤, Docker Desktop을 사용해 Penpot은 설치해 보도록 하겠습니다.
| **항목** | **설명** | | :---: | :--- | -| **Docker** | 컨테이너(소프트웨어를 실행하는 데 필요한 모든 파일, 라이브러리, 설정 파일 등을 포함하는 패키지) 기반의 오픈소스 가상화 시스템| +| **Docker** | 컨테이너(소프트웨어를 실행하는 데 필요한 모든 파일, 라이브러리, 설정 파일 등을 포함하는 패키지) 기반의 오픈소스 가상화 시스템 | | **Docker Desktop** | Windows 및 macOS 운영 체제에서 Docker를 쉽게 설치하고 사용할 수 있게 해주는 애플리케이션 | | **WSL** | Windows 운영 체제에서 Linux 커널을 실행할 수 있게 해주는 기능 | - #### WSL2 활성화 후 Windows에 Linux를 설치 -1. windows - PowerShell - 관리자로 실행을 시켜줍니다. +1. Windows - PowerShell - 관리자로 실행을 시켜줍니다. ![images_1.JPG](/assets/penpot/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 - ``` +2. PowerShell + - WSL 기능 활성화 + ```powershell + wsl --install + ``` + - 시스템 재부팅 + ```powershell + Restart-Computer + ``` + - WSL 버전을 WSL2로 설정 + ```powershell + wsl --set-default-version 2 + ``` + - 사용 가능한 배포판 목록 확인 + ```powershell + wsl --list --online + ``` + - 원하는 Linux 배포판 설치 + ```powershell + wsl --install -d Ubuntu + ``` + - WSL에 설치된 배보판 목록 + ```powershell + wsl --list --verbose + ``` + - 설치한 Ubuntu 배포판 실행 + ```powershell + wsl + ``` #### Docker Desktop 설치 및 WSL2 설정 -1. [docker desktop](https://www.docker.com/products/docker-desktop/) 공식홈페이지에서 [Download for Windows]를 클릭하여 다운로드하고 설치합니다. - ![images_2.JPG](/assets/penpot/images_2.JPG) +1. [Docker Desktop](https://www.docker.com/products/docker-desktop/) 공식 홈페이지에서 [Download for Windows]를 클릭해 다운로드하고 설치합니다. + ![images_2.JPG](/assets/penpot/images_2.JPG) -2. Docker Desktop 실행후 작업 표시줄의 숨겨진 아이콘 메뉴에서 Docker 아이콘을 선택합니다. 아이콘을 마우스 오른쪽 단추로 클릭하여 Docker 명령 메뉴를 표시하고 "설정"을 선택합니다. - ![images_3.JPG](/assets/penpot/images_3.JPG) +2. Docker Desktop 실행 후 작업 표시줄의 숨겨진 아이콘 메뉴에서 Docker 아이콘을 선택합니다. 아이콘을 마우스 오른쪽 단추로 클릭해 Docker 명령 메뉴를 표시하고 "설정"을 선택합니다. + ![images_3.JPG](/assets/penpot/images_3.JPG) -3. 설정>일반에서 "WSL 2 기반 엔진 사용"이 선택되어 있는지 확인합니다. - ![images_4.JPG](/assets/penpot/images_4.JPG) +3. 설정 > 일반에서 "WSL 2 기반 엔진 사용"이 선택되어 있는지 확인합니다. + ![images_4.JPG](/assets/penpot/images_4.JPG) -4. 설정>리소스>WSL 통합으로 이동하여 Docker 통합을 사용하도록 설정하려는 설치된 WSL 2 배포판에서 선택합니다. - ![images_5.JPG](/assets/penpot/images_5.JPG) +4. 설정 > 리소스 > WSL 통합으로 이동해 Docker 통합을 사용하도록 설정하려는 설치된 WSL 2 배포판에서 선택합니다. + ![images_5.JPG](/assets/penpot/images_5.JPG) 5. Docker가 설치되었는지 확인하려면 PowerShell에서 확인을 합니다. - ``` - docker --version - ``` -6. Docker 이미지를 실행하여 올바르게 설치되었는지 테스트하기위해 PowerShell에서 확인을 합니다. - ``` - docker run hello-world - ``` - -#### [펜팟 패치후 시작하기](https://help.penpot.app/technical-guide/getting-started/#start-penpot) - -Penpot은 Docker compose(v2)라는 Docker 컨테이너들을 정의하고 실행하기 위한 도구를 통해 Penpot 저장소에서 `docker-compose.yaml`파일을 다운로드하여 실행해야 합니다.
-그러려면 Docker compose(v2)이라는 플러그인도 설치가 필요하겠죠?? WSL에서 docker 엔진으로 설치했더라면, Docker compose도 따로 명령어를 통해 설치하고 복잡한 과정을 걸쳐야 합니다.
-하지만 저희는 Docker Desktop을 설치했기 때문에 `docker-compose.yaml` 파일만 다운로드 하면 됩니다.
- -1. 설치한 Ubuntu에서 `docker-compose.yaml`파일을 다운로드 - * windows의 WSL2에서 설치한 Ubuntu를 실행하여 다운로드합니다. - * docker-compose.yaml를 설치할 파일 경로는 따로 신경 쓰실 필요 없어요~! - * wget:인터넷에서 파일을 다운로드할 때 사용되는 명령 줄 도구 - ``` - wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml + ```powershell + docker --version + ``` +6. Docker가 이미지를 실행할 수 있도록 올바르게 설치되었는지 아래와 같은 명령을 PowerShell에서 실행합니다. + ```powershell + docker run hello-world + ``` + +#### [Penpot 설치/시작하기](https://help.penpot.app/technical-guide/getting-started/#start-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: 인터넷에서 파일을 다운로드할 때 사용되는 명령 줄 도구 + ```bash + wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml ``` ![images_6.JPG](/assets/penpot/images_6.JPG) - - * 실질적으로 ubuntu의 파일 경로는 windows에서 가상 시스템을 띄운 거기때문에 파일 탐색기를 열어보면 확인하실 수 있습니다.(Ubuntu 실행명령어에서 `ll`을 쳤을 때 실제 경로예요~!) - ![images_7.JPG](/assets/penpot/images_7.JPG) - -2. 펜팟 서비스 실행하기 - * 항상 docker compose를 통하여 명령어(cli)를 실행할 땐 `Docker Desktop`파일이 실행되고 있어야 합니다. - * Ubuntu에서 명령어를 펜팟 서비스를 실행시키는 명령어를 실행시키고, `http://localhost:9001`에 접속을 합니다. - * 포트 `9001`은 wget으로 설치한 `docker-compose.yaml`파일에 기본으로 설정되어 있고, 변경해서 사용할 수 있어요~! - ``` - docker compose -p penpot -f docker-compose.yaml up -d + - 실질적으로 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` 파일에 기본으로 설정되어 있고, 변경해서 사용할 수 있어요~! + ```bash + docker compose -p penpot -f docker-compose.yaml up -d ``` ![images_8.JPG](/assets/penpot/images_8.JPG) -3. 펜팟 서비스 실행 중지 - ``` - docker compose -p penpot -f docker-compose.yaml down - ``` +3. Penpot 서비스 실행 중지 + ``` + docker compose -p penpot -f docker-compose.yaml down + ``` -### Penpot 구성하기 +### GitLab 연동하기 -펜팟의 서비스를 활성화할 때는 `Docker Compose`를 사용하여 펜팟의 컨테이너의 이미지, 환경 변수, 볼륨, 네트워크 설정 등을 명시하는 파일인 `docker-compose.yaml`을 통해 실행시켜서 서비스를 활성화했습니다.
-[공식 사이트](https://help.penpot.app/technical-guide/developer/) 가이드에 따라 gitlab을 사용하여 로그인 할 수 있게 설정하겠습니다. +앞서 Penpot 컨테이너의 이미지, 환경 변수, 볼륨, 네트워크 설정 등을 명시하는 파일인 `docker-compose.yaml`을 사용해 서비스를 실행했습니다.
+이제 [공식 사이트의 가이드](https://help.penpot.app/technical-guide/developer/)에 따라 GitLab을 사용해 로그인 할 수 있게 설정해 보겠습니다. -#### docker-compose.yaml 파일 설정하기 +#### docker-compose.yaml 파일 수정하기 저는 wget을 통해 `docker-compose.yaml`을 받았습니다. 파일 경로는 `\\wsl.localhost\Ubuntu\home\gluesys` 하위에 속해있고,
-해당 파일의 확장자는 `yaml`파일이기 때문에 `docker-compose.yaml`파일의 속성에 들어가서 연결 프로그램을 `메모장`으로 변경 후 파일 내용을 수정을 했습니다. - -* 수정된 내용은 `penpot-frontend`와 `penpot-backend`입니다. - * 첫 번째로 `penpot-frontend`밑에 줄에 보면 PENPOT_FLAGS라는 부분이 있습니다. 여기서 `disable-secure-session-cookies disable-login enable-login-with-gitlab disable-registration`로 정의했습니다. - * 두 번째는 `penpot-backend`밑에 줄에 PENPOT_FLAGS에다가 `disable-secure-session-cookies disable-login enable-login-with-gitlab` 로 정의했습니다. - * 세 번째는 Gitlab에 인증 관련된 내용 `PENPOT_GITLAB_BASE_URI, PENPOT_GITLAB_CLIENT_ID, PENPOT_GITLAB_CLIENT_SECRET`를 설정해 주었습니다. - -[docker-compose.yaml](/assets/penpot/docker-compose.yaml) - -* 이렇게 옵션을 설정하였다 계정 생성 버튼은 없어지고 `깃랩(GitLab)` 버튼이 생겼을 겁니다. +해당 파일의 확장자는 `yaml` 파일이기 때문에 `docker-compose.yaml` 파일의 속성에 들어가서 연결 프로그램을 `메모장`으로 변경 후 파일 내용을 수정했습니다. + +- 수정된 내용은 `penpot-frontend`와 `penpot-backend`입니다. + - 첫 번째로 `penpot-frontend` 밑에 줄에 있는 `PENPOT_FLAGS`라는 환경 변수를 `disable-secure-session-cookies disable-login enable-login-with-gitlab disable-registration`로 정의했습니다. + - 두 번째는 `penpot-backend` 밑에 줄에 있는 `PENPOT_FLAGS`라는 환경 변수를 `disable-secure-session-cookies disable-login enable-login-with-gitlab`로 정의했습니다. + - 세 번째는 GitLab에 인증에 관련된 `PENPOT_GITLAB_BASE_URI, PENPOT_GITLAB_CLIENT_ID, PENPOT_GITLAB_CLIENT_SECRET` 환경 변수를 설정했습니다. + - [docker-compose.yaml](/assets/penpot/docker-compose.yaml) +- 이렇게 옵션을 설정하였다 계정 생성 버튼은 없어지고 `깃랩(GitLab)` 버튼이 생겼을 겁니다. ![images_9.JPG](/assets/penpot/images_9.JPG) -#### 깃랩에 penpot 인증할 애플리케이션 생성 후 docker-compose.yaml 인증 등록 +#### GitLab에 Penpot을 인증할 애플리케이션 생성 후 인증키 등록 -1. 깃랩 로그인 - 사용자 설정 - 어플리케이션 - [새 애플리케이션 추가] +1. GitLab 로그인 - 사용자 설정 - 애플리케이션 - [새 애플리케이션 추가] ![images_10.JPG](/assets/penpot/images_10.JPG) - * 이름은 : Penpot - * Redirect URL은 : http:///api/auth/oauth/gitlab/callback - * 옵션 체크(선택) : read_user, openid, profile, email + - 이름: Penpot + - Redirect URL: http:///api/auth/oauth/gitlab/callback + - 옵션(선택 사항) + - read_user + - openid + - profile + - email ![images_11.JPG](/assets/penpot/images_11.JPG) 2. 인증키 복사 -* 애플리케이션 ID 와 비밀키를 복사를 합니다. + - 애플리케이션 ID와 비밀키를 복사합니다. ![images_12.JPG](/assets/penpot/images_12.JPG) -* 여기서 복사한 내용은 `docker-compose.yaml`파일에서 `PENPOT_GITLAB_CLIENT_ID, PENPOT_GITLAB_CLIENT_SECRET`에 입력 후 저장하여 penpot 서비스를 재실행합니다. + - 여기서 복사한 내용은 `docker-compose.yaml`파일에서 `PENPOT_GITLAB_CLIENT_ID, PENPOT_GITLAB_CLIENT_SECRET`에 입력 후 저장해 Penpot 서비스를 재실행합니다. ``` # Backend & Frontend @@ -165,95 +166,83 @@ Penpot은 Docker compose(v2)라는 Docker 컨테이너들을 정의하고 실행 PENPOT_GITLAB_CLIENT_SECRET= ``` -* 마지막으로 서비스 접속 후 - [깃랩(GitLab)] 클릭 - 인증 - 로그인하면 끝 ~! +* 마지막으로 서비스 접속 후 - [GitLab] 클릭 - 인증 - 로그인하면 끝~! ![images_13.JPG](/assets/penpot/images_13.JPG) +## Penpot 활용하기 -## `펜팟(Penpot)` 활용하기 - -이제는 `펜팟(Penpot)`에서 제공하는 라이브러리를 다운로드하고 해당 디자인 템플릿을 활용해 간단한 로그인 페이지의 목업 작업을 하는 방법을 소개하도록 하겠습니다.
-라이브러리를 다운로드하고, 라이브러리 안에 마음에 드는 템플릿을 공유해 개인 프로젝트에서 해당 디자인을 활용해서 작업을 할 것입니다.
-[펜팟에서 제공되는 라이브러리](https://penpot.app/libraries-templates) 중에서 저는 `Firefox mockup`와 `Penpot Design System`이라는 라이브러리를 사용하겠습니다. +이제는 Penpot에서 제공하는 라이브러리를 다운로드하고 해당 디자인 템플릿을 활용해 간단한 로그인 페이지의 목업 작업을 하는 방법을 소개하도록 하겠습니다.
+라이브러리를 다운로드하고, 라이브러리 안에 마음에 드는 템플릿을 공유해 개인 프로젝트에서 해당 디자인을 활용해서 작업을 할 것입니다.
+[Penpot에서 제공되는 라이브러리](https://penpot.app/libraries-templates) 중에서 저는 `Firefox mockup`와 `Penpot Design System`이라는 라이브러리를 사용하겠습니다. ### [라이브러리](https://penpot.app/libraries-templates) 다운로드 1. 해당 홈페이지에서 `Firefox mockup`와 `Penpot Design System`를 다운로드합니다. ![images_14.JPG](/assets/penpot/images_14.JPG) ![images_15.JPG](/assets/penpot/images_15.JPG) - 2. 다운로드한 라이브러리를 추가를 해줍니다. -* 로그인 - [초안] - 상단 왼쪽 설정 - [Import Penpot files]를 클릭해줍니다. + - 로그인 - [초안] - 상단 왼쪽 설정 - [Import Penpot files]를 클릭해줍니다. ![images_16.JPG](/assets/penpot/images_16.JPG) -* 다운받은 라이브러리를 선택 후 `Import`를 해줍니다. - * 인내심을 갖고 등록된 후 허가까지해주셔야해요~! + - 다운받은 라이브러리를 선택 후 `Import`를 해줍니다. + - 인내심을 갖고 등록된 후 허가까지해주셔야해요~! ![images_17.JPG](/assets/penpot/images_17.JPG) ![images_18.JPG](/assets/penpot/images_18.JPG) ![images_19.JPG](/assets/penpot/images_19.JPG) -* 해당 라이브러리가 추가가 되었다면 추가된 라이브러리가 나타날 것입니다. + - 해당 라이브러리가 추가가 되었다면 추가된 라이브러리가 나타날 것입니다. ![images_20.JPG](/assets/penpot/images_20.JPG) - 3. 디자인 템플릿을 공유하기 -개인 프로젝트에서 사용하기 위해 `Firefox mockup`에서 인터넷 창 디자인을 선택해서 공유를 해보겠습니다. - -* `Firefox mockup`라이브러리를 선택합니다.(더블클릭을 해주셔야 해요~!) - ![images_21.JPG](/assets/penpot/images_21.JPG) - ![images_22.JPG](/assets/penpot/images_22.JPG) - -* [LAYERS] - [templates] - [light] 우클릭 - [Create component] 클릭을 해줍니다. -저는 하얀색을 좋아하기 때문에 밝은색 인터넷 창의 디자인을 선택할게요~! - ![images_23.JPG](/assets/penpot/images_23.JPG) - -* [ASSETS] - 좌측하단[COMPONENTS]에서 방금 선택한 디자인이 추가가 되었는지 확인합니다. - ![images_24.JPG](/assets/penpot/images_24.JPG) - -자 이제는 로그인폼에 대한 디자인을 선택해서 공유를 해보겠습니다. 똑같은 방법이니 빠르게 넘어가셔도되요~!
- -* `Penpot Design System` 라이브러리를 선택합니다. - ![images_25.JPG](/assets/penpot/images_25.JPG) - ![images_26.JPG](/assets/penpot/images_26.JPG) - -* [LAYERS] - [PAGES] - [Login] 우클릭 - [Create component] 클릭을 해줍니다. - ![images_27.JPG](/assets/penpot/images_27.JPG) -* [ASSETS] - 좌측하단[COMPONENTS]에서 방금 선택한 디자인이 추가가 되었는지 확인합니다. - ![images_28.JPG](/assets/penpot/images_28.JPG) - -* 대시보드 페이지 - [초안] - [해당 라이브러리 우클릭] - [공유 라이브러리로 추가하기] 클릭을 해줍니다. - ![images_29.JPG](/assets/penpot/images_29.JPG) - -4. 개인 프로젝트에서 공유로 설정한 디자인으로 목업 작업 -자 다시 그러면 대시보드(매인페이지) 페이지로 돌아와 프로젝트를 생성해 보겠습니다. -* [NEW PROJECT] 버튼 클릭 후 생성된 프로젝트를 클릭해 줍니다.(저는 `Login`이라 할게요!) + - 개인 프로젝트에서 사용하기 위해 `Firefox mockup`에서 인터넷 창 디자인을 선택해서 공유를 해보겠습니다. + - `Firefox mockup`라이브러리를 선택합니다.(더블클릭을 해주셔야 해요~!) + ![images_21.JPG](/assets/penpot/images_21.JPG) + ![images_22.JPG](/assets/penpot/images_22.JPG) + - [LAYERS] - [templates] - [light] 우클릭 - [Create component] 클릭을 해줍니다. + - 저는 하얀색을 좋아하기 때문에 밝은색 인터넷 창의 디자인을 선택할게요~! + ![images_23.JPG](/assets/penpot/images_23.JPG) + - [ASSETS] - 좌측하단[COMPONENTS]에서 방금 선택한 디자인이 추가가 되었는지 확인합니다. + ![images_24.JPG](/assets/penpot/images_24.JPG) + - 자 이제는 로그인 폼 디자인을 선택해서 공유해 보겠습니다. 똑같은 방법이니 빠르게 넘어가셔도 되요~!
+ - `Penpot Design System` 라이브러리를 선택합니다. + ![images_25.JPG](/assets/penpot/images_25.JPG) + ![images_26.JPG](/assets/penpot/images_26.JPG) + - [LAYERS] - [PAGES] - [Login] 우클릭 - [Create component] 클릭을 해줍니다. + ![images_27.JPG](/assets/penpot/images_27.JPG) + - [ASSETS] - 좌측하단[COMPONENTS]에서 방금 선택한 디자인이 추가가 되었는지 확인합니다. + ![images_28.JPG](/assets/penpot/images_28.JPG) + - 대시보드 페이지 - [초안] - [해당 라이브러리 우클릭] - [공유 라이브러리로 추가하기] 클릭해 줍니다. + ![images_29.JPG](/assets/penpot/images_29.JPG) +4. 개인 프로젝트에서 공유한 디자인으로 목업하기 + - 자 다시 그러면 대시보드(메인 페이지)로 돌아와 프로젝트를 생성해 보겠습니다. + - [NEW PROJECT] 버튼 클릭 후 생성된 프로젝트를 클릭해 줍니다. (저는 `Login`이라 할게요!) ![images_30.JPG](/assets/penpot/images_30.JPG) -* [ASSETS] - [LIBRARIES] - `Firefox mockup`와 `Penpot Design System` 추가를 해줍니다. + - [ASSETS] - [LIBRARIES] - `Firefox mockup`와 `Penpot Design System` 추가를 해줍니다. ![images_31.JPG](/assets/penpot/images_31.JPG) -* 공유된 라이브러리를 확인합니다. + - 공유된 라이브러리를 확인합니다. ![images_32.JPG](/assets/penpot/images_32.JPG) -* `Firefox mockup` 라이브러리에 생성한 인터넷 창의 디자인 컴포넌트를 가운데 화면으로 드래그해줍니다. + - `Firefox mockup` 라이브러리에 생성한 인터넷 창의 디자인 컴포넌트를 가운데 화면으로 드래그해 줍니다. ![images_33.JPG](/assets/penpot/images_33.JPG) -자 이러면 인터넷 창의 디자인 UI 목업이 추가를 하였으니 penpot의 로그인 디자인도 입혀보겠습니다. -* `Penpot Design System` 라이브러리에 생성한 로그인 폼 디자인 컴포넌트를 가운데 화면으로 드래그해줍니다. - ![images_34.JPG](/assets/penpot/images_34.JPG) - -로그인 폼 디자인과 인터넷 창 디자인의 규격이 안맞을텐데 이부분은 잘 사이즈 맞춰서 해주셔야 해요~! -* 로그인 폼 목업 작업 + - 자 이러면 인터넷 창의 디자인 UI 목업이 추가했으니 Penpot의 로그인 디자인도 입혀보겠습니다. + - `Penpot Design System` 라이브러리에 생성한 로그인 폼 디자인 컴포넌트를 가운데 화면으로 드래그해 줍니다. + ![images_34.JPG](/assets/penpot/images_34.JPG) + - 로그인 폼 목업 작업 ![images_35.JPG](/assets/penpot/images_35.JPG) + - 로그인 폼 디자인과 웹 브라우저 창 디자인의 규격이 안 맞을 텐데 이 부분은 사이즈를 잘 조정해서 맞춰야 해요~! -# 마치면서 +## 마치면서 -전 디자이너가 아니다 보니 제한적으로 몇몇 기능만 사용하고 있는 상황에서 다루지 못한 펜팟의 기능과 디자인 작업에 대한 내용들이 많이 있습니다.
-펜팟을 사용하면서 디자인 템플릿(CSS, SVG, HTML 등의 디자인 요소)으로 네이티브 하게 표현함으로써, 디자인에서 개발과정으로 별도의 작업 없이 인터페이스에서 바로 작업하는 장점은 최고의 장점이라 봅니다.
-물론 Penpot의 클라이언트와 서버 모두 느리고 비효율적인 부분도 있고, 신생 프로젝트인 만큼, 안정성이나 성능 면에서는 기존 도구들에 비해 부족할 수 도 있습니다.
+전 디자이너가 아니다 보니 제한적으로 몇몇 기능만 사용하고 있는 상황에서 다루지 못한 Penpot의 기능과 디자인 작업에 대한 내용들이 많이 있습니다.
+Penpot을 사용하면서 디자인 템플릿(CSS, SVG, HTML 등의 디자인 요소)으로 네이티브하게 표현함으로써, 디자인에서 개발 과정으로 별도의 작업 없이 인터페이스에서 바로 작업하는 장점은 최고의 장점이라 봅니다.
+물론 Penpot의 클라이언트와 서버 모두 느리고 비효율적인 부분도 있고, 신생 프로젝트인 만큼, 안정성이나 성능 측면에서는 기존 도구들에 비해 부족할 수도 있습니다.
->작업하면서 텍스트 삽입 중 영어가 아닌 언어(한글)로 입력에 대한 버그도 있으니 주의하세요. -* 이 이슈는 펜팟에서 알려진 이슈입니다. -* 한글로 text 편집 시엔 천천히 입력하셔야 합니다. +> 작업하면서 텍스트 삽입 중 영어가 아닌 언어(한글)로 입력 버그도 있으니 주의하세요. + * 이 이슈는 Penpot에서 알려진 이슈입니다. + * 천천히 입력하는 우회법(?)도 있습니다... -그렇지만 개발 중심의 조직이라면 별도의 비용 없이 자체적으로 호스팅 하여 사용할 수 있다는 점이 최고의 장점이지 않을까 생각합니다. +그렇지만 개발 중심의 조직이라면 별도 비용 없이 자체적으로 호스팅해 사용할 수 있다는 점이 최고의 장점이지 않을까 생각합니다. ## 참고 링크 및 자료 -* [Penpot 공식사이트](https://penpot.app/) -* [Penpot Self-host](https://penpot.app/self-host) -* [Penpot 사용자가이드](https://help.penpot.app/user-guide/libraries/) -* [WSL 2에서 Docker 원격 컨테이너 시작](https://learn.microsoft.com/ko-kr/windows/wsl/tutorials/wsl-containers) -* [Penpot 라이브러리](https://penpot.app/libraries-templates) \ No newline at end of file +* [Penpot 공식 사이트](https://penpot.app/) +* [Penpot 셀프 호스트 안내서](https://penpot.app/self-host) +* [Penpot 사용자 안내서](https://help.penpot.app/user-guide/libraries/) +* [WSL2에서 Docker 원격 컨테이너 시작](https://learn.microsoft.com/ko-kr/windows/wsl/tutorials/wsl-containers) +* [Penpot 라이브러리](https://penpot.app/libraries-templates)