Pencil — Git으로 관리하는 AI 네이티브 디자인 도구

디자인과 코드 사이의 벽

엔지니어가 디자인 작업을 할 때 가장 불편한 것이 무엇이냐 하면, 워크플로우의 단절이니라.

코드는 Git으로 관리하고, PR로 리뷰하고, git revert로 되돌린다. 그런데 디자인은? Figma 클라우드 어딘가에 따로 존재하여, 코드와 같은 변경 이력에 올라타지 못하느니라. PR에 “디자인 변경 포함”이라 적어봐야, 실제 diff를 볼 수는 없는 것이다.

Pencil은 이 벽을 허무는 시도를 하고 있다. “Design on canvas. Land in code.” — 캔버스에서 디자인하고, 그대로 코드에 안착시키겠다는 것이니라.

Pencil이 무엇인고?

Pencil은 IDE에 통합할 수 있는 AI 네이티브 디자인 도구이다. Figma처럼 벡터 캔버스를 갖추면서도, Claude Code나 Cursor 같은 AI 코딩 도구와 MCP(Model Context Protocol)로 양방향 연동된다.

데스크톱 앱으로도, VS Code/Cursor 확장으로도 동작하느니라. 현재 macOS와 Linux를 지원하며, 얼리 액세스 기간에는 무료이다.

엔지니어에게 와닿는 세 가지

1. .pen 파일은 JSON이다 — Git 관리가 된다

이것이 가장 핵심이니라.

Pencil의 디자인 데이터는 텍스트 기반 .pen 파일(JSON 형식)로 저장된다. 즉, 소스 코드와 같은 리포지토리에서 Git 관리가 가능하다는 뜻이다.

my-project/
├── src/
│   └── components/
│       └── LoginForm.tsx
├── design/
│   └── LoginForm.pen    ← JSON, git diff 가능!
└── package.json

PR에서 디자인 diff를 함께 볼 수 있다. 코드 변경과 디자인 변경이 같은 커밋에 들어가니, git revert 한 번이면 둘 다 되돌아간다. Figma에서는 불가능한 일이니라.

2. 캔버스 ↔ 코드 양방향 동기

Pencil의 기술적 핵심은 MCP를 통한 양방향 동기이다.

• 캔버스에서 버튼 색을 바꾸면 → Tailwind 클래스명이 자동으로 변경됨
• .tsx 파일의 코드를 편집하면 → 캔버스 위 디자인이 즉시 반영됨

내부적으로 AST(추상 구문 트리) 실시간 변환과 HMR(Hot Module Replacement)을 조합하여 구현하고 있다. 수동 편집과 AI 생성이 충돌했을 때의 해결 엔진도 갖추고 있다 하느니라.

기존 WYSIWYG 에디터와 다른 점은, 생성되는 코드의 보수성이 높다는 것이다. 디자인 데이터 자체가 코드에 가까운 구조를 가지고 있으므로, AI 에이전트에게 건네면 그대로 구현 코드로 쓸 수 있는 것이 나온다.

3. AI 에이전트가 캔버스를 직접 조작한다

Pencil은 “AI 에이전트가 캔버스를 직접 조작할 수 있도록” 설계되었느니라. MCP를 통해 AI가 디자인 데이터를 읽고 쓸 수 있으므로:

• “로그인 화면을 만들어라. Tailwind으로, 다크 모드로” — 프롬프트 한 줄이면 UI가 생성됨
• Claude Code의 플랜 모드에서 대화하면서 디자인을 다듬을 수 있음
• Playwright MCP와 조합하면 기존 사이트 스크린샷을 디자인에 취할 수도 있음

평소 코드를 쓸 때의 Vibe Coding과 같은 감각으로 디자인이 진행된다. Figma의 조작법을 새로 배울 필요가 없으니, 디자인 경험이 없는 엔지니어도 손이 멈추지 않느니라.

Figma와의 공존

Pencil이 나왔다 하여 Figma가 불필요해지는 것은 아니니라. 둘의 강점이 다르다:

디자이너 팀이 Figma에서 만든 디자인을 엔지니어가 Pencil로 가져와 구현하는 조합도 현실적이다. Pencil은 Figma에서의 복사 & 붙여넣기도 지원한다.

현 시점의 과제

얼리 액세스 단계이므로 몇 가지 주의점이 있다:

• MCP 설정 불안정: JSON-RPC 에러가 발생하여 재설정이 필요할 때가 있음
• Claude Code 의존도 높음: AI 연동이 현재 Claude Code에 치우침
• Windows 미지원: macOS와 Linux만 대응
• 스크린샷 재현 정확도: 기존 사이트 취급 시 대화적 수정이 필요함

다만 개발이 활발히 진행 중이므로, 이러한 과제는 순차 개선되리라.

이 몸이 주목하는 이유

이 몸이 Pencil에 눈길이 가는 이유는 명확하다. **“코드와 디자인이 같은 Git 이력에 올라탄다”**는 것은, 게임 엔진 개발처럼 UI와 로직이 밀접한 프로젝트에서 특히 빛을 발하리라.

현재 이 몸이 다루는 프로젝트에서도 에디터 UI 작업이 적지 않은데, Figma ↔ 코드 사이를 오가는 것은 언제나 번거로운 일이었느니라. .pen 파일이 PR에 들어간다면, 디자인 리뷰와 코드 리뷰를 한번에 할 수 있다.

MCP 양방향 동기라는 기술적 접근도 흥미롭다. AST 변환 + HMR의 조합은, 앞으로 AI 에이전트가 단순 코드 생성을 넘어 시각적 도구를 직접 조작하는 시대의 서막이 아닐까 생각하느니라.

참고

• Pencil 공식 사이트
• 원문: 新デザインツールPencilはなぜエンジニアに刺さるのか (일본어)