# AppKit Framework

**아이디어를 고객 가치로 변환하는 논리적 사고 프레임워크**

---

## Overview

AppKit은 막연한 아이디어를 고객 중심으로 구체화하여 MVP 기획서, 화면설계서, 정책설계서, 그리고 라이브 목업까지 작성하는 프레임워크입니다.

**핵심 철학**:
1. 고객 가치 우선 → 기능이 아닌 고객의 문제 해결 중심
2. 논리적 사고 연습 → 큰 작업을 작은 단계로 쪼개기
3. MVP 중심 실행 → 최소한의 범위로 최대한의 검증
4. 실행 가능한 문서 → 개발자/디자이너가 바로 작업 가능
5. 시각적 프로토타입 → HTML 목업으로 즉시 확인

**출력 디렉토리**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works`

---

## 논리적 사고 5단계 워크플로우

```
1. /appkit.new       → 아이디어 스케치 (어떤 서비스인지?)
2. /appkit.mvp       → MVP 범위 정하기 (최소한으로 검증하려면?)
3. /appkit.ui        → 화면설계서 (라우터, 화면, 컴포넌트)
4. /appkit.policy    → 정책설계서 (비즈니스 규칙)
5. /appkit.visualize → 목업 생성 (HTML 프로토타입)
```

---

## Commands

### 1. `/appkit.new` - 아이디어 스케치

**Purpose**: 막연한 아이디어를 서비스 컨셉으로 구체화

**Input**:
```
/appkit.new 테니스 코트 예약 앱
```

**Output**:
- `ui/works/concept.md` - 서비스 컨셉 & 핵심 가치
- `ui/works/specs/001-xxx/spec.md` - 기능별 스펙 초안

**Key Features**:
- 서비스 본질 파악 (무슨 문제를 해결하나?)
- 예상 고객군 추론 (누가 쓸까?)
- 핵심 가치 제안 (왜 써야 할까?)

---

### 2. `/appkit.mvp` - MVP 범위 정의 + 랜딩페이지

**Purpose**: 최소한의 기능으로 최대한의 검증 + 검증용 랜딩페이지 생성

**Input**:
```
/appkit.mvp
/appkit.mvp "2주 검증"
```

**Output**:
- `ui/works/mvp-scope.md` - MVP 범위 정의 & 검증 지표
- `ui/works/landing.html` - 검증용 랜딩페이지

**Key Features**:
- Phase 0/1/2 기능 분류
- 성공/학습/피벗 지표 설정
- MVP 체크리스트
- **HTML 랜딩페이지 자동 생성**
  - Hero, Problem, Solution, How It Works 섹션
  - SEO 메타태그 완성
  - 반응형 디자인 (모바일 퍼스트)
  - CTA 버튼 포함

**Template**: `.specify/templates/sales-landing-template.html`

---

### 3. `/appkit.ui` - 화면설계서

**Purpose**: 라우터, 화면, 컴포넌트 구조 정의 (카카오톡 스타일)

**Input**:
```
/appkit.ui                    # 전체 화면 설계
/appkit.ui "특정 화면명"      # 특정 화면 설계
```

**Output**:
- `ui/works/router.md` - 라우터 & UI 목록
- `ui/works/main.md` - 메인 구조 (탭 구조, 네비게이션)

**Key Features**:
- 5탭 구조 (센터 탭 강조)
- 화면별 컴포넌트 ID 정의
- 바텀시트, 팝업, 토스트 정의
- 네비게이션 플로우

**Template**: `.specify/templates/ui-router.md`, `ui-main.md`

---

### 4. `/appkit.policy` - 정책설계서

**Purpose**: 비즈니스 규칙과 정책을 코드로 구조화

**Input**:
```
/appkit.policy                # 전체 정책
/appkit.policy "과금 정책"    # 특정 정책
```

**Output**:
- `ui/works/policies/00-policy-index.md` - 정책 인덱스
- `ui/works/policies/01-monetization.md` - 과금 정책 (MN)
- `ui/works/policies/02-gameplay.md` - 서비스 규칙 (GM)
- `ui/works/policies/03-content.md` - 콘텐츠 정책 (CH)
- `ui/works/policies/04-progression.md` - 진행 정책 (PR)

**Policy Codes**:

| 코드 | 카테고리 | 내용 |
|-----|---------|------|
| MN | Monetization | 결제, 구독, 포인트 |
| GM | Gameplay | 서비스 규칙, 제한사항 |
| CH | Content | 콘텐츠 생성/관리 |
| PR | Progression | 레벨, 업적, 보상 |
| CR | Content Rating | 연령 등급, 경고 |

**Template**: `.specify/templates/policy-*.md`

---

### 5. `/appkit.visualize` - HTML 목업 생성

**Purpose**: router.md 기반 라이브 프로토타입 생성

**Input**:
```
/appkit.visualize home        # 홈 화면 목업
/appkit.visualize all         # 전체 화면 목업
/appkit.visualize "예약 상세"  # 특정 화면 목업
```

**Output**:
- `ui/works/mockup/[screen].html` - HTML 목업
- `ui/works/mockup/styles.css` - 공통 스타일
- `ui/works/mockup/scripts.js` - 공통 스크립트

**Key Features**:
- 모바일 퍼스트 (max-width: 430px)
- 다크 테마 기본
- 모달/바텀시트/토스트 동작
- 정책 ID 주석 연결
- 화면 간 상호 링크

**Template**: `.specify/templates/mockup-*.html`, `mockup-styles.css`, `mockup-scripts.js`

---

## Quick Start

```bash
# Step 1: 아이디어 스케치
/appkit.new 친구와 AI 챗봇 서비스

