웹기획자를 위한 Claude Skills 샘플 모음집

게시 2026/01/08 업데이트 2026/01/15

By BLUEBUG

183 분읽는 시간

바로 사용 가능한 실전 Skills

📚 목차

초급 Skills (입문자용)

SKILL 1: 회의록 자동 정리

파일명: `meeting-notes.md`

  
---
name: 회의록 자동 정리
description: 메모를 체계적인 회의록으로 변환
---

# 회의록 자동 정리 Skill

## 사용 시점
회의가 끝나고 메모를 정리할 때 사용합니다.

## 입력 형식
- 자유롭게 메모한 내용을 그대로 입력
- 날짜, 참석자 정보만 있으면 됨
- 불완전한 문장도 괜찮음

## 출력 형식

### 회의 정보
- 일시: [날짜] [시간]
- 장소: [회의실/온라인]
- 참석자: [이름(부서/직책)]
- 작성자: [이름]

### 안건
[회의 주제]

### 논의 내용
각 논의 사항을 명확한 문장으로 정리:
1. [주제 1]
   - [핵심 내용]
   - [제기된 의견]
   
2. [주제 2]
   - [핵심 내용]
   - [제기된 의견]

### 결정 사항
명확히 결정된 내용만 기록:
- [결정 1]
- [결정 2]

### 액션 아이템
담당자와 마감일을 명시:
- [ ] [담당자]: [해야 할 일] (마감: [날짜])
- [ ] [담당자]: [해야 할 일] (마감: [날짜])

### 다음 회의
- 일시: [예정일]
- 안건: [다음 논의 주제]

### 참고사항
회의 중 언급된 문서, 링크, 참고자료

## 작성 원칙
1. **명확성**: 애매한 표현 제거, 구체적으로
2. **간결성**: 불필요한 세부사항 생략
3. **실행 가능성**: 액션 아이템은 측정 가능하게
4. **중립성**: 개인 의견 배제, 사실만 기록

## 사용 예시

**입력:**
```
2026.1.7 오후 2시
홍길동, 김철수, 이영희
신규 회원 등급 시스템 논의
- 홍: 3단계 vs 4단계?
- 김: 개발 3주 걸림, 3단계가 빠름
- 이: 마케팅 관점에서 4단계가 좋음
- 결국 3단계로 시작하기로
- 홍길동이 다음주까지 기획서
- 수요일에 다시 미팅
```

**출력:**
```
회의록

일시: 2026년 1월 7일 (화) 14:00-15:00
참석자: 홍길동(기획팀), 김철수(개발팀), 이영희(마케팅팀)
작성자: [자동 생성]

안건
신규 회원 등급 시스템 설계 방향 결정

논의 내용
1. 등급 시스템 단계 수 결정
   - 3단계안: 구현 기간 3주, 빠른 출시 가능
   - 4단계안: 세밀한 혜택 제공, 마케팅 활용도 높음
   - 개발 리소스와 비즈니스 요구 간 균형 고려

결정 사항
- 1차로 3단계 등급 시스템 도입
- 추후 확장 가능하도록 설계
- 3개월 운영 후 데이터 기반 4단계 전환 재검토

액션 아이템
- [ ] 홍길동: 3단계 등급 시스템 상세 기획서 작성 (마감: 1/14)
- [ ] 김철수: 확장 가능한 시스템 아키텍처 검토
- [ ] 이영희: 각 등급별 혜택안 초안 작성

다음 회의
일시: 2026년 1월 15일 (수) 14:00
안건: 상세 기획서 검토 및 개발 일정 확정
```

SKILL 2: 간단한 기획서 템플릿

파일명: `simple-spec.md`

  
---
name: 간단한 기획서 템플릿
description: 5페이지 이내의 간단한 기능 기획서 작성
---

# 간단한 기획서 템플릿

## 사용 시점
- 소규모 기능 추가
- 빠른 의사결정이 필요한 경우
- 프로토타입 단계

## 필요한 정보
사용자로부터 다음 정보를 받습니다:
1. 기능명
2. 기획 배경 (왜 필요한가?)
3. 주요 사용자
4. 핵심 기능 3가지

## 문서 구조

### 1. 개요 (1 페이지)

**기능명**: [기능명]
**작성일**: [날짜]
**작성자**: [이름]
**버전**: v1.0

**한 줄 요약**
이 기능을 한 문장으로 설명

**기획 배경**
- 현재 상황/문제점 (2-3줄)
- 이 기능이 필요한 이유 (2-3줄)

**기대 효과**
- 비즈니스 측면: [매출/전환율/리텐션 등]
- 사용자 측면: [편의성/만족도 등]
- 운영 측면: [효율성/비용 절감 등]

### 2. 사용자 정의 (1 페이지)

**주 사용자**
[예: 20-30대 여성, 온라인 쇼핑 자주 이용]

**간단한 페르소나**
- 이름: [김○○]
- 나이: [25세]
- 직업: [직장인]
- 특징: [주 2-3회 앱 사용, 가격보다 편의성 중시]

**사용 시나리오 (간단하게)**
[페르소나]는 [상황]에서 [목적]을 위해 이 기능을 사용한다.
1. [행동 1]
2. [행동 2]
3. [결과]

### 3. 기능 설명 (2 페이지)

**핵심 기능 리스트**

**기능 1: [기능명]**
- 설명: [무엇을 하는 기능인가]
- 사용 방법: [어떻게 사용하는가]
- 화면 위치: [어디에 배치되는가]

**기능 2: [기능명]**
- 설명:
- 사용 방법:
- 화면 위치:

**기능 3: [기능명]**
- 설명:
- 사용 방법:
- 화면 위치:

**주요 화면**

화면 1: [화면명]
```
[간단한 텍스트 와이어프레임]
헤더: [요소들]
본문: [요소들]
하단: [버튼들]
```

화면 2: [화면명]
```
[텍스트 와이어프레임]
```

### 4. 개발 정보 (1 페이지)

**필요한 데이터**
- [데이터 1]: [어디서 가져올 것인가]
- [데이터 2]: [어디서 가져올 것인가]

**API 필요 여부**
- [ ] 신규 API 필요: [API 목적]
- [ ] 기존 API 수정: [어떤 API]
- [ ] API 불필요

**예상 개발 기간**
- 기획: [X일]
- 디자인: [X일]
- 개발: [X주]
- QA: [X일]
- 총: [X주]

**우선순위**
- [ ] 긴급 (이번 주)
- [ ] 높음 (이번 달)
- [ ] 보통 (다음 달)
- [ ] 낮음 (추후)

**리스크**
- 리스크 1: [문제] → 대응: [해결방안]
- 리스크 2: [문제] → 대응: [해결방안]

## 작성 스타일
- 각 섹션은 1-2 페이지를 넘기지 않음
- 기술 용어는 괄호로 설명 추가
- 불필요한 수식어 제거
- 핵심만 간결하게

## 체크리스트
작성 완료 전 확인:
- [ ] 왜 필요한지 명확한가?
- [ ] 사용자 관점이 포함되었는가?
- [ ] 개발 가능한 수준으로 구체적인가?
- [ ] 일정이 현실적인가?
- [ ] 리스크를 고려했는가?
```

SKILL 3: 이메일 작성 도우미

파일명: `email-writer.md`

  
---
name: 이메일 작성 도우미
description: 업무 상황별 적절한 이메일 작성
---

# 이메일 작성 도우미

## 사용 시점
- 프로젝트 관련 요청/보고
- 회의 일정 조율
- 진행 상황 공유
- 협업 요청

## 이메일 유형

### 1. 요청 이메일
**톤**: 정중하지만 명확하게

**구조**:
```
제목: [구체적인 요청 내용] 요청 드립니다

[수신자명] 님,

안녕하세요. [부서] [이름]입니다.

[요청 배경 1-2문장]

아래와 같이 [요청사항]을 요청 드립니다:
- [항목 1]
- [항목 2]
- [항목 3]

[마감일/일정]: [날짜]
[이유/근거]: [필요하다면]

검토 부탁드립니다.
감사합니다.

[이름]
```

### 2. 보고 이메일
**톤**: 간결하고 정확하게

**구조**:
```
제목: [프로젝트명] [기간] 진행 상황 보고

[수신자명] 님,

[프로젝트명]의 [기간] 진행 상황을 보고드립니다.

■ 완료 사항
- [항목 1]
- [항목 2]

■ 진행 중
- [항목 3] (진행률 X%)
- [항목 4] (진행률 X%)

■ 이슈
- [이슈 1]: [상황] → [대응 방안]

■ 향후 일정
- [날짜]: [계획]

추가 문의사항 있으시면 말씀해주세요.

[이름]
```

### 3. 회의 요청 이메일
**톤**: 명확하고 효율적으로

**구조**:
```
제목: [안건] 회의 요청

[수신자명] 님,

안녕하세요. [이름]입니다.

[안건]에 대해 논의가 필요하여 회의를 제안합니다.

■ 안건
[구체적인 논의 주제]

■ 참석자
[이름, 이름, 이름]

■ 소요 시간
약 [X분]

■ 가능한 일정 (아래 중 선택)
- [날짜] [시간]
- [날짜] [시간]
- [날짜] [시간]

회신 부탁드립니다.

[이름]
```

### 4. 피드백/수정 요청 이메일
**톤**: 건설적이고 구체적으로

**구조**:
```
제목: [문서명] 검토 및 피드백 요청

[수신자명] 님,

[문서명]을 첨부드립니다.

■ 주요 내용
- [핵심 1]
- [핵심 2]

■ 검토 요청 사항
1. [확인할 점 1]
2. [확인할 점 2]
3. [의견이 필요한 부분]

■ 피드백 마감
[날짜]까지 의견 주시면 감사하겠습니다.

[이름]
```

## 작성 원칙

### DO (해야 할 것)
- ✅ 제목에 핵심 내용 포함
- ✅ 첫 문장에 목적 명시
- ✅ 불릿 포인트로 가독성 확보
- ✅ 마감일/일정 명확히
- ✅ 액션 아이템 명확히

### DON'T (하지 말아야 할 것)
- ❌ 과도한 인사말
- ❌ 애매한 표현 ("가능하면", "아마도")
- ❌ 불필요한 배경 설명
- ❌ 여러 주제를 한 이메일에
- ❌ 긴급하지 않은데 "긴급" 표시

## 톤 조정

**격식 있게 (임원진, 외부)**
- "~입니다", "~드립니다"
- "검토 부탁드립니다"
- "감사합니다"

**일반적으로 (팀 내부)**
- "~입니다", "~해요"
- "확인 부탁해요"
- "감사합니다"

**캐주얼하게 (친한 동료)**
- "~해요", "~하려고요"
- "확인해줘"
- "고마워요"

## 사용 예시

**입력:**
"개발팀에 API 문서 요청하는 이메일 써줘. 다음주 금요일까지 필요해."

**출력:**
```
제목: 회원 등급 API 문서 요청

김철수 님,

안녕하세요. 기획팀 홍길동입니다.

회원 등급 시스템 기획을 진행 중이며, 
API 연동 설계를 위해 관련 문서가 필요합니다.

아래 API에 대한 문서를 요청 드립니다:
- 회원 정보 조회 API
- 등급 업데이트 API
- 구매 이력 조회 API

마감: 2026년 1월 17일 (금)

현재 문서가 없다면 간단한 명세서라도 
공유해주시면 감사하겠습니다.

홍길동
```

중급 Skills (일상 업무용)

SKILL 4: 상세 요구사항 정의서

파일명: `requirements-spec.md`

  
---
name: 상세 요구사항 정의서
description: 개발팀 전달용 완전한 요구사항 문서 작성
---

# 상세 요구사항 정의서 작성

## 사용 시점
- 중대형 프로젝트 시작 전
- 외주 개발 발주 시
- 개발 범위 확정이 필요할 때

## 문서 구조 (20-30 페이지)

### 1. 문서 정보
```
프로젝트명: [프로젝트명]
문서 버전: v1.0
작성일: [날짜]
작성자: [기획팀 이름]
검토자: [개발 리더, PM]
승인자: [프로젝트 오너]

버전 이력:
v1.0 (2026.01.07): 초안 작성
```

### 2. 프로젝트 개요

**2.1 프로젝트 배경**
- 현재 상황
- 문제점/기회
- 해결 방향

**2.2 프로젝트 목적**
- 비즈니스 목표
  - [정량 목표]: 매출 X% 증가
  - [정량 목표]: 사용자 Y명 확보
- 기술적 목표
  - [목표 1]
  - [목표 2]

**2.3 프로젝트 범위**

포함 사항:
- [기능 1]
- [기능 2]
- [기능 3]

제외 사항 (명확히 표시):
- [제외 기능 1]
- [제외 기능 2]

**2.4 주요 이해관계자**
| 역할 | 이름 | 책임 | 연락처 |
|------|------|------|--------|
| 프로젝트 오너 | | 최종 의사결정 | |
| 기획 리더 | | 요구사항 정의 | |
| 개발 리더 | | 기술 구현 | |
| 디자인 리더 | | UI/UX 설계 | |

### 3. 사용자 정의

**3.1 타겟 사용자 그룹**

그룹 1: [그룹명]
- 인구통계: [나이, 성별, 직업 등]
- 기술 수준: [초급/중급/고급]
- 사용 환경: [모바일/PC, OS 등]
- 주요 니즈: [니즈 1, 니즈 2]
- 비율: [전체 사용자 중 X%]

그룹 2: [그룹명]
- ...

**3.2 상세 페르소나 (주요 그룹 2-3개)**

페르소나 1: [이름]
```
기본 정보:
- 나이: 28세
- 직업: 마케팅 매니저
- 거주지: 서울
- 소득: 중상

기술 프로필:
- 스마트폰: iPhone 14
- 앱 사용 빈도: 주 5회 이상
- 기술 활용도: 높음

행동 패턴:
- 주로 출퇴근 시간에 사용
- 빠른 결제 선호
- 리뷰 꼼꼼히 확인

목표:
- 시간 절약하며 쇼핑
- 품질 좋은 상품 찾기

불편함:
- 복잡한 UI
- 느린 로딩
- 불필요한 팝업

인용:
"클릭 3번 안에 결제가 안 되면 포기해요"
```

**3.3 사용자 여정 맵**

[시나리오별로 작성]

시나리오 1: 상품 검색 및 구매
```
단계 1: 앱 실행
- 행동: 홈 화면 진입
- 생각: "오늘은 뭘 살까?"
- 감정: 😊 기대
- 터치포인트: 메인 화면

단계 2: 검색
- 행동: 검색바에 키워드 입력
- 생각: "이 키워드로 원하는 거 나올까?"
- 감정: 🤔 궁금
- 터치포인트: 검색 화면
- 페인포인트: 검색 결과가 원하는 것과 다름

