diff --git a/_posts/blog/2024-07-31-penpot.markdown b/_posts/blog/2024-07-31-penpot.markdown
index 2908029..75eb473 100644
--- a/_posts/blog/2024-07-31-penpot.markdown
+++ b/_posts/blog/2024-07-31-penpot.markdown
@@ -1,161 +1,184 @@
---
layout: post
-title: "디자인 도구 `펜팟(Penpot)` 설치부터 활용까지"
+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로 설치
+## 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를 설치
-#### WSL2 활성화 후 Windows에 Linux를 설치
-
-1. windows - PowerShell - 관리자로 실행을 시켜줍니다.
- 
+1. Windows - PowerShell - 관리자로 실행을 시켜줍니다.
+ 
-2. Powershell
- * WSL 기능 활성화
- ```
+2. PowerShell
+ - WSL 기능 활성화
+ ```powershell
wsl --install
```
- * 시스템 재부팅
- ```
+ - 시스템 재부팅
+ ```powershell
Restart-Computer
```
- * WSL 버전을 WSL2로 설정
- ```
+ - WSL 버전을 WSL2로 설정
+ ```powershell
wsl --set-default-version 2
```
- * 사용 가능한 배포판 목록 확인
- ```
- wsl --list --online
- ```
- * 원하는 Linux 배포판 설치
+ - 사용 가능한 배포판 목록 확인
+ ```powershell
+ wsl --list --online
```
+ - 원하는 Linux 배포판 설치
+ ```powershell
wsl --install -d Ubuntu
```
- * WSL에 설치된 배보판 목록
- ```
+ - WSL에 설치된 배보판 목록
+ ```powershell
wsl --list --verbose
```
- * 설치한 Ubuntu 배포판 실행
- ```
+ - 설치한 Ubuntu 배포판 실행
+ ```powershell
wsl
```
-#### Docker Desktop 설치 및 WSL2 설정
+### Docker Desktop 설치 및 WSL2 설정
+
+1. [Docker Desktop](https://www.docker.com/products/docker-desktop/) 공식 홈페이지에서 [Download for Windows]를 클릭해 다운로드하고 설치합니다.
+
+ 
+
+2. Docker Desktop 실행 후 작업 표시줄의 숨겨진 아이콘 메뉴에서 Docker 아이콘을 선택합니다. 아이콘을 마우스 오른쪽 단추로 클릭해 Docker 명령 메뉴를 표시하고 "설정"을 선택합니다.
-1. [docker desktop](https://www.docker.com/products/docker-desktop/) 공식홈페이지에서 [Download for Windows]를 클릭하여 다운로드하고 설치합니다.
- 
+ 
-2. Docker Desktop 실행후 작업 표시줄의 숨겨진 아이콘 메뉴에서 Docker 아이콘을 선택합니다. 아이콘을 마우스 오른쪽 단추로 클릭하여 Docker 명령 메뉴를 표시하고 "설정"을 선택합니다.
- 
+3. 설정 > 일반에서 "WSL 2 기반 엔진 사용"이 선택되어 있는지 확인합니다.
-3. 설정>일반에서 "WSL 2 기반 엔진 사용"이 선택되어 있는지 확인합니다.
- 
+ 
-4. 설정>리소스>WSL 통합으로 이동하여 Docker 통합을 사용하도록 설정하려는 설치된 WSL 2 배포판에서 선택합니다.
- 
+4. 설정 > 리소스 > WSL 통합으로 이동해 Docker 통합을 사용하도록 설정하려는 설치된 WSL 2 배포판에서 선택합니다.
+
+ 
5. Docker가 설치되었는지 확인하려면 PowerShell에서 확인을 합니다.
- ```
- docker --version
- ```
-6. Docker 이미지를 실행하여 올바르게 설치되었는지 테스트하기위해 PowerShell에서 확인을 합니다.
- ```
- docker run hello-world
- ```
-#### [펜팟 패치후 시작하기](https://help.penpot.app/technical-guide/getting-started/#start-penpot)
+ ```powershell
+ docker --version
+ ```
-Penpot은 Docker compose(v2)라는 Docker 컨테이너들을 정의하고 실행하기 위한 도구를 통해 Penpot 저장소에서 `docker-compose.yaml`파일을 다운로드하여 실행해야 합니다.
-그러려면 Docker compose(v2)이라는 플러그인도 설치가 필요하겠죠?? WSL에서 docker 엔진으로 설치했더라면, Docker compose도 따로 명령어를 통해 설치하고 복잡한 과정을 걸쳐야 합니다.
-하지만 저희는 Docker Desktop을 설치했기 때문에 `docker-compose.yaml` 파일만 다운로드 하면 됩니다.
+6. Docker가 이미지를 실행할 수 있도록 올바르게 설치되었는지 아래와 같은 명령을 PowerShell에서 실행합니다.
-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 run hello-world
+ ```
- * 실질적으로 ubuntu의 파일 경로는 windows에서 가상 시스템을 띄운 거기때문에 파일 탐색기를 열어보면 확인하실 수 있습니다.(Ubuntu 실행명령어에서 `ll`을 쳤을 때 실제 경로예요~!)
- 
+### [Penpot 설치/시작하기](https://help.penpot.app/technical-guide/getting-started/#start-penpot)
-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
+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
+ ```
+
+ - 실질적으로 Windows에서 Ubuntu 가상 시스템을 실행했기 때문에 파일 경로는 파일 탐색기를 열어보면 확인하실 수 있습니다. (Ubuntu 실행 명령어에서 `ll`을 쳤을 때 실제 경로예요~!)
+
+ 
+
+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
```
+
-3. 펜팟 서비스 실행 중지
- ```
- docker compose -p penpot -f docker-compose.yaml down
- ```
-### Penpot 구성하기
+3. Penpot 서비스 실행 중지
+
+ ```bash
+ docker compose -p penpot -f docker-compose.yaml down
+ ```
-펜팟의 서비스를 활성화할 때는 `Docker Compose`를 사용하여 펜팟의 컨테이너의 이미지, 환경 변수, 볼륨, 네트워크 설정 등을 명시하는 파일인 `docker-compose.yaml`을 통해 실행시켜서 서비스를 활성화했습니다.
-[공식 사이트](https://help.penpot.app/technical-guide/developer/) 가이드에 따라 gitlab을 사용하여 로그인 할 수 있게 설정하겠습니다.
+### GitLab 연동하기
-#### docker-compose.yaml 파일 설정하기
+앞서 Penpot 컨테이너의 이미지, 환경 변수, 볼륨, 네트워크 설정 등을 명시하는 파일인 `docker-compose.yaml`을 사용해 서비스를 실행했습니다.
+이제 [공식 사이트의 가이드](https://help.penpot.app/technical-guide/developer/)에 따라 GitLab을 사용해 로그인 할 수 있게 설정해 보겠습니다.
+
+#### docker-compose.yaml 파일 수정하기
저는 wget을 통해 `docker-compose.yaml`을 받았습니다. 파일 경로는 `\\wsl.localhost\Ubuntu\home\gluesys` 하위에 속해있고,
-해당 파일의 확장자는 `yaml`파일이기 때문에 `docker-compose.yaml`파일의 속성에 들어가서 연결 프로그램을 `메모장`으로 변경 후 파일 내용을 수정을 했습니다.
+해당 파일의 확장자는 `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](/assets/penpot/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`를 설정해 주었습니다.
+이렇게 설정을 변경한 후에 서비스를 재구동해 보면 기존에 보이던 계정 생성 버튼이 없어지고 `깃랩(GitLab)` 버튼이 생깁니다.
-[docker-compose.yaml](/assets/penpot/docker-compose.yaml)
+
-* 이렇게 옵션을 설정하였다 계정 생성 버튼은 없어지고 `깃랩(GitLab)` 버튼이 생겼을 겁니다.
- 
+#### GitLab에 Penpot을 인증할 애플리케이션 생성 후 인증키 등록
-#### 깃랩에 penpot 인증할 애플리케이션 생성 후 docker-compose.yaml 인증 등록
+1. `GitLab 로그인` - `사용자 설정` - `애플리케이션` - `[새 애플리케이션 추가]`
-1. 깃랩 로그인 - 사용자 설정 - 어플리케이션 - [새 애플리케이션 추가]
- 
- * 이름은 : 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
+
+ 
2. 인증키 복사
-* 애플리케이션 ID 와 비밀키를 복사를 합니다.
+
+ - 애플리케이션 ID와 비밀키를 복사합니다.
+
-* 여기서 복사한 내용은 `docker-compose.yaml`파일에서 `PENPOT_GITLAB_CLIENT_ID, PENPOT_GITLAB_CLIENT_SECRET`에 입력 후 저장하여 penpot 서비스를 재실행합니다.
- ```
+ - 여기서 복사한 내용은 `docker-compose.yaml`파일에서 `PENPOT_GITLAB_CLIENT_ID, PENPOT_GITLAB_CLIENT_SECRET`에 입력 후 저장해 Penpot 서비스를 재실행합니다.
+
+ ```yaml
# Backend & Frontend
PENPOT_FLAGS="[...] enable-login-with-gitlab"
@@ -165,95 +188,119 @@ Penpot은 Docker compose(v2)라는 Docker 컨테이너들을 정의하고 실행
PENPOT_GITLAB_CLIENT_SECRET=
```
-* 마지막으로 서비스 접속 후 - [깃랩(GitLab)] 클릭 - 인증 - 로그인하면 끝 ~!
- 
+ - 마지막으로 서비스 접속 후 - [GitLab] 클릭 - 인증 - 로그인하면 끝~!
+ 
-## `펜팟(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`를 다운로드합니다.
- 
- 
-2. 다운로드한 라이브러리를 추가를 해줍니다.
-* 로그인 - [초안] - 상단 왼쪽 설정 - [Import Penpot files]를 클릭해줍니다.
+ 
+ 
+
+2. 다운로드한 라이브러리를 추가해 줍니다.
+
+ - 로그인 - `[초안]` - 상단 왼쪽 `설정` - `[Import Penpot files]`를 클릭해줍니다.
+
-* 다운받은 라이브러리를 선택 후 `Import`를 해줍니다.
- * 인내심을 갖고 등록된 후 허가까지해주셔야해요~!
+
+ - 다운로드 받은 라이브러리를 선택 후 `Import`를 해줍니다.
+ - 인내심을 갖고 등록된 후 허가까지 해주셔야 해요~!
+
-* 해당 라이브러리가 추가가 되었다면 추가된 라이브러리가 나타날 것입니다.
+
+ - 해당 라이브러리가 추가가 되었다면 추가된 라이브러리가 나타날 것입니다.
+
3. 디자인 템플릿을 공유하기
-개인 프로젝트에서 사용하기 위해 `Firefox mockup`에서 인터넷 창 디자인을 선택해서 공유를 해보겠습니다.
+ - 개인 프로젝트에서 사용하기 위해 `Firefox mockup`에서 웹 브라우저 화면 디자인을 선택해서 공유해 보겠습니다.
+ - `Firefox mockup`라이브러리를 선택합니다.(더블클릭을 해주셔야 해요~!)
+
+ 
+ 
-* `Firefox mockup`라이브러리를 선택합니다.(더블클릭을 해주셔야 해요~!)
- 
- 
+ - `[LAYERS]` - `[templates]` - `[light]` 우클릭 - `[Create component]` 클릭을 해줍니다.
+ - 저는 하얀색을 좋아하기 때문에 밝은색 디자인을 선택할게요~!
-* [LAYERS] - [templates] - [light] 우클릭 - [Create component] 클릭을 해줍니다.
-저는 하얀색을 좋아하기 때문에 밝은색 인터넷 창의 디자인을 선택할게요~!
- 
+ 
-* [ASSETS] - 좌측하단[COMPONENTS]에서 방금 선택한 디자인이 추가가 되었는지 확인합니다.
- 
+ - `[ASSETS]` - 좌측 하단에 있는 `[COMPONENTS]`에서 방금 선택한 디자인이 추가가 되었는지 확인합니다.
-자 이제는 로그인폼에 대한 디자인을 선택해서 공유를 해보겠습니다. 똑같은 방법이니 빠르게 넘어가셔도되요~!
+ 
-* `Penpot Design System` 라이브러리를 선택합니다.
- 
- 
+ - 자 이제는 로그인 폼 디자인을 선택해서 공유해 보겠습니다. 똑같은 방법이니 빠르게 넘어가셔도 되요~!
+ - `Penpot Design System` 라이브러리를 선택합니다.
-* [LAYERS] - [PAGES] - [Login] 우클릭 - [Create component] 클릭을 해줍니다.
- 
-* [ASSETS] - 좌측하단[COMPONENTS]에서 방금 선택한 디자인이 추가가 되었는지 확인합니다.
- 
+ 
+ 
-* 대시보드 페이지 - [초안] - [해당 라이브러리 우클릭] - [공유 라이브러리로 추가하기] 클릭을 해줍니다.
- 
+ - `[LAYERS]` - `[PAGES]` - `[Login]` 우클릭 - `[Create component]` 클릭을 해줍니다.
+
+ 
+
+ - `[ASSETS]` - 좌측 하단에 있는 `[COMPONENTS]`에서 방금 선택한 디자인이 추가가 되었는지 확인합니다.
+
+ 
+
+ - 대시보드 페이지 - `[초안]` - `[해당 라이브러리 우클릭]` - `[공유 라이브러리로 추가하기]` 클릭해 줍니다.
+
+ 
+
+4. 개인 프로젝트에서 공유한 디자인으로 목업하기
+ - 자 다시 그러면 대시보드(메인 페이지)로 돌아와 프로젝트를 생성해 보겠습니다.
+ - `[NEW PROJECT]` 버튼 클릭 후 생성된 프로젝트를 클릭해 줍니다. (저는 `Login`이라 할게요!)
-4. 개인 프로젝트에서 공유로 설정한 디자인으로 목업 작업
-자 다시 그러면 대시보드(매인페이지) 페이지로 돌아와 프로젝트를 생성해 보겠습니다.
-* [NEW PROJECT] 버튼 클릭 후 생성된 프로젝트를 클릭해 줍니다.(저는 `Login`이라 할게요!)
-* [ASSETS] - [LIBRARIES] - `Firefox mockup`와 `Penpot Design System` 추가를 해줍니다.
+
+ - `[ASSETS]` - `[LIBRARIES]` - `Firefox mockup`와 `Penpot Design System` 추가해 줍니다.
+
-* 공유된 라이브러리를 확인합니다.
+
+ - 공유된 라이브러리를 확인합니다.
+
-* `Firefox mockup` 라이브러리에 생성한 인터넷 창의 디자인 컴포넌트를 가운데 화면으로 드래그해줍니다.
+
+ - `Firefox mockup` 라이브러리에 생성한 디자인 컴포넌트를 가운데 화면으로 드래그해 줍니다.
+
-자 이러면 인터넷 창의 디자인 UI 목업이 추가를 하였으니 penpot의 로그인 디자인도 입혀보겠습니다.
-* `Penpot Design System` 라이브러리에 생성한 로그인 폼 디자인 컴포넌트를 가운데 화면으로 드래그해줍니다.
- 
-로그인 폼 디자인과 인터넷 창 디자인의 규격이 안맞을텐데 이부분은 잘 사이즈 맞춰서 해주셔야 해요~!
-* 로그인 폼 목업 작업
+ - 자 이러면 웹 브라우저 화면의 디자인 UI 목업이 추가했으니 Penpot의 로그인 디자인도 입혀보겠습니다.
+ - `Penpot Design System` 라이브러리에 생성한 로그인 폼 디자인 컴포넌트를 가운데 화면으로 드래그해 줍니다.
+
+ 
+
+ - 로그인 폼 목업 작업
+
-# 마치면서
+ - 로그인 폼 디자인과 웹 브라우저 창 디자인의 규격이 안 맞을 텐데 이 부분은 사이즈를 잘 조정해서 맞춰야 해요~!
+
+## 마치면서
-전 디자이너가 아니다 보니 제한적으로 몇몇 기능만 사용하고 있는 상황에서 다루지 못한 펜팟의 기능과 디자인 작업에 대한 내용들이 많이 있습니다.
-펜팟을 사용하면서 디자인 템플릿(CSS, SVG, HTML 등의 디자인 요소)으로 네이티브 하게 표현함으로써, 디자인에서 개발과정으로 별도의 작업 없이 인터페이스에서 바로 작업하는 장점은 최고의 장점이라 봅니다.
-물론 Penpot의 클라이언트와 서버 모두 느리고 비효율적인 부분도 있고, 신생 프로젝트인 만큼, 안정성이나 성능 면에서는 기존 도구들에 비해 부족할 수 도 있습니다.
+전 디자이너가 아니다 보니 제한적으로 몇몇 기능만 사용하고 있는 상황에서 다루지 못한 Penpot의 기능과 디자인 작업에 대한 내용들이 많이 있습니다.
+Penpot을 사용하면서 디자인 템플릿(CSS, SVG, HTML 등의 디자인 요소)으로 네이티브하게 표현함으로써, 디자인에서 개발 과정으로 별도의 작업 없이 인터페이스에서 바로 작업하는 장점은 최고의 장점이라 봅니다.
+물론 Penpot의 클라이언트와 서버 모두 느리고 비효율적인 부분도 있고, 신생 프로젝트인 만큼, 안정성이나 성능 측면에서는 기존 도구들에 비해 부족할 수도 있습니다.
->작업하면서 텍스트 삽입 중 영어가 아닌 언어(한글)로 입력에 대한 버그도 있으니 주의하세요.
-* 이 이슈는 펜팟에서 알려진 이슈입니다.
-* 한글로 text 편집 시엔 천천히 입력하셔야 합니다.
+- *텍스트 편집 중 영어가 아닌 언어(한글)로 입력할 때 발생하는 버그가 있으니 주의하세요!*
+ - [이 이슈](https://github.com/penpot/penpot/issues/4163)는 Penpot GitHub 저장소에서도 알려진 이슈입니다.
+ - 천천히 입력하는 우회법(?)도 있습니다...
-그렇지만 개발 중심의 조직이라면 별도의 비용 없이 자체적으로 호스팅 하여 사용할 수 있다는 점이 최고의 장점이지 않을까 생각합니다.
+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)