한 줄 정의
AI 네이티브 프로토타이핑은 LLM과 오픈소스 도구를 결합하여 기획·PRD 구체화부터 데이터 가공 CLI, UI 및 인터랙션 구현까지 제품의 핵심 개발 사이클을 수 시간 내에 초고속으로 실현하고 검증하는 개념 증명(POC) 중심의 개발 프로세스다.
핵심 요지
- 인터뷰 기반 역방향 PRD 설계: 설계자가 처음부터 PRD를 문서화하는 대신, AI가 설계자를 인터뷰하도록 만들어 아이디어의 논리적 공백을 해결하고 세부 요구 명세서(PRD)를 도출하여 단일 진실 공급원(Single source of truth)으로 삼는다.
- 에이전트 역할 분담: Claude Code를 시스템 설계 및 맥락을 파악하는 리드 엔지니어로, Codex를 정확한 코딩 작업 실행기로, Cursor Composer를 포맷 변경이나 간단한 스크립트 도구로 구성하여 생산성을 극대화한다.
- CLI 기반 데이터 파이프라인 자동화: 팟캐스트 RSS 피드 파싱, OpenAI API 활용 질문 대량 추출, 에피소드 커버 이미지 기반 픽셀 아바타 일괄 생성 등 수작업이 많이 드는 데이터 가공 과정을 CLI 도구로 빌드하여 자동화한다.
- Supabase MCP를 통한 연동: Supabase MCP(Model Context Protocol)를 활용해 DB 테이블 명세 설계, RLS(Row Level Security) 설정, API 연동 등 백엔드 프로비저닝 작업을 자동 수행함으로써 리더보드를 초고속 구축한다.
- 사용자 경험(UX) 중심의 기획 피벗: 기술 구현 자체보다 사용자가 겪을 심리적 장벽(스트레스 유발 여부 등)을 판단하여 기획을 조기에 피벗하고 씬 간의 템포를 조율한다.
상세
1. 6단계 AI 네이티브 프로토타이핑 프로세스
- 1단계: 핵심 아이디어 정의 및 시각화: 기획의 핵심을 정의하고 시각적 컨셉을 가볍게 스케치하여 AI에게 컨텍스트를 제공한다. (Miro 보드에 포켓몬 스크린샷 등을 참조해 전체 맵, 전투 화면 등 러프 구상).
- 2단계: AI 인터뷰를 통한 PRD 작성: AI에게 아이디어를 PRD로 만들어 달라 하기 전에 나를 인터뷰하도록 지시. 질문에 답하는 과정(Wispr Flow 등 음성 입력 도구 활용)에서 논리적 공백을 채우고 AI가 상세 맥락을 쥐게 만든다.
- 3단계: POC (개념 증명) 구현: 에이전트들을 기동하여 빠르게 뼈대를 구현한다. 한계가 보이는 라이브러리는 조기에 걸러내고 피벗한다 (예: RPG-JS로 5분 만에 올렸으나 인벤토리/무기 중심의 한계로 Phaser 3로 신속 피벗).
- 4단계: 추가 기능 구현 및 자동화 CLI 구축:
podcast-processorCLI 도구 구축: 300여 개 텍스트 녹취록 원문을 OpenAI API로 분석하여 에피소드당 3개의 퀴즈 및 정답을 20분 만에 자동 추출 및 JSON화.- 아바타 생성 CLI 구축: RSS 피드로 에피소드 표지 이미지 URL을 긁어 일괄 다운로드한 후, OpenAI Playground에서 화풍을 조율한 프롬프트로 250명이 넘는 게스트 아바타를 픽셀 캐릭터로 자동 변환.
- BGM 자동화: Claude Code에게 오픈소스 사운드 라이브러리를 자율 서칭 및 다운로드하여 게임 오디오 모듈에 연결하도록 지시.
- Supabase MCP 연동: 에이전트가 직접 Supabase DB와 연동하여 Hall of Fame 리더보드용 DB 스펙과 랭킹 저장/로드 API를 자동 구현.
- 5단계: 최종 다듬기 (Polishing):
- Claude Skills (
/review및/security-review)를 가동해 인스턴스 전이 오류, 예외 처리 누락, 보안 취약점을 QA 감사. - 모바일 화면(380px 미만 기기) 반응형 레이아웃 깨짐 패치.
- index.html 내 og:title, og:description 등 소셜 공유 카드용 OG 태그 자동 추가.
- Claude Skills (
- 6단계: 출시 (Ship): Vercel 등으로 라이브 배포 후 핵심 인물(레니 등)에게 슬랙으로 사전 확인 요청, 소셜 네트워크(X 등)에 공유하여 바이럴 및 랭킹 경쟁 유도.
2. 개발 도구 및 플랫폼 피벗
프로토타이핑을 진행할 때는 프레임워크나 라이브러리의 한계를 조기에 식별하고 피벗하는 유연성이 필수적이다.
- 오픈소스 라이브러리 선정과 한계: 최초에 RPG-JS 라이브러리를 활용해 5분 만에 POC를 구축했으나, 해당 프레임워크가 인벤토리와 무기 기반 전투 중심이어서 로직 제어 퀴즈 앱 구현에 맞지 않아 충돌이 잦아짐.
- Phaser 3 기반 전환: 데스크톱 및 모바일용 HTML5 게임 프레임워크인 Phaser로 신속하게 전환하고 타일맵 템플릿(Phaser 3 Tilemaps) 아티클을 참고하여 씬(Scene) 및 게임 로직의 커스텀 자유도를 확보함.
예시
LennyRPG 8시간 개발 사례
- 배경: 레니 라치츠키(Lenny Rachitsky)가 무료 배포한 300회 이상의 팟캐스트 녹취록 원문을 RPG 게임 퀴즈로 빌드하는 프로젝트 착수.
- 기획 피벗: 초기엔 모의 면접을 진행하는 ‘레니 인터뷰 앱’을 구상했으나, 면접 연습 도구는 스트레스를 유발하므로 청취자들에게 즐거움을 줄 수 있는 픽셀 RPG 게임 형태로 전환함.
- 게임 밸런스 설계: ChatGPT를 밸런싱 파트너로 삼아 레벨업 경험치(XP) 공식, 체력(HP) 회복 보너스 퀴즈 무작위 발생률, 스테이지 해금 규칙을 시뮬레이션함. 물리친 게스트는 맵에서 사라지며 내 도감에 수집되어 동일 적 반복 공략 꼼수 차단.
- 결과: Vercel 배포 후 레니의 리트윗으로 X(구 트위터)에서 바이럴 확산되어 275개 도감 수집 및 리더보드 점수 자랑 활성화.
충돌
- AI 생성 속도 vs 최종 사용자 경험(UX): AI가 UI 코드를 빠르게 뱉어낼지라도, 실제 사용자가 조작하면서 겪는 템포(리듬), 픽셀 미세 조정, 정렬, 심리적 인터랙션 마감은 여전히 인간 설계자의 ‘의도’와 ‘취향’이 좌우한다. AI 결과물의 자동 수용에 안주하지 말고, 수동 피드백 루프를 반복하여 UX를 가다듬어야 한다.