지금 받아야 무료인 개꿀 디자인 툴 - Pencil 완전 분석
📺 원본 영상: 지금 받아야 무료인 개꿀 디자인 툴
🎙️ 채널: 코드팩토리
📅 정리 일자: 2026-02-04
⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(UI 화면, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다.
개요
디자인 역량이 부족한 개발자들에게 희소식이 될 만한 도구가 등장했다. AI 기반 디자인 툴 Pencil은 프롬프트만으로 전문적인 UI를 생성하고, Figma처럼 직접 수정할 수 있으며, VS Code 계열 에디터에 통합되어 컨텍스트 스위칭 없이 작업할 수 있는 통합 솔루션이다. 무엇보다 현재 한정 기간 동안 무료로 제공되고 있어, 지금이 도입하기에 가장 적절한 시점이다.
Pencil이란 무엇인가
AI 프롬프팅으로 시작하는 디자인
Pencil은 단순한 프롬프트 하나로 완성도 높은 웹사이트 디자인을 생성해주는 도구다. 강연자는 “포르쉐를 팔 수 있는 사이트를 만들어달라”는 단일 프롬프트만으로 메인 페이지와 상세 페이지(Carrera, Taycan, Cayenne 등)가 포함된 완성도 높은 결과물을 얻었다고 소개했다. 이는 기존 AI 코딩 도구들이 코드만 생성하는 것과 달리, 시각적 결과물을 즉시 확인하고 수정할 수 있다는 점에서 차별화된다.
Figma의 편의성 + AI의 생산성
Pencil의 핵심 강점은 Figma 사용자에게 익숙한 UI를 그대로 제공한다는 점이다. 왼쪽 사이드바에는 컴포넌트 트리가 표시되고, 오른쪽에는 Figma에서 볼 수 있는 속성 패널(Property Panel)이 배치되어 있다. 마우스 클릭으로 텍스트를 변경하거나 스타일을 조정하는 등 전통적인 디자인 툴의 작업 방식을 그대로 유지하면서도, AI 프롬프팅을 통해 초기 디자인을 빠르게 생성할 수 있다는 것이 가장 큰 장점이다.
IDE 통합: 컨텍스트 스위칭 제로
Pencil은 Cursor, VS Code, Claude Code, Antigraivty 등 주요 IDE에 확장 프로그램(Extension) 형태로 설치할 수 있다. 이는 개발자가 Figma를 별도로 열고, 디자인을 내보내고, 다시 코드로 구현하는 번거로운 과정을 완전히 제거한다. IDE 내에서 디자인을 생성하고, 선택한 프레임을 MCP(Model Context Protocol)를 통해 AI에게 전달하면, AI가 해당 디자인을 그대로 구현한 코드를 생성한다. 강연자는 이를 통해 “이미 구독한 AI가 있다면 돈이 한 푼도 들지 않는다”고 강조했다.
Pencil 시작하기
다운로드 및 설치
Pencil 공식 웹사이트(pencil.so 추정, 영상 참조)에서 다운로드 버튼을 클릭하면 macOS, Linux, Windows 버전을 선택할 수 있다. 강연자는 “Windows는 항상 안 된다. Windows를 쓰지 마라”고 농담조로 언급하며, 본인은 Apple Silicon Mac 버전을 사용한다고 밝혔다. 다운로드 후 실행하면 귀여운 UI의 독립 실행형(Standalone) 프로그램이 실행된다.
초기 화면과 Claude Code 연동
프로그램을 처음 실행하면 오른쪽 상단에 Claude Code와의 연동 상태가 자동으로 표시된다. 강연자는 “따로 설정할 필요가 없었다. 자동으로 토큰을 확인하고 연동해주는 것 같다”고 설명했다. 초기 화면에는 Pencil의 사용법을 보여주는 인터랙티브 튜토리얼이 제공된다. 예를 들어 “Turn the step one frame into dark mode”라는 프롬프트 예시가 있으며, Run 버튼을 누르면 실제로 해당 프레임이 다크모드로 변환되는 것을 확인할 수 있다.
핵심 기능: 디자인 시스템과 프롬프트 갤러리
디자인 시스템(Design System)이란
Pencil의 가장 강력한 기능 중 하나는 디자인 시스템 생성 및 관리다. 디자인 시스템이란 웹사이트를 구성할 때 사용할 스타일과 컴포넌트를 미리 정의해두는 것으로, 레고 블록처럼 미리 만들어진 요소들을 조합해 일관성 있는 디자인을 만들어내는 방법론이다. Pencil 내 “Design Kit” 섹션에는 다양한 프롬프트 예제가 포함되어 있으며, 그 중 “Halo”라는 디자인 시스템 예제를 선택하면 5가지 스타일의 디자인 시스템이 제공된다.
디자인 시스템 기반 페이지 생성
디자인 시스템을 먼저 만들어두면, 이후 페이지를 생성할 때 Pencil이 자동으로 해당 시스템 내에서 적합한 컴포넌트를 선택해 사용한다. 강연자가 Run 버튼을 누르자 화면 왼쪽에서 여러 컴포넌트가 빠르게 스크롤되며 선택되는 모습을 볼 수 있었다. 이는 Pencil이 프롬프트를 분석한 후, 기존에 정의된 디자인 시스템 내에서 가장 적합한 버튼, 입력 필드, 카드 등을 자동으로 찾아 조합한다는 의미다. “대시보드 레벤유(Revenue) 페이지를 만들어줘”라는 프롬프트 역시 마찬가지 방식으로 작동했다.
💡 [영상 참조] 강연자는 이 시점에서 화면의 컴포넌트 선택 과정을 보여주며 설명합니다. 상세 내용은 원본 영상을 확인하세요.
프롬프트 갤러리: 아이디어 뱅크
Pencil은 사용자가 어떤 것을 만들 수 있는지 예시를 보여주는 “프롬프트 갤러리”를 제공한다. 이곳에는 실제로 작동하는 프롬프트 예제들이 카테고리별로 정리되어 있으며, 사용자는 해당 프롬프트를 복사해 그대로 사용하면 유사한 결과물을 얻을 수 있다. 강연자는 “아이디어가 없는 분들은 여기 와서 보면 된다”고 추천했다.
IDE 통합: 실전 워크플로우
VS Code 확장 프로그램 설치
Pencil을 IDE에 통합하려면 VS Code의 확장 프로그램 마켓플레이스에서 “Pencil”을 검색해 설치하면 된다. 검색 결과에 연필 아이콘이 표시되며, 설치 후 IDE를 재시작하면 프로젝트 루트에 .pencil 확장자를 가진 파일이 생성된다. 이 파일이 있는 폴더를 열면 Pencil 확장 프로그램이 자동으로 해당 디자인을 렌더링해준다.
MCP를 통한 디자인-코드 연동
Pencil의 진정한 가치는 MCP(Model Context Protocol) 연동에서 드러난다. 사용자가 IDE 내에서 특정 프레임(디자인 요소)을 선택하고, AI에게 “Pencil MCP를 사용해 이 사이트를 만들어줘”라고 요청하면, 선택한 디자인이 자동으로 AI의 컨텍스트에 포함된다. 이는 AI가 화면에 표시된 디자인을 “보고” 이해한 후, 해당 디자인을 구현하는 코드를 생성한다는 의미다. 강연자는 실제로 Porsche 판매 사이트 디자인을 선택한 후 AI에게 구현을 요청했고, 거의 동일한 결과물을 얻었다.
컨텍스트 스위칭 제거의 의미
전통적인 워크플로우에서는 다음과 같은 단계를 거쳐야 했다.
- Figma에서 디자인 작성
- 디자인을 이미지 또는 CSS로 내보내기
- IDE로 전환
- 디자인을 참고하며 수동으로 코드 작성
- 결과물 확인 후 다시 Figma로 돌아가 수정
Pencil은 이 모든 과정을 IDE 내에서 완결시킨다. 디자인 생성, 수정, 코드 구현까지 단일 환경에서 이루어지므로, 강연자의 표현대로 “컨텍스트 스위칭이 필요 없다”는 것이 최대 강점이다.
💡 추천 워크플로우: 디자인 시스템 우선 접근법
강연자가 제안하는 Pencil 활용 워크플로우는 다음과 같다.
1단계: 디자인 시스템 구성
프로젝트를 시작할 때 가장 먼저 디자인 시스템을 정의한다. 버튼, 입력 필드, 카드, 타이포그래피 등 프로젝트에서 사용할 모든 기본 컴포넌트의 스타일을 Pencil 내에서 생성하고 저장한다. 이 단계에서 색상 팔레트, 간격(Spacing), 폰트 크기 등 일관성을 유지할 디자인 토큰(Design Token)을 함께 정의하면 더욱 효과적이다.
2단계: 페이지별 디자인 생성
디자인 시스템을 기반으로 개별 페이지를 만든다. “로그인 페이지를 만들어줘”, “대시보드를 만들어줘”와 같은 프롬프트를 입력하면, Pencil은 1단계에서 정의한 컴포넌트만을 사용해 페이지를 구성한다. 이를 통해 모든 페이지가 자동으로 일관된 디자인 언어를 유지하게 된다.
3단계: MCP로 코드 구현
완성된 페이지 디자인을 선택한 후, “이 디자인 시스템을 기반으로 공통 컴포넌트를 먼저 만들어줘”라고 AI에게 요청한다. 그러면 AI는 디자인 시스템에 정의된 버튼, 입력 필드 등을 먼저 React 컴포넌트(또는 다른 프레임워크)로 구현한다. 이후 개별 페이지 구현을 요청하면, 이미 만들어진 공통 컴포넌트를 재사용하는 깔끔한 코드가 생성된다.
4단계: 프로덕션 그레이드 최적화
이 워크플로우의 장점은 프로젝트 구조가 처음부터 체계적으로 구성된다는 것이다. 디자인 시스템 → 공통 컴포넌트 → 페이지별 구현 순서로 진행하면, 코드 중복이 최소화되고 유지보수가 용이한 구조가 자연스럽게 만들어진다. 강연자는 “프론트엔드 디자인 시스템적인 부분에서 Pencil을 통해 굉장히 많은 장점을 누릴 수 있다”고 강조했다.
현재 상태와 향후 전망
무료 기간의 종료 가능성
강연자는 Pencil이 “몇 달째 무료인 것 같다”고 언급하며, 언제 유료화될지 모르니 지금 사용해보기를 강력히 권장했다. 실제로 사용하다 보면 최적화가 덜 된 부분들이 있으며, 이것이 유료화를 지연시키는 이유일 수 있다고 추측했다. 그러나 유료화 이후에도 무료 티어(Free Tier)는 제공될 것으로 예상되므로, 지금 도입해 익숙해지는 것이 장기적으로 유리하다.
디자인 약점 보완 도구로서의 가치
“디자인에서 약점이 있다”고 느끼는 개발자들에게 Pencil은 강력한 보완 도구가 될 수 있다. AI가 초안을 만들어주고, 사용자가 세부 조정을 하며, 다시 AI가 코드로 구현하는 사이클은 디자인 전문 지식 없이도 전문적인 결과물을 만들어낼 수 있는 새로운 가능성을 제시한다.
참고: 대한민국 최초 Cursor 앰배서더의 추천
강연자는 영상 말미에 “편집자 P”라는 크리에이터를 소개했다. 편집자 P는 강연자의 책을 편집하는 편집자이자 **대한민국 최초 Cursor 앰배서더(Ambassador)**로, Pencil을 포함한 AI 도구 활용법에 대한 양질의 콘텐츠를 YouTube에 게시하고 있다. 강연자 본인도 편집자 P의 영상을 보고 Pencil을 처음 알게 되었다고 밝혔다. AI 도구 생태계에 관심이 있다면 해당 채널도 구독해볼 것을 권장한다.
마무리
Pencil은 AI 프롬프팅, Figma 스타일의 시각적 편집, IDE 통합이라는 세 가지 요소를 하나로 결합한 혁신적인 도구다. 특히 디자인 시스템을 기반으로 일관성 있는 UI를 생성하고, MCP를 통해 해당 디자인을 즉시 코드로 구현할 수 있다는 점에서, 기존 워크플로우를 근본적으로 개선할 잠재력을 지니고 있다. 현재 무료로 제공되는 이 기회를 활용해, 디자인과 개발 사이의 경계를 허무는 새로운 작업 방식을 경험해보길 권장한다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | 지금 받아야 무료인 개꿀 디자인 툴 |
| 채널 | 코드팩토리 |
| 리포트 작성 | 2026-02-04 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
| 추천 관련 채널 | 편집자 P (대한민국 최초 Cursor 앰배서더) |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.