From yowu-slide-plugin
깔끔하고 전문적인 HTML 기반 발표자료를 단일 파일로 생성한다. 수직 스크롤 + scroll-snap 방식의 스크롤텔링 프레젠테이션으로, 슬라이드 라이브러리 없이 순수 HTML+CSS로 구현한다. 다크/라이트 테마, highlight.js 코드 블럭, 디자인 시스템을 지원하며 frontend-design 스킬 연동으로 화려한 비주얼도 선택 가능하다. 트리거: "make a presentation", "create slides", "build a deck", "발표자료", "프레젠테이션", "슬라이드", "제안서", "발표 만들어", "ppt", "keynote", "pitch deck", "tech talk", "발표 만들어줘".
npx claudepluginhub uyu423/yowu-claude-marketplace --plugin yowu-slide-pluginThis skill uses the workspace's default tool permissions.
이 skill은 reveal.js 같은 슬라이드 라이브러리를 사용하지 않는다.
Generates viewport-fitted single-file HTML slide decks with 8 visual themes, clamp-scaled typography, system font fallbacks, and scroll-snap navigation for web presentations.
Creates reveal.js presentations with themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step. Use for slides, decks, or slideshows.
Converts documents, outlines, or notes into self-contained HTML slide decks with Reveal.js horizontal navigation or vertical scroll and multiple themes.
Share bugs, ideas, or general feedback.
이 skill은 reveal.js 같은 슬라이드 라이브러리를 사용하지 않는다. 대신 수직 스크롤 기반의 스토리텔링 접근법을 사용한다.
핵심 원칙:
<style> 인라인, JS는 최소한만 허용품질 기준: 한국 디자인 에이전시가 만든 랜딩페이지 수준의 완성도.
사용자 입력을 먼저 분석한다. 입력 형태는 다양할 수 있다:
콘텐츠를 분석한 뒤, 반드시 AskUserQuestion으로 아래 항목을 한 번에 제안하고 사용자 확인을 받는다. 이 절차는 생략할 수 없다. AI가 추론한 결과를 제시하되, 최종 결정은 사용자가 한다. 단, 사용자가 요청에서 모든 항목을 이미 명시한 경우에만(예: "다크 + frontend-design + 8장으로") 질문을 생략할 수 있다.
제안 항목:
제안 예시:
발표 내용을 분석했습니다. 아래 구성으로 진행할까요?
■ 테마: Dark (권장) — 기술 주제라 어두운 배경이 적합합니다
■ 디자인: /frontend-design (기본값) — 화려한 비주얼
■ 악센트 컬러: #00d2ff (cyan) + #7b2ff7 (purple) + #ff6b6b (coral)
■ 슬라이드 구성 (5장):
1. [title] Kotlin 소개
2. [content] Kotlin이란?
3. [card-grid] 주요 특징 4가지
4. [code] 코드 예시 — data class, coroutine
5. [closing] 마무리
수정하고 싶은 부분이 있으면 알려주세요.
엔터만 누르면 위 구성으로 진행합니다.
테마 권장 기준:
사용자가 컨펌한 디자인 스타일에 따라 로드한다:
| 선택 | 디자인 소스 | 특징 |
|---|---|---|
| frontend-design (기본값) | frontend-design skill | 화려하고 창의적인 비주얼 (glassmorphism, glow 등) |
| 자체 심플 | references/design-system.md (자체 디자인시스템) | 일관되고 절제된 미니멀 스타일 |
| 직접 제공 | 사용자 제공 가이드 | 사용자 지정 스타일 |
frontend-design 로드 방법:
/frontend-design skill이 설치되어 있으면 해당 skill을 호출한다.https://raw.githubusercontent.com/anthropics/skills/refs/heads/main/skills/frontend-design/SKILL.mdfrontend-design 사용 시 경계 규칙: frontend-design skill의 컬러, 그라디언트, 글래스모피즘, 텍스처 스타일만 차용한다. 레이아웃 구조(100vh 섹션, scroll-snap), 폰트(@font-face 나눔스퀘어 네오), JS 제한은 본 스킬의 규칙을 우선한다.
어떤 선택이든 유지되는 공통 규칙:
scroll-snap-type: y mandatory + height: 100vh 페이지 단위 스크롤사용자 제공 가이드 사용 시:
Step 1에서 사용자가 컨펌한 슬라이드 구성을 바탕으로, 구체적인 슬라이드 아웃라인을 먼저 작성한다. 이 단계에서 각 슬라이드의 실제 콘텐츠 요소를 상세히 설계하여, 이후 HTML 작성 시 일관성과 품질을 확보한다.
아웃라인 저장 방식 (분량에 따라 자율 판단):
{title-slug}-outline.md)로 작성하여 참조. HTML 완성 후 삭제아웃라인 포맷 — 각 슬라이드마다 아래 항목을 명시한다:
## Slide {N}: {제목} [{type}]
- **Label**: {섹션 카테고리 텍스트}
- **Heading**: {핵심 메시지}
- **Content**: {본문 요약 또는 항목 목록}
- **Visual**: {사용할 컴포넌트 — stat-box 3개, card 4개, code block 등}
- **Notes**: {특이사항 — min-height 필요 여부, CDN 라이브러리, overflow 전환 등}
구조 가이드라인:
title → context/problem → solution → details(2-4장) → evidence → next-steps → closing아웃라인이 확정되면, HTML의 뼈대(Head + CSS)만 먼저 Write한다.
이 단계에서는 <body> 안에 슬라이드 콘텐츠를 넣지 않는다.
Write로 생성하는 Skeleton 구조:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{발표 제목}</title>
{highlight.js CSS CDN link — 코드 블럭이 있을 때만}
{기타 필요한 CDN CSS — KaTeX 등}
<style>
{나눔스퀘어 네오 @font-face 블럭 전체}
{CSS 변수 — :root 테마 정의}
{전체 레이아웃 CSS — scroll-snap, .slide 공통, 페이지 번호 counter}
{모든 슬라이드 타입별 CSS — slide--title, slide--content, slide--card-grid 등}
{반응형 @media 쿼리}
</style>
</head>
<body>
{CDN scripts — highlight.js, Mermaid 등 필요한 것만}
<script>
hljs.highlightAll();
</script>
</body>
</html>
핵심: CSS는 아웃라인에 명시된 모든 슬라이드 타입의 스타일을 한 번에 포함한다. 이후 슬라이드 append 시 CSS를 추가로 수정할 필요가 없도록 설계한다.
Skeleton이 준비되면, Edit 도구로 </body> 직전에 슬라이드를 순차 append한다.
한 번에 전체를 쓰지 않고, 적절한 단위로 나누어 추가한다.
Append 단위 (자율 판단):
Append 방법:
각 Edit에서 </body> 태그 또는 CDN <script> 블럭 직전의 빈 줄을 old_string으로 잡고,
해당 위치에 <section> 블럭을 삽입한다.
Edit:
old_string: "{이전 슬라이드의 closing </section> 태그 또는 body 내 마지막 콘텐츠}"
new_string: "{이전 콘텐츠}\n\n {새 <section> 블럭들}"
진행 시 사용자에게 간단한 진척 상황을 알린다:
"슬라이드 1-3/8 추가 중..." 식의 짧은 상태 업데이트모든 슬라이드 append가 완료되면:
/ {N})가 실제 슬라이드 수와 맞는지 검증한다gemini-design-review 스킬을 호출하여 HTML 디자인을 보완한다.
gemini CLI 미설치 시 자동으로 quiet pass되므로 별도 분기 처리가 필요 없다.
호출 방법:
gemini-design-review 스킬에 아래 컨텍스트를 전달한다:
scroll-snap 보호, 폰트 보호: NanumSquareNeo, 레이아웃 보호: 100vh스킬이 지침을 적용하면 결과를 사용자에게 요약 보고하고, 스킵되면 아무 메시지 없이 다음 단계로 진행한다.
저장 경로를 사용자에게 알려준다: 현재 디렉토리에 {제목-slug}.html로 저장했습니다.
각 섹션은 아래 타입 중 하나를 사용한다. 한 발표에서 같은 타입을 반복해도 된다. 매칭 힌트를 참고하여 콘텐츠에 적합한 타입을 선택한다.
| Type | 용도 | 핵심 요소 | 매칭 힌트 |
|---|---|---|---|
title | 표지 슬라이드 | gradient 텍스트 제목, badge/eyebrow, subtitle | 첫 슬라이드, 파트 디바이더 |
content | 일반 내용 | label + heading + desc 본문 | 설명/서술이 중심인 슬라이드 |
stat-grid | 숫자 강조 | 2-4개의 stat-box (큰 숫자 + 라벨) | 수치, KPI, 성과가 2개 이상 등장할 때 |
card-grid | 항목 나열 | 2-4개의 카드 (아이콘 + 제목 + 설명) | 병렬적 항목, 기능 목록, 장점 나열 |
code | 코드 설명 | heading + highlight.js 코드 블럭 + 설명 | 코드 예시, CLI 명령, 설정 파일 |
timeline | 단계/일정 | 세로 타임라인 (dot + title + desc) | 시간순/단계별 순서가 명확할 때 |
flow | 프로세스 | 가로 플로우 다이어그램 (step + arrow) | 파이프라인, 워크플로우, 데이터 흐름 |
quote | 인용/강조 | quote-box (좌측 보더 + 텍스트 + 출처) | 핵심 메시지 강조, 사용자 후기, 인용 |
comparison | 비교 | 2열 비교 (before/after, A/B) | "기존 vs 신규", "A vs B" 대비 구조 |
naming | 이름/공식 | naming-box (chip + 결과 + 설명) | 브랜딩, 합성어 설명, 공식/수식 |
code-comparison | 코드 비교 | 2열 코드 블럭 (언어/버전/전후 비교) | "JS vs TS", "before/after", 문법 비교 |
closing | 마무리 | CTA 버튼, 감사 메시지, 연락처 | 마지막 슬라이드, Q&A |
<style> 태그 안에:root에 테마 변수 정의, 컴포넌트에서 참조<section class="slide slide--{type}"> 통일. 테마 차이는 CSS 변수와 body 클래스로만 처리html { scroll-snap-type: y mandatory; } + 각 섹션에 scroll-snap-align: start;height: 100vh + overflow: hidden. 단, 콘텐츠가 많은 섹션(카드 5개 이상, 코드 30줄 이상, 타임라인 5단계 이상)은 min-height: 100vh + overflow: visible로 전환. scroll-snap-align은 유지max-width: 720px. 카드 그리드, 비교, 플로우 등 다열 레이아웃은 max-width: 960px까지 허용@font-face 블럭으로 직접 선언. 아래 코드를 그대로 사용:@font-face {
font-family: 'NanumSquareNeo';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'NanumSquareNeo';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2);
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'NanumSquareNeo';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2);
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'NanumSquareNeo';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2);
font-weight: 800;
font-display: swap;
}
@font-face {
font-family: 'NanumSquareNeo';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2);
font-weight: 900;
font-display: swap;
}
폰트 URL 로드에 실패하면 'Noto Sans KR', -apple-system, sans-serif를 fallback으로 사용한다. 8. 반응형: @media (max-width: 768px) 브레이크포인트 포함 9. 페이지 번호: CSS counter로 자동 페이지 번호 표시. 반드시 position: absolute 사용 (position: fixed 금지 — fixed 사용 시 모든 슬라이드의 번호가 겹쳐 마지막 번호만 보이는 버그 발생). 구현 패턴:
body {
counter-reset: slide;
}
.slide {
counter-increment: slide;
position: relative;
}
.slide::after {
content: counter(slide, decimal-leading-zero) ' / {총 슬라이드 수}';
position: absolute; /* fixed 절대 금지 */
bottom: 24px;
right: 32px;
font-size: 13px;
color: var(--text-muted);
}
<html lang="ko|en"> 설정. WCAG AA 이상의 색상 대비 유지. heading 레벨을 h1 → h2 → h3 순서로 사용align-self: center; width: fit-content;을 추가한다. 누락 시 전체 너비로 늘어나는 버그 발생아래 값은 모든 디자인 경로(자체 심플, frontend-design, 직접 제공)에 적용되는 최소 베이스라인이다. AI는 이 값을 하한선으로 사용하되, 콘텐츠 밀도와 슬라이드 구성에 따라 더 크게 조정할 수 있다. 단, 이 값보다 작게 설정하지 않는다.
| 요소 | 베이스라인 | 비고 |
|---|---|---|
| h1 | clamp(2.25rem, 8vw, 4rem) | 타이틀 슬라이드 |
| h2 | clamp(1.75rem, 5vw, 2.625rem) | 섹션 헤딩 |
| h3 | 1.25rem | 서브 헤딩 |
| .label | 13px, letter-spacing 0.15em | 섹션 카테고리 |
| .desc | 16px, line-height 1.8 | 본문 설명 |
| subtitle | 22px | 타이틀 부제 |
| .card-title | 16px | 카드 제목 |
| .card-desc | 13px | 카드 설명 |
| .stat-num | clamp(1.75rem, 6vw, 2.5rem) | 통계 숫자 |
| .stat-label | 13px | 통계 라벨 |
| pre code | 14px | 코드 블럭 |
| .tag | 13px | 태그/칩 |
| page number | 13px | 슬라이드 번호 |
| slide padding (desktop) | 60px 80px | 기본 여백 |
| slide padding (mobile) | 40px 24px | 모바일 여백 |
| .slide__inner max-width | 720px | 텍스트 콘텐츠 폭 |
| 다열 레이아웃 max-width | 960px | 카드/비교/플로우 |
| card padding | 24px | 카드 내부 여백 |
| card border-radius | 16px | 카드 라운딩 |
| gap (기본) | 12px | 그리드/플렉스 간격 |
3단 위계 — 모든 섹션에 일관되게 적용:
강조 패턴:
-webkit-background-clip: text) — 타이틀 슬라이드 제목<span class="em"> — 헤딩 내 키워드 강조컬러 제한: 악센트 최대 3색. 테마별 권장 팔레트는 design-system.md 참조.
폰트:
NanumSquareNeo) — @font-face 블럭은 HTML Structure Rules 7번 참조hljs.highlightAll() 한 줄만 포함한다.[TODO: 데이터 필요])로 남기고 사용자에게 확인을 요청한다이미지/비주얼 대안:
화이트리스트 방식: 아래 목록의 라이브러리만 사용할 수 있다. 이 목록에 없는 라이브러리를 임의로 추가하지 않는다. 모든 라이브러리는 "필요할 때만 포함" 원칙을 따른다. 해당 콘텐츠가 없으면 CDN을 포함하지 않는다.
CDN URL 규칙: 아래 명시된 URL과 버전을 그대로 사용한다. 버전을 임의로 올리거나 다른 CDN 호스트로 변경하지 않는다. (cdnjs는 최신 버전 누락이 잦아 jsdelivr 또는 검증된 cdnjs URL만 사용)
포함 조건: 코드 블럭이 있을 때
<!-- head에 테마 CSS -->
<!-- Dark: -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
/>
<!-- Light: -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
/>
<!-- body 끝 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
마크업: <pre><code class="language-{lang}">...</code></pre>. language- 접두사 필수.
포함 조건: 수치 데이터를 bar, line, pie, radar, doughnut 등 차트로 보여줄 때. stat-grid 대신 또는 보완으로 사용.
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
마크업: <canvas id="myChart"></canvas> + 초기화 스크립트.
주의: animation: false로 설정하여 스크롤 시 깜빡임을 방지한다. 다크 테마에서는 color/borderColor를 테마에 맞게 조정.
포함 조건: 아키텍처, 플로우차트, 시퀀스 다이어그램, 간트 차트, ER 다이어그램이 필요할 때. CSS+HTML로 그리기 복잡한 경우 사용.
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ theme: 'dark', startOnLoad: true });
</script>
마크업: <pre class="mermaid">graph LR; A-->B;</pre>. 라이트 테마에서는 theme: 'default'로 변경.
포함 조건: LaTeX 수학 수식이 등장할 때 (학술 발표, 알고리즘 설명).
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>
<script>
renderMathInElement(document.body);
</script>
마크업: 인라인 \( E = mc^2 \), 블럭 $$ \sum_{i=1}^{n} x_i $$.
포함 조건: 카드나 항목에 emoji보다 정교한 아이콘이 필요할 때. emoji로 충분하면 사용하지 않는다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script>
마크업: <span class="iconify" data-icon="lucide:rocket"></span>. Lucide, Material, Font Awesome 등 20만+ 아이콘 접근 가능.
| 라이브러리 | 포함 조건 | 슬라이드 타입 연관 |
|---|---|---|
| highlight.js | 코드 블럭이 있을 때 | code |
| Chart.js | 수치를 차트로 시각화할 때 | stat-grid 보완 |
| Mermaid | 복잡한 다이어그램이 필요할 때 | flow, timeline 상위 대안 |
| KaTeX | 수학 수식이 등장할 때 | content (학술) |
| Iconify | 정교한 아이콘이 필요할 때 | card-grid, flow |
자체 디자인시스템(선택 2) 사용 시 읽어야 하는 파일:
references/design-system.md: CSS 변수, 타이포그래피 스케일, 컴포넌트 패턴 전체Gemini 디자인 리뷰 (Step 7):
gemini-design-review 스킬: HTML 디자인 리뷰를 Gemini CLI로 수행하는 전용 스킬. 리뷰 프롬프트와 실행 로직이 해당 스킬에 캡슐화되어 있다.품질 레퍼런스 (참고용, 복사 대상 아님):
assets/example-dark.html: 다크 테마 4슬라이드 예시 (기술 발표)assets/example-light.html: 라이트 테마 4슬라이드 예시 (비즈니스 전략)