Refactor to 5-step workflow (new → mvp → ui → policy → visualize)

- Remove old commands: spec, customer, sales, merge, design
- Add new commands: ui, policy, visualize
- Update mvp to include landing page generation
- Add templates for mockup, policy, and UI documents
- Simplify output path (remove [project] subfolder)
- Rewrite README focused on usage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-14 20:07:13 +09:00
parent 721cf3a5dd
commit e9b0c00be7
23 changed files with 5221 additions and 3902 deletions

View File

@@ -1,404 +1,493 @@
# appkit.mvp
**최소한의 기능으로 최대한의 검증을 하는 MVP 범위 정의 명령어**
---
description: MVP 범위 정하기 - 최소한의 기능으로 최대한의 검증 + 랜딩페이지 생성
---
## User Input
```text
$ARGUMENTS
```
User input **may** contain constraints like "2-week validation", "budget: 500만원" etc.
## Overview
**This is Step 5 of the logical thinking 7-step workflow**:
**논리적 사고 5단계 워크플로우**:
```
논리적 사고 7단계:
1. /appkit.new아이디어 스케치 (어떤 서비스인지?)
2. /appkit.spec → 기능 구체화 (뭐가 필요할까? 누가 쓸까?)
3. /appkit.customer → 고객 스토리 (고객의 하루, 고민, 해결)
4. /appkit.sales → 세일즈 랜딩 구성 (어떻게 설득할까?)
5. /appkit.mvp → MVP 범위 정하기 (최소한으로 검증하려면?) ← YOU ARE HERE
6. /appkit.merge → 기획 정돈 (흩어진 기획 통합)
7. /appkit.design → 개발 준비 (API, ERD, 기술 스펙)
1. /appkit.new → 아이디어 스케치 (어떤 서비스인지?)
2. /appkit.mvp MVP 범위 정하기 + 랜딩페이지 ← YOU ARE HERE
3. /appkit.ui → 화면설계서 (라우터, 화면, 컴포넌트)
4. /appkit.policy → 정책설계서 (비즈니스 규칙)
5. /appkit.visualize → 목업 생성 (HTML 프로토타입)
```
**출력 디렉토리**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works`
## Purpose
핵심 가치만 구현하여 빠르게 시장 검증을 하기 위한 MVP 범위를 정의합니다.
"있으면 좋은" 기능을 제외하고 "없으면 안되는" 기능만 선별합니다.
**추가로, MVP 검증을 위한 랜딩페이지를 HTML로 생성합니다.**
**핵심 질문**: "최소한으로 검증하려면 뭐가 필요할까?"
---
## When to Use
## Pre-requisite
- `/appkit.sales`로 가치 제안을 정의한 후 (Step 4 완료 후)
- 개발 시작 전 범위를 정해야 할 때
- 리소스가 제한적일 때
- 빠른 시장 검증이 필요할 때
- `/appkit.new`로 서비스 컨셉이 정의되어 있어야 함
- `concept.md` 파일이 존재해야 함
---
## Usage
## Execution Flow
```bash
/appkit.mvp
/appkit.mvp "2-week validation"
/appkit.mvp "budget: 500만원"
/appkit.mvp "target: early adopters only"
```
### 1. 기존 기획 읽기
---
Read files from `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/`:
- `concept.md` - 서비스 컨셉
## What I'll Do
### 2. MVP 정의 대화
### 1. MVP 정의 프레임워크
**Step 1: 핵심 가치 파악**
```markdown
## MVP Definition Framework
## MVP 분석
### The ONE Thing Test
"만약 딱 하나의 기능만 만들 수 있다면?"
그것이 진짜 핵심 가치
[핵심 기능 도출]
### Concierge MVP vs Product MVP
- Concierge: 수동으로 서비스 제공 (검증용)
- Product: 자동화된 제품 (확장용)
### 기능 분류
### MLP (Minimum Lovable Product)
- Minimum: 최소 기능
- Viable: 사용 가능
- Lovable: 사랑받을 만한
→ MVP도 완성도는 있어야 함
```
### 2. Phase별 기능 분류
```markdown
## MVP Phases
### Phase 0: Core MVP (2주)
**Phase 0: Core MVP (2주)**
"없으면 서비스가 성립 안 되는 기능"
#### Must Have (핵심)
✅ 코트 검색/조회
✅ 실시간 예약
✅ 간단 결제
✅ 예약 확인
Must Have (핵심):
- [기능 1]: [이유]
- [기능 2]: [이유]
#### 구현 수준
- UI: 기본 모바일 웹 (앱 개발 X)
- 백엔드: 최소 API (5-7개)
- 결제: 간편결제 1종 (카드)
- 인증: 소셜 로그인 1종 (카카오)
❌ 제외할 것:
- [기능 A]: [Phase 1으로]
- [기능 B]: [Phase 2로]
#### 제외할 것
❌ 회원 등급 시스템
❌ 리뷰/평점
❌ 쿠폰/포인트
❌ 푸시 알림
❌ 커뮤니티
#### 검증 목표
- 주간 예약 10건 달성
- 사용자 10명 확보
- 핵심 플로우 검증
### Phase 1: Enhanced MVP (1개월)
**Phase 1: Enhanced MVP (1개월)**
"사용자 만족도를 높이는 기능"
#### Should Have (개선)
✅ 할인/쿠폰 시스템
✅ 사용자 리뷰
✅ 예약 변경/취소
✅ 다중 결제 수단
- [기능 A]
- [기능 C]
#### 검증 목표
- 재방문율 30%
- 주간 예약 50건
- NPS 40 이상
### Phase 2: Growth (3개월)
**Phase 2: Growth (3개월)**
"성장과 확장을 위한 기능"
#### Nice to Have (확장)
✅ 커뮤니티 기능
✅ 코칭 매칭
✅ 토너먼트 개최
✅ 장비 대여
- [기능 B]
- [기능 D]
#### 검증 목표
- MAU 1,000명
- 월 매출 1,000만원
- 바이럴 계수 1.2
---
이 MVP 범위가 맞나요? 조정하고 싶은 부분이 있나요?
```
### 3. MVP 검증 지표 설정
**Step 2: 사용자 피드백**
- "좋아", "Yes" → MVP 문서 + 랜딩페이지 생성
- 조정 요청 → 업데이트 후 재제시
### 3. MVP 문서 생성
**File**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/mvp-scope.md`
```markdown
## MVP Metrics
# MVP Scope Definition
### 1⃣ Success Metrics (성공 지표)
"목표 달성 여부"
## Overview
- **서비스명**: [서비스명]
- **MVP 목표**: [목표 한 줄 정의]
- **검증 기간**: 2주
#### Quantitative (정량)
- 주간 활성 사용자 (WAU): 10명
- 주간 예약 건수: 10건
- 전환율: 방문자의 10% 예약
- 결제 성공률: 90%
---
#### Qualitative (정성)
- "편리하다" 피드백 70%
- "다시 쓸 것" 응답 80%
- 추천 의향 (NPS): 30+
## Phase 0: Core MVP (2주)
### Must Have
| 기능 | 설명 | 우선순위 |
|------|------|----------|
| [기능1] | [설명] | P0 |
| [기능2] | [설명] | P0 |
### 2⃣ Learning Metrics (학습 지표)
"무엇을 배울 것인가"
### 구현 수준
- UI: [기본 모바일 웹 / 앱 등]
- 백엔드: [최소 API 개수]
- 결제: [결제 방식]
- 인증: [인증 방식]
#### User Behavior
- 이탈 구간: 어디서 포기하나?
- 사용 시간대: 언제 가장 활발한가?
- 검색 패턴: 뭘 찾고 있나?
- 실패 케이스: 왜 예약 안 하나?
### 제외 항목
| 기능 | 이유 | 예정 Phase |
|------|------|------------|
| [기능A] | [이유] | Phase 1 |
| [기능B] | [이유] | Phase 2 |
#### Product-Market Fit Signals
- Organic Growth: 자연 유입 있나?
- Retention: 다시 오나?
- Referral: 추천하나?
- Payment: 돈을 내나?
---
## Phase 1: Enhanced MVP (1개월)
### 3⃣ Pivot Indicators (피벗 신호)
"방향 전환이 필요한 시점"
### Should Have
| 기능 | 설명 |
|------|------|
| [기능A] | [설명] |
🚨 Danger Signals
- 2주 후 WAU < 5명
- 전환율 < 3%
- NPS < 0
- 일일 사용 시간 < 1분
### 검증 목표
- [지표 1]
- [지표 2]
→ Action: 가치 제안 재검토
```
---
### 4. MVP 개발 우선순위 매트릭스
## Phase 2: Growth (3개월)
```markdown
## Priority Matrix
### Nice to Have
| 기능 | 설명 |
|------|------|
| [기능B] | [설명] |
High Impact ↑
---
[P0: 코트 예약] | [P1: 할인 시스템]
Must Do Now | Do Next
__________________|__________________
|
[P3: 푸시 알림] | [P2: 리뷰 시스템]
Don't Do | Do Later
|
→ High Effort
## 검증 지표
### Priority Scoring
Impact (영향도) x Confidence (확신도) / Effort (노력)
### Success Metrics (성공 지표)
- [정량 지표 1]
- [정량 지표 2]
예시:
- 코트 예약: 10 x 10 / 3 = 33.3 (P0)
- 커뮤니티: 5 x 3 / 8 = 1.9 (P3)
```
### Learning Metrics (학습 지표)
- [학습할 것 1]
- [학습할 것 2]
### 5. MVP 실행 로드맵
### Pivot Indicators (피벗 신호)
- 🚨 [위험 신호 1]
- 🚨 [위험 신호 2]
```markdown
## Execution Roadmap
---
### Week 1-2: Build Phase 0
Day 1-3: 기본 UI/UX
- 검색 화면
- 예약 화면
- 확인 화면
Day 4-7: 핵심 백엔드
- 예약 API
- 결제 연동
- 알림 발송
Day 8-10: 통합 테스트
- End-to-end 테스트
- 결제 테스트
- 부하 테스트
Day 11-14: Soft Launch
- 베타 사용자 10명
- 피드백 수집
- 긴급 수정
### Week 3-4: Validate & Iterate
- 지표 측정
- 사용자 인터뷰
- 개선사항 반영
- Phase 1 결정
### Week 5-8: Build Phase 1
(If Phase 0 validated)
- 할인 시스템
- 리뷰 기능
- UX 개선
```
### 6. MVP 체크리스트
```markdown
## MVP Checklist
### Before Launch
핵심 가치 명확한가?
타겟 사용자 명확한가?
성공 지표 정의했나?
□ 실패 기준 정의했나?
□ 2주 안에 가능한가?
- [ ] 핵심 가치 명확한가?
- [ ] 타겟 사용자 명확한가?
- [ ] 성공 지표 정의했나?
- [ ] 2주 안에 가능한가?
### During Development
Scope creep 발생하지 않았나?
□ "하나 더" 유혹 거부했나?
□ 핵심 플로우만 집중했나?
- [ ] Scope creep 발생하지 않았나?
- [ ] 핵심 플로우만 집중했나?
### After Launch
정량 지표 달성했나?
□ 정성 피드백 긍정적인가?
□ 다음 단계 명확한가?
- [ ] 정량 지표 달성했나?
- [ ] 다음 단계 명확한가?
```
---
## Output Files
### 4. 랜딩페이지 생성
### 생성될 파일들:
**Template 참조**: `.specify/templates/sales-landing-template.html`
1. **`docs/appkit/mvp-scope.md`**
- Phase별 기능 목록
- 포함/제외 기능
- 우선순위 매트릭스
**File**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/landing.html`
2. **`docs/appkit/mvp-metrics.md`**
- 성공 지표
- 학습 지표
- 피벗 기준
랜딩페이지는 다음 섹션을 포함해야 합니다:
---
#### 4-1. 랜딩페이지 구조
## Integration Points
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
### 다른 명령어와의 연계:
<!-- SEO Meta Tags -->
<title>[서비스명] - [한 줄 슬로건]</title>
<meta name="description" content="[서비스 설명 2-3문장]">
<meta name="keywords" content="[키워드1], [키워드2], [키워드3]">
- **From `/appkit.customer`**: Primary 페르소나의 핵심 문제
- **From `/appkit.sales`**: 검증할 핵심 가치
- **To `/appkit.merge`**: MVP Phase 0 기능의 구현 준비
<!-- Open Graph -->
<meta property="og:title" content="[서비스명] - [슬로건]">
<meta property="og:description" content="[서비스 설명]">
<meta property="og:type" content="website">
---
<!-- Fonts & Styles -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap" rel="stylesheet">
## Examples
<style>
/* 템플릿 스타일 적용 */
</style>
</head>
<body>
<!-- 1. Hero Section -->
<section class="hero">
<div class="hero-content">
<span class="badge">[배지 텍스트 - 예: 🚀 사전 등록 중]</span>
<h1>[메인 헤드라인]<br>[서브 헤드라인]</h1>
<p class="tagline">[2-3문장의 핵심 가치 설명]</p>
<a href="#cta" class="cta-button">[CTA 버튼 텍스트]</a>
</div>
</section>
### Example 1: 2주 검증 MVP
```bash
$ /appkit.mvp "2-week validation"
<!-- 2. Problem Section: 공감 유도 -->
<section class="problem">
<div class="container">
<h2 class="section-title">[문제 제기 질문]</h2>
<ul class="problem-list">
<li>[고객 Pain Point 1]</li>
<li>[고객 Pain Point 2]</li>
<li>[고객 Pain Point 3]</li>
</ul>
<div class="highlight-box">
<p>[문제 요약]</p>
<p class="key">[핵심 메시지/솔루션 티저]</p>
</div>
</div>
</section>
🎯 MVP Scope Defined
<!-- 3. Solution Section: 해결책 제시 -->
<section class="solution">
<div class="container">
<h2 class="section-title">[솔루션 헤드라인]</h2>
<p class="section-subtitle">[솔루션 설명]</p>
<div class="feature-grid">
<div class="feature-card">
<span class="feature-icon">[이모지]</span>
<h3>[기능 1]</h3>
<p>[기능 1 설명]</p>
</div>
<div class="feature-card">
<span class="feature-icon">[이모지]</span>
<h3>[기능 2]</h3>
<p>[기능 2 설명]</p>
</div>
<div class="feature-card">
<span class="feature-icon">[이모지]</span>
<h3>[기능 3]</h3>
<p>[기능 3 설명]</p>
</div>
</div>
</div>
</section>
Phase 0 (2 weeks):
✅ Search (location-based)
✅ Booking (real-time)
✅ Payment (simple)
✅ Confirmation (email)
<!-- 4. How It Works: 작동 방식 -->
<section class="how-it-works">
<div class="container">
<h2 class="section-title">어떻게 이용하나요?</h2>
<div class="steps">
<div class="step">
<span class="step-number">1</span>
<h3>[단계 1]</h3>
<p>[설명]</p>
</div>
<div class="step">
<span class="step-number">2</span>
<h3>[단계 2]</h3>
<p>[설명]</p>
</div>
<div class="step">
<span class="step-number">3</span>
<h3>[단계 3]</h3>
<p>[설명]</p>
</div>
</div>
</div>
</section>
Excluded:
❌ Reviews (Phase 1)
❌ Discounts (Phase 1)
❌ Community (Phase 2)
<!-- 5. Social Proof (Optional): 신뢰 요소 -->
<section class="social-proof">
<div class="container">
<h2 class="section-title">이런 분들이 사용합니다</h2>
<div class="testimonials">
<!-- 후기 또는 사용자 유형 -->
</div>
</div>
</section>
Success Criteria:
- 10 bookings/week
- 10 active users
- NPS > 30
<!-- 6. Pricing (Optional): 가격 -->
<section class="pricing">
<div class="container">
<h2 class="section-title">합리적인 가격</h2>
<div class="pricing-cards">
<!-- 가격 카드 -->
</div>
</div>
</section>
✅ Generated mvp-scope.md
✅ Generated mvp-metrics.md
<!-- 7. FAQ Section -->
<section class="faq">
<div class="container">
<h2 class="section-title">자주 묻는 질문</h2>
<div class="faq-list">
<div class="faq-item">
<h3 class="faq-question">[질문 1]</h3>
<p class="faq-answer">[답변 1]</p>
</div>
<!-- 더 많은 FAQ -->
</div>
</div>
</section>
<!-- 8. Final CTA -->
<section class="final-cta" id="cta">
<div class="container">
<h2>[최종 CTA 헤드라인]</h2>
<p>[마지막 설득 문구]</p>
<a href="[링크]" class="cta-button cta-large">[CTA 버튼]</a>
</div>
</section>
<!-- Footer -->
<footer>
<p>© 2024 [서비스명]. All rights reserved.</p>
</footer>
<script>
// Scroll Animation
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
</script>
</body>
</html>
```
### Example 2: 예산 제약 MVP
```bash
$ /appkit.mvp "budget: 500만원"
#### 4-2. 스타일 가이드 (템플릿 참조)
💰 Budget-Constrained MVP
```css
:root {
--primary: #7C3AED; /* 메인 컬러 (보라) */
--primary-light: #8B5CF6;
--primary-dark: #6D28D9;
--bg-white: #FFFFFF;
--bg-gray: #F5F7FA;
--text-primary: #1F2937;
--text-secondary: #6B7280;
--border: #E5E7EB;
}
Concierge MVP Approach:
- Manual booking process
- WhatsApp/Kakao for communication
- Google Forms for payment
- Spreadsheet for management
/* 반응형 브레이크포인트 */
/* Mobile: default */
/* Tablet: @media (min-width: 768px) */
/* Desktop: @media (min-width: 912px) */
```
Tech Investment: Phase 1
- After validation
- 500만원 = 2 developer weeks
#### 4-3. 랜딩페이지 생성 원칙
✅ Updated mvp-scope.md
**Do's**:
- ✅ 고객의 Pain Point로 시작
- ✅ 명확한 CTA (Call to Action)
- ✅ 모바일 퍼스트 디자인
- ✅ 스크롤 애니메이션 적용
- ✅ SEO 메타태그 완성
- ✅ 3-5개 핵심 기능만 강조
**Don'ts**:
- ❌ 기능 나열식 설명
- ❌ 전문 용어 남발
- ❌ CTA 없는 섹션
- ❌ 과도한 정보량
---
### 5. 완료 리포트
```
✅ MVP 범위 정의 + 랜딩페이지 생성 완료!
📁 생성된 파일:
- ui/works/mvp-scope.md
- ui/works/landing.html
📊 MVP 요약:
- Phase 0 기능: [N개]
- Phase 1 기능: [N개]
- Phase 2 기능: [N개]
🌐 랜딩페이지:
- 섹션: [N개]
- CTA: [N개]
- 브라우저에서 확인: file:///...landing.html
📝 다음 단계:
**Step 3 - 화면설계서 (/appkit.ui)**
/appkit.ui
**Step 4 - 정책설계서 (/appkit.policy)**
/appkit.policy
**Step 5 - HTML 목업 (/appkit.visualize)**
/appkit.visualize all
📍 현재 위치: Step 2/5 완료
```
---
## Key Principles
## MVP 원칙
### MVP 원칙:
### Do's
-**Maximize Learning**: 최소 투자로 최대 학습
-**Ship Fast**: 완벽보다 속도
-**Core Value Only**: 핵심 가치만 구현
-**Real Users**: 실제 사용자로 검증
-**Metrics-Driven**: 감이 아닌 데이터로 결정
1. **Maximize Learning**: 최소 투자로 최대 학습
2. **Ship Fast**: 완벽보다 속도
3. **Core Value Only**: 핵심 가치만 구현
4. **Real Users**: 실제 사용자로 검증
5. **Metrics-Driven**: 감이 아닌 데이터로 결정
### MVP Anti-Patterns:
**Feature Creep**: "이것도 있으면 좋겠는데..."
**Perfectionism**: "조금만 더 다듬고..."
**Assumption**: "사용자는 당연히..."
**Vanity Metrics**: 의미 없는 지표 추적
**Premature Scaling**: 검증 전 확장
### Don'ts
-**Feature Creep**: "이것도 있으면 좋겠는데..."
-**Perfectionism**: "조금만 더 다듬고..."
-**Assumption**: "사용자는 당연히..."
-**Premature Scaling**: 검증 전 확장
---
## Tips
### 성공적인 MVP를 위해:
1. **Time Box**: 2주를 넘기지 마라
2. **User Cap**: 10-100명으로 시작
3. **Manual First**: 자동화는 나중에
4. **Talk to Users**: 매일 사용자와 대화
5. **Kill Features**: 과감하게 빼라
### MVP 실패 신호:
- 2주 지나도 출시 못함
- 기능이 계속 추가됨
- 사용자 피드백 없음
- 지표 측정 안 함
- "좀 더 완벽하게" 반복
- **Time Box**: 2주를 넘기지 마라
- **User Cap**: 10-100명으로 시작
- **Manual First**: 자동화는 나중에
- **Talk to Users**: 매일 사용자와 대화
- **Kill Features**: 과감하게 빼라
- **Landing First**: 랜딩페이지로 관심도 먼저 검증
---
## Next Steps
## Example
### 이 명령어 실행 후:
```
$ /appkit.mvp
**📍 다음 단계: Step 6 - `/appkit.merge`** (기획 정돈)
- MVP 범위가 정해졌으니 이제 기획 정돈 단계로
- 용어 통일, 기능 중복 제거
- 고객 가치 일관성 확보
🎯 MVP Scope 정의
---
Phase 0 (2주):
✅ 검색 (위치 기반)
✅ 예약 (실시간)
✅ 결제 (간단)
## Version
❌ 제외:
- 리뷰 (Phase 1)
- 커뮤니티 (Phase 2)
- **Version**: 1.0.0
- **Created**: 2025-11-19
- **Philosophy**: "If you're not embarrassed by v1, you launched too late"
검증 목표:
- 주간 10건 예약
- 10명 활성 사용자
✅ mvp-scope.md 생성 완료
✅ landing.html 생성 완료
🌐 랜딩페이지 미리보기:
file:///Users/.../ui/works/landing.html
```