단계 3: 상품 선택
- ...
```

### 4. 기능 요구사항

**4.1 기능 목록**

| ID | 기능명 | 설명 | 우선순위 | 난이도 |
|----|--------|------|----------|--------|
| F-001 | 회원가입 | 이메일 기반 회원가입 | 필수(Must) | 하 |
| F-002 | 로그인 | 이메일/SNS 로그인 | 필수(Must) | 하 |
| F-003 | 상품 검색 | 키워드 검색 + 필터 | 필수(Must) | 중 |
| F-004 | 상품 상세 | 이미지, 설명, 리뷰 | 필수(Must) | 중 |
| F-005 | 장바구니 | 상품 담기/수정/삭제 | 필수(Must) | 중 |
| F-006 | 찜하기 | 관심 상품 저장 | 중요(Should) | 하 |
| F-007 | 추천 | AI 기반 상품 추천 | 가능(Could) | 상 |

**우선순위 정의:**
- Must: 없으면 서비스 불가
- Should: 중요하지만 1차 출시 후 가능
- Could: 있으면 좋지만 선택적
- Won't: 이번에는 하지 않음

**4.2 상세 기능 명세**

**[F-001] 회원가입**

개요:
신규 사용자가 이메일과 비밀번호로 계정을 생성한다.

입력:
- 이메일 (필수): 유효한 이메일 형식
- 비밀번호 (필수): 8자 이상, 영문+숫자 포함
- 비밀번호 확인 (필수): 비밀번호와 일치
- 이름 (필수): 2-20자
- 전화번호 (선택): 010-XXXX-XXXX 형식
- 마케팅 수신 동의 (선택): 체크박스

처리 과정:
1. 입력값 검증
   - 이메일 중복 확인
   - 비밀번호 강도 확인
2. 계정 생성
   - DB에 사용자 정보 저장
   - 비밀번호 암호화 (bcrypt)
3. 인증 이메일 발송
4. 가입 완료 화면 표시

출력:
- 성공: 가입 완료 페이지 + 인증 이메일 발송
- 실패: 에러 메시지 표시

에러 처리:
| 에러 코드 | 상황 | 메시지 |
|-----------|------|--------|
| E-001 | 이메일 중복 | "이미 가입된 이메일입니다" |
| E-002 | 비밀번호 불일치 | "비밀번호가 일치하지 않습니다" |
| E-003 | 형식 오류 | "올바른 이메일 형식을 입력해주세요" |

UI 요구사항:
- 실시간 입력 검증 (포커스 아웃 시)
- 비밀번호 강도 인디케이터 표시
- 이용약관 펼쳐보기 기능
- "가입하기" 버튼은 모든 필수 항목 입력 후 활성화

화면 플로우:
```
[회원가입 화면]
      ↓
[입력 완료 및 제출]
      ↓
[이메일 인증 안내]
      ↓
[이메일 확인]
      ↓
[인증 완료]
      ↓
[로그인 화면]
```

### 5. 비기능 요구사항

**5.1 성능**
- 페이지 로딩: 3초 이내 (4G 환경)
- API 응답 시간: 1초 이내 (95 percentile)
- 동시 접속자: 1만명 처리 가능
- 이미지 로딩: Lazy loading 적용

**5.2 보안**
- HTTPS 통신 필수
- 비밀번호 암호화 (bcrypt, salt 10)
- SQL Injection 방어
- XSS 방어
- CSRF 토큰 적용
- 개인정보 암호화 저장

**5.3 호환성**
모바일:
- iOS 14 이상
- Android 10 이상

웹 브라우저:
- Chrome (최신 2개 버전)
- Safari (최신 2개 버전)
- Edge (최신 2개 버전)

화면 크기:
- 모바일: 360px ~ 428px
- 태블릿: 768px ~ 1024px
- 데스크톱: 1280px 이상

**5.4 접근성**
- WCAG 2.1 AA 준수
- 스크린 리더 지원
- 키보드 네비게이션 가능
- 색상 대비비 4.5:1 이상

**5.5 다국어**
- 1차: 한국어
- 2차: 영어
- 3차: 중국어, 일본어

### 6. 데이터 요구사항

**6.1 데이터 모델**

User (사용자)
```
{
  id: UUID (PK)
  email: string (unique)
  password_hash: string
  name: string
  phone: string (nullable)
  created_at: timestamp
  updated_at: timestamp
  status: enum ['active', 'inactive', 'suspended']
}
```

Product (상품)
```
{
  id: UUID (PK)
  name: string
  description: text
  price: decimal
  stock: integer
  category_id: UUID (FK)
  images: array<string>
  created_at: timestamp
  updated_at: timestamp
}
```

**6.2 외부 연동**
- 결제 PG: [PG사명] API v2
- 배송 추적: [택배사] API
- 알림: Firebase Cloud Messaging
- 분석: Google Analytics 4

### 7. 화면 설계

**7.1 화면 목록**
| ID | 화면명 | 설명 | 우선순위 |
|----|--------|------|----------|
| S-001 | 스플래시 | 앱 시작 화면 | Must |
| S-002 | 홈 | 메인 화면 | Must |
| S-003 | 회원가입 | 계정 생성 | Must |
| S-004 | 로그인 | 로그인 | Must |
| S-005 | 상품 목록 | 카테고리별 상품 | Must |
| S-006 | 상품 상세 | 상품 정보 | Must |
| S-007 | 장바구니 | 장바구니 관리 | Must |
| S-008 | 결제 | 주문/결제 | Must |
| S-009 | 마이페이지 | 사용자 정보 | Must |

**7.2 상세 화면 정의**

[각 화면마다 아래 형식으로 작성]

**[S-002] 홈 화면**

목적:
사용자가 앱을 열었을 때 가장 먼저 보는 화면으로, 
주요 기능 접근과 개인화된 콘텐츠 제공

화면 구성:
```
┌─────────────────────────────┐
│ [로고]          [검색] [알림] │ ← 헤더 (고정)
├─────────────────────────────┤
│ [       배너 슬라이드       ] │ ← 프로모션
│ ●○○○○                       │
├─────────────────────────────┤
│ [의류][뷰티][푸드][리빙][+]   │ ← 카테고리
├─────────────────────────────┤
│ ★ OO님을 위한 추천           │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐│
│ │상품││상품││상품││상품││ ← 2열 그리드
│ └────┘ └────┘ └────┘ └────┘│
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐│
│ │상품││상품││상품││상품││
│ └────┘ └────┘ └────┘ └────┘│
├─────────────────────────────┤
│ 🔥 지금 인기 상품             │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐│
│ │상품││상품││상품││상품││
│ └────┘ └────┘ └────┘ └────┘│
│                             │
│ (무한 스크롤)                │
├─────────────────────────────┤
│ [홈][카테고리][검색][찜][MY]  │ ← 하단 네비(고정)
└─────────────────────────────┘
```

주요 요소:

1. 헤더
   - 로고: 탭 시 최상단 스크롤
   - 검색 아이콘: 검색 화면으로 이동
   - 알림 아이콘: 읽지 않은 알림 있으면 빨간 점 표시

2. 배너
   - 자동 슬라이드 (3초 간격)
   - 좌우 스와이프 가능
   - 인디케이터로 현재 위치 표시
   - 최대 5개 배너

3. 카테고리
   - 수평 스크롤
   - 아이콘 + 텍스트
   - 탭 시 해당 카테고리 상품 목록으로

4. 추천 상품
   - AI 기반 개인화 추천
   - 2열 그리드
   - 상품 카드: 이미지, 브랜드, 상품명, 가격, 할인율, 리뷰별점

5. 하단 네비게이션
   - 5개 탭 (홈/카테고리/검색/찜/MY)
   - 현재 탭 강조 (색상 변경)
   - 항상 고정

인터랙션:
- 배너 탭: 해당 이벤트 페이지로
- 카테고리 탭: 카테고리 상품 목록으로
- 상품 카드 탭: 상품 상세로
- Pull to Refresh: 최신 데이터 새로고침
- 무한 스크롤: 하단 도달 시 추가 상품 로드

상태 처리:
- 로딩: 스켈레톤 UI 표시
- 에러: "잠시 후 다시 시도해주세요" + 재시도 버튼
- 빈 상태: "추천 상품을 준비 중입니다"

### 8. 일정 및 마일스톤

**8.1 전체 일정**
```
2026.01.13 - 01.24: 상세 기획 (2주)
2026.01.27 - 02.14: 디자인 (3주)
2026.02.17 - 04.11: 개발 (8주)
  - Sprint 1 (2주): 회원/인증
  - Sprint 2 (2주): 상품 조회
  - Sprint 3 (2주): 장바구니/주문
  - Sprint 4 (2주): 결제/마이페이지
2026.04.14 - 04.25: QA (2주)
2026.04.28 - 05.02: 베타 테스트 (1주)
2026.05.05: 정식 출시
```

**8.2 마일스톤**
| 날짜 | 마일스톤 | 산출물 |
|------|----------|--------|
| 01.24 | 기획 완료 | 요구사항 정의서 승인 |
| 02.14 | 디자인 완료 | 전체 화면 디자인 |
| 03.14 | 개발 50% | 핵심 기능 구현 |
| 04.11 | 개발 완료 | 전체 기능 구현 |
| 04.25 | QA 완료 | 버그 수정 완료 |
| 05.05 | 정식 출시 | 앱스토어 배포 |

### 9. 제약사항

**9.1 기술적 제약**
- 백엔드는 기존 시스템과 연동 필수
- 레거시 API (v1)도 병행 지원 필요
- AWS 인프라 사용 필수

**9.2 비용 제약**
- 총 개발 비용: X천만원 이내
- 외부 API 비용: 월 X만원 이내
- 서버 비용: 월 X만원 이내

**9.3 인력 제약**
- 개발자 3명 (풀타임)
- 디자이너 1명 (파트타임)
- QA 1명 (풀타임)

### 10. 리스크 관리

| 리스크 | 발생 가능성 | 영향도 | 대응 방안 |
|--------|-------------|--------|-----------|
| API 개발 지연 | 중 | 상 | 목업 API 먼저 개발, 병행 진행 |
| 디자인 변경 요청 | 상 | 중 | 디자인 시안 2회 수정까지만 허용 |
| 성능 이슈 | 중 | 상 | 사전 부하 테스트, CDN 활용 |
| 범위 증가 (Scope Creep) | 상 | 상 | 변경 요청 프로세스 엄격히 관리 |

## 체크리스트

문서 완성 전 확인:
- [ ] 모든 필수 기능(Must) 정의됨
- [ ] 화면 정의 완료 (주요 화면 100%)
- [ ] 에러 처리 시나리오 포함
- [ ] 비기능 요구사항 구체적 수치 포함
- [ ] 일정 현실적이고 버퍼 포함
- [ ] 이해관계자 검토 완료
- [ ] 개발팀 기술 검토 완료

SKILL 5: 사용자 시나리오 생성기

파일명: `user-scenario.md`

  
---
name: 사용자 시나리오 생성기
description: 페르소나 기반 상세 사용자 시나리오 작성
---

# 사용자 시나리오 생성기

## 사용 시점
- 기능 기획 초기 단계
- 사용자 관점 검증이 필요할 때
- 유저 테스트 시나리오 작성 시

## 입력 정보
1. 페르소나 정보 (또는 간단한 사용자 특성)
2. 목표/과업
3. 상황/맥락

## 시나리오 작성 원칙

### 1. 구체성
추상적 ❌: "사용자가 상품을 찾는다"
구체적 ✅: "김지현은 퇴근 후 소파에 앉아 스마트폰으로 앱을 열어 '겨울 코트'를 검색한다"

### 2. 맥락 포함
감정, 생각, 동기를 함께 서술

### 3. 현실성
실제로 일어날 법한 상황

### 4. 분기 포함
성공 경로 + 실패/대안 경로

## 시나리오 템플릿

### 기본 구조

**시나리오 제목**: [페르소나]의 [목표] 달성 과정

**페르소나**: [이름, 간단한 특성]

**목표**: [구체적인 목표]

**상황**: [시간, 장소, 맥락]

---

**시작 상태**
[페르소나]는 [상황]에서 [목표]를 이루기 위해 [행동]을 시작한다.
현재 그/그녀의 기분은 [감정]이고, [생각]을 하고 있다.

**단계별 여정**

🎬 **Step 1: [단계명]**
- **행동**: [구체적인 행동]
- **생각**: "[내면의 생각]"
- **감정**: [감정 상태] 😊/🤔/😤 등
- **기대**: [사용자가 기대하는 것]

💡 **시스템 반응**:
[시스템이 어떻게 응답하는가]

✅ **결과**:
[이 단계의 결과]

---

🎬 **Step 2: [단계명]**
...

---

🎬 **Step 3: [단계명]**
...

**분기: 문제 발생 시**
만약 [문제 상황]이 발생하면:
1. [사용자 반응]
2. [시스템 대응]
3. [대안 경로]

**최종 결과**
- **성공 시**: [목표 달성, 사용자 만족도, 다음 행동]
- **실패 시**: [사용자 감정, 시스템 개선점]

**인사이트**
이 시나리오에서 발견된 것:
- [인사이트 1]
- [인사이트 2]

## 작성 예시

### 시나리오: 김지현의 급한 선물 구매

**페르소나**: 김지현 (34세, 마케팅 매니저)
- 기술 활용도 높음
- 시간 효율 중시
- 품질보다 빠른 배송 선호

**목표**: 친구 생일 선물을 오늘 안에 주문하기

**상황**: 
- 시간: 오후 6시 (퇴근 직전)
- 장소: 회사 사무실
- 맥락: 내일이 친구 생일, 깜빡 잊고 있다가 방금 생각남

---

**시작 상태**
김지현은 회사 컴퓨터를 끄기 직전, 내일이 친구 생일임을 갑자기 기억해낸다. "아, 맞다! 지혜 생일이 내일인데..."라며 당황한다. 😰 퇴근 후 직접 가게에 갈 시간은 없고, 최소한 내일 아침까지는 배송이 되어야 한다. 급하게 스마트폰을 꺼내 쇼핑앱을 연다.

**단계별 여정**

🎬 **Step 1: 앱 실행 및 목표 인지**
- **행동**: 쇼핑앱 아이콘을 탭하여 실행
- **생각**: "선물용으로 괜찮은 거... 30만원 정도면 되겠지?"
- **감정**: 급함 😰 + 약간 불안함
- **기대**: 빠르게 선물용 상품을 찾고 싶다

💡 **시스템 반응**:
- 홈 화면 로딩 (0.5초)
- 최근 본 상품(주방용품)이 먼저 보임

✅ **결과**:
지현은 최근 본 상품이 선물용이 아니라는 것을 인지하고 검색으로 전환 결정

---

🎬 **Step 2: 검색 및 필터 설정**
- **행동**: 상단 검색바를 탭하고 "여성 향수"를 입력
- **생각**: "향수면 무난하겠지. 근데 내일 아침까지 올까?"
- **감정**: 조금 진정 🤔
- **기대**: 내일 배송 가능한 상품만 보고 싶다

💡 **시스템 반응**:
- 검색 결과 50개 표시
- 정렬 옵션: "인기순" 기본값
- 필터: 가격/브랜드/배송 등

✅ **결과**:
많은 결과에 압도됨. "내일 배송" 필터를 찾기 시작

---

🎬 **Step 3: 배송 필터 적용**
- **행동**: 필터 아이콘 탭 → "내일 도착" 옵션 선택
- **생각**: "오, 이렇게 필터하면 되겠네"
- **감정**: 약간 안심 😊
- **기대**: 확실히 내일 받을 수 있는 상품만 나오길

💡 **시스템 반응**:
- 결과 50개 → 8개로 줄어듦
- 각 상품 카드에 "내일 아침 도착" 배지 표시

✅ **결과**:
선택지가 줄어들어 오히려 편함. 상품을 하나씩 살펴보기 시작

---

🎬 **Step 4: 상품 비교 및 선택**
- **행동**: 3개 상품의 상세페이지를 번갈아가며 확인
- **생각**: "A는 리뷰가 좋네. B는 포장이 예쁘고. C는..."
- **감정**: 선택 고민 🤔
- **기대**: 실패하지 않을 선택을 하고 싶다

💡 **시스템 반응**:
- 각 상품의 상세 정보 표시
- 리뷰 (평점, 포토 리뷰)
- "선물용 포장" 옵션 표시

✅ **결과**:
"디올 미스 디올" 선택 (리뷰 4.8점, 선물 포장 무료)

---

🎬 **Step 5: 주문 및 결제**
- **행동**: "바로 구매" 버튼 탭
- **생각**: "배송지는 회사로... 내일 아침에 받아서 포장해서 가져가야지"
- **감정**: 안심 + 서두름 😌
- **기대**: 빠르게 결제 완료하고 싶다

💡 **시스템 반응**:
- 저장된 배송지 목록 표시 (집/회사)
- 저장된 결제수단 목록 (카드 3개)
- "선물용 포장" 자동 체크됨

✅ **결과**:
회사 주소 선택, 기본 카드로 결제, 총 3탭만에 완료

---

**분기: 재고 부족 시**

만약 선택한 상품의 재고가 없다면:

1. **사용자 반응**: "에이, 진짜?" 😤 다시 검색으로
2. **시스템 대응**: "이 상품은 품절입니다. 비슷한 상품을 추천해드릴까요?" 팝업
3. **대안 경로**:
   - 추천 상품 3개 표시 (같은 브랜드, 비슷한 가격대)
   - "내일 배송" 보장되는 상품만
   - 한 번의 탭으로 바로 구매 페이지로

---

**최종 결과**

**성공 시**:
- 주문 완료 (소요 시간: 5분)
- 사용자 만족도: ⭐⭐⭐⭐ (4/5)
  - 좋았던 점: 빠른 필터, 저장된 정보 활용
  - 아쉬운 점: 초기에 너무 많은 결과
- 다음 행동: 친구에게 "내일 선물 줄게" 메시지 보냄

**실패 시** (재고 없는 경우):
- 사용자 감정: 짜증 😤 → 경쟁 앱으로 이동 가능성
- 시스템 개선점: 
  - 재고 실시간 표시 필요
  - 대안 상품 추천 강화
  - "알림 신청" 기능 추가

---

**인사이트**

이 시나리오에서 발견된 것:

1. **시간 압박이 있는 사용자는 필터를 적극 활용한다**
   → "내일 배송" 같은 명확한 필터가 중요

2. **선택지가 너무 많으면 오히려 스트레스**
   → 필터 적용 후 10개 이하로 줄이는 것이 이상적

3. **저장된 정보(주소, 카드)가 구매 속도를 크게 높인다**
   → 첫 구매 시 정보 저장 유도 필요

4. **선물용 니즈에 특화된 기능이 차별화 포인트**
   → 선물 포장, 메시지 카드, 배송 시간 지정 등

5. **실패 경험(품절)의 대응이 이탈을 막는다**
   → 대안 제시가 핵심

SKILL 6: 경쟁사 분석 리포트

파일명: `competitor-analysis.md`

  
---
name: 경쟁사 분석 리포트
description: 체계적인 경쟁사 벤치마킹 문서 작성
---

# 경쟁사 분석 리포트

## 사용 시점
- 신규 프로젝트 기획 전
- 기능 개선 방향 모색 시
- 시장 트렌드 파악이 필요할 때

## 분석 프로세스

### 1단계: 경쟁사 선정
- 직접 경쟁사 (같은 타겟, 같은 서비스)
- 간접 경쟁사 (다른 방식으로 같은 니즈 해결)
- 벤치마킹 대상 (다른 분야지만 배울 점이 있는 서비스)

### 2단계: 분석 항목 정의
기능, UI/UX, 비즈니스 모델, 사용자 평가 등

### 3단계: 데이터 수집
웹 검색, 직접 사용, 리뷰 분석, 공개 자료 조사

### 4단계: 비교 분석
정량적 비교 + 정성적 평가

### 5단계: 인사이트 도출
우리가 배울 점, 피해야 할 점, 차별화 전략

## 리포트 구조

### 1. 요약

**분석 목적**: [왜 이 분석을 하는가]

**분석 대상**: 
- 경쟁사 A
- 경쟁사 B
- 경쟁사 C
- (벤치마킹) D

**핵심 발견사항** (3줄 요약):
1. [발견 1]
2. [발견 2]
3. [발견 3]

**권장 사항**:
[우리가 취해야 할 액션]

---

### 2. 경쟁사 개요

**경쟁사 A: [서비스명]**

기본 정보:
- 운영사: [회사명]
- 출시일: [날짜]
- 사용자 수: [추정치]
- 앱 평점: [iOS/Android 평점]

서비스 특징:
- 타겟: [주 사용자층]
- 포지셔닝: [시장에서의 위치]
- 강점: [3가지]
- 약점: [3가지]

비즈니스 모델:
- 수익 구조: [광고/수수료/구독 등]
- 가격 정책: [구체적 가격]

최근 동향:
- [날짜]: [주요 업데이트/뉴스]
- [날짜]: [주요 업데이트/뉴스]

---

### 3. 기능 비교

| 기능 | 우리 | 경쟁사 A | 경쟁사 B | 경쟁사 C | 비고 |
|------|------|----------|----------|----------|------|
| 회원 가입 | 이메일만 | 이메일+SNS | SNS만 | 이메일+SNS+전화 | B는 간편함 강조 |
| 검색 필터 | 5개 | 10개 | 7개 | 12개 | C가 가장 세밀 |
| 결제 수단 | 3개 | 5개 | 4개 | 6개 | |
| 배송 옵션 | 일반/빠른 | 일반/새벽/당일 | 일반/빠른 | 일반/새벽 | A의 새벽배송 주목 |
| 고객센터 | 채팅 | 채팅+전화 | 이메일 | 채팅+전화+방문 | |

**기능 수준 평가**:
- ⭐⭐⭐⭐⭐: 업계 최고 수준
- ⭐⭐⭐⭐: 우수
- ⭐⭐⭐: 평균
- ⭐⭐: 미흡
- ⭐: 매우 부족

| 항목 | 우리 | A | B | C |
|------|------|---|---|---|
| 검색 정확도 | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| 결제 편의성 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 앱 성능 | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐⭐ |

---

### 4. UI/UX 비교

**4.1 첫 인상**

경쟁사 A:
- 색상: 밝은 파스텔 톤, 젊은 느낌
- 레이아웃: 여백 많음, 미니멀
- 폰트: 고딕, 큼직한 타이틀
- 평가: 세련됨 ⭐⭐⭐⭐⭐

경쟁사 B:
- 색상: 진한 원색, 활기참
- 레이아웃: 정보 밀도 높음
- 폰트: 명조, 작은 글씨
- 평가: 복잡함 ⭐⭐

**4.2 네비게이션**

| 서비스 | 구조 | 깊이 | 평가 |
|--------|------|------|------|
| 우리 | 하단 탭 5개 | 3단계 | 보통 |
| 경쟁사 A | 하단 탭 5개 + 햄버거 메뉴 | 2단계 | 찾기 쉬움 ⭐⭐⭐⭐ |
| 경쟁사 B | 하단 탭 4개 | 4단계 | 복잡함 ⭐⭐ |
| 경쟁사 C | 하단 탭 6개 | 3단계 | 혼란스러움 ⭐ |

**4.3 핵심 플로우 비교: 상품 구매**

경쟁사 A: 6단계
```
홈 → 검색 → 상품 선택 → 옵션 선택 → 결제 정보 → 완료
                                      ↑ (저장된 정보 자동 입력)
