rupy1014
e9b0c00be7
- 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>
280 lines
7.3 KiB
Markdown
280 lines
7.3 KiB
Markdown
# 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
|