# SlideLab · AI 에이전트 가이드

> AI 에이전트(Claude Code, ChatGPT, Cursor, Gemini CLI 등)가 이 템플릿 시스템을 참고해
> **일관된 디자인의 슬라이드**를 만들 때 읽는 단일 가이드다. 사람은 디자인을 고르고,
> AI는 정해진 시스템 안에서 슬라이드를 조립한다.

---

## 0. SlideLab가 해결하는 문제

AI가 "멋진 슬라이드를 만들어줘"라는 요청을 받으면 매번 색·폰트·간격·레이아웃을 새로
정하느라 결과가 들쭉날쭉하다. SlideLab는 **디자인 결정을 미리 토큰과 CSS로 고정**해 두고,
AI에게는 "구조(클래스명 + `data-*`)를 채우는 일"만 남긴다. 에이전트는 디자인을 만들지 않고
**콘텐츠를 올바른 슬라이드 유형에 배치**하는 일에만 집중한다.

- **5개 디자인 프리셋**(`data-theme`) — 색·폰트·분위기를 한 번에 결정
- **14개 슬라이드 유형**(`data-template`) — 목적별 레이아웃
- **정적 HTML/CSS** — 복사하면 어디서든 동작, 빌드 불필요

---

## 1. 5단계 사용 흐름

새 발표자료(덱)를 만들 때 이 순서를 따른다.

### STEP 1 — 목적 파악 → 프리셋(톤) 선택
발표의 목적에 따라 **하나의 프리셋**을 고르고, 덱 전체에 통일한다.

| 목적 | 프리셋 (`data-theme`) | 분위기 |
|---|---|---|
| 보고서·제안서·전략 발표 | `modern-business` | 신뢰 · 단정 (네이비 + 골드) |
| AI·개발·데이터 발표 | `dark-tech` | 기술 · 강대비 (다크 + 라임/시안) |
| 강의·실습 교안 | `education-clean` | 밝음 · 가독 (스카이) |
| 투자·제품 피치 | `startup-pitch` | 역동 · 임팩트 (마젠타 + 오렌지) |
| 리서치 요약·보고서 | `minimal-report` | 절제 · 문서형 (스톤) |

> 한 덱 = 한 프리셋. 중간에 톤을 섞지 않는다. (상세는 `theme-guide.md`)

### STEP 2 — 콘텐츠 분석 → 슬라이드 유형 매핑
사용자 콘텐츠를 문단 단위로 쪼개, 각각의 **신호(목적)** 를 보고 14개 유형 중 하나로 매핑한다.
(전체 매핑 표는 아래 §2 와 `content-mapping-guide.md`)

### STEP 3 — 흐름 설계
일반적인 덱 흐름:
```
title → agenda → [ section-divider → content/data/process/comparison/... ] → summary → closing
```
- `section-divider`는 큰 장이 바뀔 때만. 너무 자주 쓰면 호흡이 끊긴다.
- 본문 유형은 한 슬라이드에 **하나의 메시지**. 길면 유형을 나누거나 요약한다.

### STEP 4 — HTML 생성 (규칙 준수)
각 슬라이드는 **고정된 구조**를 따른다. 클래스명·`data-*` 속성은 **한 글자도 바꾸지 않고**,
텍스트 노드만 사용자 콘텐츠로 교체한다. (상세 규칙은 §3 와 `template-rules.md`)

```html
<section class="slide" data-template="content-slide" data-theme="education-clean">
  <div class="slide-body">
    <p class="s-eyebrow">CATEGORY</p>
    <h2 class="s-title">슬라이드 제목</h2>
    <div class="s-content">
      <p>본문 내용을 쓴다.</p>
    </div>
  </div>
</section>
```

### STEP 5 — 덱 조립
완성된 슬라이드들을 순서대로 나열해 독립 실행 가능한 HTML 문서로 만든다.
(골격은 예제 덱 `decks/*.html` 을 복사해서 시작 — `template-rules.md` §덱 규칙)

---

## 2. 콘텐츠 신호 → 슬라이드 유형 매핑