```
- 장점: 빠름 (2분 소요)
- 단점: 옵션 선택 화면이 복잡

경쟁사 B: 8단계
```
홈 → 카테고리 → 상품 목록 → 상품 선택 → 옵션 → 장바구니 확인 
   → 배송지 입력 → 결제 수단 → 완료
```
- 장점: 단계가 명확
- 단점: 느림 (4분 소요)

**권장**: A의 자동 입력 방식 벤치마킹

---

### 5. 사용자 평가 분석

**앱스토어 리뷰 분석**

경쟁사 A (평점 4.3/5.0, 리뷰 12,345개)

긍정 리뷰 키워드:
- "빠른 배송" (언급 2,345회)
- "직관적" (언급 1,234회)
- "고객센터 친절" (언급 987회)

부정 리뷰 키워드:
- "앱이 자주 멈춤" (언급 567회)
- "검색이 이상함" (언급 432회)
- "환불 어려움" (언급 321회)

**종합 평가**:
- 강점: 배송 속도, UI 직관성
- 약점: 앱 안정성, 환불 프로세스

---

### 6. 차별화 포인트 발견

| 항목 | 경쟁사 현황 | 시장 공백 | 우리의 기회 |
|------|-------------|-----------|-------------|
| 배송 | 대부분 익일 배송 | 당일 배송 수요 높음 | 당일 배송 강화 |
| 검색 | 키워드 기반 | 이미지 검색 부족 | AI 이미지 검색 도입 |
| 추천 | 인기순/최신순 | 개인화 부족 | AI 개인화 추천 |
| 고객 소통 | 일방향 | 커뮤니티 부재 | 사용자 커뮤니티 구축 |

---

### 7. SWOT 분석

**우리 서비스**

Strengths (강점):
- [강점 1]
- [강점 2]

Weaknesses (약점):
- [약점 1]
- [약점 2]

Opportunities (기회):
- [시장 기회 1]: 경쟁사 B가 약한 개인화 영역
- [시장 기회 2]: 신규 사용자층 공략 가능

Threats (위협):
- [위협 1]: 경쟁사 A의 공격적 마케팅
- [위협 2]: 대기업의 시장 진입 가능성

---

### 8. 인사이트 및 권장사항

**즉시 적용 가능 (Quick Wins)**

1. **결제 자동 완성**
   - 발견: 경쟁사 A는 저장된 정보를 자동으로 채워넣음
   - 효과: 구매 전환율 15% 향상 (A사 공개 자료)
   - 난이도: 낮음
   - 권장: 이번 달 내 적용

2. **검색 필터 개선**
   - 발견: 경쟁사 C는 12개 필터 제공, 우리는 5개
   - 효과: 검색 만족도 향상
   - 난이도: 중
   - 권장: 다음 스프린트

**중기 전략 (3-6개월)**

1. **AI 개인화 추천**
   - 발견: 모든 경쟁사가 단순 추천만 제공
   - 기회: 차별화 포인트
   - 필요: AI 모델 개발, 사용자 데이터 수집
   - 권장: Q2 로드맵 포함

2. **커뮤니티 기능**
   - 발견: 경쟁사들은 일방향 소통만
   - 기회: 사용자 충성도 향상
   - 필요: 커뮤니티 관리 인력
   - 권장: 베타 버전으로 시작

**피해야 할 것**

1. ❌ 과도한 정보 밀도 (경쟁사 B의 실수)
2. ❌ 복잡한 네비게이션 (경쟁사 C의 문제)
3. ❌ 느린 앱 성능 (경쟁사 A의 약점)

---

### 9. 벤치마킹 자료

[주요 화면 캡처 및 플로우 다이어그램 첨부]

---

### 10. 결론

**핵심 메시지**:
[3줄로 요약된 핵심 메시지]

**다음 단계**:
1. [액션 1]
2. [액션 2]
3. [액션 3]

**업데이트 계획**:
이 분석은 [날짜]에 업데이트 예정

SKILL 7: UX Writing 가이드

파일명: `ux-writing.md`

  
---
name: UX Writing 가이드
description: 사용자 경험을 고려한 UI 텍스트 작성
---

# UX Writing 가이드

## 사용 시점
- 버튼, 레이블, 메시지 등 모든 UI 텍스트 작성
- 에러 메시지, 안내 문구 작성
- 온보딩, 튜토리얼 문구 작성

## UX Writing 원칙

### 1. 명확성 (Clarity)
창의성보다 이해 가능성이 우선

❌ "당신만의 특별한 여정을 시작하세요"
✅ "회원가입 하기"

### 2. 간결성 (Conciseness)
모바일 화면에서 읽기 쉽게

❌ "지금 바로 가입하시면 다양한 혜택을 받으실 수 있습니다"
✅ "가입하고 혜택 받기"

### 3. 일관성 (Consistency)
같은 의미는 같은 단어로

❌ "취소", "닫기", "그만두기"를 섞어 쓰기
✅ "취소"로 통일

### 4. 대화체 (Conversational)
친근하지만 가볍지 않게

❌ "오류가 발생하였사오니 다시 시도하여 주시기 바랍니다"
✅ "문제가 발생했어요. 다시 시도해주세요"

### 5. 긍정적 (Positive)
부정보다 긍정 표현

❌ "비밀번호를 틀렸습니다"
✅ "비밀번호를 다시 확인해주세요"

## 상황별 작성 가이드

### 버튼 (CTA - Call To Action)

**원칙**:
- 동사로 시작
- 구체적인 행동 명시
- 2-4단어

**예시**:

주문/결제:
- ✅ "구매하기" (간결)
- ✅ "35,000원 결제하기" (금액 명시로 확신 제공)
- ❌ "클릭" (무엇을 하는지 불명확)

저장/완료:
- ✅ "저장" 
- ✅ "변경사항 저장"
- ❌ "OK" (모호함)

취소/삭제:
- ✅ "취소"
- ✅ "삭제하기"
- ⚠️ "삭제" + 확인 단계 추가 (중요 행동)

### 에러 메시지

**구조**: [무엇이 문제인가] + [어떻게 해결하는가]

**좋은 예시**:

```
❌ "Error 404"
✅ "페이지를 찾을 수 없어요
    링크를 다시 확인해주세요"

❌ "Invalid email format"
✅ "이메일 형식이 올바르지 않아요
    example@email.com 형식으로 입력해주세요"

❌ "Network error"
✅ "인터넷 연결을 확인해주세요
    Wi-Fi나 데이터가 켜져 있나요?"
```

**에러 메시지 템플릿**:

```
[감정 표현] [문제 설명]
[구체적 해결 방법]
[대안 제시]
```

예시:
```
죄송해요, 결제가 완료되지 않았어요

카드 정보를 다시 확인해주시거나
다른 결제 수단을 선택해주세요

[다시 시도] [고객센터 문의]
```

### 성공 메시지

**톤**: 축하하지만 과하지 않게

```
✅ "저장되었습니다" (간단명료)
✅ "주문이 완료되었어요! 
    배송은 내일 도착 예정이에요" (추가 정보)
❌ "와! 대단해요! 축하합니다!" (과함)
```

### 빈 상태 (Empty State)

**구조**: [상황 설명] + [액션 유도]

```
[아이콘]
아직 담은 상품이 없어요
마음에 드는 상품을 찾아볼까요?

[상품 둘러보기]
```

```
[아이콘]
아직 알림이 없어요
새로운 알림이 오면 여기서 확인할 수 있어요
```

### 온보딩 메시지

**원칙**:
- 단계당 1개 메시지
- 가치 중심 (기능 나열 X)
- 3-5단계 이내

**좋은 예시**:

Step 1:
```
원하는 상품을 빠르게 찾아요
AI 검색으로 이미지만 찍어도 OK
```

Step 2:
```
매일 새로운 혜택을 받아요
등급별 맞춤 할인과 쿠폰
```

Step 3:
```
안전하게 결제해요
간편결제로 클릭 3번이면 끝
```

### 확인 요청 (Confirmation)

중요한 액션 전에 한 번 더 확인

```
정말 삭제할까요?
삭제하면 복구할 수 없어요

