읽을거리 · AI 디자인
펜팟 2.19는 색·글자 규칙을 라이브러리 한 곳에 두고 여러 파일이 가져다 쓰게 한다
10월 28일자 펜팟 2.19 릴리스 노트와 공식 문서에서 확인한 것을 적었다. 공유 디자인 토큰, 면마다 따로 주는 테두리, WebGL 렌더링. GitHub 릴리스 페이지와 어긋나는 부분, 내 계정에서 켜 보기 전에 해 둘 백업도 함께 적었다.
브랜드 파란색이 바뀌었다는 공지가 오면, 파일이 열두 개인 사람은 파일을 열두 번 연다. 색 스타일을 고치고, 버튼을 눈으로 확인하고, 다음 파일로 간다. (가정해서 그린 장면이다. 내가 겪은 일은 아니다.)
10월 28일자 펜팟(Penpot) 릴리스 노트에 2.19 "Is this it"가 올라왔다. 항목 중에 이 장면과 맞닿은 줄이 있다. 토큰을 라이브러리 한 곳에 두고, 그 라이브러리에 연결된 모든 파일이 쓴다는 내용이다. 이 글은 직접 써 본 후기가 아니다. 릴리스 노트, 펜팟 사용자 가이드, GitHub 릴리스 페이지를 열어 확인한 것만 적었다. 내 계정에서 기능이 켜지는지는 확인하지 못했다.
릴리스 노트에 적힌 다섯 줄
릴리스 노트의 본문은 짧다. 기능이 다섯 개 나열돼 있고, 각각 한두 문장이다.
| 기능 | 노트에 적힌 내용 |
|---|---|
| 라이브러리에서 토큰 공유 | 한 라이브러리에 토큰을 저장하고, 연결된 모든 파일에서 쓴다 |
| 면마다 따로 주는 테두리 | 사각형과 보드에서 네 면의 선 굵기를 각각 정한다 |
| 경로 편집기 | 손으로 그린 곡선이 더 부드럽고, 노드 스냅이 기본으로 켜진다 |
| 단축키 직접 지정 | 아무 단축키나 바꾸고, 설정을 내보내고 가져온다 |
| WebGL 렌더링 | 글자가 더 또렷하고, 캔버스가 부드럽고, 내보내기가 빠르다 |
출처: Penpot 2.19 "Is this it" 릴리스 노트 (2026-11-02 확인). 표는 노트의 문장을 요약한 것이다.
노트는 이 릴리스를 "more than one email can hold"라고 소개한다. 한 통의 메일에 다 담기지 않을 만큼 바뀐 것이 많다는 뜻으로 읽힌다.
토큰이 무엇이고, 한 곳에 두면 무엇이 달라지나
디자인 토큰은 색, 글자 크기, 간격 같은 값에 이름을 붙여 둔 목록이다. "파랑 #1F4FFF" 대신 "버튼 배경색"이라는 이름으로 값을 쓰는 식이다. 값을 한 번 고치면 그 이름을 쓰는 곳이 다 따라 바뀐다. 쉽게 말해 색·글자 크기 규칙 목록이다.
펜팟은 이미 토큰 기능이 있었다. 사용자 가이드에 따르면 토큰 패널에서 종류 옆의 + 를 눌러 이름과 값을 넣고, 다른 토큰은 중괄호로 이름을 감싸 참조한다. 숫자 토큰은 사칙 연산도 받는다. 토큰은 선택한 여러 레이어에는 적용되지만 그룹에는 적용되지 않는다고 적혀 있다.
이번 2.19에서 달라진 점은 노트의 한 문장이다. "Tokens stay in sync with library updates, just like components and colors." 토큰도 컴포넌트(버튼·카드 같은 부품)나 색 스타일처럼 라이브러리를 고치면 연결된 파일이 같이 움직인다는 말이다. 위 장면으로 돌아가면, 파란색을 라이브러리에서 한 번 고치고 열두 개 파일이 따라오는 쪽을 노린 기능이다.
문서가 말하는 공유 방식과 함정
사용자 가이드의 "라이브러리 공유" 대목은 이렇다. 토큰은 파일 안에 산다. 공유하려면 토큰을 공유 라이브러리에 두고, 다른 파일에서 그 라이브러리를 토큰 출처로 지정한다. 그리고 한 줄이 더 있다. 라이브러리가 토큰 출처일 때는 가져오기가 막힌다.
세트와 테마 이야기도 같이 읽어야 한다.
- 세트는 토큰을 나누는 묶음이다. 같은 이름이 여러 세트에 있으면 목록에서 나중에 오는 세트가 앞의 것을 덮어쓴다.
- 테마는 어떤 세트를 켤지 정한다. 브랜드나 라이트·다크 모드를 나누는 데 쓴다. 여러 테마가 동시에 켜질 수 있고, 그룹으로 묶으면 그룹마다 하나씩만 켜진다.
- JSON 한 파일, ZIP, 여러 파일이 든 폴더로 가져오고 내보낼 수 있다. 다만 가져오기는 전역 토큰 세트를 교체한다고 적혀 있다.
마지막 줄이 실무에서 중요하다. 이미 토큰을 쌓아 둔 파일에서 가져오기를 누르면 기존 것이 바뀐다. 해 보기 전에 현재 토큰을 JSON으로 내보내 두는 편이 안전하다. 문서는 이 기능이 베타라고 적지 않았다.
테두리를 면마다 따로
사각형과 보드에서 네 면의 선 굵기를 각각 정할 수 있다. 노트는 "둥근 모서리처럼" 균일하게 둘 수도, 면마다 다르게 둘 수도 있다고 설명한다. 토큰과도 같이 쓸 수 있다고 한다.
카드 아래쪽에만 선을 긋거나, 표의 행 구분선처럼 위아래만 있는 칸을 만들 때 쓰는 기능이다. 그동안은 얇은 사각형을 따로 겹쳐 놓는 방식이 흔했다. 이 기능이 그 방식을 얼마나 대신하는지는 직접 써 보지 못했다.
경로 편집기, 단축키, WebGL
세 가지는 짧게 적는다.
경로 편집기는 손으로 그린 곡선이 더 부드러워졌고, 그리는 중에도 경로 도구 막대가 나온다. 이미 있는 노드와 선분에서 이어서 그릴 수 있고 노드 스냅이 기본으로 켜진다.
단축키는 모든 항목을 바꿀 수 있다. 동작 이름이나 키 조합으로 검색하고, 새 키를 눌러 지정한다. 이미 쓰는 조합이면 경고가 뜨고, 하나씩 또는 전부 초기화할 수 있다. 피그마나 스케치에 익숙한 손으로 펜팟을 쓸 때 가장 먼저 만질 곳이다.
WebGL 렌더링은 "사용자 설정에서 켠다"고 되어 있다. 글자가 또렷해지고 캔버스가 부드러워지고 내보내기가 훨씬 빨라진다는 것이 노트의 설명이다. 기본값이 켜짐인지, 알려진 문제가 있는지는 노트에 나오지 않는다. 검색 결과에 잡힌 펜팟 커뮤니티 글(WebGL 렌더러의 다음 계획)은 이 렌더러를 2.16부터 선택해서 켜는 베타로 설명했고, 그 시점에는 보기 모드와 내보내기가 예전 방식이었다고 적었다. 그 글 전문을 내가 열어 보지는 못했다. 그래서 2.19가 내보내기를 어떻게 바꿨는지는 노트의 한 줄 이상으로 말할 수 없다.
GitHub 페이지는 아직 2.18.5
확인하다 어긋나는 부분이 있었다. GitHub 릴리스 페이지에서 "Latest"로 표시된 것은 10월 26일자 2.18.5였고, 2.19는 보이지 않았다. 릴리스 노트가 가리키는 변경 기록 파일(CHANGES.md)의 2.19.0 항목에는 "unreleased"(아직 배포 전)라고 적혀 있었다.
해석은 여러 가지다. 사이트의 노트가 GitHub 배포보다 먼저 올라왔을 수도 있고, 내가 연 GitHub 페이지가 오래된 사본일 수도 있다. 펜팟 호스팅 앱(design.penpot.app)에서 이미 쓸 수 있는지, 직접 설치해 쓰는 쪽은 언제 받을 수 있는지는 확인하지 못했다.
AI 쪽은 이번에 조용하다
노트 어디에도 새 AI 기능은 없다. AI와 이어지는 줄은 커뮤니티 기여자가 고친 버그 하나뿐이다. MCP 플러그인(AI 도구와 파일을 잇는 연결)을 켠 채 페이지를 옮기면 멈추던 문제를 고쳤다고 한다. 다른 고침은 윈도우 빌드 오류, 프로토타입 오버레이 위치, 선을 경로로 바꿀 때의 오류다.
아직 모르는 것
- 호스팅 앱에서 쓸 수 있는 시점. 노트는 10월 28일자인데 GitHub 릴리스는 2.18.5가 최신으로 보였다.
- 파일을 라이브러리에 연결하는 순서. 2.19 노트에는 설정 단계가 없다. 문서의 "토큰 출처로 지정"이 같은 흐름인지는 확인하지 못했다.
- 라이브러리 값을 고치면 연결된 파일에서 얼마나 빨리 반영되는지. 컴포넌트처럼 알림을 받고 업데이트를 누르는 방식인지, 자동인지 적혀 있지 않다.
- WebGL이 기본값인지. 켜는 방법만 있고 기본값 언급이 없다.
- 면마다 다른 테두리가 내보내기나 개발자 정보 보기에서 어떻게 나오는지.
그래서 지금은
토큰을 옮기기 전에 지금 것을 내보낸다. 가져오기가 전역 토큰 세트를 교체한다. 지금 쓰는 토큰 JSON을 먼저 내려받아 두면 되돌릴 길이 남는다. 라이브러리를 토큰 출처로 지정하면 가져오기가 막히니, 순서도 "가져오기 먼저, 출처 지정은 나중"으로 잡는 편이 편하다. 이 순서는 문서의 두 줄을 이어 본 나의 추정이다.
이름은 색 이름이 아니라 쓰임으로 붙인다. "파랑" 대신 "버튼 배경"으로 두면 브랜드 색이 바뀌어도 이름이 틀리지 않는다. 회색 글자의 값을 정할 때는 배경과의 명도 대비부터 본다. 이 사이트를 만들며 회색 글자의 명도 대비를 검사기로 확인하고 고친 적이 있어서, 토큰으로 모으기 전에 한 번 거르는 습관이 있다. AI 코딩 도구에게 이 규칙을 건네는 방법은 AI에게 우리 디자인 규칙을 건네는 파일 한 장, DESIGN.md에서 정리했다.
WebGL은 같은 파일로 재 본다. 설정에서 켜기 전후로 가장 무거운 파일 하나의 내보내기 시간을 직접 재 본다. "훨씬 빠르다"는 노트의 표현이 내 파일에서 몇 초 차이인지는 켜 봐야 안다. 문제가 생기면 같은 설정에서 끄면 된다. 비슷비슷한 AI 화면이 나오는 이유를 디자인 시스템 쪽에서 본 글은 러버블은 왜 '디자인 방향 3안'을 없앴을까에 있다.
출처: Penpot 2.19 "Is this it" 릴리스 노트, Penpot 릴리스 노트 목록, Penpot 사용자 가이드: 디자인 토큰, Penpot GitHub 릴리스, Penpot 변경 기록(CHANGES.md), Penpot 커뮤니티: What's next for the Penpot WebGL renderer