디자이너 6명을 고용하는 대신, AI 에이전트 6명이 눈앞에서 동시에 화면을 디자인하는 걸 상상해보세요. 한 명은 레이아웃을 잡고, 다른 한 명은 타이포그래피를 고르고, 또 다른 한 명은 컴포넌트를 배치하고 — 이 모든 게 하나의 캔버스에서 실시간으로 벌어지는 거예요.
이게 뭔데?
Pencil은 AI가 구동하는 MCP(Machine-Centered Protocol) 기반 디자인 캔버스예요. Tom Krcha가 만들었는데, 이 사람은 Miro가 인수한 화상통화 앱 Around과 Google이 인수한 Alter 아바타를 공동 창업한 연쇄 창업가예요.
Pencil이 특별한 이유는 디자인 파일(.pen)이 그냥 JSON이라는 거예요. 코드처럼 Git으로 버전 관리하고, 브랜치 따서 머지하고, AI 에이전트가 직접 읽고 쓸 수 있어요. Figma에서 디자인 만들고 → 개발자한테 핸드오프하고 → 해석이 달라서 다시 수정하는 그 루프? Pencil은 이걸 통째로 없애버려요.
그리고 이번에 공개된 SWARM 모드가 핵심이에요. 최대 6개의 AI 디자인 에이전트가 하나의 캔버스에서 동시에 작업해요. 각자 커서가 보이고, 실시간으로 화면이 채워지는 걸 눈으로 볼 수 있어요. Tom은 이걸 "자율 디자인 에이전시"라고 부르고 있어요.
뭐가 달라지는 건데?
지금 AI 디자인 도구의 가장 큰 문제는 싱글 스레드라는 거예요. 하나 프롬프트 → 하나 결과 → 마음에 안 들면 다시 프롬프트. SWARM 모드는 이 병목을 깨버려요.
| 기존 AI 디자인 도구 | Pencil SWARM | |
|---|---|---|
| 작업 방식 | 1 프롬프트 → 1 결과 | 1 프롬프트 → 6개 에이전트 병렬 |
| 디자인 파일 형식 | 독점 포맷 (블랙박스) | .pen = JSON (Git 호환) |
| 코드 변환 | 디자인 → 핸드오프 → 코딩 | 디자인 = 코드 (한 번에) |
| IDE 통합 | 별도 앱 | Cursor·VSCode·Claude Code 내장 |
| 실시간 피드백 | 결과물 확인 후 수정 | 에이전트 커서 실시간 관찰 |
Peter Yang(Behind the Craft)이 실제로 SWARM 모드로 여행 앱을 디자인하는 걸 시연했는데, 6개 에이전트가 각자 다른 화면을 동시에 만들어가는 과정이 "뇌를 리와이어링하는" 경험이었다고 표현했어요.
특히 중요한 건 Pencil이 "바이브 디자이닝(vibe designing)"이라는 새 카테고리를 만들고 있다는 점이에요. Cursor가 바이브 코딩을 열었다면, Pencil은 바이브 디자인의 문을 열고 있어요. Tom 본인도 Cursor를 쓰다가 UI를 텍스트로 설명하는 게 너무 고통스러워서 Pencil 프로토타입을 시작했다고 해요.
MCP(Machine-Centered Protocol)는 AI 에이전트가 외부 도구를 직접 조작할 수 있게 하는 프로토콜이에요. Pencil의 MCP 서버는 AI가 캔버스에 프레임 추가, 컴포넌트 삽입, 스타일 적용, 레이아웃 정리를 직접 할 수 있게 해줘요. 읽기뿐 아니라 쓰기 권한까지 완전 개방한 게 Pencil의 차별점이에요.
핵심만 정리: 시작하는 법
Pencil은 현재 무료예요. 시작하는 데 5분이면 충분합니다.
- Pencil 데스크톱 앱 다운로드
pencil.dev/downloads에서 Mac, Windows, Linux 모두 지원. 설치 후 바로 무한 캔버스가 열려요. - AI 에이전트 연결
설정 → Agents & MCP에서 Claude Code, Cursor, VSCode 중 원하는 도구를 토글 ON. Mac에서는 자동 감지돼요. Claude Code라면 터미널에서/mcp입력으로 연결 확인. - SWARM 모드로 첫 디자인 생성
AI 모델 추가(Claude 추천) → SWARM 모드 ON → "Design a travel app with booking flow"처럼 프롬프트 입력. 에이전트들이 실시간으로 화면을 채워가는 걸 지켜보세요. - 디자인 키트로 퀄리티 올리기
Shadcn UI, Lunaris, Halo 등 내장 디자인 시스템을 활용하면 AI가 해당 컴포넌트로 디자인해요. "AI 느낌" 없는 프로페셔널한 결과물이 나와요. - 코드로 변환
디자인이 마음에 들면claude 'Generate HTML/CSS/React based on the design in app.pen'으로 바로 코드 변환..pen 파일이 JSON이라 AI가 구조를 완벽히 이해해요.
Pencil은 2026년 1월 출시된 신생 도구예요. Figma 대비 수동 편집 기능이 부족하고, 디자인 수정 후 코드 자동 동기화(양방향 싱크)는 아직 안 돼요. Lovable이나 V0처럼 UI 수정하면 코드가 바로 바뀌는 건 아니라, 수정 후 AI에게 다시 요청해야 해요. 초기 프로토타이핑과 아이디어 탐색에 강점이 있는 도구로 접근하는 게 좋아요.
6개 AI 에이전트가 실시간으로 여행 앱을 디자인하는 과정을 50분 동안 깊이 있게 보여줘요. 내부 동작 원리(.pen = JSON)부터 Cursor 통합, 코드 변환까지.
환경 설정부터 대시보드 생성, 다중 페이지 웹사이트 디자인, 코드 변환까지 단계별로 따라할 수 있는 튜토리얼.
디자이너 관점에서 Pencil의 인터페이스, Prompt Block, UI Kit, 한계점까지 솔직하게 다룬 분석.
a16z의 초기 투자 프로그램에 선정된 Pencil의 공식 프로필. Tom Krcha의 이력과 비전을 확인할 수 있어요.