[취소]  [삭제하기]
```

**버튼 순서 규칙**:
- iOS: [취소] [확인]
- Android: [확인] [취소]
- 웹: 일반적으로 [취소] [확인]

### 로딩 메시지

**짧은 로딩 (1-3초)**:
- 메시지 없이 스피너만

**중간 로딩 (3-10초)**:
```
상품을 불러오는 중이에요...
```

**긴 로딩 (10초 이상)**:
```
첫 설정을 준비하고 있어요
잠시만 기다려주세요 (약 30초 소요)
```

**팁**: 진행률 표시 추가

## 톤앤매너 (Tone & Manner)

### 우리 서비스의 목소리

**성격**: [친근한 / 전문적인 / 트렌디한 등]
**말투**: [존댓말 / 반말 / 혼합]

**DO (해야 할 것)**:
- ✅ 친구에게 말하듯 편안하게
- ✅ 사용자를 존중하는 태도
- ✅ 이모지 적절히 사용 (🎉 ✅ ❤️ 등)

**DON'T (하지 말아야 할 것)**:
- ❌ 기계적인 말투
- ❌ 과도한 존댓말
- ❌ 유치한 표현
- ❌ 강요하는 톤

### 상황별 톤 조절

**일반 상황**: 친근하게
```
장바구니에 담았어요
지금 바로 구매하시겠어요?
```

**에러 상황**: 공감하며 도움
```
앗, 문제가 생겼네요 
저희가 빠르게 해결할게요
```

**중요한 안내**: 명확하고 진지하게
```
결제가 완료되었습니다
주문 번호: #123456
```

## 단어 선택 가이드

### 추천 단어

| 상황 | ❌ 피하기 | ✅ 사용하기 |
|------|-----------|-------------|
| 회원가입 | 등록, 등록하다 | 가입, 시작하기 |
| 구매 | 구입, 매입 | 구매, 주문 |
| 저장 | 보관, 보존 | 저장, 담기 |
| 좋아요 | 애정, 관심 | 좋아요, 찜 |
| 에러 | 오류, 결함 | 문제, 오류 |
| 완료 | 종료, 마침 | 완료, 끝 |

### 금지 단어
- "절대", "반드시", "무조건" (강압적)
- "~하십시오" (명령조)
- "~해라" (반말 명령)
- 전문 용어 (API, JSON 등) → 일반 용어로

## 다국어 대응

### 영어 버전 작성 시

**원칙**:
- 직역보다 의역
- 문화 차이 고려
- 문장 길이 차이 (영어가 보통 30% 더 길다)

**예시**:
```
한국어: "장바구니에 담기"
영어 직역: "Put in shopping cart" (어색)
영어 자연스럽게: "Add to Cart"

한국어: "찜"
영어: "Save" 또는 "Favorite"
```

## 작성 프로세스

### 1단계: 맥락 파악
- 사용자가 누구인가?
- 어떤 상황인가?
- 무엇을 해야 하는가?

### 2단계: 초안 작성
- 명확한 메시지 먼저
- 세부 조정은 나중에

### 3단계: 소리 내어 읽기
- 자연스러운가?
- 이해하기 쉬운가?

### 4단계: 길이 확인
- 버튼: 2-4단어
- 제목: 5-8단어
- 본문: 20단어 이내

### 5단계: 실제 화면에서 확인
- 디자인에 넣어봤을 때 어떤가?
- 잘리지 않는가?

## 체크리스트

모든 텍스트 작성 후 확인:
- [ ] 명확한가? (3초 안에 이해 가능)
- [ ] 간결한가? (불필요한 단어 제거)
- [ ] 일관적인가? (같은 용어 사용)
- [ ] 친근한가? (대화하듯)
- [ ] 긍정적인가? (부정 표현 회피)
- [ ] 행동을 유도하는가? (다음 액션 명확)
- [ ] 접근성을 고려했는가? (스크린 리더)
```

고급 Skills (전문 작업용)

SKILL 8: 정보구조(IA) 설계

파일명: `information-architecture.md`

  
---
name: 정보구조(IA) 설계
description: 서비스의 정보 구조와 네비게이션 설계
---

# 정보구조(IA) 설계 Skill

## 사용 시점
- 신규 서비스 구축 시
- 대규모 리뉴얼 시
- 콘텐츠가 많아져 정리가 필요할 때

## IA 설계 프로세스

### 1단계: 콘텐츠 인벤토리
모든 콘텐츠와 기능을 나열

```
ID | 콘텐츠/기능 | 현재 위치 | 중요도 | 접근 빈도
---|-------------|-----------|--------|----------
001 | 상품 검색 | 홈 상단 | 높음 | 매우 높음
002 | 카테고리 목록 | 메뉴 | 높음 | 높음
003 | 마이페이지 | 하단 탭 | 중간 | 중간
...
```

### 2단계: 사용자 니즈 매핑
사용자가 찾는 정보/기능 우선순위

```
페르소나 A (신규 사용자):
1. 상품 둘러보기 (탐색)
2. 인기 상품 보기
3. 회원가입

페르소나 B (기존 사용자):
1. 검색
2. 재구매
3. 주문 확인
```

### 3단계: 카드 소팅
사용자가 자연스럽게 생각하는 그룹핑 반영

```
그룹 1: 쇼핑
- 상품 검색
- 카테고리
- 추천 상품
- 이벤트

그룹 2: 내 정보
- 주문 내역
- 찜 목록
- 쿠폰
- 포인트

그룹 3: 고객 지원
- FAQ
- 1:1 문의
- 공지사항
```

### 4단계: 정보 계층 구조 설계

```
Level 1 (최상위)
├─ 홈
├─ 카테고리
├─ 검색
├─ 찜
└─ MY

Level 2 (홈 하위)
홈
├─ 메인 배너
├─ 카테고리 바로가기
├─ 추천 상품
├─ 이벤트
└─ 최근 본 상품

Level 2 (카테고리 하위)
카테고리
├─ 의류
│   ├─ 여성 의류
│   │   ├─ 상의
│   │   ├─ 하의
│   │   └─ 아우터
│   └─ 남성 의류
├─ 뷰티
└─ 리빙

Level 2 (MY 하위)
MY
├─ 주문 관리
│   ├─ 주문/배송 조회
│   ├─ 반품/교환
│   └─ 취소 내역
├─ 혜택 관리
│   ├─ 쿠폰
│   └─ 포인트
└─ 설정
    ├─ 회원 정보
    └─ 알림 설정
```

### 5단계: 네비게이션 디자인

**주 네비게이션 (Primary Navigation)**:
- 위치: 하단 탭 바
- 항목 수: 5개 (최대)
- 항목: 홈, 카테고리, 검색, 찜, MY

**보조 네비게이션 (Secondary Navigation)**:
- 위치: 상단 헤더
- 항목: 장바구니, 알림

**유틸리티 네비게이션 (Utility Navigation)**:
- 위치: 햄버거 메뉴 또는 MY 내부
- 항목: 설정, 고객센터, 이벤트 등

### 6단계: 깊이 최적화

**원칙**: 3클릭 룰
중요한 콘텐츠는 홈에서 3클릭 이내 도달

**현재 깊이 분석**:
```
상품 상세 페이지 도달:
나쁜 예: 홈 → 카테고리 → 대분류 → 중분류 → 소분류 → 상품 (5클릭)
좋은 예: 홈 → 검색 → 상품 (2클릭)
        홈 → 추천 섹션 → 상품 (2클릭)
```

### 7단계: IA 다이어그램 작성

**시각화 도구**: Mermaid, Figma, Whimsical

**예시 (Mermaid 코드)**:
```
graph TD
    A[홈] --> B[카테고리]
    A --> C[검색]
    A --> D[찜]
    A --> E[MY]
    
    B --> B1[의류]
    B --> B2[뷰티]
    B --> B3[리빙]
    
    B1 --> B1a[여성 의류]
    B1 --> B1b[남성 의류]
    
    E --> E1[주문 관리]
    E --> E2[혜택 관리]
    E --> E3[설정]
    
    E1 --> E1a[주문/배송 조회]
    E1 --> E1b[반품/교환]
```

## IA 평가 기준

### 1. 발견 가능성 (Findability)
사용자가 원하는 것을 쉽게 찾는가?

테스트: "상품 반품하기"를 5초 안에 찾을 수 있는가?

### 2. 명확성 (Clarity)
메뉴 이름이 명확한가?

❌ "서비스" (뭐가 있는지 불명확)
✅ "고객 지원" (명확)

### 3. 일관성 (Consistency)
같은 레벨은 같은 방식으로 접근

✅ 모든 하위 페이지에서 "뒤로 가기" 버튼이 같은 위치

### 4. 확장성 (Scalability)
새 콘텐츠를 쉽게 추가할 수 있는가?

좋은 구조: 카테고리 추가 시 큰 변경 없음

## 사용자 테스트

### 트리 테스트 (Tree Test)
사용자에게 텍스트 기반 메뉴만 보여주고 특정 항목을 찾게 함

```
Task: "이번 주 배송 예정인 상품을 확인하세요"

메뉴:
1. 홈
2. 카테고리
3. MY
   3-1. 주문 관리
        3-1-1. 주문/배송 조회 ← (정답)
        3-1-2. 반품/교환
   3-2. 혜택 관리
   3-3. 설정
4. 고객 지원

성공률: 85% (목표: 80% 이상)
평균 시간: 8초 (목표: 10초 이내)
```

## 산출물

1. **IA 다이어그램**: 전체 구조 시각화
2. **메뉴 네이밍 가이드**: 각 메뉴의 명칭과 설명
3. **네비게이션 규칙**: 어떤 상황에서 어떤 네비게이션 사용
4. **URL 구조**: 정보 구조를 반영한 URL 설계

SKILL 9: 개발자용 명세서 변환기

파일명: `dev-spec-converter.md`

  
---
name: 개발자용 명세서 변환기
description: 기획서를 개발 명세서로 변환
---

# 개발자용 명세서 변환기

## 사용 시점
- 기획서 작성 완료 후
- 개발팀에 전달 전
- API 설계 시작 전

## 변환 원칙

### 기획자의 언어 → 개발자의 언어

**기획서**:
"사용자가 로그인 버튼을 누르면 이메일과 비밀번호를 확인하고, 
맞으면 홈 화면으로 이동하고, 틀리면 에러 메시지를 보여줍니다"

**개발 명세서**:
```
POST /api/auth/login

Request:
{
  "email": "string",
  "password": "string"
}

Response 200:
{
  "token": "string",
  "user": {
    "id": "uuid",
    "email": "string",
    "name": "string"
  }
}

Response 401:
{
  "error": {
    "code": "INVALID_CREDENTIALS",
    "message": "이메일 또는 비밀번호가 올바르지 않습니다"
  }
}

Frontend:
- 성공 시: localStorage에 token 저장 → navigate('/home')
- 실패 시: Toast 메시지 표시
```

## 변환 템플릿

### 1. API 명세

**각 기능마다 다음 형식으로:**

```markdown
## [기능명] API

### 엔드포인트
`[METHOD] /api/[path]`

### 설명
[이 API가 하는 일]

### 인증
- [ ] 필요 (Bearer Token)
- [ ] 불필요

### Request

#### Headers
```json
{
  "Content-Type": "application/json",
  "Authorization": "Bearer {token}"
}
```

#### Parameters (URL)
| 파라미터 | 타입 | 필수 | 설명 | 예시 |
|---------|------|------|------|------|
| id | string | Y | 사용자 ID | "user-123" |

#### Body
```json
{
  "field1": "string (설명)",
  "field2": 123,
  "field3": {
    "nested": "value"
  }
}
```

### Response

#### 성공 (200 OK)
```json
{
  "data": {
    "id": "string",
    "name": "string",
    "created_at": "2026-01-07T12:00:00Z"
  }
}
```

#### 실패 시나리오

**400 Bad Request** (잘못된 입력)
```json
{
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "이메일 형식이 올바르지 않습니다",
    "details": [
      {
        "field": "email",
        "message": "유효한 이메일을 입력해주세요"
      }
    ]
  }
}
```

**401 Unauthorized** (인증 실패)
```json
{
  "error": {
    "code": "UNAUTHORIZED",
    "message": "로그인이 필요합니다"
  }
}
```

**404 Not Found** (리소스 없음)
```json
{
  "error": {
    "code": "NOT_FOUND",
    "message": "사용자를 찾을 수 없습니다"
  }
}
```

**500 Internal Server Error** (서버 오류)
```json
{
  "error": {
    "code": "INTERNAL_ERROR",
    "message": "서버 오류가 발생했습니다"
  }
}
```

### 비즈니스 로직

1. [단계 1 설명]
2. [단계 2 설명]
3. [예외 처리]

### 성능 요구사항
- 응답 시간: [X]ms 이내
- 처리량: 초당 [X]건

### 보안 고려사항
- [ ] 입력 검증
- [ ] SQL Injection 방어
- [ ] XSS 방어
- [ ] Rate Limiting

### 테스트 케이스

**Case 1**: 정상 입력
- Input: [입력값]
- Expected: [기대 결과]

**Case 2**: 비정상 입력
- Input: [잘못된 입력]
- Expected: [에러 메시지]
```

### 2. 데이터 모델

**각 엔티티마다:**

```markdown
## [엔티티명] 모델

### 테이블명
`[table_name]`

### 필드 정의

| 필드명 | 타입 | 제약조건 | 설명 | 예시 |
|--------|------|----------|------|------|
| id | UUID | PK | 고유 식별자 | "550e8400-e29b-41d4-a716-446655440000" |
| email | VARCHAR(255) | UNIQUE, NOT NULL | 이메일 | "user@example.com" |
| password_hash | VARCHAR(255) | NOT NULL | 암호화된 비밀번호 | (bcrypt hash) |
| name | VARCHAR(100) | NOT NULL | 사용자 이름 | "홍길동" |
| created_at | TIMESTAMP | NOT NULL, DEFAULT NOW() | 생성 시각 | "2026-01-07T12:00:00Z" |
| updated_at | TIMESTAMP | NOT NULL | 수정 시각 | "2026-01-07T12:00:00Z" |
| status | ENUM | NOT NULL, DEFAULT 'active' | 상태 | "active", "inactive", "suspended" |

### 인덱스
- PRIMARY KEY: `id`
- UNIQUE KEY: `email`
- INDEX: `created_at`

### 관계
- `User` has many `Order` (1:N)
- `User` has one `Profile` (1:1)

### 제약사항
- email은 유효한 이메일 형식
- password는 최소 8자 이상
- status는 ['active', 'inactive', 'suspended'] 중 하나
```

### 3. 화면별 개발 사항

```markdown
## [화면명] 구현

### 컴포넌트 구조
```
<ScreenName>
  <Header>
    <Logo />
    <SearchBar />
    <CartIcon />
  </Header>
  
  <MainContent>
    <ProductList>
      <ProductCard />
      <ProductCard />
    </ProductList>
  </MainContent>
  
  <Footer>
    <NavBar />
  </Footer>
</ScreenName>
```

### 상태 관리

**Local State (useState)**:
- `searchQuery`: string
- `selectedCategory`: string
- `isLoading`: boolean

**Global State (Redux/Context)**:
- `user`: User 객체
- `cart`: CartItem[]

### API 호출

**mount 시**:
```typescript
useEffect(() => {
  fetchProducts()
}, [])
```

**사용자 액션**:
```typescript
const handleAddToCart = async (productId: string) => {
  await addToCartAPI(productId)
  dispatch(updateCart())
}
```

### 에러 처리

| 시나리오 | 처리 방법 |
|----------|-----------|
| API 실패 | Toast 메시지 + 재시도 버튼 |
| 네트워크 오류 | "인터넷 연결을 확인해주세요" |
| 빈 데이터 | Empty State 표시 |

### 성능 최적화
- [ ] Lazy Loading (이미지)
- [ ] Virtual Scrolling (긴 리스트)
- [ ] Debounce (검색)
- [ ] Memoization (React.memo)

### 접근성
- [ ] Semantic HTML
- [ ] ARIA 레이블
- [ ] 키보드 네비게이션
- [ ] 스크린 리더 지원
```

### 4. 우선순위 및 일정

