Files
2nd/10_Wiki/Topics/Architecture/Prototyping.md
T
Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization
10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 23:52:15 +09:00

4.7 KiB

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-prototyping Prototyping 10_Wiki/Topics verified self
Rapid Prototyping
MVP Prototyping
none A 0.9 applied
process
design
mvp
ux
2026-05-10 pending
language framework
typescript 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)

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

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

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)

// Auto-export from Figma plugin
import { LandingHero } from './figma-export/LandingHero';
// then edit in code, no re-implementation

A/B prototype routing

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

🤖 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