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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

# 매 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)

// 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)

// 매 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

const ENABLE_PROTO = process.env.NEXT_PUBLIC_PROTO === '1';
if (!ENABLE_PROTO) return <NotImplemented />;

Disposable infra (Fly Machines)

fly launch --copy-config --now --auto-confirm
# 매 demo 후 의 destroy
fly apps destroy proto-xyz --yes

Fake data with Faker

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)

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 정리