```markdown
## 개발 우선순위

### P0 (필수 - 1차 출시)
- [ ] 회원가입/로그인
- [ ] 상품 조회
- [ ] 장바구니
- [ ] 결제

예상 기간: 4주

### P1 (중요 - 2차 업데이트)
- [ ] 찜하기
- [ ] 리뷰 작성
- [ ] 추천 알고리즘

예상 기간: 2주

### P2 (선택 - 3차 이후)
- [ ] 소셜 로그인
- [ ] 라이브 채팅
- [ ] 포인트 시스템

예상 기간: 3주

## Sprint 계획

**Sprint 1 (2주)**:
- 인증 시스템
- 상품 API (조회만)
- 기본 화면 구성

**Sprint 2 (2주)**:
- 장바구니 기능
- 주문 프로세스
- 결제 연동

**Sprint 3 (2주)**:
- 마이페이지
- 주문 관리
- 버그 수정
```

## 체크리스트

개발 명세서 완성 전 확인:
- [ ] 모든 API 엔드포인트 정의됨
- [ ] Request/Response 형식 명시
- [ ] 에러 코드 및 메시지 정의
- [ ] 데이터 모델 완전히 설계
- [ ] 화면별 구현 사항 작성
- [ ] 우선순위 및 일정 합의
- [ ] 개발팀 기술 리뷰 완료

SKILL 10: A/B 테스트 설계

파일명: `ab-test-design.md`

  
---
name: A/B 테스트 설계
description: 데이터 기반 의사결정을 위한 A/B 테스트 계획
---

# A/B 테스트 설계 Skill

## 사용 시점
- 새 기능의 효과를 검증하고 싶을 때
- 디자인 개선의 영향을 측정하고 싶을 때
- 두 가지 옵션 중 선택이 어려울 때

## A/B 테스트 설계 프로세스

### 1단계: 가설 수립

**SMART 가설**:
- Specific (구체적)
- Measurable (측정 가능)
- Achievable (달성 가능)
- Relevant (관련성 있음)
- Time-bound (기한 설정)

**나쁜 가설**:
❌ "버튼을 크게 하면 좋을 것 같다"

**좋은 가설**:
✅ "CTA 버튼의 크기를 40px에서 48px로 키우면, 
    결제 전환율이 현재 15%에서 18%로 3%p 상승할 것이다"

### 2단계: 메트릭 정의

**Primary Metric (주요 지표)**:
- 이 테스트의 성공을 판단하는 핵심 지표
- 예: 전환율, 클릭률, 구매 완료율

**Secondary Metrics (보조 지표)**:
- 부수적인 효과를 측정
- 예: 평균 체류 시간, 이탈률, 평균 주문 금액

**Counter Metrics (역효과 지표)**:
- 개선이 부작용을 일으키지 않는지 확인
- 예: 로딩 시간, 서버 부하, 고객 문의 증가

### 3단계: 변형안 설계

**Control (대조군 - A)**:
현재 버전 (변경 없음)

**Variant (실험군 - B)**:
변경 사항 적용

**중요**: 한 번에 하나만 변경
- ✅ 버튼 색상만 변경
- ❌ 버튼 색상 + 크기 + 위치 모두 변경 (무엇이 효과인지 불명확)

### 4단계: 샘플 크기 계산

**필요한 정보**:
- 현재 전환율: 15%
- 목표 전환율: 18%
- 통계적 유의수준: 95%
- 검정력: 80%

**계산 결과**:
각 그룹당 약 2,000명 필요
→ 총 4,000명

**예상 기간**:
일 방문자 500명 → 8일 소요

### 5단계: 트래픽 분배

**일반적인 분배**:
- A (Control): 50%
- B (Variant): 50%

**조심스러운 테스트** (리스크 큰 변경):
- A: 90%
- B: 10%

**다변량 테스트** (3개 이상):
- A: 33%
- B: 33%
- C: 34%

## A/B 테스트 문서 템플릿

```markdown
# A/B 테스트 계획서

## 기본 정보

**테스트명**: [간단명료한 이름]
**담당자**: [이름]
**일정**: 2026.01.10 ~ 2026.01.20 (10일)
**상태**: 계획 중 / 실행 중 / 완료

## 1. 배경 및 목적

**현재 상황**:
결제 페이지의 전환율이 15%로, 업계 평균 20%보다 낮음

**문제**:
사용자 피드백에서 "버튼이 눈에 안 띈다"는 의견 다수

**목적**:
CTA 버튼의 가시성을 높여 결제 전환율 향상

## 2. 가설

**가설 1** (Primary):
CTA 버튼 크기를 키우면 클릭률이 증가하여 전환율이 상승할 것이다

**가설 2** (Secondary):
버튼이 커지면 시각적으로 더 눈에 띄어 결제 페이지 체류 시간이 감소할 것이다

## 3. 메트릭

### Primary Metric
- **전환율 (Conversion Rate)**
  - 정의: (결제 완료 / 결제 페이지 방문) × 100
  - 현재 값: 15%
  - 목표 값: 18% (3%p 증가)
  - 측정 도구: Google Analytics 4

### Secondary Metrics
- **클릭률 (CTR)**
  - 정의: (버튼 클릭 / 페이지 조회) × 100
  - 현재 값: 45%
  - 목표 값: 55%

- **평균 결제 시간**
  - 정의: 페이지 진입부터 완료까지 소요 시간
  - 현재 값: 180초
  - 목표 값: 150초

### Counter Metrics
- **이탈률 (Bounce Rate)**
  - 현재 값: 30%
  - 허용 범위: 35% 이하 (5%p 증가까지는 허용)

- **평균 주문 금액 (AOV)**
  - 현재 값: 50,000원
  - 허용 범위: 45,000원 이상 (10% 감소까지 허용)

## 4. 변형안 설계

### A안 (Control - 대조군)

**현재 버전**:
- 버튼 크기: 40px 높이
- 버튼 색상: #0066FF (파란색)
- 버튼 텍스트: "결제하기"
- 위치: 하단 고정

[스크린샷 또는 디자인 시안]

### B안 (Variant - 실험군)

**변경 사항**:
- 버튼 크기: 48px 높이 (20% 증가) ← 유일한 변경점
- 버튼 색상: #0066FF (동일)
- 버튼 텍스트: "결제하기" (동일)
- 위치: 하단 고정 (동일)

[스크린샷 또는 디자인 시안]

**변경 이유**:
모바일 환경에서 손가락 터치 영역을 고려한 최소 권장 크기 48px 적용

## 5. 실험 설계

### 샘플 크기
- 최소 필요 샘플: 각 그룹당 2,000명
- 예상 일 방문자: 500명
- 예상 테스트 기간: 8일
- 실제 테스트 기간: 10일 (버퍼 포함)

### 트래픽 분배
- A안 (Control): 50%
- B안 (Variant): 50%

### 랜덤화 방법
- User ID 기반 분배 (일관된 경험)
- 쿠키 유효 기간: 30일

### 제외 조건
- 첫 방문자 (신규 가입 중인 사용자)
- 모바일 웹 (앱만 대상)
- iOS 12 이하 (호환성 문제)

## 6. 성공 기준

### 최소 성공 기준 (Must Have)
- [ ] 전환율 17% 이상 (2%p 증가)
- [ ] 통계적 유의성 확보 (p < 0.05)
- [ ] Counter Metric 악화 없음

### 이상적 성공 기준 (Nice to Have)
- [ ] 전환율 18% 이상 (3%p 증가)
- [ ] 클릭률 10%p 이상 증가
- [ ] 결제 시간 20% 감소

### 실패 기준 (롤백)
- [ ] 전환율 14% 이하로 하락 (1%p 감소)
- [ ] 이탈률 35% 초과
- [ ] 사용자 불편 신고 급증

## 7. 실행 계획

### D-7 (준비)
- [ ] 디자인 시안 완성
- [ ] 개발 완료 및 QA
- [ ] A/B 테스트 도구 설정 (Firebase, Optimizely 등)
- [ ] 분석 대시보드 구축

### D-Day (시작)
- [ ] 트래픽 분배 시작
- [ ] 실시간 모니터링 설정
- [ ] 팀 공지

### D+1 ~ D+9 (진행)
- [ ] 매일 오전 데이터 체크
- [ ] 이상 징후 모니터링
  - 에러 급증
  - 한쪽 그룹 트래픽 쏠림
  - 통계 왜곡 (봇, 크롤러)

### D+10 (종료 및 분석)
- [ ] 테스트 중단
- [ ] 최종 데이터 추출
- [ ] 통계 분석
- [ ] 결과 리포트 작성
- [ ] 승자 결정 및 롤아웃

## 8. 리스크 및 대응

| 리스크 | 발생 가능성 | 영향도 | 대응 방안 |
|--------|-------------|--------|-----------|
| 큰 버튼이 오히려 부담스러움 | 중 | 중 | 3일차 데이터 모니터링, 악화 시 조기 종료 |
| 샘플 부족 (휴일 등) | 중 | 중 | 테스트 기간 연장 |
| 기술적 오류 | 낮 | 상 | 개발팀 대기, 즉시 롤백 가능하도록 |

## 9. 분석 계획

### 세그먼트 분석
전체 결과 외에 다음 세그먼트별로도 분석:
- 신규 vs 재방문 사용자
- 연령대별 (20대 / 30대 / 40대+)
- 디바이스별 (iOS / Android)

### 예상 시나리오

**시나리오 1**: B안 승리 (전환율 18%)
→ 즉시 전체 롤아웃

**시나리오 2**: 차이 없음 (전환율 15% 유지)
→ 다른 요소 테스트 (색상, 위치 등)

**시나리오 3**: A안 승리 (B안 하락)
→ 가설 재검토, 사용자 인터뷰

## 10. 결과 리포트 (테스트 후 작성)

### 요약
- [승자]: B안
- [핵심 메트릭 변화]: 전환율 15% → 17.5% (2.5%p 증가)
- [통계적 유의성]: p = 0.023 (유의미)
- [결정]: B안 전체 적용

### 상세 데이터

| 메트릭 | A안 | B안 | 차이 | p-value |
|--------|-----|-----|------|---------|
| 전환율 | 15.0% | 17.5% | +2.5%p | 0.023 |
| 클릭률 | 45% | 53% | +8%p | 0.011 |
| 평균 결제 시간 | 180초 | 165초 | -15초 | 0.041 |
| 이탈률 | 30% | 31% | +1%p | 0.234 (유의 X) |

### 세그먼트 인사이트

**재방문 사용자**:
- 효과 큼 (전환율 18% → 21%)
- 이미 프로세스에 익숙해서 버튼만 키워도 효과

**신규 사용자**:
- 효과 보통 (전환율 12% → 14%)
- 다른 개선 필요 (안내 문구, 튜토리얼 등)

### 학습 및 다음 액션

**학습한 것**:
- 버튼 크기는 전환율에 영향을 줌
- 특히 재방문 사용자에게 효과적
- Counter Metric에 부정적 영향 없음

**다음 테스트**:
- 신규 사용자를 위한 온보딩 개선
- 버튼 색상 테스트 (빨간색 vs 파란색)
```

## 체크리스트

A/B 테스트 시작 전:
- [ ] 명확한 가설 수립
- [ ] 메트릭 정의 및 측정 방법 확정
- [ ] 최소 샘플 크기 계산
- [ ] 변형안 디자인 완료
- [ ] 기술적 구현 완료
- [ ] 분석 도구 설정
- [ ] 팀 합의 및 승인

특수 목적 Skills

SKILL 11: Figma 연계 Skills

파일명: `figma-integration.md`

  
---
name: Figma 연계 Skills
description: 기획 내용을 Figma 작업에 최적화된 형식으로 변환
---

# Figma 연계 Skills

## Skill 11-1: Figma 디자인 브리프 생성기

### 사용 시점
디자이너에게 작업을 요청할 때

### 출력 형식

```markdown
# Figma 디자인 브리프

## 프로젝트 정보
- 프로젝트명: [프로젝트명]
- 화면 수: [N]개
- 마감일: [날짜]
- 우선순위: 높음/중간/낮음

## 디자인 목표
[이 화면이 달성해야 할 목표를 2-3문장으로]

## 타겟 사용자
- 페르소나: [이름], [나이], [특징]
- 사용 환경: [모바일/PC], [상황]

## 화면 목록 및 우선순위

| 화면명 | 우선순위 | 필요 요소 | 참고 사항 |
|--------|----------|-----------|-----------|
| 로그인 | P0 | 입력 필드 2개, 버튼 2개 | 소셜 로그인 아이콘 5개 |
| 홈 | P0 | 배너, 상품 카드, 네비게이션 | 무한 스크롤 |
| 상품 상세 | P0 | 이미지 갤러리, 정보 섹션 | 리뷰 영역 접기/펼치기 |

## 화면별 상세 요구사항

### 1. 로그인 화면

**레이아웃**:
```
┌─────────────────────┐
│                     │
│   [로고]            │  ← 상단 1/3
│                     │
│   [이메일 입력]     │
│   [비밀번호 입력]   │  ← 중앙
│                     │
│   [로그인 버튼]     │
│   [회원가입 버튼]   │
│                     │
│   [소셜 로그인]     │  ← 하단
│   [G] [K] [N] [F]   │
└─────────────────────┘
```

**컴포넌트 목록** (Figma에서 만들 컴포넌트):
- [ ] InputField (이메일)
  - Variant: default, focused, error
  - 크기: 너비 100%, 높이 48px
  
- [ ] InputField (비밀번호)
  - Variant: default, focused, error, visible/hidden
  - 아이콘: 눈 아이콘 (비밀번호 표시/숨김)
  
- [ ] PrimaryButton
  - 텍스트: "로그인"
  - 크기: 너비 100%, 높이 52px
  - Variant: default, disabled, loading

- [ ] SecondaryButton
  - 텍스트: "회원가입"
  - 크기: 너비 100%, 높이 52px

- [ ] SocialLoginButton
  - 5종: Google, Kakao, Naver, Facebook, Apple
  - 크기: 48px × 48px (아이콘만)
  - 정렬: 가운데, 간격 16px

**상태별 디자인**:
- Default (기본)
- Focused (입력 중)
- Error (오류 발생)
- Loading (로그인 중)

**인터랙션**:
- 입력 필드 탭: 테두리 색상 변경 + 레이블 위로 이동
- 로그인 버튼 탭: 로딩 스피너 표시
- 에러 시: 입력 필드 흔들림 애니메이션 + 빨간 테두리

## 디자인 시스템 참조

**색상**:
- Primary: #0066FF
- Secondary: #00D9C0
- Error: #FF3B30
- Background: #FFFFFF
- Text Primary: #1A1A1A
- Text Secondary: #8E8E93

**타이포그래피**:
- Heading 1: Inter Bold, 28px, Line height 34px
- Heading 2: Inter SemiBold, 20px, Line height 26px
- Body: Inter Regular, 16px, Line height 24px
- Caption: Inter Regular, 14px, Line height 20px

**간격**:
- 8px Grid System
- Padding: 16px, 24px, 32px
- Margin: 8px, 16px, 24px

**모서리**:
- 버튼: 12px
- 카드: 16px
- 입력 필드: 8px

## 반응형 가이드

**모바일 (360px ~ 428px)**:
- 1열 레이아웃
- 패딩: 좌우 16px
- 버튼: 전체 너비

**태블릿 (768px ~ 1024px)**:
- 2열 그리드
- 패딩: 좌우 32px
- 최대 너비: 640px (중앙 정렬)

**데스크톱 (1280px+)**:
- 화면 중앙에 400px 너비 카드
- 배경: 그라데이션 또는 이미지

## 애셋 제공 사항

**이미지**:
- 로고: SVG 형식
- 소셜 로그인 아이콘: SVG 형식, 48px × 48px
- 배경 (선택): JPG 또는 PNG, 1920px × 1080px

**아이콘**:
- 눈 아이콘 (비밀번호): 24px × 24px
- 체크 아이콘 (성공): 24px × 24px
- 경고 아이콘 (에러): 24px × 24px

## 접근성 요구사항

- [ ] 색상 대비비 4.5:1 이상
- [ ] 버튼 최소 크기 44px × 44px
- [ ] 포커스 인디케이터 명확히
- [ ] 에러 메시지는 색상 + 텍스트로 표시

## 참고 자료

**경쟁사 벤치마킹**:
- [링크 1]: 우아한형제들 로그인
- [링크 2]: 당근마켓 로그인

**영감 자료 (Pinterest, Dribbble)**:
- [링크 1]
- [링크 2]

## 질문 사항

디자인 시작 전 확인이 필요한 것:
- [ ] 로고 최종 확정되었는가?
- [ ] 브랜드 색상 확정되었는가?
- [ ] 소셜 로그인 5개 모두 필요한가?

## 피드백 프로세스

1. 초안 완성 후 공유 (Figma 링크)
2. 기획팀 검토 (2일 이내)
3. 수정 반영
4. 최종 승인
5. 개발 핸드오프

Skill 11-2: Figma 컴포넌트 명세서

사용 시점

디자인 시스템 구축 시, 디자이너와 개발자 간 소통

출력 형식

  
# Figma 컴포넌트 명세서

## Button 컴포넌트

### Variants

**Size**:
- Small: 높이 36px, 패딩 좌우 16px, 글자 14px
- Medium: 높이 44px, 패딩 좌우 20px, 글자 16px
- Large: 높이 52px, 패딩 좌우 24px, 글자 18px

**Type**:
- Primary: 배경 Primary 색상, 흰색 텍스트
- Secondary: 배경 투명, Primary 색상 테두리, Primary 텍스트
- Tertiary: 배경 투명, 테두리 없음, Primary 텍스트

**State**:
- Default
- Hover: 불투명도 90%
- Active: 불투명도 80%, 2px 아래로 이동
- Disabled: 불투명도 40%, 마우스 커서 not-allowed
- Loading: 스피너 표시, 텍스트 숨김

### 사용 예시

**Primary Button (Medium)**:
```
사용처: 주요 액션 (결제, 가입 등)
예시: "구매하기", "가입하기"
주의: 화면당 1개만 사용 권장
```

**Secondary Button (Medium)**:
```
사용처: 부가 액션 (취소, 뒤로가기 등)
예시: "취소", "나중에"
```

### Auto Layout 설정
- Direction: Horizontal
- Spacing: 8px (아이콘-텍스트 간격)
- Padding: 상하 12px, 좌우 [Size에 따라]
- Alignment: Center

### Properties (Figma)
- `text`: String
- `icon`: Boolean (아이콘 표시 여부)
- `iconPosition`: Enum (left, right)
- `fullWidth`: Boolean (전체 너비 여부)

### 개발 매핑

**React Component**:
```tsx
<Button
  size="medium"
  type="primary"
  disabled={false}
  loading={false}
  icon={<IconName />}
  onClick={handleClick}
