피그마보다 강력하다? 클로드 코드와 펜슬(Pencil)로 디자인과 코딩을 한 번에 끝내는 법!

안녕하세요, 바이브랩스의 랩장 이석현입니다!

매달 나가는 AI 구독료, 부담되시죠? 오늘은 무료로 사용할 수 있으면서도 디자인과 코딩의 경계를 허무는 혁신적인 도구, 펜슬(Pencil)을 소개해 드립니다.

펜슬은 피그마(Figma)와 유사한 UI를 제공하지만, VS Code나 커서(Cursor) 같은 IDE와 통합되어 디자인과 코드가 실시간으로 동기화된다는 강력한 장점이 있습니다. 특히 클로드 코드와 MCP 서버로 연동되어, AI에게 말만 하면 디자인을 뚝딱 만들어주고 이를 바로 리액트코드로 변환해 줍니다.

이번 영상에서는 펜슬의 설치부터 클로드 코드를 활용해 가계부 앱을 디자인하고 실제 코드로 구현하는 전체 과정을 담았습니다. 디자인 툴이 낯선 개발자분들도 이제 '펜슬' 하나면 기획부터 구현까지 슈퍼 개발자가 될 수 있습니다.

지금 바로 영상에서 확인해 보세요

(📌영상 핵심 꿀팁) 클로드 코드에게 요청할 때 꼭! "코딩"부터 하지 말고 "펜슬 MCP를 사용해서 캔버스에 디자인해 줘"라고 먼저 명령해야 한다는 점, 잊지 마세요.

--------------------------------------------------------------------------------
[작가 제안하기] 📧 futurewave@gmail.com
[작가 오픈톡방] 🔗 https://open.kakao.com/o/gfYQfFPh
[이석현 랩장의 저서 목록]
📕 [실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지] 👉 https://www.yes24.com/product/goods/159060578
📘 [바이브 코딩 커서 AI와 클로드 코드로 누구나!] 👉 https://www.yes24.com/product/goods/161924116
📗 [챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서] 👉 https://www.yes24.com/product/goods/144539067

00:00 인트로: AI 구독료 걱정? 무료 툴 '펜슬(Pencil)' 소개
02:10 펜슬 다운로드 및 설치 (Mac 애플 실리콘 버전)
04:30 펜슬 실행 및 인터페이스 (레이어 vs 프레임)
06:20 IDE 연동 1: 커서(Cursor)에서 프로젝트 만들기
08:10 IDE 연동 2: 이메일 인증 및 활성화
09:40 펜슬 캔버스 기초: 템플릿 vs 새 파일
11:20 [중요] .pen 파일 생성 후 '저장'부터 해야 하는 이유
13:00 [핵심] 실패 없는 프롬프트: "코딩 말고 디자인부터"
15:10 실전 데모: 가계부 앱 디자인 생성 (대시보드, 거래내역)
17:30 디자인 시스템 및 컴포넌트 자동화 확인
19:20 Design to Code: 디자인을 리액트(React)로 변환
21:40 수정 노하우: 디자인 변경 시 코드로 반영 요청하기
23:10 추가 기능 구현 팁 (카테고리/리포트) 및 마무리