스페인의 개발자 인플루언서 미겔 앙헬 두란(Miguel Ángel Durán, @midudev)이 X에 올린 한 문장이 개발자 커뮤니티를 훑고 지나갔다. 그는 해당 게시물에서 "피그마와 클로드 코드가 아이를 낳는다면, 그건 바로 이것일 것"이라며 pen.dev를 소개했다. 이 게시물은 조회수 4.3만, 좋아요 1100을 기록하며 개발자와 디자이너 타임라인에 동시에 퍼졌다. 두란은 이 도구를 "인터페이스를 생성하고 실시간으로 편집", "Codex, Cursor, Claude Code...와 함께 작동", "Windows, macOS, Linux용", "지금 당장 무료"라는 네 줄로 요약했다.
pen.dev(=pencil.dev)는 실제로 운영 중인 서비스다. 공식 사이트가 내건 슬로건은 "Design on canvas. Land in code."(캔버스에서 디자인하고, 그대로 코드로 착지시킨다)로, IDE 안에 캔버스 기반 디자인 도구를 통째로 얹었다는 방향성을 그대로 드러낸다. 피그마처럼 그리되, 결과물이 슬라이드가 아니라 코드로 떨어진다는 것이다.
캡처 파일과 스펙 문서로 주고받던 그 과정, 여전히 안 끝났다
디자이너가 피그마에서 화면을 완성하면 개발자는 그 화면을 다시 코드로 옮긴다. 그 사이에는 캡처 이미지, 여백 수치, 색상 코드, 컴포넌트 스펙 문서가 오가고 대부분의 팀에서 이 과정은 여전히 수작업에 가깝다. 최근 몇 년 사이 Figma는 AI 기반 코드 생성 기능을 붙였고, Cursor·Claude Code 같은 AI 코딩 어시스턴트는 반대편에서 디자인 맥락을 이해하는 방향으로 기능을 넓혀왔다. 두 흐름이 서로를 향해 다가오던 참이었고, 두란이 "피그마와 클로드 코드의 아이"라는 비유를 쓴 것도 바로 그 접점, 즉 디자인 파일과 코드 저장소가 여전히 서로 다른 곳에 존재한다는 문제를 겨냥한 표현으로 읽힌다. 다만 이 비유는 어디까지나 인상적인 소개 문구일 뿐, pen.dev가 Figma나 Anthropic과 직접적인 제휴·기술 통합 관계에 있다는 의미는 아니다.
브랜치를 나누듯 디자인 시안을 나눌 수 있다면
pen.dev의 실무적인 차이는 캔버스가 어디에 저장되는가에서 나온다. 공식 문서에 따르면 디자인 파일은 IDE가 열고 있는 저장소, 즉 Git 안에 존재한다. 디자인 시안이 커밋과 브랜치, 풀 리퀘스트의 대상이 된다는 뜻이다. 피그마 링크를 슬랙에 붙여넣고 "이게 최신 버전 맞나요"를 묻는 대화 대신, 디자인 변경 이력이 코드 변경 이력과 같은 방식으로 남는다.
| 구분 | 내용 |
|---|---|
| 지원 운영체제 | Windows, macOS, Linux |
| 연동되는 AI 어시스턴트 | Claude Code, Codex, Cursor |
| 설치 방식 | Cursor 확장 설치 + 로컬 MCP 서버 구동 |
| 디자인 파일 저장 위치 | 클라우드가 아닌 코드 저장소(Git) 내부 |
이 구조가 만드는 변화는 단순한 파일 위치 이동이 아니다. 디자인 산출물이 배포 파이프라인, 코드 리뷰, 롤백 같은 개발 프로세스 안으로 들어온다는 뜻이다. 지금까지 디자인 변경은 코드 배포와 별개의 시간표로 움직였지만, 저장소 안에 있다면 같은 커밋 안에서 함께 리뷰되고 함께 머지될 수 있다.
요소를 클릭해서 바로 코딩 에이전트에게 시키는 방식
pen.dev는 Cursor에 확장 형태로 설치되며, 캔버스에서 요소를 선택한 뒤 Cursor AI 챗으로 바로 수정을 지시하는 인라인 편집을 지원한다고 공식 문서는 설명한다. 버튼 하나를 골라 "더 둥글게, 색은 브랜드 레드로"라고 말하면 그 지시가 캔버스와 코드 양쪽에 동시에 반영되는 흐름이다. MCP 서버가 로컬에서 실행되기 때문에 클라우드로 디자인 데이터를 보내지 않고도 작업이 가능하며, 같은 MCP 경로로 Claude Code와 Codex 같은 다른 AI 어시스턴트도 연결된다고 문서는 밝히고 있다.
이 방식이 흥미로운 이유는 디자인 툴이 코딩 에이전트의 '입력 장치' 역할을 하도록 순서를 뒤집었다는 점이다. 보통은 개발자가 코드를 보며 프롬프트를 쓰지만, pen.dev에서는 캔버스 위 클릭 자체가 곧 프롬프트가 된다. 다만 이 흐름이 실무에서 얼마나 매끄럽게 작동하는지는 두란의 소개 게시물과 공식 문서 설명을 넘어서는 검증된 사용 후기로는 아직 확인되지 않는다.
무료라지만 언제까지?
가장 먼저 짚어야 할 것은 요금 정책이다. 두란은 게시물에서 pen.dev를 "지금 당장 무료"라고 소개했지만, 그 표현이 영구 무료 정책을 뜻하는지 베타 기간에 한정된 무료 제공을 뜻하는지는 공식 문서에서 구체적으로 확인되지 않는다. AI 코딩 도구 업계에서는 베타 기간 무료 제공 후 유료로 전환하는 패턴이 흔한 만큼, 이 표현은 두란의 소개 문구를 인용한 것으로 받아들이고 실제 도입 전에는 요금 페이지를 직접 확인하는 편이 안전하다.
두 번째로, 이 글이 다루는 근거는 두란의 소개 게시물과 pen.dev 공식 문서·사이트에 한정돼 있으며, 다수 실사용자가 남긴 독립적인 리뷰나 장기 사용 후기는 아직 확인되지 않았다. 조회수 4.3만이라는 수치는 노출과 관심의 크기를 보여줄 뿐, 실제로 얼마나 많은 사람이 설치해 업무에 썼는지, 저장소 용량이나 협업 툴 연동에서 어떤 마찰이 있었는지는 별도로 검증돼야 할 부분이다. Cursor 확장이라는 설치 경로의 특성상 Cursor를 쓰지 않는 팀, 혹은 다른 IDE 중심 워크플로우를 가진 팀에서 이 도구가 얼마나 유용할지도 현재로서는 알 수 없다.