>
  버튼 텍스트
</Button>
```

**CSS 클래스**:
```css
.button-primary-medium {
  height: 44px;
  padding: 0 20px;
  font-size: 16px;
  background: var(--color-primary);
  color: white;
  border-radius: 12px;
}
```

Skill 11-3: Figma 핸드오프 체크리스트

  
# Figma 핸드오프 체크리스트

## 디자인 완성도

### 화면 디자인
- [ ] 모든 필요 화면 완성
- [ ] 주요 상태 모두 디자인 (Default, Hover, Active, Disabled, Error, Loading)
- [ ] 빈 상태 (Empty State) 디자인
- [ ] 로딩 상태 디자인
- [ ] 에러 상태 디자인

### 반응형
- [ ] 모바일 (360px, 375px, 428px)
- [ ] 태블릿 (768px, 1024px)
- [ ] 데스크톱 (1280px, 1920px)

### 다크 모드 (필요시)
- [ ] 모든 화면 다크 모드 버전
- [ ] 색상 변수 설정

## 컴포넌트 정리

- [ ] 모든 반복 요소 컴포넌트화
- [ ] 컴포넌트 이름 명확히 (Button/Primary/Medium)
- [ ] 불필요한 컴포넌트 삭제
- [ ] Variant 정리 (일관된 명명)

## 스타일 가이드

- [ ] 색상: Variables로 정의
- [ ] 타이포그래피: Text Styles로 정의
- [ ] 간격: 8px Grid 준수
- [ ] 그림자: Effect Styles로 정의

## 애셋 준비

- [ ] 아이콘: SVG export
- [ ] 이미지: @1x, @2x, @3x
- [ ] 로고: SVG export
- [ ] 일러스트: SVG 또는 PNG

## 레이어 정리

- [ ] 레이어 이름 명확히
- [ ] 그룹화 (Frame으로)
- [ ] 순서 정리 (위에서 아래로)
- [ ] 숨김 레이어 삭제

## Annotation (주석)

- [ ] 인터랙션 설명 추가
- [ ] 조건부 표시 설명
- [ ] 애니메이션 설명
- [ ] 예외 상황 설명

## Dev Mode 설정

- [ ] Inspect 패널 확인
- [ ] CSS 코드 생성 확인
- [ ] 간격 및 크기 명시
- [ ] 색상 코드 확인

## 문서화

- [ ] README 페이지 작성
- [ ] 화면 플로우 다이어그램
- [ ] 컴포넌트 사용 가이드
- [ ] 변경 이력 (Changelog)

## 협업

- [ ] 개발팀 Figma 파일 접근 권한 부여
- [ ] 핸드오프 미팅 일정 잡기
- [ ] 질문 받을 시간 확보
```

SKILL 12: 발표 자료(PPT) 제작

파일명: `presentation-maker.md`

  
---
name: 발표 자료(PPT) 제작
description: 기획 내용을 설득력 있는 프레젠테이션으로 변환
---

# 발표 자료(PPT) 제작 Skill

## Skill 12-1: 경영진 보고용 PPT

### 사용 시점
- 프로젝트 제안
- 진행 상황 보고
- 예산 승인 요청

### 슬라이드 구조 (15분 발표 기준, 10-12장)

```markdown
## 표지 (Slide 1)

[프로젝트 로고 또는 핵심 이미지]

# 프로젝트명
## 부제: 한 문장 핵심 메시# 웹기획자를 위한 Claude Skills 샘플 모음집
## 바로 사용 가능한 실전 Skills

3. 어떻게 진행되는가 (실행 계획)
4. 얼마나 투자가 필요한가 (비용)
5. 기대 효과 (ROI)

---

## 배경 (Slide 3)

### 현재 상황
- [통계/데이터로 문제 제시]
- 예: "모바일 앱 사용률이 전년 대비 15% 감소"

### 문제점
- 핵심 문제 3가지 (불릿 포인트)
- 각 문제마다 구체적 수치 또는 사례

### 기회
- 이 문제를 해결하면 얻을 수 있는 것
- 시장 기회 또는 경쟁 우위

**비주얼**: 그래프, 차트, 경쟁사 비교표

---

## 솔루션 개요 (Slide 4)

### 핵심 아이디어
[한 문장으로 핵심 설명]
예: "AI 기반 개인화 추천으로 사용자 재방문율 2배 향상"

### 주요 기능 3가지
1. **[기능명]**
   - 설명: [한 줄]
   - 효과: [숫자로]
   
2. **[기능명]**
   - 설명
   - 효과
   
3. **[기능명]**
   - 설명
   - 효과

**비주얼**: 화면 목업, 인포그래픽

---

## 사용자 가치 (Slide 5)

### 타겟 사용자
- [페르소나 이름], [나이], [특징]
- [구체적 니즈]

### Before → After
| Before (현재) | After (개선 후) |
|---------------|----------------|
| 10분 소요 | 2분 소요 |
| 복잡한 5단계 | 간단한 2단계 |
| 만족도 60% | 만족도 90% |

**비주얼**: 사용자 여정 비교 다이어그램

---

## 시장 검증 (Slide 6)

### 경쟁사 분석
- 경쟁사 A: [강점], [약점]
- 경쟁사 B: [강점], [약점]
- **우리**: [차별화 포인트]

### 시장 기회
- 시장 규모: [X조원]
- 성장률: [Y%]
- 우리의 목표: [Z% 점유율]

**비주얼**: 포지셔닝 맵, 시장 점유율 차트

---

## 실행 계획 (Slide 7)

### 로드맵 (6개월)

**Phase 1 (1-2월)**: 기획 및 디자인
- 상세 기획서 완성
- UI/UX 디자인
- 기술 아키텍처 설계

**Phase 2 (3-4월)**: 개발
- 핵심 기능 개발
- 베타 테스트

**Phase 3 (5-6월)**: 출시 및 마케팅
- 정식 출시
- 초기 사용자 확보

**비주얼**: 간트 차트, 타임라인

---

## 필요 리소스 (Slide 8)

### 팀 구성
| 역할 | 인원 | 기간 |
|------|------|------|
| 기획자 | 2명 | 6개월 |
| 디자이너 | 1명 | 3개월 |
| 개발자 | 3명 | 4개월 |
| QA | 1명 | 2개월 |

### 예산
- 인건비: [X천만원]
- 서버 비용: [Y백만원]
- 마케팅: [Z천만원]
- **총 예산**: [합계]

---

## 기대 효과 (Slide 9)

### 정량적 효과
- 사용자 증가: +30% (3개월 내)
- 매출 증가: +15% (6개월 내)
- 운영 비용 절감: -20%

### 정성적 효과
- 브랜드 이미지 향상
- 사용자 만족도 증가
- 시장 경쟁력 강화

### ROI
투자: [X억원] → 기대 수익: [Y억원]
**ROI: [Z%]** (12개월 기준)

**비주얼**: ROI 계산 그래프, 성장 곡선

---

## 리스크 및 대응 (Slide 10)

| 리스크 | 확률 | 영향 | 대응 방안 |
|--------|------|------|-----------|
| 개발 지연 | 중 | 상 | 외부 인력 추가 투입 |
| 예산 초과 | 중 | 중 | 단계별 예산 검토 |
| 시장 반응 부진 | 낮 | 상 | 베타 테스트로 사전 검증 |

---

## 다음 단계 (Slide 11)

### 즉시 필요한 액션
1. **이번 주**: 예산 승인
2. **다음 주**: 팀 구성 시작
3. **2주 후**: 킥오프 미팅

### 의사결정 요청
- [ ] 프로젝트 승인
- [ ] 예산 [X억원] 승인
- [ ] 인력 배정

---

## Q&A (Slide 12)

# 질문 및 답변

[발표 후 받을 예상 질문 3-5개 준비]

**예상 질문 1**: 왜 지금인가?
**답변**: [시장 타이밍, 기술 준비도 등]

**예상 질문 2**: 경쟁사와의 차이는?
**답변**: [구체적 차별화 포인트]

---

## 부록 (추가 슬라이드, 필요 시만)

- 상세 기능 명세
- 기술 스택
- 상세 일정표
- 참고 자료

Skill 12-2: 팀 내부 공유용 PPT

구조 (30분 워크샵 형식, 15-20장)

  
## 표지

# 프로젝트명
## [Sprint/Phase] 공유

팀: [팀명]
발표자: [이름]
날짜: 2026.01.07

---

## 아젠다

1. 지난 스프린트 리뷰
2. 이번 스프린트 목표
3. 상세 기능 설명
4. 기술 이슈 논의
5. Q&A 및 피드백

---

## 지난 스프린트 리뷰

### 완료한 것 ✅
- [기능 1]: 예상 3일 → 실제 2.5일
- [기능 2]: 예상 5일 → 실제 5일
- [기능 3]: 예상 2일 → 실제 3일

### 미완료/이월 ⏭️
- [기능 4]: 70% 완료 → 이번 스프린트 이월
- 이유: [외부 API 지연]

### 배운 것 💡
- [인사이트 1]
- [인사이트 2]

---

## 이번 스프린트 목표

### 목표
Sprint 3: 결제 시스템 구축

### 핵심 스토리
- US-301: 장바구니 생성 (3 Story Points)
- US-302: 결제 수단 선택 (5 SP)
- US-303: PG 연동 (8 SP)
- US-304: 주문 완료 화면 (3 SP)

**총 Story Points**: 19 SP
**예상 기간**: 2주
**팀 Velocity**: 20 SP/2주 (여유 있음)

---

## 기능 1: 장바구니 생성

### 사용자 스토리
"사용자는 상품을 장바구니에 담아 나중에 구매할 수 있다"

### 인수 조건
- [ ] 상품 상세에서 "장바구니 담기" 버튼 클릭 가능
- [ ] 담긴 상품은 장바구니 화면에 목록 표시
- [ ] 수량 변경 가능 (1-99개)
- [ ] 개별 삭제 가능
- [ ] 전체 삭제 가능

### 와이어프레임
[화면 목업 이미지]

### 기술 스택
- Frontend: React, Redux
- Backend: Node.js, PostgreSQL
- API: RESTful

---

## 기능 1: 기술 상세

### API 설계
```
POST /api/cart
GET /api/cart
PUT /api/cart/:itemId
DELETE /api/cart/:itemId
```

### 데이터 모델
```
CartItem {
  id: UUID
  userId: UUID
  productId: UUID
  quantity: Integer
  addedAt: Timestamp
}
```

### 성능 요구사항
- 장바구니 조회: 500ms 이내
- 상품 추가: 300ms 이내

---

## (나머지 기능들도 같은 형식...)

---

## 기술 이슈 논의

### Issue 1: 결제 PG 선택
**문제**: 토스페이먼츠 vs 아임포트 vs 나이스페이

**비교**:
| 항목 | 토스 | 아임포트 | 나이스 |
|------|------|----------|--------|
| 수수료 | 2.9% | 3.0% | 3.3% |
| 개발 난이도 | 쉬움 | 보통 | 어려움 |
| 지원 결제수단 | 15종 | 20종 | 25종 |

**결정**: 토스페이먼츠 (개발 난이도 + 수수료)

### Issue 2: 재고 관리
[설명 및 해결 방안]

---

## 일정

### 주차별 계획

**Week 1** (1/8 - 1/12):
- 월: 장바구니 API 개발
- 화-수: 장바구니 UI 개발
- 목: 결제 수단 선택 UI
- 금: 코드 리뷰 및 QA

**Week 2** (1/15 - 1/19):
- 월-수: PG 연동 개발
- 목: 통합 테스트
- 금: 버그 수정 및 배포 준비

---

## 역할 분담

| 이름 | 역할 | 담당 기능 |
|------|------|-----------|
| 홍길동 | Frontend | 장바구니 UI |
| 김철수 | Backend | 장바구니 API |
| 이영희 | Backend | PG 연동 |
| 박민수 | QA | 테스트 케이스 작성 |

---

## 필요한 지원

### 디자인팀
- [ ] 결제 완료 화면 디자인 (마감: 1/10)
- [ ] 에러 상태 디자인 (마감: 1/12)

### 마케팅팀
- [ ] 결제 완료 안내 문구 검토
- [ ] 이메일 템플릿 제공

### 법무팀
- [ ] 결제 약관 검토

---

## 리스크

| 리스크 | 발생 시 | 대응 |
|--------|---------|------|
| PG 샌드박스 접근 지연 | 개발 막힘 | Mock API로 우선 개발 |
| 디자인 지연 | UI 개발 지연 | 임시 디자인으로 개발 진행 |

---

## 데모

[라이브 데모 또는 영상]

---

## Q&A 및 피드백

### 질문 환영
- 기능 관련
- 기술 관련
- 일정 관련

### 피드백 부탁드립니다
- 개선할 점
- 추가로 고려해야 할 것

Skill 12-3: PPT 디자인 가이드

  
# PPT 디자인 가이드

## 레이아웃 원칙

### 1. 여백 활용
- 슬라이드 가장자리에서 최소 1cm 여백
- 텍스트와 이미지 사이 충분한 간격
- "빽빽함"보다 "여유로움"

### 2. 시각적 계층
- 제목 > 부제 > 본문 순으로 크기/굵기 차이
- 가장 중요한 메시지가 가장 눈에 띄게

### 3. 정렬
- 모든 요소를 정렬선에 맞추기
- 좌/우, 상/하 정렬 일관성
- 중앙 정렬은 제목에만

## 색상 사용

### 메인 색상
- Primary: 브랜드 색상 (로고, 강조)
- Accent: 포인트 색상 (차트, 아이콘)
- Neutral: 회색 계열 (텍스트, 배경)

### 색상 규칙
- 슬라이드당 최대 3-4가지 색상
- 배경과 텍스트는 충분한 대비
- 색맹 고려 (빨강-초록 조합 피하기)

## 타이포그래피

### 폰트 선택
- 제목: 고딕체, Bold
- 본문: 고딕체, Regular
- 숫자: 산세리프체

### 크기
- 제목: 32-40pt
- 부제: 24-28pt
- 본문: 18-22pt
- 캡션: 14-16pt

### 가독성
- 한 줄에 최대 10-12단어
- 줄간격: 1.2-1.5배
- 텍스트 블록은 좌측 정렬

## 이미지 사용

### 선택 기준
- 고해상도 (최소 1920x1080)
- 메시지와 관련성
- 저작권 확인 (Unsplash, Pexels 등)

### 배치
- 텍스트 위에 이미지 올릴 때: 어두운 오버레이 추가
- 이미지 크롭: 중요한 부분이 보이도록
- 여러 이미지: 같은 크기/스타일로 통일

## 차트/그래프

### 원칙
- 한 슬라이드에 하나의 차트
- 축과 범례 명확히
- 색상으로 강조하고 싶은 데이터 구분

### 유형 선택
- 비교: 막대 그래프
- 추세: 선 그래프
- 비율: 원 그래프 (5개 이하 항목)
- 분포: 산점도

## 애니메이션

### 사용 규칙
- 꼭 필요할 때만
- 과하지 않게 (Fade, Appear 정도)
- 발표 흐름을 돕는 목적

### 피해야 할 것
- 회전, 바운스 등 화려한 효과
- 너무 빠르거나 느린 속도
- 모든 요소에 애니메이션

## 슬라이드 수

### 시간별 권장
- 5분 발표: 5-7장
- 15분 발표: 10-12장
- 30분 발표: 15-20장
- 1시간 발표: 30-40장

**원칙**: 1장당 1분 (여유있게)

SKILL 13: 인터랙티브 프로토타입

파일명: `interactive-prototype.md`

  
---
name: 인터랙티브 프로토타입
description: 클릭 가능한 HTML 프로토타입 생성
---

# 인터랙티브 프로토타입 Skill

## 사용 시점
- 기능을 실제로 체험해보고 싶을 때
- 이해관계자에게 데모를 보여줄 때
- 사용자 테스트를 진행할 때

## 프로토타입 수준

### Level 1: 화면 연결 (Clickthrough)
- 버튼 클릭 시 다음 화면으로 이동
- 실제 데이터 없음, 정적 콘텐츠
- 플로우 검증 목적

### Level 2: 인터랙션 추가
- 입력 필드 작동
- 탭 전환
- 모달 열기/닫기
- 드롭다운 메뉴

### Level 3: 데이터 시뮬레이션
- 로컬 스토리지 사용
- 가짜 데이터로 CRUD
- 간단한 상태 관리

## 프로토타입 요청 템플릿

```markdown
"[기능명]의 인터랙티브 프로토타입을 만들어줘"

