00:00:00Pencil을 소개합니다. 어떤 AI 어시스턴트의 프롬프트든
00:00:05눈앞에서 바로 시각적인 디자인으로 바꿔주는 도구이며, Figma처럼 직접 편집도 가능합니다.
00:00:10컴포넌트, UI 키트, CSS 변수를 지원하며 완전히 무료입니다.
00:00:15하지만 Sketch나 최근 비슷한 기능을 선보인 Figma의 새로운 MCP 도구가 있는 상황에서,
00:00:19Pencil이 과연 디자이너들이 선택할 도구가 될 수 있을까요?
00:00:22구독 버튼을 누르시고, 함께 자세히 알아보시죠.
00:00:24AI가 디자인 분야에서 아직 완벽하지 않다는 건 비밀이 아닙니다.
00:00:28자, 이걸 한번 보세요.
00:00:30최첨단 모델로 기능을 추가하는 것이 도움이 되긴 하지만,
00:00:33때로는 코드로 넘어가기 전에 디자인을 다듬거나 클라이언트의 승인을 받아야 할 때가 있죠.
00:00:38바로 이럴 때 Pencil이 필요합니다.
00:00:40이것은 IDE 내에서 로컬로 작동하거나 독립형 앱으로 실행되는 에이전트 기반 디자인 도구입니다.
00:00:46저처럼 Claude Code를 즐겨 사용하는 분들에게는 완벽한 디자인 도구죠.
00:00:51그럼 간단한 데모를 보여드리겠습니다.
00:00:52자, Pencil의 전체적인 모습입니다.
00:00:54Figma를 써보셨다면 왼쪽의 옵션들이나
00:00:59오른쪽의 캔버스 및 프레임 설정 기능들이 매우 익숙하게 느껴지실 겁니다.
00:01:03이 화면은 Pencil 설정을 마치면 처음 보게 되는 파일입니다.
00:01:071단계와 2단계는 건너뛰고,
00:01:09어떻게 작동하는지 바로 보여드리기 위해 3단계로 가보겠습니다.
00:01:12여기 있는 게 프롬프트입니다.
00:01:14여기서 'Run'을 클릭해 채팅창 안에서 프롬프트를 실행할 수도 있습니다.
00:01:18하지만 저는 터미널에서 제 스킬과 MCP 서버가 설정된
00:01:22Claude Code를 사용해 보겠습니다.
00:01:26Pencil이 그 모든 이점을 활용할 수 있도록 말이죠.
00:01:29프롬프트를 복사한 뒤, (첫 돌을 축하해요!) Claude Code에 붙여넣겠습니다.
00:01:33확실히 하기 위해 Pencil MCP 서버를 사용하라고
00:01:37따로 지시하겠습니다.
00:01:39이 프롬프트는 Pencil에게 로버(Rover) 관리 플랫폼용 대시보드를
00:01:44컴포넌트를 사용해 디자인하라고 명령하고 있습니다.
00:01:45여기 아래에 있는 Lunaris UI 키트의 컴포넌트들을 사용하는 것이죠.
00:01:50다시 프레임으로 돌아가 보면, 대시보드가 실시간으로 생성되는 것을 볼 수 있습니다.
00:01:56Claude Code로 돌아가서 정확히 무엇을 하고 있는지 살펴봅시다.
00:01:59현재 내비게이션 바를 채우기 위해 Pencil MCP 일괄 디자인 도구를 사용 중이네요.
00:02:05메인 레이아웃 구조를 설정하는 1단계는 이미 완료했습니다.
00:02:08Pencil로 돌아오면 디자인이 실시간으로 추가되고 변경되는 것을 확인할 수 있습니다.
00:02:13Claude가 작업을 마쳤으니, 이제 디자인을 실시간으로 수정해 보겠습니다.
00:02:17정말 감탄하지 않을 수가 없는데요,
00:02:20적절한 아이콘 선택부터 색상 조합, 여기 이 세련된 알약 모양 요소와
00:02:25멋진 버튼들까지 아주 훌륭합니다.
00:02:27그런데 '10개 레코드 표시' 부분이 가장자리에 너무 붙어 있네요.
00:02:31클릭해서 패딩을 살짝 조정해 보겠습니다.
00:02:34이것이 바로 Pencil의 묘미입니다.
00:02:36디자인에서 바꾸고 싶은 건 무엇이든 Figma처럼 수정할 수 있지만,
00:02:40하나의 UI 키트에만 얽매일 필요도 없습니다.
00:02:42사실 Shadcn부터 Lunaris, Halo, Nitro 등 선택할 수 있는 키트가 정말 많고,
00:02:48그 외에도 더 다양합니다.
00:02:49예를 들어 Shadcn을 클릭하면 테마 설정 영역에서 더 많은 옵션을 볼 수 있습니다.
00:02:54다크 모드로 바꾸거나, 버튼을 노란색으로 변경하는 등 테마를 바꿀 수 있고,
00:02:58전체 배경도 수정할 수 있죠.
00:03:01디자인을 도와줄 다양한 UI 키트들도 준비되어 있습니다.
00:03:05이번에는 아예 처음부터 새로 만들어 보겠습니다.
00:03:08기본적으로는 채팅 기능을 사용하지만,
00:03:11내용을 복사해서 채팅창으로 가져갈 수도 있습니다.
00:03:13그전에 빈 캔버스를 만들기 위해 File - New를 클릭하겠습니다.
00:03:17너비는 800 이상, 대략 1024 정도로 맞추고 높이를 좀 더 길게 설정하겠습니다.
00:03:24이제 프레임을 선택한 상태에서 Claude에게 스타일 가이드를 사용하도록 하겠습니다.
00:03:28준비가 되면, Unsplash 이미지를 활용한
00:03:32보헤미안 스타일의 프랑스 빵집 웹사이트를 만들어달라고 요청하겠습니다.
00:03:36엔터를 누르고 어떤 결과가 나오는지 지켜보죠.
00:03:39전혀 예상이 안 되는데, 결과가 궁금하네요.
00:03:42제가 'Superpower' 스킬을 사용 중이라
00:03:45웹사이트에 대한 몇 가지 추가 질문을 던지네요.
00:03:47이제 작업을 시작합니다.
00:03:49제가 처음 설정한 것보다 더 넓은 프레임을 제안했군요.
00:03:52진행 속도를 높이기 위해 영상을 조금 빨리 돌려보겠습니다.
00:03:55이제 Claude가 계획했던 3개의 페이지를 모두 완성한 것 같네요.
00:03:59완성된 디자인을 보니 솔직히 정말 인상적입니다.
00:04:02물론 수정하고 싶은 부분들이 몇 군데 보이긴 하지만,
00:04:06웹사이트에서 이 디자인을 봤다면 AI가 만들었다고는 생각하지 못했을 겁니다.
00:04:10로고부터 사용된 이미지, 전체적인 레이아웃까지 말이죠.
00:04:14정말 훌륭해 보입니다.
00:04:16몇몇 사소한 문제들은 전혀 걱정되지 않습니다.
00:04:17바꾸고 싶은 부분을 더블 클릭하기만 하면 되니까요.
00:04:20이렇게 텍스트를 드래그해서 위치를 잡고 내용을 조금 수정하면,
00:04:24자, 금방 해결됐죠.
00:04:26이제 Claude에게 이걸 실제 작동하는 웹사이트 코드로 짜달라고 하겠습니다.
00:04:30결과물입니다. 이게 바로 완성된 사이트예요.
00:04:32디자인에는 없던 빵 배경이 추가될 줄은 몰랐는데,
00:04:35그래도 괜찮네요.
00:04:38한번 아래로 내려보겠습니다.
00:04:39디자인의 거의 모든 요소를 일대일로 완벽하게 구현했습니다. 놀랍네요.
00:04:44'Our Story' 페이지로 가보겠습니다. 완벽하네요.
00:04:47디자인에서 본 그대로입니다. 멋진 텍스트와 3단계 설명,
00:04:52그리고 본인들이 직접 먹는 재료만 사용한다는 문구도 아주 좋네요.
00:04:56모든 이미지가 제자리에 있고 메뉴판도 아주 인상적입니다.
00:05:00항목 끝마다 추가된 수평 구분선도 마음에 드네요.
00:05:04이 디자인의 장점은 AI가 만들었기 때문에
00:05:07어떤 데이터베이스와도 연결할 수 있다는 점입니다. 실제 데이터를 사용할 수 있죠.
00:05:10다른 MCP 도구나 스킬을 사용해 사이트의 품질을 더 높일 수도 있습니다.
00:05:15게다가 이미 Figma로 작업한 디자인이 있다면,
00:05:18Figma에서 가져오기 기능을 통해 Pencil에서 그대로 사용할 수도 있습니다.
00:05:22영상 설명란에 이 웹사이트 링크를 걸어둘 테니 직접 확인해 보세요.
00:05:25다양한 디자인을 프롬프트로 만들어보는 과정이 정말 즐거웠고,
00:05:29눈앞에서 바로 제작되면서 나중에 수정까지 가능하다는 게 마치 마법 같았습니다.
00:05:35또한 Pencil 파일은 순수 JSON 형식이어서
00:05:38AI 에이전트가 이해하고 코드로 변환하기가 매우 쉽습니다.
00:05:42Pencil이 훌륭하긴 하지만 완벽한 건 아닙니다.
00:05:46빌드 채팅 기능이 가끔 응답하지 않는 문제가 있었고,
00:05:50새 파일을 만들 때 생성 중 오버레이가 저장을 하거나 재시작하기 전까지 안 없어질 때도 있었습니다.
00:05:56특정 작업을 할 때 속도가 꽤 느리게 느껴지기도 했고요.
00:05:59하지만 이런 건 제작팀이 현재 개선 중인 사소한 부분들이라고 생각합니다.
00:06:04Tailwind Plus 같은 커스텀 UI 키트를 제작하거나 가져오는 기능도 마찬가지고요.
00:06:11다시 말씀드리지만, 이 도구는 현재 완전히 무료입니다.
00:06:15벤처 투자를 받은 서비스라 언제까지 무료일지 모르니 지금 마음껏 활용해 보세요.
00:06:19사실 전 디자이너가 아닙니다. 놀랍게도 말이죠.
00:06:22Figma의 MCP 도구나 Sketch의 기능을 써보진 않았지만, 온라인의 평가를 보면
00:06:28Pencil이 다양한 도구와의 원활한 통합 덕분에 설정하기가 훨씬 쉬워 보입니다.
00:06:34말이 나온 김에, 직접 코딩하는 대신 Claude Code를 사용해
00:06:39터미널 UI를 즉석에서 디자인하고 싶다면,
00:06:42그 방법을 자세히 설명한 Claude Canvas 영상을 확인해 보세요.