📝 한줄 요약
맞춤형 실습을 생성해주는 서비스 로나와, AI 콘텐츠 큐레이션을 해주는 콕집이, AI 스킬 & MCP 잘 쓰게 도와주는 복리엔진 3개 서비스 병합 기획을 맡았습니다. 어떻게 진도를 나갈지 조금 막막한 상황에서 Pencil.dev와 Claude Code로 17개 화면 와이어프레임과 클릭형 프로토타입을 완성해서 팀원들에게 공유했습니다.
🎯 이런 분들께 도움돼요
디자이너 없이 와이어프레임을 직접 만들어야 하는 PM/기획자
기획안 텍스트만으로는 팀 소통이 안 돼서 시각적 산출물이 필요한 분
AI 디자인 도구를 실제 기획 업무에 써보고 싶은 분
결과부터 보고 가시죠
디자인은 못 생겼지만 ... 어떻게 동작하는지 직관적으로 알 수 있는게 핵심입니다.
😫 문제 상황 (Before)
3개 서비스(Rona, 콕집이, 복리엔진)를 하나로 병합하는 기획을 맡게 됐습니다. 특히 로나랑 콕집이는 앞으로 프론트화면을 같이 쓰게 되었어요.
이미 저는 로나를 만들던 와중이었는데요, 로나와 콕집이를 잘 이해하면서 어떻게 합칠 수 있을지 아이디어가 필요했어요.
"이 화면에서 저 화면으로 어떻게 넘어가는 거야?"를 설명하기 직관적이지 않았고, 무엇보다 나 자신도 머릿속에만 있는 구조를 눈으로 봐야 뭐가 필요하고 불필요한지 정리할 수 있겠다 싶었습니다.
디자이너 리소스는 없는 상황. 직접 만들어야 했습니다.
🛠️ 사용한 도구
Pencil.dev: AI 기반 디자인 도구 — 와이어프레임 제작
Claude Code: AI 코딩 도구 — 코드베이스 분석, 유저플로우 설계, 경쟁사 리서치, BX 설계, HTML 프로토타입 제작
모델: Claude Opus / Sonnet (Claude Code), Pencil AI (Pencil.dev)
Pencil.dev가 짱인 이유
Figma make, google AI studio 같은 다양한 툴이 있지만..
1. 코드베이스를 쉽게 주입할 수 있다
Pencil.dev는 Claude Code MCP로 연결되어 있어서 코드 분석 결과가 바로 와이어프레임으로 이어집니다.
2. 기존 디자인 시스템을 그대로 적용
토큰/변수를 설정해두면 새 화면을 만들 때 자동으로 그 체계를 따릅니다.
3. 터미널에서 벗어나지 않는다
코드 분석 → 유저플로우 → 와이어프레임 → 수정이 하나의 대화 안에서 끝납니다. 브라우저 전환 없음.
4. Git 버전 관리
.pen 파일이 프로젝트 안에 있으니 코드와 디자인 버전이 함께 관리됩니다.
5. 배치 수정
배치 작업을 잘 해서 "17개 화면 CTA를 전부 바꿔줘" 같은 작업이 병렬로 한 번의 요청으로 끝납니다.
6. 갭 분석 자동화
기획 문서와 .pen 파일을 동시에 읽어서 빠진 화면을 자동으로 찾아줍니다.
한줄 요약: 핵심은 "AI 코딩 도구와 같은 맥락에서 동작한다"는 것. 코드 → 디자인이 끊김 없이 이어집니다.
🔧 작업 과정
코드베이스를 던졌더니 유저플로우가 나왔다
첫 시작은 단순했습니다. 이미 코 드로 만들어진 서비스가 있으니, 코드를 분석해서 현재 유저가 실제로 어떤 동선으로 움직이는지부터 파악하자고 생각했어요.
내 프로젝트 코드베이스 전부 파악해서 유저의 저니맵을 먼저 ASCII 와이어프레임으로 만들어줘. CTO 팀 호출해서 병렬적으로 분석해.
Claude Code가 CTO 에이전트 팀을 구성해서 전체 코드를 병렬로 분석했습니다. 그 결과 일반 사용자(학생)와 강사 사용자, 두 가지 페르소나 문서가 분리되어 나왔고, 유저 플로우도 2가지 타입으로 정의됐어요.
Type 1: 메인(뉴스 리스트) → 뉴스 상세 → "실습 따라하기" → 터미널 실습 → 결과 확인
Type 2: 네비 "실습" 탭 → 실습 만들기(URL/대화/맞춤) → 생성 중 → 따라하기 → 결과
내가 직접 페르소나를 구분해서 설명하지 않았는데도 코드에서 자동으로 추출해준 게 인상적이었습니다. 먼저 ASCII로 전체 흐름을 그리고, 이걸 Pencil.dev의 .pen 파일로 변환해서 10개 화면 초기 와이어프레임을 만들었어요.
BX 메시지와 용어 체계 — 이름이 있어야 기획이 산다
화면 구조가 잡히니 다음 고민은 "이 버튼에 뭐라고 쓰지?"였습니다.
이 로나 프로젝트를 분석해서 사용자에게 제공할 BX를 리디자인하고 싶어.
Claude Code가 유저 플로우 분석을 기반으로 태그라인 후보 3개를 제시했고, 각 화면별 BX 메시지를 설정해줬어요. "지금 뜨는 AI, 직접 따라해볼 수 있습니다" 같은 문구가 화면에 배치되니 와이어프레임이 살아났습니다.
이후에 BX 용어를 더 체계적으로 잡고 싶어서 전문 에이전트를 호출했어요.
향후 UI에 쓰일 여러 용어/문구들이 나오는데 BX 관점에서 잘 에디팅하고 싶어. 전문 에이전트 호출해서 다른 곳들은 어떻게 하는지 리서치하고 안을 줘볼래?
경쟁사 벤치마킹을 거쳐 BX 용어 체계가 확정됐습니다:
네비게이션: 콘텐츠 | 실습 | 보관함 | 프로필
CTA 통일: 맞춤 실습 → "맞춤 실습 만들기", 공통 실습 → "따라해보기"
사용자 여정: 발견 → 실습 → 성장
개인적으로 마음에 들었던 카피..
서비스 전반에 쓰이는 용어를 초반에 AI와 함께 체계를 잡아두니, 이후 화면을 추가할 때마다 "이 버튼 뭐라고 쓰지?" 고민이 사라졌습니다.
갭 분석 — 기획과 와이어프레임의 65% 매칭
화면을 꽤 만들었다고 생각했는데, 기획안과 와이어프레임 사이에 빠진 게 없는지 확인해보자 싶었습니다.
gap-analysis를 하고 싶어. 현재 pencil.dev랑 기획 문서 사이에. 각각 어떻게 디자인되어야 할지 ASCII 코드로 먼저 보여줘봐.
결과는 매칭률 65%. 누락 5건, 모호 4건이 나왔습니다. 온보딩 화면, 프로필 페이지, 홈 맞춤 피드 등이 빠져 있었어요.
처음부터 완벽하게 나오진 않습니다. 바이브코딩이 그렇듯 AI 디자인도 중간에 빈 부분이 있고, 그걸 채워나가는 과정이 필요해요. 갭 분석 결과를 기반으로 누락 화면을 추가하고, 기존 화면도 수정했습니다. 유저 플로우 화살표 41개를 삭제한 뒤 재정리해서 최종 17개 화면을 4개 Row로 재배치했어요.
Pencil의 한계 → HTML 프로토타입으로 전환
와이어프레임이 17개 화면으로 완성되자 다음 단계가 필요했습니다. 팀원들이 화면 간 동선을 직접 클릭해보면서 이해할 수 있는 프로토타입이요.
그런데 Pencil.dev는 프로토타입 기능을 제공하지 않았습니다.
현재 pencil.dev로 만든 파일을 프로토타입으로 연결하고 싶은데 pencil에서는 그런 기능을 제공을 안 한대. 어떻게 하면 현실적으로 가능할까? 진짜 프로토타입 이동 동선만 보면 됨.
Claude Code가 바로 대안을 제시했습니다. "HTML 클릭 프로토타입이 가장 빠릅니다." Pencil의 .pen 화면 디자인을 기반으로 HTML 페이지를 생성하고, 17개 화면을 전부 연결했어요.
온보딩 → 홈 → 콘텐츠 → 실습 생성(URL/대화/맞춤) → 생성 중 → 실습 따라하기 → 터미널 → 결과. 전체 동선을 클릭만으로 체험할 수 있게 됐습니다.
마지막으로 "다른 직원들도 볼 수 있게 링크로 만들어줘"라고 하니 Vercel에 배포까지 해줬어요. 링크 하나로 팀 전체가 프로토타입을 돌려볼 수 있게 된 겁니다.
✅ 결과 (After)
Before vs After
항목
Before
After
기획 소통 방식
텍스트 기획안으로 말로 설명
17개 화면 프로토타입 링크 공유
타깃 사용자 정의
강사/수강생 혼재 (인지하지 못함)
생성자/소비자 분리 구조 확립
BX 용어
화면마다 제각각
네비/CTA/여정/비전카피 통일 체계
소요 시간
디자이너 없이는 엄두를 못 냈음
이틀
결과물
Pencil.dev 와이어프레임: 17개 화면, 유저플로우 4개 Row 배치
HTML 클릭형 프로토타입: Vercel 배포, 팀원 공유 링크
경쟁사 리서치 보고서 (6개 서비스 벤치마킹)
BX 용어 체계 문서
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
코드베이스가 있으면 ASCII부터 그리게 하기 — 코드에서 바로 와이어프레임을 그리면 부정확할 수 있는데, ASCII 유저플로우를 먼저 그리게 하고 그걸 와이어프레임으로 변환시키니 정확도가 훨씬 높았습니다.
경쟁사 리서치는 에이전트에게 시키기 — 6개 서비스 공통점 같은 패턴은 혼자 보면 놓치기 쉽는데, 에이전트가 병렬로 분석하니 "전부 생성자/소비자를 분리한다"는 핵심 인사이트를 바로 찾아줬습니다.
AI 도구 한 가지에 매몰되지 않기 — Pencil.dev에 프로토타입 기능이 없다는 걸 알자마자 HTML로 전환했습니다. 도구의 한계에 부딪히면 바로 다른 방법으로 넘어가는 게 핵심이에요.
이렇게 하면 안 돼요
갭 분석 없이 "다 됐다"고 생각하기 — 처음 만든 와이어프레임의 기획안 매칭률이 65%였습니다. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 거예요.
BX 용어를 나중으로 미루기 — 화면이 늘어날수록 CTA 문구가 제각각이 되는데, 초반에 체계를 잡아두면 이후 작업 속도가 완전히 달라집니다.
🌍 다른 업무에 적용한다면?
서비스 리뉴얼 기획: 기존 코드베이스를 분석해서 현재 유저플로우를 자동 추출하고, 경쟁사 벤치마킹 기반으로 개선안을 설계
신규 기능 기획: 텍스트 스펙만으로 소통이 안 될 때, 빠르게 와이어프레임 + 프로토타입을 만들어서 팀 합의를 이끌어내기
BX 가이드라인 수립: 서비스 용어/문구 체계를 경쟁사 벤치마킹 기반으로 한 번에 정리
🚀 앞으로의 계획
이 프로토타입을 기반으로 실제 프론트엔드 구현을 시작할 예정입니다
팀 피드백을 받아서 화면 구조를 한 번 더 수정한 뒤 개발에 착수합니다
Pencil.dev 와이어프레임 → HTML 프로토타입 → 실제 구현까지 AI와 함께 끊김 없이 이어가는 게 목표입니다
