Pencil.dev - IDE 안에서 Figma처럼 디자인하고 Claude가 코드로!

🖊️ Pencil.dev - "디자인 파일은 Git에 없어야 한다"는 상식을 뒤집다

"Cursor가 코딩을 바꿨다면, Pencil은 디자인을 바꾼다"

개발자라면 누구나 겪어봤을 거예요. 디자이너가 Figma 링크를 보내주고, 열심히 개발했는데... 일주일 후 "왜 실제 UI랑 디자인이 다르죠?" 하는 질문을 받는 그 순간. Figma 열어보니 디자인이 업데이트 돼있더라고요. 코드는 안 바뀌었는데. 😅

이 "핸드오프 문제"는 너무 오래됐고, 우리는 그냥 받아들였어요. 디자인은 클라우드에, 코드는 레포에. 구현할 때 잠깐 만났다가 영원히 다른 길을 걷는 거죠.

Pencil.dev는 이 패러다임 자체가 잘못됐다고 말합니다.

---

🎯 Pencil.dev가 뭔데?

한마디로: IDE 안에서 돌아가는 Figma + Claude AI

• ✏️ Figma처럼 캔버스에서 디자인
• 🤖 Claude AI가 바로 코드로 변환
• 📁 디자인 파일이 .pen 형식으로 Git에 저장!
• 🔄 코드 롤백하면 디자인도 롤백

네, 제대로 읽으셨어요. 디자인 파일이 Git으로 버전 관리됩니다.

---

🔥 재미있는 포인트 #1: 창업자의 이력이 미쳤다

Tom Krcha라는 사람이 만들었는데요:

• 🎥 Around (영상통화 앱) → Miro에 인수
• 👤 Alter (아바타 서비스) → Google에 인수
• 🚀 현재 a16z Speedrun 참여 중

두 번 엑싯한 창업자가 만든 세 번째 회사라니, 기대가 되지 않나요?

---

🔥 재미있는 포인트 #2: Figma MCP는 "읽기 전용", Pencil은 "읽기+쓰기"

여기가 핵심입니다!

Figma도 MCP(Model Context Protocol)를 지원하지만, AI가 디자인을 "볼 수만" 있어요. 수정은 못 해요.

Pencil은? AI가 디자인을 직접 수정할 수 있습니다.

"All your AI agents can read them and write them" - Tom Krcha

실제로 어떻게 작동하냐면:

1. 캔버스에 폼을 스케치하면
2. AI가 HTML/CSS 코드 생성
3. 두 컴포넌트 사이에 화살표 그리고 "클릭하면 모달 열림"이라고 쓰면
4. AI가 이벤트 바인딩 코드 작성!

디자인이 문서가 아니라 AI가 실행하는 라이브 스펙이 되는 거예요.

---

🔥 재미있는 포인트 #3: "진짜" Single Source of Truth

버그가 생겨서 코드를 롤백했다고 칩시다.

Figma: 코드는 롤백됐는데 디자인은 클라우드에 그대로... 또 싱크 안 맞음 😵

Pencil: 코드 롤백 = 디자인도 롤백. 브랜치 만들면 디자인도 브랜치. PR에서 코드 리뷰할 때 디자인 diff도 같이!

드디어 "Single Source of Truth (근데 사실 두 개인데 싱크 맞추려고 노력하는)" 이 아니라 진짜 하나의 소스가 되는 거죠.

---

🛠️ 지원 환경

• ✅ Mac, Linux
• ✅ Cursor, VSCode 확장
• ✅ Claude Code, OpenAI Codex 연동
• ❌ Windows (아직 미지원)
• ❌ 브라우저 버전 없음 (로컬 Claude CLI 필요)

---

💰 가격

현재 무료! (Early Access)

단, Claude Code 구독이 필요해요 ($20/월). Pencil 자체는 "오버레이"라서 생성은 Anthropic 쪽에서 일어납니다.

---

⚠️ 현재 한계점

• 실시간 협업 없음 (Figma 멀티플레이어 같은 거 X)
• Windows 미지원
• 문서가 부족함
• 클로즈드 소스

---

🎬 영상으로 보기

백문이 불여일견! YouTube에서 "The Greatest AI Design System I've Ever Used!" 검색하시면 실제 사용 영상 볼 수 있어요.

👉 YouTube 영상 보기

---

🤔 써볼 만한가?

이런 분들에게 추천:

• 디자이너 없이 혼자 개발하는 분
• 빠른 프로토타이핑이 필요한 스타트업
• Figma ↔ 코드 싱크 문제에 지친 분
• Claude Code 이미 쓰는 분

아직 기다려야 할 분:

• Windows 유저
• 팀 실시간 협업이 중요한 경우
• 안정적인 프로덕션 툴이 필요한 경우

---

🔗 링크

• 공식 사이트: pencil.dev
• 다운로드: Mac, Linux 지원
• Cursor Extension으로도 설치 가능

---

결론: "디자인 파일은 Git에 없어야 한다"는 고정관념을 깨는 도구. 아직 초기지만, 두 번 엑싯한 창업자 + a16z 백업이면 지켜볼 만합니다. 🚀

여러분은 어떻게 생각하세요? Figma 대체할 수 있을까요? 댓글로 의견 나눠주세요!