2nd/10_Wiki/Topics/Backend/Rapid-Prototyping.md

---
id: wiki-2026-0508-rapid-prototyping
title: Rapid Prototyping
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Prototype-First Development, Spike, MVP Sketch]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [methodology, product, engineering, design]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: any
  framework: agnostic
---

# Rapid Prototyping

## 매 한 줄
> **"매 throw-away artifact 의 fast 의 build — 매 question 의 answer"**. 매 production 의 X — 매 specific assumption (UX, API shape, feasibility) 의 validate 의 minimum 의 build. 2026 의 LLM-assisted scaffolding (v0, Bolt, Cursor Composer) + serverless (Vercel, Fly Machines) 의 cycle 의 hours, 매 not weeks.

## 매 핵심

### 매 prototype types
- **Paper/wireframe**: 매 UX flow — Figma, Excalidraw.
- **Clickable mockup**: 매 user testing — Figma prototype mode.
- **Vertical slice**: 매 single feature end-to-end (UI → API → DB).
- **Spike**: 매 technical feasibility (e.g., "vector DB 의 latency 가 OK?").
- **Wizard-of-Oz**: 매 backend 의 human (Mechanical Turk) — 매 demand 의 validate.

### 매 5 rules
1. **Time-box**: 매 1 day / 1 week 의 hard limit.
2. **One question per prototype**: 매 scope 의 narrow.
3. **Throw it away**: 매 reuse 의 의 prod 의 X — 매 lessons 의 만 carry.
4. **Hardcode shamelessly**: 매 fake data, mock auth, no tests.
5. **Demo, not deploy**: 매 stakeholder 의 see — production 의 ≠.

### 매 응용
1. New product idea 의 user feedback 의 collect.
2. Tech-stack bake-off (Postgres vs ScyllaDB latency).
3. UX pattern 의 A/B mockup.
4. LLM agent flow 의 feasibility (tool-use chain).

## 💻 패턴

### LLM-scaffolded Next.js prototype
```bash
# 매 v0.dev / Bolt 의 starter — 매 minutes 의 ship
npx create-next-app@latest proto --ts --tailwind --app
cd proto && npx shadcn@latest init -d
npx shadcn@latest add button card form
# 매 Cursor Composer / Claude Code 의 "build a $FEATURE landing"
```

### Mock API (in-memory, no DB)
```ts
// app/api/items/route.ts
const mem: { id: string; name: string }[] = [];
export async function GET()  { return Response.json(mem); }
export async function POST(req: Request) {
  const b = await req.json();
  mem.push({ id: crypto.randomUUID(), ...b });
  return Response.json({ ok: true });
}
```

### Wizard-of-Oz (Slack as backend)
```ts
// 매 user request → Slack channel — 매 human responder
async function handleQuery(q: string) {
  await fetch(SLACK_WEBHOOK, {
    method: 'POST',
    body: JSON.stringify({ text: `[WoZ] ${q}` }),
  });
  // 매 polling for human answer in mock store
  return await pollForAnswer(q);
}
```

### Feature flag for prototype scope
```ts
const ENABLE_PROTO = process.env.NEXT_PUBLIC_PROTO === '1';
if (!ENABLE_PROTO) return <NotImplemented />;
```

### Disposable infra (Fly Machines)
```bash
fly launch --copy-config --now --auto-confirm
# 매 demo 후 의 destroy
fly apps destroy proto-xyz --yes
```

### Fake data with Faker
```ts
import { faker } from '@faker-js/faker';
const users = Array.from({ length: 50 }, () => ({
  id: faker.string.uuid(),
  name: faker.person.fullName(),
  email: faker.internet.email(),
}));
```

### Spike 의 measure (latency probe)
```ts
import { performance } from 'node:perf_hooks';
const N = 100;
const samples: number[] = [];
for (let i = 0; i < N; i++) {
  const t0 = performance.now();
  await targetCall();
  samples.push(performance.now() - t0);
}
samples.sort((a,b)=>a-b);
console.log({ p50: samples[N*0.5|0], p95: samples[N*0.95|0], p99: samples[N*0.99|0] });
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| UX 의 test | Figma clickable + 5 user interview |
| API shape 의 doubt | Mock server (msw) + frontend 의 hook up |
| Tech feasibility | Spike with smallest realistic input |
| Demand validation | Landing + waitlist + "fake door" CTA |
| Internal tool | Streamlit / Retool — code 의 X |
| Multi-stakeholder review | Vertical slice — 매 fake data, real flow |

**기본값**: 1 question, 1 week, throw away.

## 🔗 Graph
- 부모: [[Lean Startup]]
- 변형: [[MVP]] · [[Spike]]
- 응용: [[Feature Flag]]

## 🤖 LLM 활용
**언제**: scaffolding (v0, Bolt, Cursor), fake data, mock backend, copy generation.
**언제 X**: 매 production deployment — prototype code 의 prod 의 promote 의 X.

## ❌ 안티패턴
- **Prototype 의 production promote**: 매 tech debt — rewrite 가 cheaper.
- **No time-box**: 매 scope creep — 매 prototype 의 product 의 become.
- **Multiple questions per prototype**: 매 confound — one variable.
- **Real auth/payment in prototype**: 매 yak-shaving — mock.
- **Reusing prototype tests as prod tests**: 매 false confidence — tests 의 X 가 OK.

## 🧪 검증 / 중복
- Verified (Google Design Sprint methodology; IDEO; Eric Ries _Lean Startup_; Marty Cagan _Inspired_).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — prototype types + LLM scaffolding 정리 |