포함할 화면:
1. [화면 1]: [설명]
2. [화면 2]: [설명]
3. [화면 3]: [설명]

주요 인터랙션:
- [인터랙션 1]: 예) 버튼 클릭 시 모달 열림
- [인터랙션 2]: 예) 폼 입력 후 제출
- [인터랙션 3]: 예) 탭 전환

디자인 스타일:
- 색상: [Primary 색상]
- 폰트: [폰트명]
- 톤: 미니멀/모던/캐주얼 등

테스트 시나리오:
"사용자가 [행동]을 하면 [결과]가 보여야 함"
```

## 실제 사용 예시

### 예시 1: 로그인 화면 프로토타입

**요청**:
```
로그인 화면의 인터랙티브 프로토타입을 만들어줘.

포함할 요소:
- 이메일 입력 필드
- 비밀번호 입력 필드
- "로그인" 버튼
- "회원가입" 링크
- 소셜 로그인 버튼 (Google, Kakao)

인터랙션:
- 입력 필드 포커스 시 테두리 색상 변경
- 빈 필드로 로그인 시도 시 에러 메시지
- 올바른 입력 시 "로그인 성공" 메시지
- 회원가입 클릭 시 회원가입 화면으로 (시뮬레이션)

디자인:
- Primary: #0066FF
- 깔끔한 모던 스타일
- 모바일 우선 (375px 너비)
```

**Claude가 생성하는 HTML Artifact**:
```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #F5F5F5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            background: white;
            padding: 40px 30px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 400px;
        }
        .logo {
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            color: #0066FF;
            margin-bottom: 40px;
        }
        .input-group {
            margin-bottom: 20px;
        }
        .input-group label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        .input-group input {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #E0E0E0;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }
        .input-group input:focus {
            outline: none;
            border-color: #0066FF;
        }
        .input-group input.error {
            border-color: #FF3B30;
        }
        .error-message {
            color: #FF3B30;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }
        .error-message.show {
            display: block;
        }
        .btn-primary {
            width: 100%;
            padding: 16px;
            background: #0066FF;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }
        .btn-primary:hover {
            background: #0052CC;
        }
        .btn-primary:active {
            transform: scale(0.98);
        }
        .divider {
            text-align: center;
            margin: 30px 0;
            position: relative;
        }
        .divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #E0E0E0;
        }
        .divider span {
            position: relative;
            background: white;
            padding: 0 16px;
            color: #999;
            font-size: 14px;
        }
        .social-login {
            display: flex;
            gap: 10px;
        }
        .social-btn {
            flex: 1;
            padding: 12px;
            border: 2px solid #E0E0E0;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        .social-btn:hover {
            border-color: #0066FF;
        }
        .signup-link {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
        .signup-link a {
            color: #0066FF;
            text-decoration: none;
            font-weight: bold;
        }
        .success-message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #34C759;
            color: white;
            padding: 16px 24px;
            border-radius: 8px;
            display: none;
            animation: slideDown 0.3s;
        }
        .success-message.show {
            display: block;
        }
        @keyframes slideDown {
            from { transform: translateX(-50%) translateY(-100%); }
            to { transform: translateX(-50%) translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">🚀 MyApp</div>
        
        <form id="loginForm">
            <div class="input-group">
                <label for="email">이메일</label>
                <input type="email" id="email" placeholder="example@email.com">
                <div class="error-message" id="emailError">이메일을 입력해주세요</div>
            </div>
            
            <div class="input-group">
                <label for="password">비밀번호</label>
                <input type="password" id="password" placeholder="비밀번호 입력">
                <div class="error-message" id="passwordError">비밀번호를 입력해주세요</div>
            </div>
            
            <button type="submit" class="btn-primary">로그인</button>
        </form>
        
        <div class="divider">
            <span>또는</span>
        </div>
        
        <div class="social-login">
            <button class="social-btn" onclick="socialLogin('Google')">
                🔵 Google
            </button>
            <button class="social-btn" onclick="socialLogin('Kakao')">
                🟡 Kakao
            </button>
        </div>
        
        <div class="signup-link">
            계정이 없으신가요? <a href="#" onclick="goToSignup()">회원가입</a>
        </div>
    </div>
    
    <div class="success-message" id="successMessage">
        ✅ 로그인 성공!
    </div>
    
    <script>
        const form = document.getElementById('loginForm');
        const emailInput = document.getElementById('email');
        const passwordInput = document.getElementById('password');
        const emailError = document.getElementById('emailError');
        const passwordError = document.getElementById('passwordError');
        const successMessage = document.getElementById('successMessage');
        
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 에러 초기화
            emailInput.classList.remove('error');
            passwordInput.classList.remove('error');
            emailError.classList.remove('show');
            passwordError.classList.remove('show');
            
            let hasError = false;
            
            // 유효성 검사
            if (!emailInput.value.trim()) {
                emailInput.classList.add('error');
                emailError.classList.add('show');
                hasError = true;
            }
            
            if (!passwordInput.value.trim()) {
                passwordInput.classList.add('error');
                passwordError.classList.add('show');
                hasError = true;
            }
            
            // 에러가 없으면 로그인 성공
            if (!hasError) {
                successMessage.classList.add('show');
                setTimeout(() => {
                    successMessage.classList.remove('show');
                    // 실제로는 여기서 다음 페이지로 이동
                    alert('홈 화면으로 이동합니다 (프로토타입)');
                }, 2000);
            }
        });
        
        function socialLogin(platform) {
            alert(`${platform} 로그인 (프로토타입)`);
            successMessage.textContent = `✅ ${platform}으로 로그인 성공!`;
            successMessage.classList.add('show');
            setTimeout(() => {
                successMessage.classList.remove('show');
            }, 2000);
        }
        
        function goToSignup() {
            alert('회원가입 화면으로 이동 (프로토타입)');
        }
    </script>
</body>
</html>
```

### 예시 2: 상품 필터링 프로토타입

**요청**:
```
상품 목록 필터링 기능의 프로토타입을 만들어줘.

기능:
- 카테고리 필터 (전체, 의류, 뷰티, 리빙)
- 가격 범위 슬라이더
- 정렬 (인기순, 낮은 가격순, 높은 가격순)
- 필터 적용 시 실시간 결과 업데이트

데이터:
10개 정도의 가짜 상품 데이터

디자인:
- 깔끔한 카드 레이아웃
- 2열 그리드
- 모바일 최적화
```

**결과**: Claude가 필터링 로직이 포함된 완전히 작동하는 프로토타입 생성

---

## 프로토타입 테스트 가이드

### 테스트 시나리오 작성

```markdown
## 시나리오 1: 로그인 플로우

### 목표
신규 사용자가 계정을 만들고 로그인하기

### 단계
1. 회원가입 버튼 클릭
2. 이메일과 비밀번호 입력
3. 가입 완료
4. 로그인 화면에서 방금 만든 계정으로 로그인
5. 홈 화면 도달

### 예상 소요 시간
2분 이내

### 성공 기준
- 모든 단계 완료 가능
- 에러 메시지 명확함
- 직관적인 플로우

## 시나리오 2: 상품 검색 및 구매

[비슷한 형식으로 작성]
```

### 사용자 테스트 진행

1. **테스터 모집**: 타겟 사용자 5-10명
2. **환경 준비**: 프로토타입 링크 공유
3. **시나리오 제공**: 위의 시나리오 문서
4. **관찰**: 테스터가 진행하는 모습 녹화 (허락 시)
5. **인터뷰**: 테스트 후 피드백 수집

### 수집할 데이터

**정량**:
- 작업 완료율
- 소요 시간
- 클릭 횟수
- 에러 발생 횟수

**정성**:
- 이해하기 어려운 부분
- 기대와 다른 동작
- 개선 제안

---

## 체크리스트

프로토타입 완성 후 확인:
- [ ] 주요 플로우 모두 작동
- [ ] 모바일에서 테스트 완료
- [ ] 에러 상태 구현
- [ ] 로딩 상태 표시
- [ ] 실제 사용 시나리오 반영
- [ ] 이해관계자 피드백 반영
```

마무리

이 문서는 웹기획자가 Claude Skills를 활용하여 업무 효율을 극대화할 수 있도록 설계된 실전 가이드입니다.

사용 순서 추천

1주차: 초급 Skills (1-3번)

회의록 정리
간단한 기획서
이메일 작성

2-3주차: 중급 Skills (4-7번)

요구사항 정의서
사용자 시나리오
경쟁사 분석
UX Writing

4주차 이후: 고급 및 특수 Skills (8-13번)

정보구조 설계
개발 명세서
A/B 테스트
Figma 연계
PPT 제작
인터랙티브 프로토타입

각 Skill을 Claude에 적용하는 방법

Skill 내용을 복사합니다
Claude.ai에서 새 대화 시작
“이 Skill을 사용해서 [작업]을 해줘”라고 요청
또는 Claude.ai 설정에서 Custom Skill로 업로드

다음 단계

이 Skills 샘플을 기반으로:

자신의 업무에 맞게 커스터마이징
팀원들과 공유 및 개선
회사의 표준 템플릿으로 발전

Good Luck! 🚀</parameter>

Claude에서 PPT 작업하는 3가지 방법

방법 1: 마크다운으로 내용 생성 → PowerPoint로 변환

Skill 파일에 양식 정의:

  
---
name: Company PPT Template
description: 회사 표준 PPT 양식
---

# 회사 PPT 양식

## 슬라이드 구조

### 표지
- 로고 위치: 좌측 상단
- 제목: 중앙, 48pt, 굵게
- 부제: 중앙, 24pt
- 발표자/날짜: 우측 하단

### 목차
- 제목: "목차" (좌측 상단)
- 번호 리스트 (좌측 정렬)
- 각 항목은 2줄 이내

### 내용 슬라이드
- 제목: 상단, 32pt
- 본문: 3-5 불릿 포인트
- 이미지 영역: 우측 또는 하단
- 페이지 번호: 우측 하단

## 디자인 가이드

### 색상
- Primary: #0066FF
- Secondary: #00D9C0
- Text: #1A1A1A
- Background: #FFFFFF

### 폰트
- 제목: Pretendard Bold
- 본문: Pretendard Regular

### 레이아웃 규칙
- 여백: 상하좌우 2cm
- 제목과 본문 간격: 1cm
- 불릿 포인트 간격: 0.5cm

사용 방법:

"Company PPT Template Skill을 사용해서 
'AI 도입 제안서' 발표 자료를 만들어줘. 
총 10장, 15분 발표용"

Claude 출력 (마크다운):

  
# Slide 1: 표지
---
제목: AI 도입 제안서
부제: 업무 효율 3배 향상 프로젝트
발표자: 홍길동
날짜: 2026.01.08

[디자인 노트]
- 배경: 화이트
- 로고: 좌측 상단 배치
- 제목 색상: #0066FF

---

# Slide 2: 목차
---
1. 현재 문제점
2. AI 도입 필요성
3. 제안 솔루션
4. 기대 효과
5. 실행 계획

---

# Slide 3: 현재 문제점
---
## 업무 비효율 현황

• 반복 작업에 주당 15시간 소요
• 문서 작성 일관성 부족
• 팀 간 커뮤니케이션 비용 증가

[그래프 영역]
- 막대 그래프: 업무별 시간 소요
- 데이터: 반복작업 40%, 회의 25%, 문서작성 20%...

PowerPoint로 변환:

이 마크다운을 복사
PowerPoint 열기
템플릿 선택 (또는 빈 프레젠테이션)
각 슬라이드에 내용 붙여넣기
회사 디자인 가이드 적용

방법 2: HTML 프레젠테이션 (Reveal.js) - 즉시 사용 가능

Skill 정의 + 즉시 생성:

Claude에게 요청:

"회사 디자인으로 HTML 프레젠테이션을 만들어줘.

양식:
- Primary 색상: #0066FF
- 폰트: Pretendard
- 슬라이드 전환: 페이드

내용:
1. 표지: 'AI 도입 제안서'
2. 목차
3. 문제점 (3가지)
4. 솔루션 (핵심 기능 3가지)
5. ROI 분석 (표 형식)
6. 일정
7. Q&A

Reveal.js 사용해서 바로 볼 수 있게 만들어줘"

Claude가 생성하는 Artifact (HTML):

  
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AI 도입 제안서</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/white.css">
  <style>
    :root {
      --primary-color: #0066FF;
      --text-color: #1A1A1A;
    }
    
    .reveal h1, .reveal h2 {
      color: var(--primary-color);
      font-family: 'Pretendard', sans-serif;
    }
    
    .reveal {
      font-family: 'Pretendard', sans-serif;
      font-size: 32px;
    }
    
    .reveal .slides section {
      text-align: left;
      padding: 40px;
    }
    
    .title-slide {
      text-align: center !important;
    }
    
    .title-slide h1 {
      font-size: 72px;
      margin-bottom: 20px;
    }
    
    /* 표 스타일 */
    table {
      width: 100%;
      border-collapse: collapse;
    }
    
    th {
      background: var(--primary-color);
      color: white;
      padding: 15px;
    }
    
    td {
      padding: 15px;
      border-bottom: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      
      <!-- Slide 1: 표지 -->
      <section class="title-slide">
        <h1>AI 도입 제안서</h1>
        <h3>업무 효율 3배 향상 프로젝트</h3>
        <p style="margin-top: 100px;">
          <small>발표자: 홍길동 | 2026.01.08</small>
        </p>
      </section>
      
      <!-- Slide 2: 목차 -->
      <section>
        <h2>목차</h2>
        <ol style="font-size: 36px; line-height: 1.8;">
          <li>현재 문제점</li>
          <li>AI 도입 필요성</li>
          <li>제안 솔루션</li>
          <li>기대 효과 (ROI)</li>
          <li>실행 계획</li>
        </ol>
      </section>
      
      <!-- Slide 3: 문제점 -->
      <section>
        <h2>현재 문제점</h2>
        <ul style="font-size: 32px; line-height: 1.8;">
          <li>⏰ 반복 작업에 주당 15시간 소요</li>
          <li>📝 문서 작성 일관성 부족</li>
          <li>💬 팀 간 커뮤니케이션 비용 증가</li>
        </ul>
        <div style="margin-top: 50px; text-align: center;">
          <p style="font-size: 48px; color: var(--primary-color); font-weight: bold;">
            → 생산성 40% 저하
          </p>
        </div>
      </section>
      
      <!-- Slide 4: 솔루션 -->
      <section>
        <h2>제안 솔루션</h2>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px;">
          <div style="background: #f5f5f5; padding: 30px; border-radius: 10px;">
            <h3 style="color: var(--primary-color);">🤖 AI 문서 생성</h3>
            <p>기획서, 보고서 자동 작성</p>
          </div>
          <div style="background: #f5f5f5; padding: 30px; border-radius: 10px;">
            <h3 style="color: var(--primary-color);">📊 데이터 분석</h3>
            <p>자동 인사이트 도출</p>
          </div>
          <div style="background: #f5f5f5; padding: 30px; border-radius: 10px;">
            <h3 style="color: var(--primary-color);">💡 아이디어 발굴</h3>
            <p>브레인스토밍 지원</p>
          </div>
          <div style="background: #f5f5f5; padding: 30px; border-radius: 10px;">
            <h3 style="color: var(--primary-color);">✅ 품질 검증</h3>
            <p>자동 리뷰 및 개선안</p>
          </div>
        </div>
      </section>
      
      <!-- Slide 5: ROI -->
      <section>
        <h2>기대 효과 (ROI)</h2>
        <table style="margin-top: 30px;">
          <thead>
            <tr>
              <th>항목</th>
              <th>현재</th>
              <th>AI 도입 후</th>
              <th>개선율</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>기획서 작성 시간</td>
              <td>3일</td>
              <td>1일</td>
              <td style="color: var(--primary-color); font-weight: bold;">▼ 67%</td>
            </tr>
            <tr>
              <td>회의 준비 시간</td>
              <td>2시간</td>
              <td>30분</td>
              <td style="color: var(--primary-color); font-weight: bold;">▼ 75%</td>
            </tr>
            <tr>
              <td>주간 절약 시간</td>
              <td>-</td>
              <td>15시간</td>
              <td style="color: var(--primary-color); font-weight: bold;">+37.5%</td>
            </tr>
          </tbody>
        </table>
        <p style="margin-top: 40px; text-align: center; font-size: 42px;">
          <strong style="color: var(--primary-color);">ROI: 6개월 내 300%</strong>
        </p>
      </section>
      
      <!-- Slide 6: 일정 -->
      <section>
        <h2>실행 계획</h2>
        <div style="margin-top: 40px;">
          <div style="margin-bottom: 30px;">
            <h3 style="color: var(--primary-color);">Phase 1 (1-2월)</h3>
            <ul>
              <li>팀 교육 및 온보딩</li>
              <li>파일럿 프로젝트 (기획팀)</li>
            </ul>
          </div>
          <div style="margin-bottom: 30px;">
            <h3 style="color: var(--primary-color);">Phase 2 (3-4월)</h3>
            <ul>
              <li>전사 확대 적용</li>
              <li>Skills 라이브러리 구축</li>
            </ul>
          </div>
          <div>
            <h3 style="color: var(--primary-color);">Phase 3 (5-6월)</h3>
            <ul>
              <li>성과 측정 및 최적화</li>
              <li>고급 기능 도입</li>
            </ul>
          </div>
        </div>
      </section>
      
      <!-- Slide 7: Q&A -->
      <section class="title-slide">
        <h1>Q&A</h1>
        <p style="font-size: 36px; margin-top: 100px;">
          질문 있으신가요?
        </p>
      </section>
      
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
  <script>
    Reveal.initialize({
      hash: true,
      transition: 'fade',
      controls: true,
      progress: true,
      center: false,
      width: 1280,
      height: 720,
    });
  </script>
</body>
</html>

장점:

✅ 즉시 브라우저에서 프레젠테이션 가능
✅ 키보드 화살표로 슬라이드 넘기기
✅ 모바일/태블릿에서도 작동
✅ PDF로 출력 가능 (브라우저 인쇄 기능)

방법 3: Google Slides API 연동 (고급)

실무 워크플로우:

  
Skill에서 슬라이드 내용 생성
Google Slides API로 자동 생성
회사 템플릿 자동 적용

Skill 정의:

  
---
name: Google Slides Generator
description: Google Slides로 자동 생성
---

# Google Slides 생성 Skill

## 출력 형식

JSON 형식으로 슬라이드 데이터 생성:

```json
{
  "presentation": {
    "title": "프레젠테이션 제목",
    "theme": "company_template",
    "slides": [
      {
        "type": "title",
        "title": "메인 제목",
        "subtitle": "부제목"
      },
      {
        "type": "content",
        "title": "슬라이드 제목",
        "bullets": [
          "포인트 1",
          "포인트 2"
        ]
      },
      {
        "type": "table",
        "title": "데이터 테이블",
        "data": [...]
      }
    ]
  }
}

템플릿 ID

경영진 보고용: 1a2b3c4d5e
팀 공유용: 6f7g8h9i0j
외부 발표용: k1l2m3n4o5 ```

사용 시:

  
# Claude Code에서
import json
from google.oauth2 import service_account
from googleapiclient.discovery import build

# 1. Claude에게 내용 생성 요청
presentation_data = claude.generate_slides_content(
    topic="AI 도입 제안",
    template="company_template"
)

# 2. Google Slides API로 생성
slides_service = build('slides', 'v1', credentials=creds)
presentation = slides_service.presentations().create(
    body=presentation_data
).execute()

print(f"프레젠테이션 생성 완료: {presentation['presentationId']}")

실전 팁: 양식 재사용하기

방법 A: 프로젝트에 양식 저장

Claude.ai에서:

프로젝트 생성: “발표 자료 제작”
Project Knowledge에 추가:

# 우리 회사 PPT 표준 양식

[위의 양식 내용 전체 붙여넣기]

사용: 해당 프로젝트에서 대화 시작

"표준 양식으로 신제품 출시 발표 자료 만들어줘 (12장)"

방법 B: 슬래시 명령어로 빠른 호출

# .claude/commands/ppt.md

표준 PPT 양식으로 프레젠테이션을 만듭니다.

사용법: /ppt [제목] [슬라이드 수] [발표 시간]

예: /ppt "신제품 출시" 15 "20분"

[양식 정의...]

방법 C: Skills 파일로 관리

  
.claude/
├── skills/
│   └── company-ppt/
│       ├── skill.md          # 메인 양식
│       ├── templates/
│       │   ├── executive.md  # 경영진용
│       │   ├── internal.md   # 내부용
│       │   └── external.md   # 외부용
│       └── examples/
│           └── sample.md     # 예시

1. Claude.ai (웹/데스크탑 앱) 사용 시

Claude.ai의 ‘Upgraded file creation’ (실험실 기능)을 활용하는 방법입니다.

양식 정의: 사용자가 평소 사용하는 기업 표준 PPT 템플릿(.pptx) 파일 자체가 정의서가 됩니다.
호출 및 사용 방법:
1. 설정: Settings -> Features -> Experimental에서 “Upgraded file creation and analysis”를 활성화합니다.
2. 업로드: 채팅창에 자신의 PPT 템플릿 파일을 업로드합니다.
3. 호출: “첨부된 템플릿의 디자인과 레이아웃을 유지하면서 [주제]에 대한 발표 자료를 만들어줘”라고 요청합니다.
4. 결과: Claude가 내부적으로 Python 코드를 실행하여 템플릿의 슬라이드 마스터와 스타일을 분석한 뒤, 그 양식에 맞춰 내용을 채운 새 PPT 파일을 생성해 줍니다.

2. Claude Code 및 Agent Skills (개발자용)

터미널 기반의 Claude Code나 API를 사용할 때는 ‘Skill’이라는 단위로 기능을 호출합니다.

양식 정의:
SKILL.md: 기술의 사용법과 워크플로우를 정의하는 문서입니다. 여기에 “템플릿의 특정 인덱스 슬라이드를 복제하라”는 식의 로직을 기술합니다.
Python 스크립트: 실제 PPT를 조작하는 python-pptx 라이브러리 기반의 코드를 작성하여 양식을 제어합니다.
호출 및 사용 방법:
내장 Skill 호출: Claude Code에서 별도의 설정 없이 “Create a presentation from template.pptx”라고 명령하면, Anthropic이 제공하는 기본 pptx Skill이 실행됩니다.
사용자 정의 Skill: public/pptx/SKILL.md와 같은 경로에 자신만의 템플릿 처리 로직을 담은 Skill을 생성하고, Claude에게 “이 Skill을 사용해서 PPT를 만들어”라고 지시할 수 있습니다.

[표] 방식별 비교

구분	Claude.ai (웹)	Claude Code / Agent Skills
주요 대상	일반 사용자	개발자 및 파워 유저
양식 지정	파일 직접 업로드	`SKILL.md` 및 소스 코드 정의
제어 방식	자연어 프롬프트	CLI 명령어 및 스크립트 실행
핵심 라이브러리	(비공개)	`python-pptx`, `PptxGenJS` 등

3. 실무 팁: ‘Artifacts’를 활용한 양식 정의

파일을 직접 생성하기 전에 HTML/React(Artifacts) 기능을 사용하여 레이아웃을 먼저 정의할 수도 있습니다.

Claude에게 “McKinsey 스타일의 16:9 슬라이드 레이아웃을 React Artifact로 먼저 보여줘”라고 요청합니다.
디자인이 마음에 들면 “이 레이아웃 구조 그대로 PPT 파일로 변환해줘”라고 요청하여 최종 결과물을 얻는 방식이 가장 가독성이 높습니다.

주의: 현재 이 기능들은 점진적으로 배포 중이므로, 설정에서 해당 옵션이 보이지 않는다면 상위 플랜(Pro, Team 등) 사용 여부를 확인해 보시기 바랍니다.

더 구체적으로 어떤 라이브러리(python-pptx 등)를 사용한 코드 예시가 궁금하신가요?

Claude Code로 PPT 자동화하는 방법 이 영상은 Claude Code의 기술(Skills)을 활용하여 PPT와 같은 문서 생성 과정을 자동화하고 역설계하는 구체적인 워크플로우를 설명해 줍니다.

AI, Agent Skills

AI claude-code claude-skills Claude.write

바로 사용 가능한 실전 Skills

📚 목차

초급 Skills (입문자용)

중급 Skills (일상 업무용)

고급 Skills (전문 작업용)

특수 목적 Skills

초급 Skills (입문자용)

SKILL 1: 회의록 자동 정리

파일명: meeting-notes.md

SKILL 2: 간단한 기획서 템플릿

파일명: simple-spec.md

SKILL 3: 이메일 작성 도우미

파일명: email-writer.md

중급 Skills (일상 업무용)

SKILL 4: 상세 요구사항 정의서

파일명: requirements-spec.md

SKILL 5: 사용자 시나리오 생성기

파일명: user-scenario.md

SKILL 6: 경쟁사 분석 리포트

파일명: competitor-analysis.md

SKILL 7: UX Writing 가이드

파일명: ux-writing.md

고급 Skills (전문 작업용)

SKILL 8: 정보구조(IA) 설계

파일명: information-architecture.md

SKILL 9: 개발자용 명세서 변환기

파일명: dev-spec-converter.md

SKILL 10: A/B 테스트 설계

파일명: ab-test-design.md

특수 목적 Skills

SKILL 11: Figma 연계 Skills

파일명: figma-integration.md

Skill 11-2: Figma 컴포넌트 명세서

사용 시점

출력 형식

Skill 11-3: Figma 핸드오프 체크리스트

SKILL 12: 발표 자료(PPT) 제작

파일명: presentation-maker.md

Skill 12-2: 팀 내부 공유용 PPT

구조 (30분 워크샵 형식, 15-20장)

Skill 12-3: PPT 디자인 가이드

SKILL 13: 인터랙티브 프로토타입

파일명: interactive-prototype.md

마무리

사용 순서 추천

각 Skill을 Claude에 적용하는 방법

다음 단계

Claude에서 PPT 작업하는 3가지 방법

방법 1: 마크다운으로 내용 생성 → PowerPoint로 변환

방법 2: HTML 프레젠테이션 (Reveal.js) - 즉시 사용 가능

방법 3: Google Slides API 연동 (고급)

템플릿 ID

실전 팁: 양식 재사용하기

방법 A: 프로젝트에 양식 저장

방법 B: 슬래시 명령어로 빠른 호출

방법 C: Skills 파일로 관리

추천 워크플로우

1. Claude.ai (웹/데스크탑 앱) 사용 시

2. Claude Code 및 Agent Skills (개발자용)

[표] 방식별 비교

3. 실무 팁: ‘Artifacts’를 활용한 양식 정의

인기 태그

파일명: `meeting-notes.md`

파일명: `simple-spec.md`

파일명: `email-writer.md`

파일명: `requirements-spec.md`

파일명: `user-scenario.md`

파일명: `competitor-analysis.md`

파일명: `ux-writing.md`

파일명: `information-architecture.md`

파일명: `dev-spec-converter.md`

파일명: `ab-test-design.md`

파일명: `figma-integration.md`

파일명: `presentation-maker.md`

파일명: `interactive-prototype.md`