2nd/10_Wiki/Topics/Architecture/Prototyping.md

---
id: wiki-2026-0508-prototyping
title: Prototyping
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Rapid Prototyping, MVP Prototyping]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [process, design, mvp, ux]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: figma-v0-claude
---

# Prototyping

## 매 한 줄
> **"매 cheapest test 매 maximum learning"**. 매 paper sketches → Figma → v0 / Claude Artifacts / Lovable / Bolt 매 2026 매 generative prototyping era. 매 hours 단위 product validation.

## 매 핵심

### 매 fidelity ladder
- **Paper / whiteboard**: minutes — 매 flow validation.
- **Wireframe** (Figma, Excalidraw): hours — 매 layout.
- **Mid-fi** (Figma + interactions): day — 매 user testing.
- **High-fi clickable** (ProtoPie, Framer): days — 매 stakeholder demo.
- **Functional MVP** (v0, Lovable, Claude Artifacts): hours-days — 매 real users.

### 매 prototyping types (Houde & Hill 1997)
- **Role**: what does it do for users?
- **Look & feel**: 매 sensory experience.
- **Implementation**: 매 technical feasibility.
- **Integration**: 매 all three.

### 매 응용
1. 매 startup MVP — Lovable + Supabase 매 day.
2. 매 enterprise feature spike — Claude Artifact for stakeholder.
3. 매 UX research — Figma clickable, usertesting.com.
4. 매 hardware — 3D print + Arduino.

## 💻 패턴

### Claude Artifact prototype (React)
```tsx
// User: "prototype a Pomodoro timer"
import { useState, useEffect } from 'react';

export default function Pomodoro() {
  const [secs, setSecs] = useState(1500);
  const [run, setRun] = useState(false);
  useEffect(() => {
    if (!run) return;
    const id = setInterval(() => setSecs(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(id);
  }, [run]);
  return (
    <div className="text-6xl font-mono">
      {Math.floor(secs/60)}:{String(secs%60).padStart(2,'0')}
      <button onClick={() => setRun(r => !r)}>{run ? 'Pause' : 'Start'}</button>
    </div>
  );
}
```

### v0.dev prompt-to-UI
```
Prompt: "dashboard with sidebar nav, 3 KPI cards, line chart of revenue,
        recent orders table. shadcn/ui, dark mode."
→ Generates Next.js + Tailwind + shadcn components
→ Edit via natural language follow-ups
```

### Wizard-of-Oz prototype (fake AI)
```python
# Test demand before building real ML
def fake_classifier(text: str) -> str:
    # human in loop via Slack
    requests.post(SLACK, json={"text": f"Classify: {text}"})
    return wait_for_human_response()  # poll DB
```

### Throwaway prototype (Streamlit)
```python
import streamlit as st
import pandas as pd

st.title("Sales Forecast Demo")
df = pd.read_csv(st.file_uploader("CSV"))
horizon = st.slider("Days", 7, 90, 30)
if st.button("Forecast"):
    st.line_chart(simple_forecast(df, horizon))
```

### Figma → code (Builder.io / Anima 2026)
```typescript
// Auto-export from Figma plugin
import { LandingHero } from './figma-export/LandingHero';
// then edit in code, no re-implementation
```

### A/B prototype routing
```typescript
const variant = userId % 2 === 0 ? 'A' : 'B';
return variant === 'A' ? <PrototypeA /> : <PrototypeB />;
// instrument both, compare conversion
```

## 매 결정 기준
| 상황 | Fidelity |
|---|---|
| 매 flow / IA validation | Paper / wireframe |
| 매 visual design review | Mid-fi Figma |
| 매 user test | High-fi clickable |
| 매 stakeholder buy-in | v0 / Claude Artifact |
| 매 real user feedback | Functional MVP (Lovable, Bolt) |
| 매 demand validation | Wizard-of-Oz |

**기본값**: 매 2026 매 first instinct — Claude Artifact / v0. 매 1 시간에 매 stakeholder demo.

## 🔗 Graph
- 부모: [[Lean Startup]]
- 변형: [[MVP]]
- Adjacent: [[Figma]]

## 🤖 LLM 활용
**언제**: 매 prototyping itself 매 LLM-native task — Claude Artifact / v0 매 prompt → working code in seconds. 매 iteration via natural language.
**언제 X**: 매 production architecture decision — prototype 와 production 매 different concerns. 매 throw away.

## ❌ 안티패턴
- **Prototype → production**: 매 throwaway code 가 매 prod 로 — 매 tech debt source #1. 매 명시적 rewrite.
- **Over-fidelity early**: 매 high-fi 부터 매 시작 — 매 sunk cost, 매 hard to throw away.
- **No success criteria**: 매 prototype 매 무엇 validate 인지 미정 — 매 nothing learned.
- **Too few users**: 매 1 명 testing — 매 idiosyncratic feedback.

## 🧪 검증 / 중복
- Verified (Houde & Hill — "What Do Prototypes Prototype?" 1997; IDEO methods).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — full prototyping entry with 2026 generative tools |