AppKit
아이디어를 실행 가능한 기획서와 프로토타입으로 변환하는 프레임워크
What is AppKit?
AppKit은 Claude Code의 슬래시 명령어 세트입니다. 막연한 아이디어를 5단계에 걸쳐 구체화하여 다음을 생성합니다:
- 서비스 컨셉 - 핵심 가치와 타겟 고객 정의
- MVP 범위 - 최소 검증 기능 + 랜딩페이지 HTML
- 화면설계서 - 라우터, 화면 구조, 컴포넌트 목록
- 정책설계서 - 비즈니스 규칙, 과금, 게임플레이 정책
- HTML 목업 - 브라우저에서 바로 확인 가능한 프로토타입
Quick Start
# 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 - 아이디어 스케치
막연한 아이디어를 서비스 컨셉으로 구체화합니다.
/appkit.new 테니스 코트 예약 앱
/appkit.new @아이디어.md # 파일 참조
/appkit.new 친구와 대화하는 AI 챗봇 서비스
생성 파일:
concept.md- 서비스 컨셉, 타겟 고객, 핵심 가치specs/001-xxx/spec.md- 기능별 스펙 초안
/appkit.mvp - MVP 범위 + 랜딩페이지
핵심 기능만 추려서 MVP 범위를 정의하고, 검증용 랜딩페이지를 생성합니다.
/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 - 화면설계서
라우터 구조, 탭 구성, 화면별 컴포넌트를 정의합니다.
/appkit.ui # 전체 화면 설계
/appkit.ui router # 라우터만
/appkit.ui "채팅" # 특정 화면만
생성 파일:
router.md- 라우터 구조, 화면 목록, 컴포넌트 IDmain.md- 탭 구조, 헤더, 네비게이션 흐름
화면 구조 예시:
/
├── /friends # 친구 목록
│ └── /:id # 친구 상세
├── /chat # 채팅 목록
│ └── /:id # 채팅방
├── /home # 홈 (기본)
├── /shop # 상점
└── /settings # 설정
/appkit.policy - 정책설계서
비즈니스 규칙, 과금 정책, 서비스 규칙을 코드 체계로 정의합니다.
/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 목업을 생성합니다.
/appkit.visualize home # 홈 화면만
/appkit.visualize all # 전체 화면
/appkit.visualize "예약 상세" # 특정 화면
생성 파일:
mockup/home.html- 화면별 HTMLmockup/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
# 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
"아이디어는 고객의 문제에서 시작되고, 논리적 단계로 구체화되며, 목업으로 검증된다."
- 고객 가치 우선 - 기능이 아닌 고객의 문제 해결 중심
- 논리적 분해 - 큰 작업을 작은 단계로 쪼개기
- MVP 중심 실행 - 최소한의 범위로 최대한의 검증
- 실행 가능한 문서 - 개발자가 바로 작업 가능한 수준
- 시각적 확인 - HTML 목업으로 즉시 프로토타입 확인
Version: 7.1.0 Last Updated: 2025-12-14