# AppKit

**아이디어를 실행 가능한 기획서와 프로토타입으로 변환하는 프레임워크**

---

## What is AppKit?

AppKit은 Claude Code의 슬래시 명령어 세트입니다. 막연한 아이디어를 5단계에 걸쳐 구체화하여 다음을 생성합니다:

- **서비스 컨셉** - 핵심 가치와 타겟 고객 정의
- **MVP 범위** - 최소 검증 기능 + 랜딩페이지 HTML
- **화면설계서** - 라우터, 화면 구조, 컴포넌트 목록
- **정책설계서** - 비즈니스 규칙, 과금, 게임플레이 정책
- **HTML 목업** - 브라우저에서 바로 확인 가능한 프로토타입

---

## Quick Start

```bash
# 1. 아이디어 스케치
/appkit.new 테니스 코트 예약 앱

# 2. MVP 범위 + 랜딩페이지
/appkit.mvp

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

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

# 5. HTML 목업
/appkit.visualize all
```

각 명령어는 **대화형**입니다. Claude가 초안을 제시하면 피드백을 주고, 확정되면 파일이 생성됩니다.

---

## 5-Step Workflow

```
/appkit.new       →  아이디어 스케치 (어떤 서비스?)
     ↓
/appkit.mvp       →  MVP 범위 + 랜딩페이지 (최소 검증)
     ↓
/appkit.ui        →  화면설계서 (라우터, 컴포넌트)
     ↓
/appkit.policy    →  정책설계서 (비즈니스 규칙)
     ↓
/appkit.visualize →  HTML 목업 (라이브 프로토타입)
```

---

## Commands

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

막연한 아이디어를 서비스 컨셉으로 구체화합니다.

```bash
/appkit.new 테니스 코트 예약 앱
/appkit.new @아이디어.md              # 파일 참조
/appkit.new 친구와 대화하는 AI 챗봇 서비스
```

**생성 파일**:
- `concept.md` - 서비스 컨셉, 타겟 고객, 핵심 가치
- `specs/001-xxx/spec.md` - 기능별 스펙 초안

---

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

핵심 기능만 추려서 MVP 범위를 정의하고, 검증용 랜딩페이지를 생성합니다.

```bash
/appkit.mvp
/appkit.mvp "2주 검증"
```

**생성 파일**:
- `mvp-scope.md` - Phase 0/1/2 기능 분류, 검증 지표
- `landing.html` - 반응형 랜딩페이지 (SEO, CTA 포함)

**MVP 원칙**:
- Phase 0: 없으면 안되는 기능 (2주)
- Phase 1: 사용자 만족도 높이는 기능 (1개월)
- Phase 2: 성장과 확장 기능 (3개월)

---

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

라우터 구조, 탭 구성, 화면별 컴포넌트를 정의합니다.

```bash
/appkit.ui                    # 전체 화면 설계
/appkit.ui router             # 라우터만
/appkit.ui "채팅"              # 특정 화면만
```

**생성 파일**:
- `router.md` - 라우터 구조, 화면 목록, 컴포넌트 ID
- `main.md` - 탭 구조, 헤더, 네비게이션 흐름

**화면 구조 예시**:
```
/
├── /friends        # 친구 목록
│   └── /:id        # 친구 상세
├── /chat           # 채팅 목록
│   └── /:id        # 채팅방
├── /home           # 홈 (기본)
├── /shop           # 상점
└── /settings       # 설정
```

---

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

비즈니스 규칙, 과금 정책, 서비스 규칙을 코드 체계로 정의합니다.

```bash
/appkit.policy                # 전체 정책
/appkit.policy monetization   # 과금 정책만
/appkit.policy "예약 취소"     # 특정 정책만
```

**생성 파일**:
- `policies/00-policy-index.md` - 정책 인덱스, 화면 매핑
- `policies/01-monetization.md` - 과금/결제 정책 (MN-xxx)
- `policies/02-gameplay.md` - 서비스 규칙 (GM-xxx)
- `policies/03-content.md` - 콘텐츠 정책 (CH-xxx)
- `policies/04-progression.md` - 진행/성장 정책 (PR-xxx)

**정책 코드 체계**:

| 코드 | 카테고리 | 예시 |
|-----|---------|------|
| MN | Monetization | 결제, 구독, 포인트 소모 |
| GM | Gameplay | 예약 규칙, 취소 정책, 제한사항 |
| CH | Content | 리뷰 작성, 신고, 콘텐츠 관리 |
| PR | Progression | 회원 등급, 포인트 적립, 업적 |

---

### `/appkit.visualize` - HTML 목업

router.md를 기반으로 브라우저에서 확인 가능한 HTML 목업을 생성합니다.

```bash
/appkit.visualize home        # 홈 화면만
/appkit.visualize all         # 전체 화면
/appkit.visualize "예약 상세"  # 특정 화면
```

**생성 파일**:
- `mockup/home.html` - 화면별 HTML
- `mockup/styles.css` - 공통 스타일 (다크 테마)
- `mockup/scripts.js` - 모달, 토스트 등 인터랙션

**특징**:
- 모바일 퍼스트 (max-width: 430px)
- 다크 테마 기본
- 정책 ID 주석 연결 (`<!-- [MN-001] -->`)
- 화면 간 상호 링크

---

## Generated Files

모든 출력물은 아래 경로에 생성됩니다:

```
/docs/appkit/ui/works/
│
├── concept.md              # /appkit.new
├── mvp-scope.md            # /appkit.mvp
├── landing.html            # /appkit.mvp
│
├── router.md               # /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
│   ├── 02-gameplay.md
│   ├── 03-content.md
│   └── 04-progression.md
│
└── mockup/                 # /appkit.visualize
    ├── home.html
    ├── chat.html
    ├── styles.css
    └── scripts.js
```

---

## Example

```bash
# Step 1: 아이디어
/appkit.new 친구와 AI 캐릭터가 함께하는 채팅 앱

# Claude가 서비스 컨셉 제시
# → "좋아" 또는 수정 요청

# Step 2: MVP 범위
/appkit.mvp

# Claude가 Phase 0/1/2 분류 제시
# → 확정되면 landing.html 생성

# Step 3: 화면설계
/appkit.ui

# Claude가 라우터 구조 제시
# → 확정되면 router.md, main.md 생성

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

# Claude가 정책 카테고리 제시
# → 확정되면 policies/*.md 생성

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

# 전체 화면 HTML 목업 생성
# → 브라우저에서 바로 확인 가능
```

---

## Tips

**1. 순서대로 진행하세요**
- 각 단계는 이전 단계의 파일을 읽습니다
- `/appkit.new` → `/appkit.mvp` → `/appkit.ui` → `/appkit.policy` → `/appkit.visualize`

**2. 대화하면서 다듬으세요**
- 모든 명령어는 대화형입니다
- "좋아", "진행해" 하기 전에 피드백을 주세요

**3. 특정 부분만 다시 만들 수 있습니다**
- `/appkit.ui "채팅"` - 채팅 화면만 재설계
- `/appkit.policy monetization` - 과금 정책만 재작성
- `/appkit.visualize home` - 홈 화면 목업만 재생성

**4. 목업은 바로 브라우저에서 확인하세요**
- `file:///...mockup/home.html` 로 브라우저에서 열기
- 정책 ID 주석으로 기획-UI 연결 확인

---

## Philosophy

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

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

---

**Version**: 7.1.0
**Last Updated**: 2025-12-14