바이브 코딩으로
슬라이드 자료 만들기

발표 준비, 시간이 어디로 새나

꾸미기와 수정은 AI가 가장 잘하는 종류의 일입니다 — 사람은 내용만 붙들면 됩니다.

왜 PPT가 아니라 HTML 슬라이드인가

reveal.js — 파일 하나면 발표자료

<!-- index.html -->
<div class="reveal"><div class="slides">
  <section>첫 번째 슬라이드</section>
  <section>두 번째 슬라이드</section>
</div></div>
<script>Reveal.initialize()</script>

my-talk/
└─ index.html   ← 스타일·내용·스크립트 전부 이 안에

빌드 없음 · 서버 없음 · 더블클릭으로 열림
이 세미나 시리즈 8개 덱이 전부 이 구조

정직하게 — PPT가 답일 때도 있습니다

도구 종교전쟁이 아닙니다. 형식을 내가 정할 수 있는 발표라면 HTML 쪽이 AI와의 궁합이 압도적으로 좋다는 이야기입니다.

오늘의 로드맵 — 5레벨 올라가기

레벨을 클릭해 보세요 — 위로 갈수록 "요청 한 줄"의 결과가 좋아집니다

디자인을 열 마디 말로 설명하지 말고,
만족했던 실물 하나를 보여주세요.

세련되고 모던하고 미니멀한 다크 테마로,
전문적이면서 트렌디한 느낌으로 만들어줘

reference.html 이랑 같은 수준·같은
스타일로 만들어줘

내가 말한 "모던함"과 AI가 상상한 "모던함"은 다른 그림입니다. 형용사는 해석의 여지를 남기지만, 파일은 남기지 않습니다.

프롬프트에 늘어난 것은 단 한 줄 — "reference.html처럼".

원샷(한 방)을 기대하지 않는 순간, 품질이 오르기 시작합니다.
피드백 한 바퀴 = 몇 분 — PPT에서 손으로 고치던 시간과 비교해 보세요.

전체적으로 좀 더 예쁘게, 있어 보이게 해줘

3번 슬라이드 제목이 두 줄로 넘쳐. 한 줄로 줄이고,
7번 슬라이드 카드 3개는 높이를 맞춰줘

말투 요령은 하나 — 디자이너 옆에 앉아 모니터를 가리키듯 말하기.

# CLAUDE.md — 발표자료 작업 규칙

## 슬라이드 스타일
- 모든 덱은 reference.html의 디자인 시스템을 따른다 (reveal.js 단일 HTML)
- 팔레트: 배경 #06080F, 액센트 #9B82FF(보라) · #2BEAD0(청록) — 새 색 도입 금지
- 한 슬라이드에 본문 6줄 이하. 넘치면 장을 나눌 것
- 제목은 한 줄. 핵심 키워드에만 그라데이션 강조

## 완성 기준
- 브라우저로 열어 전 슬라이드 스크린샷 검사 후 완료 보고
- 글자 넘침·겹침·저대비 발견 시 보고 전에 스스로 수정

## 하지 말 것
- 라이트 테마 금지 · 외부 CDN 폰트 금지 (오프라인 발표 대비)
- 완료 보고에 "아마도"라는 말 금지 — 확인한 것만 말할 것

그래서 마지막 레벨 — 슬라이드 만드는 법을 Agent Skill로 포장합니다.
어떤 프로젝트에서든, "발표자료 만들어줘"라는 말만 나오면 자동으로.

# agent-skills/skills/slide-deck/SKILL.md (발췌)
---
name: slide-deck
description: 발표 슬라이드(HTML/reveal.js)를 만든다. "슬라이드",
  "발표자료", "세미나 자료", "덱 만들어줘" 요청 시 사용.
---
## 절차
1. template.html을 새 폴더로 복사해 시작한다 (디자인 시스템 포함)
2. 주제·청중·분량을 확인하고 목차부터 합의한다
3. 내용을 채운다 — 한 슬라이드 6줄 이하, 제목은 한 줄
4. 브라우저로 열어 전 슬라이드를 스크린샷 검사, 문제는 스스로 고친다
## 하지 말 것
- 팔레트 밖의 새 색 도입 금지 · 외부 CDN 의존 금지

설치는 .claude/skills/ 아래로 폴더 복사 한 번 — github.com/geniuskey/vibe-coding → agent-skills/skills/slide-deck

CLAUDE.md vs Agent Skill

겸용이 정답 — 프로젝트 특수 규칙은 CLAUDE.md에, "슬라이드 만드는 법" 같은 휴대용 노하우는 스킬로. 서로 대체재가 아니라 계층입니다.

증거물 제1호: 지금 보고 계신 이 슬라이드

이 덱을 만들 때 사람이 쓴 것은 주제와 피드백뿐입니다.
색 하나, 애니메이션 한 줄도 손으로 코딩하지 않았습니다 — 시리즈 전체가 그렇습니다.

내일 아침용 스타터 킷

reference.html은 내가 만족한 발표자료 실물이야. 새 주제 "◯◯◯"로
reveal.js 슬라이드를 만들어줘. 15장 내외, 목차부터 먼저 보여줘.
- reference.html의 디자인 시스템(색·폰트·컴포넌트·애니메이션)을 그대로 따를 것
- 한 슬라이드 본문 6줄 이하, 제목은 한 줄
- 완성 전에 브라우저로 열어 전 슬라이드를 스스로 검사하고 고칠 것

# 레퍼런스가 없다면
git clone github.com/geniuskey/vibe-coding
→ 아무 덱의 index.html이나 reference로

# 스킬로 굳히려면
agent-skills/skills/slide-deck/ 를
내 프로젝트 .claude/skills/ 로 복사