디자인 파일을 개발자에게 넘기고 코드로 돌아오기까지 며칠을 기다려 본 경험, 다들 한 번쯤 있을 거다. 그 사이에 의도가 뒤틀리고, 수정 요청이 쌓이고, 일정은 밀린다. pencil.dev는 바로 그 간극을 없애기 위해 만들어진 도구다. 코드 에디터 안에서 직접 디자인하고, 그 결과가 즉시 프로덕션 수준의 코드로 나오는 방식이다. 얼리 액세스 기간엔 무료로 쓸 수 있어서 지금 당장 써볼 이유가 충분하다.
pencil.dev가 다른 디자인 툴과 근본적으로 다른 이유
pencil.dev는 Figma나 Framer처럼 별도 앱으로 실행되지 않는다. VS Code나 Cursor 에디터 안에 확장 프로그램 형태로 설치되고, 코드 프로젝트 내부에서 바로 디자인 작업이 이뤄진다. 이게 왜 중요하냐면, 디자인과 코드가 같은 공간에 공존하기 때문에 ‘넘기는’ 과정 자체가 사라진다.
캔버스는 무한하게 펼쳐지며 요소를 자유롭게 배치할 수 있다. 레이아웃을 그리면 HTML, CSS는 물론 React 컴포넌트 코드까지 즉시 뽑아낼 수 있다. 단순한 정적 코드가 아니라 실제로 배포해도 되는 프로덕션 수준이라는 점이 핵심이다. 기존 디자인-개발 분리 워크플로우에 익숙한 사람이라면 처음엔 좀 낯설게 느껴질 수 있는데, 실제로 써보면 ‘이게 맞는 방향이구나’ 싶은 순간이 금방 온다.
Figma 디자인을 그대로 붙여넣을 수 있다
이미 Figma로 작업해온 자산이 있다면 처음부터 다시 그릴 필요가 없다. pencil.dev는 Figma 디자인을 복사해서 캔버스에 붙여넣는 기능을 지원하는데, 이때 벡터의 선명함이 유지되고 텍스트 레이어도 편집 가능한 상태로 들어온다. 그냥 이미지로 들어오는 게 아니라 실제로 조작 가능한 오브젝트로 임포트된다는 뜻이다.
이 기능 하나만으로도 기존 Figma 작업물을 코드 자산으로 전환하는 속도가 드라마틱하게 빨라진다. 디자이너가 Figma에서 마무리한 컴포넌트를 그대로 pencil.dev 캔버스로 옮기고, 개발자가 코드 패널에서 바로 꺼내 쓰는 흐름이 가능해진다.
Figma에서 pencil.dev로 붙여넣기 한 순간, 편집 가능한 벡터와 텍스트가 그대로 살아있다.
Claude + MCP 연동으로 20분 랜딩 페이지 만들기
pencil.dev의 진짜 위력은 AI 에이전트와 결합될 때 드러난다. MCP(Model Context Protocol)를 통해 Claude와 연동하면, AI가 캔버스 위의 디자인을 시각적으로 인식하고 코드화하는 과정을 알아서 처리한다. 단순히 텍스트 명령을 받는 게 아니라 화면에 그려진 레이아웃 자체를 ‘보고’ 이해한다.
설정 방법은 어렵지 않다. pencil.dev 웹사이트에서 얼리 액세스를 신청하고, Cursor 에디터에 확장 프로그램을 설치한 뒤 MCP 설정 파일에 pencil.dev 서버 항목을 추가하면 된다. 설정이 끝나면 Claude에게 “이 섹션을 반응형 React 컴포넌트로 만들어 줘”라고 명령하는 것만으로 몇 초 안에 코드가 완성된다.
실제로 이 방식으로 작업하면 보통 며칠이 걸리던 랜딩 페이지를 20분 안에 끝낼 수 있다는 후기가 많다. 주당 10시간 이상의 작업 시간이 절약된다는 수치는 과장이 아니다. AI 명령을 줄 때는 “버튼 만들어 줘”보다 “흰색 텍스트, 둥근 모서리, 파란색 그라데이션 배경의 CTA 버튼”처럼 구체적으로 쓸수록 결과물 품질이 확실히 달라진다.
Git으로 디자인 버전 관리까지 되는 구조
기존 디자인 툴의 고질적인 문제 중 하나는 디자인 파일이 코드 저장소와 분리되어 있다는 거다. Figma 링크를 Slack에 공유하고, 버전이 바뀌면 또 공유하고… 어떤 버전이 최신인지 헷갈리는 상황이 반복된다.
pencil.dev의 디자인 파일은 .pen 확장자를 쓰는 오픈 소스 형식이다. 이 파일을 Git 저장소에 코드와 함께 커밋하면 디자인 변경 이력도 코드처럼 트래킹할 수 있다. 브랜치를 나눠 디자인 실험을 해보고, PR을 통해 리뷰받는 방식도 가능하다. 디자인과 코드가 같은 히스토리 안에서 관리된다는 건 팀 협업 측면에서 상당히 큰 변화다.
자주 쓰는 버튼 스타일이나 카드 레이아웃은 컴포넌트 키트로 저장해두면 다른 프로젝트에서도 그대로 꺼내 쓸 수 있다. 디자인 시스템을 코드 레포와 완전히 동기화된 형태로 가져가는 셈이다.
디자인 파일이 Git 히스토리 안으로 들어오는 순간, 팀 전체의 협업 방식이 바뀐다.
얼리 액세스 신청부터 첫 컴포넌트 생성까지
현재 pencil.dev는 얼리 액세스 단계로, 공식 웹사이트에서 접근 권한을 요청하면 된다. 승인 후 Cursor 에디터에 확장 프로그램을 설치하고, settings.json 또는 MCP 설정 파일에 pencil.dev 서버 주소를 추가하면 바로 사용 환경이 갖춰진다.
처음 시작할 때 추천하는 순서는 이렇다. 먼저 간단한 버튼 하나를 캔버스에 그려보고 코드 패널에서 결과를 확인한다. 그다음 Figma에서 기존 컴포넌트를 복사해 붙여넣고 임포트 품질을 확인한다. MCP 설정이 완료됐다면 Claude에게 섹션 하나를 React로 변환해 달라고 요청해보는 것으로 워크플로우 전체를 빠르게 체험할 수 있다.
현재 무료로 쓸 수 있는 얼리 액세스 기간이기 때문에, 지금 써보지 않으면 나중에 유료 전환 이후에 진입 장벽이 생길 수 있다. AI 에이전트가 디자인 파일을 직접 이해하고 조작하는 방향은 2026년 개발-디자인 협업 흐름의 핵심 축이 되어가고 있다. pencil.dev는 그 흐름에서 가장 실용적인 진입점 중 하나다.
다른 글도 확인해 보세요
#pencildev #디자인코드변환 #VS코드확장 #리액트컴포넌트 #MCP연동 #피그마임포트 #AI개발도구 #웹개발생산성 #커서에디터 #노코드디자인