AI 기반 프로토타입 제작

바이브 코딩이 가장 빛나는 영역이 프로토타이핑이야. AI 코딩 도구의 진가는 아이디어를 빠르게 눈에 보이는 형태로 만들어보는 데서 발휘되거든. 문제는 프로토타입이 어느 순간 프로덕션이 되어버리는 현실이지.

프로토타이핑에 특화된 AI 도구들이 폭발적으로 늘어났어.

웹앱 빌더:

• Bolt — 자연어로 설명하면 React/Next.js 기반 웹앱을 생성. 실시간 미리보기 제공
• Lovable (구 GPT Engineer) — 디자인까지 포함한 풀스택 앱 생성. Supabase 연동 지원
• v0 (Vercel) — UI 컴포넌트 생성에 특화. shadcn/ui 기반으로 깔끔한 결과물

모바일 앱 빌더:

• FlutterFlow — Flutter 기반 모바일 앱을 노코드로 생성. AI 지원 추가
• Replit — 웹, 모바일 가리지 않고 자연어로 프로토타입 생성 후 바로 배포

디자인-투-코드:

• Figma + AI 플러그인 — 디자인을 코드로 변환하는 다양한 플러그인
• Screenshot-to-Code — 스크린샷을 넣으면 해당 UI를 코드로 재현

이 도구들의 공통점은 "0에서 1까지"에 최적화되어 있다는 거야. 아무것도 없는 상태에서 뭔가 동작하는 것을 만드는 데는 탁월하지만, 그걸 다듬고 확장하는 "1에서 100까지"는 여전히 도전적이지.

AI 프로토타이핑 워크플로를 보면:

1단계: 요구사항을 자연어로 정리

코딩을 시작하기 전에 무엇을 만들 건지를 글로 적어. "할 일 관리 앱"이 아니라 "드래그 앤 드롭으로 순서를 바꿀 수 있는 칸반 보드. 컬럼은 To Do, In Progress, Done 세 개. 각 카드에는 제목, 설명, 우선순위, 마감일이 있음"처럼.

2단계: UI 먼저 생성

시각적인 부분부터 만드는 게 좋아. 이유가 있거든 — UI가 눈에 보이면 이해관계자에게 보여주고 피드백을 빨리 받을 수 있잖아. "이거 맞아요?"를 코드가 아니라 화면으로 물어보는 거야.

3단계: 핵심 기능 하나만 구현

전체를 한 번에 만들지 말고, 가장 핵심적인 기능 하나만 먼저 동작하게 만들어. 칸반 보드라면 "카드를 드래그해서 컬럼 간 이동"이 핵심이지. 이것만 되면 프로토타입의 80%는 완성이야.

4단계: 실제 사용자에게 테스트

프로토타입이 어느 정도 형태를 갖추면 바로 사용자에게 보여줘. 코드 품질은 중요하지 않아. 사용자의 반응이 "이거 좋다"인지 "이게 아닌데"인지만 확인하면 돼.

첫 번째 프로토타입이 나오면, 피드백을 기반으로 반복적으로 정제해야 해. 이 과정에서 AI와의 대화가 점점 구체적으로 변해야 하거든.

처음: "칸반 보드 앱 만들어줘" 1차 정제: "카드를 드래그할 때 애니메이션이 부자연스러운데, framer-motion으로 부드럽게 해줘" 2차 정제: "카드가 다른 컬럼으로 이동할 때 서버에 PATCH 요청을 보내서 상태를 저장해줘" 3차 정제: "낙관적 업데이트 적용해서 드래그 즉시 UI가 반영되게 하고, 서버 응답 실패 시 원래 위치로 롤백해줘"

이렇게 점점 구체적으로 파고들면 프로토타입이 점차 프로덕션에 가까워져. 하지만 여기서 함정이 있어.

가장 경고해야 하는 부분이야 — 프로토타입이 프로덕션이 되는 순간.

현실에서 일어나는 일: 프로토타입을 보여줬더니 경영진이 "이거 좋은데, 다음 주에 출시하자"고 해. 프로토타입 코드가 그대로 프로덕션이 되어버리지.

이때 생기는 문제들:

• 에러 처리 부재 — 프로토타입은 행복한 경로만 동작해. 네트워크 오류, 잘못된 입력, 동시 접근 같은 건 고려 안 되어 있지
• 보안 미비 — 인증, 인가, 입력 검증, CSRF 방어 같은 보안 조치가 없어
• 확장성 없음 — 한 명이 쓸 때는 되지만 1000명이 쓰면 터져
• 테스트 없음 — 수정할 때마다 뭐가 깨질지 몰라
• 인프라 미구성 — CI/CD, 모니터링, 로깅이 없어

해결책은 프로토타입과 프로덕션 사이에 명확한 관문을 두는 거야:

1. 프로토타입으로 아이디어를 검증해
2. 검증이 되면 프로토타입을 참고 자료로만 활용해
3. 프로덕션 코드는 처음부터 아키텍처를 잡고, 테스트를 붙이고, 보안을 적용하면서 새로 써

현실적으로 이게 쉽지 않다는 것도 인정해야 하지. 그래서 차선책으로 프로토타입 코드를 체크리스트 기반으로 강화하는 방법도 있어. 에러 처리 추가, 인증 추가, 입력 검증 추가, 테스트 추가 — 이 체크리스트를 AI에게 하나씩 시키면서 프로토타입을 프로덕션 수준으로 끌어올리는 거지.

실패하는 프로토타이핑 패턴들도 알아둬야 해:

• 너무 많이 한 번에 — 처음부터 "소셜 미디어 플랫폼을 만들어줘"같은 거대한 요청. 결과물이 피상적이 돼
• 피드백 없는 정제 — 사용자 피드백 없이 본인 생각대로만 계속 다듬기. 방향이 틀리면 정제해봐야 의미 없지
• 도구 점핑 — Bolt에서 시작했다가 Lovable로 옮기고 다시 Cursor로 가는 식. 도구마다 코드 구조가 달라서 옮길 때마다 처음부터 다시 해야 해
• 프로토타입 = 프로덕션 착각 — 위에서 다룬 것. 가장 비용이 큰 실패 패턴이야

---

정리

6장에서 기억할 거 세 가지:

1. AI 프로토타이핑은 "0에서 1까지"에 최적화되어 있어. 아이디어를 빠르게 검증하는 데 탁월하지만, "1에서 100까지"는 여전히 인간의 몫이야
2. 프로토타입이 프로덕션이 되는 순간이 가장 위험해. 에러 처리, 보안, 테스트, 확장성 없이 출시하면 기술 부채가 폭발하거든
3. UI부터 만들고, 핵심 기능 하나에 집중하고, 빨리 사용자에게 보여줘. 이 순서가 프로토타이핑의 황금 규칙이야