00:00:00왜 AI를 활용한 개발에서 디자인과 코드의 핸드오프는 여전히 가장 풀기 어려운 숙제일까요?
00:00:04지금쯤이면 무언가를 디자인하고,
00:00:06그걸 수정하면 코드도 자동으로 업데이트되는 깔끔한 방식이 있을 법도 한데 말이죠.
00:00:08하지만 저희 팀이 시도해 본 모든 도구는 디자인만 가능하거나 코드만 가능할 뿐, 둘 다 되는 건 없었습니다.
00:00:13Stitch와 Bolt는 프롬프트를 코드로 바꿔주지만, 다시 돌아가서 편집할 수 있는 디자인 캔버스가 없습니다.
00:00:17Figma MCP는 읽기 전용이라 AI가 디자인을 가져올 수는 있지만, 직접 디자인을 할 수는 없죠.
00:00:22코딩 에이전트를 직접 사용한다면 디자인을 바꿀 때마다 프롬프트를 처음부터 다시 작성해야 합니다.
00:00:26그래서 Pencil.dev가 디자인과 코드 사이의 양방향 브릿지 역할을 한다며 관심을 끌기 시작했을 때,
00:00:31저희 팀의 눈길을 사로잡았습니다. 하지만 실제로 이를 사용해 구축을 시작해 보니,
00:00:35그 브릿지는 기대만큼 매끄럽지 않았습니다. 단순히 도구를 테스트하려던 일이
00:00:40이 워크플로우를 제대로 작동시키기 위해 예상보다 훨씬 깊게 파고드는 작업이 되어버렸죠.
00:00:44아마 최근 디자이너들 사이에서 인기를 얻고 있는
00:00:47새로운 AI 디자인 도구인 Pencil.dev에 대해 이미 들어보셨을 겁니다.
00:00:51이 도구는 기본적으로 디자인에 특화된 인기 디자인 도구들과
00:00:56해당 디자인 패턴을 구현하는 데 최적화된 AI 개발 도구 사이를 이어주는 다리 역할을 합니다.
00:01:00유명한 에이전트 기반 IDE들과 연결되며 컴포넌트 생성,
00:01:04UI 라이브러리 지원, 자동 CSS 클래스 생성 등 디자인-코드 워크플로우를
00:01:08실제로 더 원활하게 만들어주는 다양한 기능을 포함하고 있습니다.
00:01:11Figma를 사용해 보신 분들이라면 인터페이스가 매우 친숙하게 느껴지실 겁니다.
00:01:15현재 무료로 제공되고 있으며, 저희 팀도 테스트를 위해 다운로드해 보았습니다.
00:01:18데스크톱 앱을 설치하자 설치되어 있던 모든 AI 플랫폼에
00:01:23연결할 수 있는 옵션이 떴습니다. 저희는 주력 도구로 사용하던 Claude Code에 연결했는데요,
00:01:27Pencil.dev는 내부적으로 Claude Code나 Codex 같은 AI 코딩 플랫폼을 활용해 작업을 수행하기 때문입니다.
00:01:32데스크톱 앱 설치가 끝나자 Pencil.dev용 MCP가 자동으로 구성되었고,
00:01:36모든 도구가 Claude Code에 바로 나타났습니다. 설정이 완료되니
00:01:41채팅에서 모든 OpenAI 및 Anthropic 모델을 사용할 수 있게 되었습니다.
00:01:46저희는 여러 모델 중 Opus 4.6을 선택했습니다. 이 도구는 강력한 디자인 기능을 갖추고 있습니다.
00:01:51디자인 파일을 프로젝트 폴더 내에 .pen 파일로 저장하는데,
00:01:56이는 기본적으로 JSON 기반 형식이라 Git으로 버전 관리가 가능합니다. 하지만 이 도구를
00:02:01다른 도구들과 차별화하는 핵심은 코딩 에이전트와 앱 내 디자인 사이의 양방향 브릿지 역할입니다.
00:02:06다만, 저희가 생각했던 양방향 동기화와는 조금 차이가 있었습니다.
00:02:10저희는 Claude나 AI 에이전트가 디자인과 코드를 자동으로 동기화해 줄 거라 예상했지만,
00:02:16실제로는 그렇지 않았습니다. 디자인을 자동으로 코드로 옮겨주지 않기 때문에
00:02:21수동으로 동기화 프롬프트를 입력해야 했고, 그러면 에이전트가 디자인을 섹션별로 분석해
00:02:26HTML 파일에 구현하는 방식이었습니다. 캔버스의 디자인과 정확히 일치하게 구현되긴 했지만,
00:02:32디자인을 수정할 때마다 이 작업을 반복하는 건 오버헤드가 너무 컸습니다.
00:02:37저희 팀은 크리에이티브 디렉션 스튜디오의 랜딩 페이지를 작업 중이었는데,
00:02:41이미 Pencil.dev와 Claude Code를 연결해 디자인을 마친 상태였습니다. 결과물은
00:02:46의도했던 크리에이티브 디렉션이 명확하게 드러나는 탄탄한 웹사이트였습니다.
00:02:51Claude를 사용해 디자인을 한 번 구현하고 작업 중인 Next.js 프로젝트에 동기화했지만,
00:02:56페이지에 마음에 들지 않아 수정이 필요한 요소들이 많았습니다.
00:03:01프로젝트에서 여러 부분을 반복해서 수정해야 했는데, 구현된 프로젝트와 동기화하라고
00:03:06Claude에게 계속 반복해서 명령할 수는 없는 노릇이었습니다. 너무 소모적인 일이니까요.
00:03:10그래서 저희는 이 문제를 해결하기 위해 스크립트를 하나 만들었습니다. 이 스크립트는
00:03:15파일 변경 사항을 모니터링하는 여러 JavaScript 라이브러리를 사용합니다. 또한 Claude가
00:03:20반복 호출되어 토큰을 낭비하고 세션 제한에 걸리는 것을 방지하기 위해 쿨다운 기간을 두었습니다.
00:03:25이 스크립트의 목적은 디자인이 담긴 .pen 파일을 계속 감시하다가
00:03:29파일에 변경이 생기면 동기화 방법이 포함된 프롬프트와 함께 Claude CLI를 실행하는 것입니다.
00:03:34다만 쿨다운 기간을 추가하여 저장할 때마다 간격을 둠으로써, 모든 작은 변경 사항이 한꺼번에 동기화되지 않게 했습니다.
00:03:39이제 'npm run sync' 명령어를 실행하기만 하면 워커가 즉시 가동되어
00:03:44디자인이 포함된 .pen 파일을 모니터링하기 시작합니다. 스크립트가 실행 중인 상태에서
00:03:49내용을 수정하고 저장 단축키를 누를 때마다, 별도로 명령하지 않아도
00:03:54자동으로 Claude CLI가 트리거되어 변경 사항을 프로젝트에 동기화하기 시작합니다.
00:03:59하지만 이 스크립트를 사용하기 전에 거쳐야 할 사전 단계가 있습니다.
00:04:04읽기, 쓰기 및 MCP 도구 호출과 같이 편집에 필요한 모든 권한을
00:04:10.claude 폴더 안의 settings.json에 미리 설정해 두어야 합니다. 그렇지 않으면 Claude가
00:04:15권한 요청 프롬프트에 걸려 무한정 대기하게 되기 때문입니다. 권한이 없으면 Claude는
00:04:20프로젝트를 수정하거나 구현을 제대로 완료할 수 없습니다. 이 스크립트 덕분에
00:04:24더 이상 수동으로 동기화 프롬프트를 입력할 필요가 없어 훨씬 편해졌습니다.
00:04:29모든 반복 작업이 스크립트에 의해 모니터링되고 구현을 위해 Claude로 자동 전송됩니다.
00:04:34이 앱의 소스 코드와 함께 해당 스크립트는 AI Labs Pro에서 확인하실 수 있습니다.
00:04:39AI Labs Pro는 저희가 최근 런칭한 커뮤니티로, 이번 영상뿐만 아니라 이전 영상들에서 소개한
00:04:43프로젝트에 바로 적용 가능한 템플릿들을 제공합니다. 저희 채널의 콘텐츠가
00:04:48도움이 되었고 채널을 응원하고 싶으시다면 가장 좋은 방법입니다. 링크는 설명란에 있습니다.
00:04:52Claude Code의 능력 중 하나는 멀티 에이전트 시스템을 사용하여 작업을 병렬화하고 속도를 높이는 것입니다.
00:04:57저희는 Pencil.dev와 멀티 에이전트 설정을 함께 써보면 어떨까 생각했습니다.
00:05:02어차피 MCP로 연결되어 있으니, 여러 에이전트가 앱의 각기 다른 측면을
00:05:07동시에 구현하도록 시도해 보았습니다. Claude Code를 사용하면
00:05:12프로젝트 시작 전에 미리 작성해 둔 PRD나 UI 가이드 같은 문서들을 컨텍스트로 활용할 수 있어 편리합니다.
00:05:18단순히 랜딩 페이지에 그치지 않고 웹사이트의 다른 페이지들도 구현해야 했습니다.
00:05:23저희는 각 에이전트가 빌드하려는 앱의 서로 다른 부분을 맡도록 명시적으로 요청했습니다.
00:05:28탐색 단계부터 시작하여 여러 MCP 도구를 호출했습니다.
00:05:33페이지가 5개였기에 Claude는 5개의 에이전트를 생성하여 각각 전담 페이지를 맡겼습니다.
00:05:39잠시 후, 애플리케이션 디자인의 초기 버전이 완성되었습니다. 필요한 모든 페이지를
00:05:44생성해냈고, 전체적으로 동일한 폰트와 스타일을 사용하여 랜딩 페이지와 디자인 톤을 맞췄습니다.
00:05:48디자인이 완료된 후 Command + S를 눌러 파일을 저장하자,
00:05:54스크립트가 작동하여 수동 작업을 줄이고 앱에 디자인을 자동으로 구현하기 시작했습니다.
00:05:58하지만 그 시점의 웹사이트는 꽤 괜찮아 보였음에도 무언가 부족했습니다.
00:06:03페이지에 움직임이 없었고, 정적인 레이아웃에서 시선을 유도할 수 있는 스크롤 애니메이션이 필요했습니다.
00:06:08그래서 저희는 강력한 JavaScript 애니메이션을 제공하고 복잡한 연출도 구현하기 쉬운
00:06:14주력 라이브러리 GSAP을 사용하기로 했습니다. 이를 위해
00:06:19XML로 작성된 매우 상세한 프롬프트를 준비했습니다. Claude 모델은 XML 구조의 프롬프트를
00:06:26더 잘 처리하도록 튜닝되어 있어 지시 사항을 더 쉽게 파악할 수 있기 때문입니다. 프롬프트에는
00:06:31작업 상세 내용, 필요한 종속성, 그리고 모든 중요한 참고 사항이 포함되었으며
00:06:36각 섹션이 어떻게 동작해야 하는지 특정 요소별로 태그 안에 상세히 지정했습니다.
00:06:41이 프롬프트를 Claude Code에 입력하자 GSAP 모션이 포함된 컴포넌트들을 추가하고
00:06:46GSAP 자체를 설치하는 등 많은 변경이 이루어졌습니다. 해당 구현이 완료된 후
00:06:51웹사이트를 확인해 보니 애니메이션 덕분에 훨씬 생동감 넘치고 인터랙티브해졌습니다.
00:06:56움직임이 전혀 없던 이전의 정적인 버전과는 완전히 다른 경험을 선사했습니다.
00:07:00이 프롬프트 역시 저희 커뮤니티인 AI Labs Pro에서 다운로드하여
00:07:04여러분의 프로젝트에 활용하실 수 있습니다. 또한 저희 영상이 마음에 드신다면
00:07:09'Hype' 버튼을 눌러주세요. 더 좋은 콘텐츠를 만들고 더 많은 분께 다가가는 데 큰 힘이 됩니다.
00:07:14GSAP으로 스크롤 시각 효과를 추가했지만, 그 위에
00:07:19Lenis를 한 층 더 얹어주었습니다. Lenis는 오픈 소스 부드러운 스크롤 라이브러리로,
00:07:25웹사이트에서 더 몰입감 있는 레이아웃을 만드는 데 널리 쓰이는 도구입니다.
00:07:30이미 GSAP으로 스크롤 애니메이션을 설정했는데 왜 다른 라이브러리를 또 쓰는지 궁금하실 텐데요,
00:07:35사실 Lenis와 GSAP은 서로 보완 관계에 있습니다. GSAP이 스크롤할 때 일어나는 일을 제어한다면,
00:07:39Lenis는 스크롤 자체의 느낌과 부드러움을 제어합니다. Lenis가 없으면 스크롤이 툭툭 끊기지만,
00:07:44Lenis를 쓰면 페이지 흐름이 매끄러워지고 GSAP 애니메이션도 훨씬 자연스럽게 트리거됩니다.
00:07:49이 작업을 위해 또 다른 상세 프롬프트를 작성했습니다. GSAP 때와 마찬가지로
00:07:54XML 프롬프팅 방식을 따랐습니다. 이번 Lenis 프롬프트는
00:07:59이전 단계에서 추가된 기존 스크롤 애니메이션을 강화하는 데 초점을 맞췄습니다.
00:08:04종속성을 나열하고, 모든 지침을 설정하고, 요소에 대한 상세 설명과 애니메이션 배치 방법,
00:08:09그리고 기능 동작 방식을 기술한 뒤 규칙으로 마무리했습니다. 이 프롬프트를
00:08:13Claude Code에 주어 전체 레포지토리에 걸쳐 많은 수정이 이루어지게 했습니다. 구현 완료 후
00:08:18확인해 보니 웹사이트가 눈에 띄게 개선되었습니다. 가장 큰 변화는
00:08:23스크롤이 훨씬 부드러워져 웹사이트 탐색이 훨씬 더 몰입감 있는 경험으로 변했다는 점입니다.
00:08:28모든 기능을 갖춘 웹사이트가 완성된 후, 마지막으로 남은 일은
00:08:32완료하기 전에 UX 표준을 준수하는지 확인하는 것이었습니다. 이를 위해
00:08:38Skill Creator를 사용해 'UX Audit'이라는 스킬을 만들었습니다. 이 스킬은 UI 요소의 품질을 점검하고,
00:08:44웹사이트의 다양한 측면을 검토하여 모든 것이 UX 표준에 부합하는지 확인하는 데 특화되어 있습니다.
00:08:49컨텍스트 수집, 9가지 체크리스트 분석, 그리고 기준에 따라 점수를 매기는 보고 단계 등 여러 단계로 구성됩니다.
00:08:54여기에는 9가지 항목에 대한 상세 내용이 담긴 UX 체크리스트와,
00:08:59사람의 눈이 놓치기 쉬운 다양한 UX 이슈를 프로그래밍 방식으로 잡아내는
00:09:04Python 스크립트들이 참조용으로 포함되어 있습니다. 오딧(감사) 스킬을 실행하자
00:09:08모든 이슈를 취합하여 2개의 크리티컬 이슈와 다수의 메이저, 마이너 이슈를 찾아냈습니다.
00:09:14크리티컬 이슈는 색상 대비 문제였습니다. 식별된 이슈들로 인해 웹사이트 점수는
00:09:19C 등급을 받았습니다. 스킬이 필요한 변경 사항을 상세히 알려주었고,
00:09:24저희는 해당 변경 사항을 구현하도록 요청했습니다. 모든 수정이 완료된 후,
00:09:29웹사이트의 겉모습은 크게 달라지지 않았을지 몰라도 사용성은 엄청나게 향상되어
00:09:34탐색이 더 쉬워졌고 WCAG 규정도 준수하게 되었습니다. 오딧 스킬을 다시 실행해 보니
00:09:40웹사이트 등급이 C에서 B로 올라갔습니다. 주요 이슈가 모두 해결되고 마이너한 문제들만 남았다는 뜻이죠.
00:09:45준비한 영상은 여기까지입니다. 채널을 응원하고 지속적인 영상 제작에
00:09:50도움을 주고 싶으시다면 아래 'Super Thanks' 버튼을 이용해 주세요. 항상
00:09:55시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.