A practical guide for PMs and planners on completing 17 screen wireframes and clickable prototypes in just two days using Pencil.dev and Claude Code for the merger planning of three services (Lona, Kokjibi, and Bokri Engine).
이 레시피는 실제로 3개 서비스 병합 기획을 하면서 겪은 과정을 정리한 것입니다. 디자이너 없이도 AI 도구를 조합하면 와이어프레임부터 프로토타입까지 이틀 만에 만들 수 있습니다.
핵심: "AI 코딩 도구와 같은 맥락에서 동작한다"는 것. 코드 → 디자인이 끊김 없이 이어집니다. Figma나 다른 디자인 도구와의 가장 큰 차이점은 터미널 안에서 코드 분석과 디자인이 하나의 대화로 연결된다는 점입니다.
코드베이스가 있으면 ASCII부터 그리게 하세요. 코드에서 바로 와이어프레임을 그리면 부정확할 수 있습니다. ASCII 유저플로우를 먼저 그리고 와이어프레임으로 변환하면 정확도가 올라갑니다.
경쟁사 리서치는 에이전트에게 시키세요. 6개 서비스 공통점 패턴 분석은 혼자 보면 놓치기 쉽습니다. BX 용어를 나중으로 미루면 안 됩니다. 화면이 늘어날수록 CTA 문구가 제각각이 됩니다. 초반에 체계를 잡으면 이후 작업 속도가 완전히 달라집니다.
갭 분석 없이 "다 됐다"고 생각하면 안 됩니다. 처음 와이어프레임 기획안 매칭률이 65%였습니다. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 것입니다. 중간 점검은 필수!
AI 도구 한 가지에 매몰되지 마세요. Pencil.dev 프로토타입 기능 없음을 알자마자 HTML로 전환했습니다. 도구의 한계에 부딪히면 바로 다른 방법으로 전환하는 게 핵심입니다.
디자이너 없이도 PM/기획자가 직접 시각적 산출물을 만들 수 있다는 것이 이 워크플로우의 핵심 가치입니다. 텍스트 기획안 대신 프로토타입 링크를 공유하면 팀 소통 효율이 완전히 달라집니다.
❌ 이렇게 하면 안 돼요: 1. 갭 분석 없이 "다 됐다"고 생각하기 - 처음 와이어프레임 기획안 매칭률이 65%였음. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 것 2. BX 용어를 나중으로 미루기 - 화면이 늘어날수록 CTA 문구가 제각각이 됨. 초반에 체계를 잡으면 이후 작업 속도가 완전히 달라짐
A practical guide for PMs and planners on completing 17 screen wireframes and clickable prototypes in just two days using Pencil.dev and Claude Code for the merger planning of three services (Lona, Kokjibi, and Bokri Engine).
이 레시피는 실제로 3개 서비스 병합 기획을 하면서 겪은 과정을 정리한 것입니다. 디자이너 없이도 AI 도구를 조합하면 와이어프레임부터 프로토타입까지 이틀 만에 만들 수 있습니다.
핵심: "AI 코딩 도구와 같은 맥락에서 동작한다"는 것. 코드 → 디자인이 끊김 없이 이어집니다. Figma나 다른 디자인 도구와의 가장 큰 차이점은 터미널 안에서 코드 분석과 디자인이 하나의 대화로 연결된다는 점입니다.
코드베이스가 있으면 ASCII부터 그리게 하세요. 코드에서 바로 와이어프레임을 그리면 부정확할 수 있습니다. ASCII 유저플로우를 먼저 그리고 와이어프레임으로 변환하면 정확도가 올라갑니다.
경쟁사 리서치는 에이전트에게 시키세요. 6개 서비스 공통점 패턴 분석은 혼자 보면 놓치기 쉽습니다. BX 용어를 나중으로 미루면 안 됩니다. 화면이 늘어날수록 CTA 문구가 제각각이 됩니다. 초반에 체계를 잡으면 이후 작업 속도가 완전히 달라집니다.
갭 분석 없이 "다 됐다"고 생각하면 안 됩니다. 처음 와이어프레임 기획안 매칭률이 65%였습니다. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 것입니다. 중간 점검은 필수!
AI 도구 한 가지에 매몰되지 마세요. Pencil.dev 프로토타입 기능 없음을 알자마자 HTML로 전환했습니다. 도구의 한계에 부딪히면 바로 다른 방법으로 전환하는 게 핵심입니다.
디자이너 없이도 PM/기획자가 직접 시각적 산출물을 만들 수 있다는 것이 이 워크플로우의 핵심 가치입니다. 텍스트 기획안 대신 프로토타입 링크를 공유하면 팀 소통 효율이 완전히 달라집니다.
❌ 이렇게 하면 안 돼요: 1. 갭 분석 없이 "다 됐다"고 생각하기 - 처음 와이어프레임 기획안 매칭률이 65%였음. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 것 2. BX 용어를 나중으로 미루기 - 화면이 늘어날수록 CTA 문구가 제각각이 됨. 초반에 체계를 잡으면 이후 작업 속도가 완전히 달라짐
댓글 1개
댓글을 작성하려면 로그인이 필요합니다.