Pencil Dev
Pencil — 그려서 만드는 바이브코딩
Claude Code로 웹페이지를 만들다 보면 답답한 순간이 옵니다. “버튼을 왼쪽으로 옮겨줘”, “여백을 좀 더 줘” — 머릿속에는 완성된 그림이 있는데, 그걸 텍스트로 설명하고 있습니다. Pencil은 그냥 그리게 해줍니다.
코드 에디터 안에 캔버스가 생긴다고 보면 됩니다. VS Code나 Cursor에서 확장 프로그램으로 설치하면, 에디터 안에서 네모를 배치하고, 텍스트를 넣고, 색을 바꾸고. 그렇게 만든 디자인이 React나 HTML/CSS 코드로 나옵니다.
텍스트로만 하던 것에 눈이 붙었습니다 👀
바이브코딩은 “대시보드 만들어줘”라고 말하면 Claude가 코드를 짜는 방식입니다. 결과물을 브라우저에서 보고, 마음에 안 드는 부분을 또 텍스트로 고칩니다. 서너 번 반복하면 꽤 피곤해집니다.
Pencil을 쓰면 캔버스에서 직접 요소를 배치한 다음, “이걸 React 코드로 만들어줘”라고 넘기면 됩니다. 반대로 캔버스에서 Cmd + K를 눌러 “사이드바랑 메인 콘텐츠 있는 대시보드”라고 치면 AI가 캔버스 위에 그려주기도 합니다. 직접 그리기와 AI한테 시키기를 섞어 쓰는 흐름입니다.
v0나 Bolt 같은 도구와 비교하면 — 그쪽은 웹 브라우저에서 바로 결과물을 뽑아주니까 간편하지만 내 프로젝트 코드와는 분리되어 있습니다. Pencil은 내 에디터 안에서 돌아가니까 만든 코드가 바로 프로젝트에 들어갑니다. 빠른 실험은 v0나 Bolt, 세밀하게 다듬으면서 만들 거면 Pencil. 이 정도가 구분선입니다.
설치
VS Code나 Cursor를 쓰고 있다면 간단합니다.
