Powered by DocuRise
↓ j a y. p m . a i · 2 0 2 6 **Pencil × Claude Code. AI 와
함 께
문 서
디 자인 자 동 화 하 기**- 본 가이드는 MacOS 환경을 기반으로 제작되었습니다.- Claude Code Max 요금제를 사용하고 있습니다.단, Pro 요금제에서도 리밋이 걸리긴 하지만 워크플로우 자체는 구현할 수 있습니다.- 해당 가이드는 도구 '설치' 자체보다는 '워크플로우 구축'에 초점이 맞추어져 있습니다. 툴 설치 및 다운로드는 개인별로 환경이 다르기 때문에공식 문서를 꼭 참조하시는 것을 가장 추천드립니다.- 본 문서의 허락없는 무단 복제와 배포를 금지합니다. 01
P e n c i l × C l a u d e C o d e G u i d e p . 0 2↓ C o n t e n t s 목 차Table of Contents01 굳이 Pencil과 Claude code 조합을 사용한 이유 0302 각 툴은 어떤 역할을 하나요? 0403 셋은 어떻게 연결되는가 0704 세 가지 통로, 무엇이 다른가 0805 시작하기 전 준비물 0906 단계별 설치 가이드 10 02
P e n c i l × C l a u d e C o d e G u i d e p . 0 3↓ C h a p t e r 0 1 **이
도 구 들 을
채 택 한
이유 는
무 엇 인 가 요 ?**Why this combo matters50페이지짜리 가이드북을 만든다고 상상해봅시다. 표지 1장, 목차 1장, 챕터 인트로 5장, 용어 페이지 50장 — 총 57장입니다. 페이지마다 같은헤더, 같은 푸터, 같은 구조에 내용만 다릅니다. Figma로 만든다면 마스터 컴포넌트 만들고, 인스턴스 50번 복제하고, 각각 텍스트 입력하고, 페이지 번호 일일이 바꾸는 작업이 필요합니다. **Pencil + Claude Code
조 합 으 로
같 은 일을
하 면 , 30 분 이 면 초 안 이
완 성 됩 니다 .**Claude cowork나 CLI로도 문서를 만들 수 있지만 텍스트 자체의 편집이 불가능합니다. Pencil은 직접 UI 화면또는 문서를 캔버스 환경에서 그릴 수 있고 피그마와 유사한 UI로 텍스트 수정,이미지 추가 작업을 할 수 있기 때문에 AI에게 100% 위임하기 어려운 "문서 작업"에는 Pencil과 Claude code조합을 사용했습니다. 03
P e n c i l × C l a u d e C o d e G u i d e p . 0 4↓ C h a p t e r 0 2 · A c t o r 2 o f 3 **간 단 한
툴
설 명
P e n c i l × C l a u d e C o d e G u i d e p . 0 5↓ C h a p t e r 0 2 · A c t o r 3 o f 3 MCPAI에게 도구를 쥐여주는 약속MCP(Model Context Protocol)는 "AI에게 도구를 쥐여주는 표준 규약"입니다.비유하자면 이런 것입니다. 사람은 누구나 손이 있지만, 도구를 어떻게 잡을지는 가지각색이었습니다. MCP는 "모든 사람이 같은 방식으로 도구를 잡자"는 약속입니다.Pencil은 자체 MCP 서버를 제공합니다. 덕분에 Claude Code 또는 Codex 연결을 통해서 텍스트 한 마디로 Pencil 캔버스를 직접 조작할 수있습니다. 05
P e n c i l × C l a u d e C o d e G u i d e p . 0 6↓ C h a p t e r 0 3 **3 개가
연 결 되 는
구 조**복잡한 구조처럼 보이지만, 사용자 입장에서는 단순합니다.여러분의 명령 (한국어)↓Claude Code 터미널↓MCP 서버 (브릿지)↓Pencil 데스크톱 앱↓캔버스에 그려진 결과 **터 미 널 에
자 연어 로
명 령 을
내 리 면 ,
캔 버 스 에
결 과 가
나 타 납 니다 . 06**
P e n c i l × C l a u d e C o d e G u i d e p . 0 7↓ C h a p t e r 0 4 **세
가 지
통 로 ,
무 엇 이
다 른 가 요 ?**P E N C I L 사 이 드 바 C L A U D E C O D E ( C L I ) P E N C I L C L I실행 위치 Pencil 앱 사이드바 터미널 터미널AI 모델 Pencil 제공 (Claude / Codex) Anthropic 계정의 Claude AI 툴을 연결해서 사용작업 대상 데스크톱 앱에서 바로 실행하는 .pen 파일 .pen 파일 + 시스템 전체 .pen 파일 (배치)다른 시스템 연동 — ◯ Bash · 다른 MCP —데스크톱 앱 필요 필요 (MCP 연결 시) 불필요 — 헤드리스진입장벽 매우 낮음 중간 높음적합한 사용자 디자이너, 비전공자 파워유저, 개발자 CI/CD, 자동화↓ P E N C I L S I D E B A R디자인 도구 안에 앉아있는 어시스턴트입니다. 캔버스 옆에서 즉시 그려주고시각 피드백이 빠릅니다. 디자이너가 본인 흐름을 깨지 않으면서 AI 도움을 받을 수 있지만, Pencil 바깥 세상은 모릅니다.↓ C L A U D E C O D E ( C L I )디자인을 포함한 모든 작업의 통합 어시스턴트입니다. .pen 파일을 그리는 동시에 데이터 정리, GitHub 조작, Notion 글 가져오기까지 함께 처리합니다.디자인이 워크플로우의 일부일 때 진가를 발휘합니다. **꼭
Claude CLI( 터 미 널 ) 을
거 치 지
않 으 셔 도 됩 니다 ! 저 의
경 우 ,
외 부
툴 에 서
작 성 한
텍 스 트 를
Pencil 에 서
디 자인 만
하 고
싶 었 기 에 Claude Code
터 미 널
환 경 에 서
작 업 했 습 니다 . 여 러 분 은
어 떤
작 업 을
하 고
싶 은 지 에
따 라
조 합 을
선 택 해 보 세 요 ! 07**
P e n c i l × C l a u d e C o d e G u i d e p . 0 8↓ C h a p t e r 0 5 **시 작 하 기
전
준 비 물**💻 컴퓨터 사양macOS 또는 Windows메모리 8GB 이상인터넷 연결📦 설치할 것1. Node.js (필수 환경)2. Claude Code (AI 본체)3. Pencil 앱 (캔버스)👤 가입할 것Anthropic 계정 (claude.ai)Pencil 계정 (pencil.dev)🧘 마음의 준비터미널 처음이어도 OK30분~1시간 시간 잡고막히면 화면 캡처해 AI에게 질문 08
P e n c i l × C l a u d e C o d e G u i d e p . 0 9↓ C h a p t e r 0 6 **단 계 별
설 치
가 이 드**1 Claude Code 설치claude.ai/downloadDownload for MacWindows · Linux1. 브라우저로 claude.ai/download에 접속합니다.2. 운영체제(Mac 또는 Windows)에 맞는 설치 파일을 다운로드합니다.3. 받은 파일을 더블클릭해 설치합니다.4. 설치가 끝나면 터미널 또는 앱에서 claude 명령어를 사용할 수 있습니다. 09
P e n c i l × C l a u d e C o d e G u i d e p . 1 0↓ C h a p t e r 0 62 Claude Code 첫 실행 & 로그인터미널에 claude를 입력하고 엔터를 누릅니다.Terminal$ claude🌐 Opening browser for authentication...→ https://claude.ai/auth/cli처음 실행하면 브라우저가 자동으로 열리며 로그인 화면이 나타납니다. Anthropic 계정으로 로그인하면 자동으로 연결됩니다.3 Pencil 앱 설치1. pencil.dev에 접속합니다.2. "Download" 또는 "Get the App" 버튼을 클릭합니다.3. 운영체제(Mac/Windows)에 맞는 설치 파일을 다운로드합니다.4. 설치 후 실행 → 계정 로그인을 합니다.pencil.devDownload for Mac **설 치
페 이 지
링 크
: https://www.pencil.dev/downloads 10**
P e n c i l × C l a u d e C o d e G u i d e p . 1 1↓ C h a p t e r 0 6 · S t e p 44 Pencil ↔ Claude Code 연결🔑 가장 중요한 단계입니다. **Pencil
앱 안 에 서
에 이 전 트 로
클 로 드
연 동 하 기**1. Pencil 앱을 실행합니다.2. 우측 상단 또는 메뉴바 → Settings(설정)으로 이동합니다.3. "Integrations" 또는 "MCP" 탭을 찾습니다.4. "Connect to Claude Code" 를 클릭해서 연결을 진행합니다. (Codex도 가능합니다.)5. 팝업이 뜨면 "허용" 또는 "Authorize"를 누릅니다. Pencil 데스크톱으로 이동하는 경우에는 데스크톱에서 로그인을 진행해주세요.SettingsIntegrations Claude CodeConnected — 15 tools available 11
P e n c i l × C l a u d e C o d e G u i d e p . 1 2↓ C h a p t e r 0 6 · S t e p 55 연결 확인1. 터미널에서 claude를 실행합니다.2. 명령창에 /mcp를 입력하고 엔터를 누릅니다.3. 목록에 "pencil" 항목이 보이면 성공입니다.Terminal> /mcpTools for pencil15 tools1. Batch Design2. batch_get3. export_nodes4. find_empty_space_on_canvas5. Get Editor State 12
P e n c i l × C l a u d e C o d e G u i d e p . 1 3↓ C H A P T E R 0 5 · 1 o f 4 **디 자인
공 통
사 항
입 력 하 기**준비된 텍스트가 손에 있다면, 이제 그 텍스트를 디자인된 페이지로 옮길 차례입니다. 가장 먼저 할 일은 디자인의 기본 값을 정의하는 일입니다. 컬러, 폰트, 사이즈, 스페이싱처럼 모든 페이지에서 반복적으로 쓰이는 값들입니다. 이걸 미리 토큰으로 등록해두면 이후 모든 페이지가 자동으로 같은 톤을 따르게 됩니다.토큰을 정해두지 않으면 페이지마다 색상 코드와 폰트 이름을 직접 적게 됩니다. 그러면 나중에 톤을 바꾸고 싶을 때 모든 페이지를 일일이 수정해야 합니다. 처음에 5분만 투자해서 토큰을 등록해두는 편이 결과적으로 훨씬 효율적입니다.새 .pen 파일을 열고 Pencil 사이드바에 다음과 같이 입력합니다. 컬러와 폰트, 사이드 크기 등은 각자 만들고 싶은 문서 디자인에맞춰서입력해주시면 됩니다!set_variables로 다음 토큰을 등록해줘.컬러- bg #FAF7F0 (크림 페이퍼)- ink #1A1A1A- ink-soft #4A4A4A- mute #6B6B6B- accent #B8351F (러스트 레드)- line #1A1A1A폰트- font-serif "Noto Serif KR"- font-serif-latin "Playfair Display"- font-sans "Pretendard"- font-mono "JetBrains Mono"사이즈- fs-page-num 200, fs-display 64, fs-headline 40- fs-title 28, fs-subtitle 20, fs-lead 18- fs-body 16, fs-caption 13, fs-label 12페이지- page-w 1240, page-h 1754, margin 96명령이 실행되면 우측 패널의 Variables 섹션에서 등록된 값을 확인할 수 있습니다. (색상 옆 보라색 다이아몬드입니다.) 시스템에 폰트가 설치되지 않은 경우에는 디자인 단계에서 잘 보이지만 PDF로 익스포트할 때 깨질 수 있습니다. Pretendard와 NotoSerif KR 등 폰트는 미리 다운로드하시거나 Pencil 캔버스 내부의 폰트를 사용하시는 것을 추천드립니다. 13
P e n c i l × C l a u d e C o d e G u i d e p . 1 4↓ C H A P T E R 0 5 · 2 o f 4 **자 주
쓰 는
요 소 는
컴 포 넌 트 로**토큰이 정해졌다면 그 다음은 자주 쓰는 요소를 컴포넌트로 만들어두는 일입니다. 페이지 헤더, 페이지 번호, 코드 블록처럼 거의모든 페이지에 등장하는 요소들이지요. 한 번 만들어두면 인스턴스로 호출만 하면 되기 때문에 시간이 절약되고, 무엇보다 페이지마다 다르게 그려질 위험이 사라집니다.다음 명령을 사이드바에 입력합니다. 문서에서 자주 사용하는 요소가 있다면 커스텀해서 같이 입력해주시면 됩니다.reusable: true 컴포넌트 5개를 만들어줘.캔버스 좌측 빈 공간(x = -1500부터)에 세로로 배치해줘.1. mock-page (페이지 베이스)1240×1754, 배경 $bg, padding $margin, layout vertical2. mock-header (페이지 상단 모듈)가로 layout, 좌측에 가이드 라벨, 우측에 "p. XX" 텍스트그 아래 1px 헤어라인 $line3. mock-pagenum (우하단 거대 페이지 번호)200pt, $font-serif-latin italic, $accent4. mock-code (코드 블록)배경 #0F172A, padding 20, mono 폰트, 흰 글씨5. mock-terminal (터미널 윈도우)검정 배경 + 좌측에 빨·노·초 신호등 + mono 본문 영역이 단계가 번거롭게 느껴질 수 있지만, 13페이지 문서 기준으로 컴포넌트 없이 작업할 때와 비교하면 시간이 절반 이상 줄어듭니다. 더 중요한 건 헤더 디자인을 나중에 한 번에 바꾸고 싶을 때 컴포넌트만 수정하면 모든 페이지에 자동으로 반영된다는 점입니다. 14위의 프롬프트를 입력하면 캔버스에 이렇게 컴포넌트가 생성된 모습을 확인하실 수 있습니다!
P e n c i l × C l a u d e C o d e G u i d e p . 1 5↓ C H A P T E R 0 5 · 3 o f 4 **한
페 이 지 를
잘
만 들 면
나 머 지 는
패 턴**이제 본격적으로 페이지를 만들 차례입니다. 한 페이지를 잘 만드는 법을 익히면 나머지 페이지는 그 패턴을 변형해서 반복하기만하면 됩니다. 가장 무난한 출발점은 챕터 인트로 페이지입니다. 한 페이지에 들어가는 요소가 적당하고 패턴이 명확해서 다른 페이지의 골격으로도 활용할 수 있기 때문입니다.이 문서를 생성하는데 사용한 프롬프트는 아래와 같습니다.자간과 행간, Gap들을 수정해서 사용하셔도 됩니다.mock-page 인스턴스로 챕터 1 인트로 페이지를 만들어줘.- 헤더: mock-header ref, "p. 03" override- (gap 32) 라벨 "↓ CHAPTER 01" ($accent, 자간 2, 굵게)- (gap 12) 한글 디스플레이 타이틀 "필요한 도구 소개"($fs-display 64, $font-serif, 굵게)- (gap 8) 영문 부제 "The three actors"($fs-subtitle, $font-serif-latin, italic, $mute)- (gap 48) lead 단락 ($fs-lead, $font-serif italic, $ink-soft)- (gap 24) 본문 단락들 ($fs-body, $font-sans, $ink-soft)- 우하단 mock-pagenum, "03" override이 명령을 실행하면 1~2분 안에 캔버스에 첫 페이지가 그려집니다. 단번에 완벽하게 나오는 경우는 드뭅니다. 70% 정도 완성도라고 생각하시면 됩니다. 나머지 30%는 자연어로 다듬어 가는 영역입니다.스크린샷을 보고 어색한 부분이 있으면 그대로 사이드바에 말씀하시면 됩니다. "타이틀이 작아 보여, 76pt로 키워줘"라거나 "메타 텍스트와 페이지 번호 사이가 너무 가까워, 한 단락 띄워줘"처럼 자연스럽게 표현하면 알아듣고 수정해줍니다. 한 번에 완성도를 높이려는 욕심을 버리고 작은 수정을 반복하는 편이 결과적으로 더 빠릅니다.한 페이지가 마음에 들게 완성되면 동일한 프롬프트에서 X·Y·챕터 번호·페이지 번호·텍스트만 바꿔서 나머지 페이지를 만들면 됩니다. 표지나 목차, 비교 테이블이 들어간 페이지처럼 구조가 근본적으로 다른 경우에만 별도 명령을 작성하시면 됩니다. 15
P e n c i l × C l a u d e C o d e G u i d e p . 1 6↓ C H A P T E R 0 5 · 4 o f 4 **마 무 리
단 계 ,
검 증 과
출 력 입 니다**페이지를 모두 만들었다면 마지막 단계는 전체적으로 검증하는 단계입니다.. 먼저 캔버스를 줌아웃해서 전체 페이지를 한눈에 봅니다. 헤더 아래 헤어라인이 빠져있거나, 페이지 번호 색상이 다른 컬러로 들어갔거나 하는 자잘한 일관성 문제들이 줌아웃 상태에서 오히려 더 잘 보입니다. 발견하면 한 번에 일괄 수정하는 편이 효율적입니다. 변경할 수 있는 프롬프트 예시는 아래와 같습니다.P05, P07, P09 페이지의 헤더 아래 헤어라인이 빠져있어.1px $line으로 추가해줘.P11의 페이지 번호 색상이 잘못 들어갔어. $accent으로 바꿔줘.다음으로 챙겨야 할 것이 페이지 번호와 목차입니다. 작업 도중 페이지를 추가하거나 삭제했다면 각 페이지 헤더의 "p. XX" 텍스트, 우하단 거대 페이지 번호, 목차의 페이지 번호, 그리고 표지의 "PAGES / XX" 카운트 네 군데를 일괄적으로 변경해야 합니다.한 곳이라도 빠뜨리면 PDF로 출력했을 때 번호가 엇갈리게 됩니다.P03 다음에 새 페이지를 끼워넣었으니 후속 페이지 번호를 모두 +1 갱신해줘.헤더, 우하단 페이지 번호, 목차, 표지 모두 포함.마지막은 PDF 익스포트입니다. 직접 선택해서 PNG/PDF로 내보내는 방법도 있지만, 명령어를 통해 한번에 다운로드하고 병합하는 것까지 자동화할 수 있습니다.export_nodes로 모든 페이지를 단일 PDF로 묶어 익스포트해줘.순서: P01부터 P16까지. 경로: ~/Downloads/guide.pdf. 포맷: pdf이 가이드에서는 프롬프트와 뼈대 구조를 참조해주시고, 내부의 디자인과 컴포넌트 요소들은 직접 커스텀하시는 것을 추천드립니다.특히 텍스트 -> 디자인으로 옮기는 과정에서 클로드 CLI를 연결해두면 다양한 외부 툴과도 결합이 가능합니다. 여러분의 업무에서 병목이 생기는 지점을 찾아하나씩 해결해보시는 것이 '커스텀 워크플로우'의 시작입니다. 16