appkit/.claude/commands

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

# 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/에 직접 생성