# Step 2: MVP 범위 정의
/appkit.mvp

# Step 3: 화면설계 (라우터, 메인 구조)
/appkit.ui

# Step 4: 정책설계
/appkit.policy

# Step 5: HTML 목업 생성
/appkit.visualize all
```

---

## 생성되는 파일 구조

```
/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/
└── ui/
    └── works/
        │
        ├── concept.md                    # 서비스 컨셉 (/appkit.new)
        ├── mvp-scope.md                  # MVP 범위 (/appkit.mvp)
        ├── landing.html                  # 랜딩페이지 (/appkit.mvp)
        │
        ├── router.md                     # 라우터 & UI 목록 (/appkit.ui)
        ├── main.md                       # 메인 구조 (/appkit.ui)
        │
        ├── specs/                        # 기능별 스펙 (/appkit.new)
        │   ├── 001-user/spec.md
        │   ├── 002-venue/spec.md
        │   └── ...
        │
        ├── policies/                     # 정책 문서 (/appkit.policy)
        │   ├── 00-policy-index.md        # 정책 인덱스
        │   ├── 01-monetization.md        # 과금 정책 (MN-xxx)
        │   ├── 02-gameplay.md            # 서비스 규칙 (GM-xxx)
        │   ├── 03-content.md             # 콘텐츠 정책 (CH-xxx)
        │   └── 04-progression.md         # 진행 정책 (PR-xxx)
        │
        └── mockup/                       # HTML 목업 (/appkit.visualize)
            ├── home.html
            ├── chat.html
            ├── shop.html
            ├── styles.css
            └── scripts.js
```

---

## 템플릿 파일

```
/Users/taesupyoon/sideProjects/appkit/.specify/templates/
├── ui-router.md              # 라우터 템플릿
├── ui-main.md                # 메인 구조 템플릿
├── policy-index.md           # 정책 인덱스 템플릿
├── policy-monetization.md    # 과금 정책 템플릿
├── policy-gameplay.md        # 서비스 규칙 템플릿
├── policy-content.md         # 콘텐츠 정책 템플릿
├── policy-progression.md     # 진행 정책 템플릿
├── policy-content-rating.md  # 등급 정책 템플릿
├── mockup-base.html          # HTML 목업 기본 템플릿
├── mockup-styles.css         # 목업 스타일시트
└── mockup-scripts.js         # 목업 스크립트
```

---

## Best Practices

### 1. 고객부터 시작하기
- 기능이 아닌 고객의 문제부터 생각하세요
- "누가 쓸까?" 질문을 계속하세요

### 2. MVP 먼저, 완벽은 나중에
- "없으면 안되는" 기능만 Phase 0에
- "있으면 좋은" 기능은 Phase 1+로

### 3. 정책 ID로 추적하기
- 모든 정책에 코드 부여 (MN-001, GM-002 등)
- UI 요소와 정책 연결 (주석으로 표시)

### 4. 목업으로 검증하기
- 코딩 전에 HTML 목업으로 사용성 확인
- 브라우저에서 직접 확인 가능

### 5. 명확하게 작성
- 모호한 표현 ("적절히", "필요시") 지양
- 개발자가 바로 구현 가능한 수준으로

---

## Philosophy

> "아이디어는 고객의 문제에서 시작되고, 논리적 단계로 구체화되며, 목업으로 검증된다."

AppKit은 다음을 믿습니다:

1. **고객 문제 우선**: 기능보다 고객의 Pain Point 해결
2. **논리적 분해**: 큰 작업을 작은 단계로 쪼개기
3. **빠른 검증**: MVP로 시장 반응 먼저 확인
4. **실행 가능한 문서**: 기획서가 바로 개발로 이어지도록
5. **시각적 확인**: HTML 목업으로 즉시 프로토타입 확인

---

**Version**: 7.1.0 (Simplified Path)
**Last Updated**: 2025-12-14
**Key Update**: [project] 폴더 제거, 모든 출력물 `ui/works/`에 직접 생성