IDE 안에서 디자인하고 Git으로 버전 관리하는 시대, Pencil.dev

디자인 파일에 Git diff를 적용할 수 있다면? Pencil.dev는 디자인을 '그림'이 아닌 '코드의 한 형태'로 취급하는 도구예요. Cursor, VS Code, Claude Code 같은 개발 도구 안에서 디자인 모드 역할을 수행하면서, 디자인 파일이 소스 코드와 함께 공존하도록 설계됐거든요.

독자적인 .pen 파일 형식은 JSON 기반 텍스트 데이터로 구성돼 있어요. 사람이 읽을 수 있을 뿐 아니라, Git에서 텍스트 기반 diff를 확인하고 병합할 수 있다는 게 핵심이죠. 디자인 파일이 코드 저장소에 물리적으로 위치하기 때문에, 브랜치를 생성해서 디자인 실험도 독립적으로 진행할 수 있어요.

캔버스 위에서 AI에게 직접 UI를 요청하는 에이전틱 캔버스

MCP(모델 컨텍스트 프로토콜)를 통해 AI 에이전트와 소통하는 구조가 인상적이에요. AI가 디자인 캔버스의 내용을 읽고 직접 요소를 배치하거나 수정할 수 있게 해주는 표준 인터페이스죠. Cmd+K로 프롬프트 창을 열고 복잡한 UI 레이아웃 생성이나 특정 컴포넌트 수정을 요청하면 돼요.

양방향 동기화도 지원해요. 디자인에서 코드를 생성하는 '디자인 투 코드'는 물론, 기존 소스 코드를 분석해 캔버스에 시각적으로 재현하는 '코드 투 디자인'까지 가능하거든요.

피그마에서 Pencil로, 레이어 구조까지 보존되는 이식

피그마 연동도 가능해요. 프레임, 텍스트, 스타일, 벡터 경로를 복사해서 Pencil 캔버스에 붙여넣으면 레이어 계층 구조와 오토 레이아웃 속성이 최대한 보존된 상태로 이식돼요. 기존 피그마 워크플로우를 버리지 않고도 점진적으로 전환할 수 있는 셈이죠.

실제 연결 과정은 3단계예요. Cursor에 Pencil 확장 프로그램을 설치하고 Claude Code CLI를 준비한 뒤, 피그마에서 UI 요소를 복사해 Pencil 캔버스에 붙여넣고, AI를 통한 코드 생성과 최적화를 진행하면 돼요.

디자인과 개발의 경계가 사라지는 새로운 워크플로우

Pencil.dev가 제안하는 건 단순한 도구 교체가 아니에요. 디자인과 코드가 같은 저장소에서 같은 버전 관리 시스템 아래 공존하는 워크플로우의 전환이죠. 디자이너와 개발자가 같은 브랜치에서 작업하고, AI가 둘 사이의 번역을 맡는 미래가 이미 시작된 거예요.