| 콘텐츠 신호 | 추천 유형 (`data-template`) |
|---|---|
| 큰 제목 · 도입 · 발표 시작 | `title-slide` |
| 목차 · 흐름 · 구조 안내 | `agenda-slide` |
| 장 전환 · 주제 바꿈 · 호흡 | `section-divider` |
| 개념 설명 · 본문 전개 | `content-slide` |
| 비교 · 대조 · Before/After · A/B | `comparison-slide` |
| 절차 · 워크플로우 · 단계 | `process-slide` |
| 일정 · 로드맵 · 마일스톤 | `timeline-slide` |
| 여러 항목 · 특징 나열 | `card-grid-slide` |
| 핵심 메시지 · 인용구 강조 | `quote-slide` |
| 수치 · 성과 · 지표 · KPI | `data-slide` |
| 구조 · 관계 · 아키텍처 · 흐름도 | `diagram-slide` |
| 사례 · 문제/해결/결과 | `case-study-slide` |
| 마무리 · 핵심 요약 | `summary-slide` |
| 마지막 안내 · 감사 · CTA | `closing-slide` |

> 매핑 기준과 "둘 다 해당될 때" 판단은 `content-mapping-guide.md` 참고.

---

## 3. HTML 생성 규칙 (요약)

**전체 계약은 `projects/slide-lab/TEMPLATE-CONTRACT.md` 와 `template-rules.md` 를 읽을 것.**
핵심만:

1. **한 슬라이드** = `<section class="slide" data-template="<TYPE>" data-theme="<PRESET>">` 한 덩어리.
2. 내부는 항상 `<div class="slide-body">` 래퍼. 그 안의 자식 요소는 **모두 `.s-*` 접두어**.
3. **유형별 자식 구조는 고정** — `template-rules.md` 의 표에서 정확한 클래스명/태그 확인.
   - `title-slide` / `closing-slide` 의 메인 제목은 **`h1.s-title`** (나머지는 `h2.s-title`).
4. **스타일은 프레임워크 CSS가 소유** — `<style>`, 인라인 색, `!important` ❌. 클래스명 변형 ❌.
5. 텍스트 노드만 사용자 콘텐츠로 교체. `<strong>` 은 진짜 강조 포인트에만 (액센트 색으로 강조됨).

---

## 4. 권장 / 금지

### ✅ DO
- 토큰과 프리셋을 **그대로** 쓴다.
- 한 슬라이드 = 한 메시지. 길면 유형 분리 또는 요약.
- 숫자/지표 → `data-slide`, 단계 → `process-slide`, 비교 → `comparison-slide`.
- 텍스트 노드만 교체. 구조/클래스는 그대로.

### ❌ DON'T
- 새 색, 새 클래스, 인라인 스타일, `!important` 를 만들지 않는다.
- 한 슬라이드에 3개 이상 주제를 넣지 않는다.
- `data-template` / `data-theme` 값을 임의로 바꾸거나 새 값을 만들지 않는다.
- 표·차트를 이미지로 대체하지 않는다 — **구조(`.s-*`)로 표현**한다.
- 14개 유형 밖의 레이아웃을 임의로 꾸미지 않는다.

---

## 5. 좋은 예 / 나쁜 예

### ✅ GOOD
> "3단계 온보딩 흐름을 설명해줘"
→ `process-slide` 의 `ol.s-steps > li.s-step` 3개에 각 단계(`s-num` + `s-step-title` + `s-step-desc`)를 채운다.
`data-theme="education-clean"` 으로 통일.

### ❌ BAD
> 같은 내용을 `content-slide` 하나에 긴 글머리 7개로 쑤셔 넣거나,
> 색을 `style="color:#ff0000"` 로 덮어쓰거나,
> 흐름도를 이미지로 넣는다.

---

## 6. 빠른 시작 (복사-붙여넣기)

1. 갤러리(`index.html`)에서 원하는 유형 카드의 **"HTML 복사"** 버튼 → 프롬프트에 붙여넣기.
2. `data-theme` 를 선택한 프리셋으로, 텍스트 노드를 사용자 콘텐츠로 교체.
3. 여러 장은 예제 덱(`decks/*.html`)의 골격에 순서대로 나열.
4. (선택) 다국어 — 덱 텍스트를 대상 언어로 번역. 구조/클래스는 건드리지 않는다.

---

## 참고 문서
- `template-rules.md` — 14개 유형별 정확한 HTML 구조 + 덱 조립 규칙
- `content-mapping-guide.md` — 신호 → 유형 매핑의 판단 기준
- `theme-guide.md` — 5개 프리셋 토큰과 분위기 가이드
- `projects/slide-lab/TEMPLATE-CONTRACT.md` — 빌더용 단일 계약 (최상위 진실원천)
- 예제 덱 — `decks/ai-workflow-deck.html`, `decks/business-proposal-deck.html`, `decks/tech-architecture-deck.html`