개요
SlideLab은 AI 에이전트가 일관된 디자인으로 슬라이드를 만들도록 설계된 템플릿 시스템이다. 디자인 결정(색·폰트·간격·레이아웃)은 이미 토큰과 CSS로 고정되어 있으므로, 에이전트는 구조를 채우는 일에만 집중하면 된다. 이 가이드는 (1) 어떤 슬라이드 유형을 고를지, (2) 사용자 콘텐츠를 어디에 넣을지, (3) HTML을 어떻게 생성할지를 정한다.
1. 템플릿 선택
사용자 콘텐츠를 분석해 아래 매핑 표에 따라 슬라이드 유형(data-template)을 고른다. 한 발표는 보통 title → agenda → 본문 유형들 → summary → closing의 흐름을 갖는다. 디자인 톤(data-theme)은 발표 목적에 따라 5개 프리셋 중 하나로 통일한다.
- modern-business — 보고서·제안서·전략 발표 (신뢰·단정)
- dark-tech — AI·개발·데이터 발표 (기술·강대비)
- education-clean — 강의·실습 교안 (밝음·가독)
- startup-pitch — 투자·제품 발표 (역동·임팩트)
- minimal-report — 리서치 요약·보고서 (절제·문서형)
2. 콘텐츠 매핑
사용자 콘텐츠의 신호(목적) → 추천 슬라이드 유형. 이 표는 data.js의 mapping과 동일하다.
| 콘텐츠 신호 | 추천 유형 (data-template) |
|---|
3. HTML 생성 규칙
각 슬라이드는 반드시 이 구조를 따른다. 클래스명·data-* 속성은 한 글자도 바꾸지 않는다 — 텍스트 노드만 사용자 콘텐츠로 교체한다.
<section class="slide" data-template="content-slide" data-theme="modern-business">
<div class="slide-body">
<p class="s-eyebrow">카테고리</p>
<h2 class="s-title">슬라이드 제목</h2>
<div class="s-content">본문 내용</div>
</div>
</section>- 한 슬라이드 =
<section class="slide">한 덩어리. data-template으로 유형,data-theme으로 톤을 지정.- 스타일은
slide-framework.css가 소유 —<style>, 인라인 색,!important❌. - 한 슬라이드에는 하나의 메시지. 길면 유형을 나누거나 요약.
4. 권장 / 금지
DO
토큰과 프리셋을 그대로 쓴다. 한 슬라이드=한 메시지. 숫자는 data-slide, 단계는 process-slide, 비교는 comparison-slide로. 텍스트 노드만 교체.
DON'T
새 색·새 클래스·인라인 스타일을 만들지 않는다. 한 슬라이드에 3개 이상 주제를 넣지 않는다. data-template/data-theme 값을 임의로 바꾸지 않는다. 표·차트 이미지로 대체하지 않는다(구조로 표현).
5. 좋은 예 / 나쁜 예
GOOD
“3단계 온보딩 흐름을 설명해줘” → process-slide 3개의 .s-step에 각 단계 제목·설명을 채운다. data-theme="education-clean"으로 통일.
BAD
같은 내용을 content-slide 하나에 긴 글머리 7개로 쑤셔 넣거나, 색을 style="color:#ff0000"로 덮어쓴다.