이 레시피는 실제로 3개 서비스 병합 기획을 하면서 겪은 과정을 정리한 것입니다. 디자이너 없이도 AI 도구를 조합하면 와이어프레임부터 프로토타입까지 이틀 만에 만들 수 있습니다.

핵심: "AI 코딩 도구와 같은 맥락에서 동작한다"는 것. 코드 → 디자인이 끊김 없이 이어집니다. Figma나 다른 디자인 도구와의 가장 큰 차이점은 터미널 안에서 코드 분석과 디자인이 하나의 대화로 연결된다는 점입니다.

코드베이스가 있으면 ASCII부터 그리게 하세요. 코드에서 바로 와이어프레임을 그리면 부정확할 수 있습니다. ASCII 유저플로우를 먼저 그리고 와이어프레임으로 변환하면 정확도가 올라갑니다.

경쟁사 리서치는 에이전트에게 시키세요. 6개 서비스 공통점 패턴 분석은 혼자 보면 놓치기 쉽습니다. BX 용어를 나중으로 미루면 안 됩니다. 화면이 늘어날수록 CTA 문구가 제각각이 됩니다. 초반에 체계를 잡으면 이후 작업 속도가 완전히 달라집니다.

갭 분석 없이 "다 됐다"고 생각하면 안 됩니다. 처음 와이어프레임 기획안 매칭률이 65%였습니다. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 것입니다. 중간 점검은 필수!

AI 도구 한 가지에 매몰되지 마세요. Pencil.dev 프로토타입 기능 없음을 알자마자 HTML로 전환했습니다. 도구의 한계에 부딪히면 바로 다른 방법으로 전환하는 게 핵심입니다.

디자이너 없이도 PM/기획자가 직접 시각적 산출물을 만들 수 있다는 것이 이 워크플로우의 핵심 가치입니다. 텍스트 기획안 대신 프로토타입 링크를 공유하면 팀 소통 효율이 완전히 달라집니다.

❌ 이렇게 하면 안 돼요: 1. 갭 분석 없이 "다 됐다"고 생각하기 - 처음 와이어프레임 기획안 매칭률이 65%였음. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 것 2. BX 용어를 나중으로 미루기 - 화면이 늘어날수록 CTA 문구가 제각각이 됨. 초반에 체계를 잡으면 이후 작업 속도가 완전히 달라짐

이 레시피는 실제로 3개 서비스 병합 기획을 하면서 겪은 과정을 정리한 것입니다. 디자이너 없이도 AI 도구를 조합하면 와이어프레임부터 프로토타입까지 이틀 만에 만들 수 있습니다.

핵심: "AI 코딩 도구와 같은 맥락에서 동작한다"는 것. 코드 → 디자인이 끊김 없이 이어집니다. Figma나 다른 디자인 도구와의 가장 큰 차이점은 터미널 안에서 코드 분석과 디자인이 하나의 대화로 연결된다는 점입니다.

코드베이스가 있으면 ASCII부터 그리게 하세요. 코드에서 바로 와이어프레임을 그리면 부정확할 수 있습니다. ASCII 유저플로우를 먼저 그리고 와이어프레임으로 변환하면 정확도가 올라갑니다.

경쟁사 리서치는 에이전트에게 시키세요. 6개 서비스 공통점 패턴 분석은 혼자 보면 놓치기 쉽습니다. BX 용어를 나중으로 미루면 안 됩니다. 화면이 늘어날수록 CTA 문구가 제각각이 됩니다. 초반에 체계를 잡으면 이후 작업 속도가 완전히 달라집니다.

갭 분석 없이 "다 됐다"고 생각하면 안 됩니다. 처음 와이어프레임 기획안 매칭률이 65%였습니다. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 것입니다. 중간 점검은 필수!

AI 도구 한 가지에 매몰되지 마세요. Pencil.dev 프로토타입 기능 없음을 알자마자 HTML로 전환했습니다. 도구의 한계에 부딪히면 바로 다른 방법으로 전환하는 게 핵심입니다.

디자이너 없이도 PM/기획자가 직접 시각적 산출물을 만들 수 있다는 것이 이 워크플로우의 핵심 가치입니다. 텍스트 기획안 대신 프로토타입 링크를 공유하면 팀 소통 효율이 완전히 달라집니다.

❌ 이렇게 하면 안 돼요: 1. 갭 분석 없이 "다 됐다"고 생각하기 - 처음 와이어프레임 기획안 매칭률이 65%였음. 중간 점검 없이 넘어갔으면 빠진 화면을 나중에 발견했을 것 2. BX 용어를 나중으로 미루기 - 화면이 늘어날수록 CTA 문구가 제각각이 됨. 초반에 체계를 잡으면 이후 작업 속도가 완전히 달라짐