강의자료·워크숍 자료를 자기완결 HTML 슬라이드덱으로 집필하는 스킬. 표준 골격(정적 슬라이드 마크업 + 목차·발표자 노트·진행바 런타임 + 인쇄 CSS, 외부 CDN 없음)을 복사해 내용을 채우고, 라이브 편집이 전제하는 data-sid 규약과 한 장 한 메시지 규율을 지킨다. 강의 슬라이드·워크숍 자료·교육자료·세미나 발표자료의 본문을 쓰거나, 새 슬라이드를 추가·분할하거나, 표·흐름도·통계 블록 같은 시각 요소를 넣거나, 발표자 노트를 작성하거나, 스크롤형 강의 핸드아웃을 만들 때 반드시 사용. 슬라이드 유형별 마크업 문법과 인터뷰 질문 세트를 references로 제공한다. 제작 전체 흐름·라이브 편집 운영은 lecture-deck-orchestrator와 lecture-live-edit가 담당한다.
Scanned 9/6/2026
Install to Claude Code
Skills Directorynpx -y skills add parkjui92/lecture-deck-kit --skill lecture-deck-build --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Lecture Deck Build?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/parkjui92-lecture-deck-build)More formats (shields.io, HTML) on the badges page.
---
name: lecture-deck-build
description: "강의자료·워크숍 자료를 자기완결 HTML 슬라이드덱으로 집필하는 스킬. 표준 골격(정적 슬라이드 마크업 + 목차·발표자 노트·진행바 런타임 + 인쇄 CSS, 외부 CDN 없음)을 복사해 내용을 채우고, 라이브 편집이 전제하는 data-sid 규약과 한 장 한 메시지 규율을 지킨다. 강의 슬라이드·워크숍 자료·교육자료·세미나 발표자료의 본문을 쓰거나, 새 슬라이드를 추가·분할하거나, 표·흐름도·통계 블록 같은 시각 요소를 넣거나, 발표자 노트를 작성하거나, 스크롤형 강의 핸드아웃을 만들 때 반드시 사용. 슬라이드 유형별 마크업 문법과 인터뷰 질문 세트를 references로 제공한다. 제작 전체 흐름·라이브 편집 운영은 lecture-deck-orchestrator와 lecture-live-edit가 담당한다."
---
# 강의자료 집필 규격
## 산출 형식
**자기완결 HTML 파일 하나.** 외부 CDN·폰트·이미지를 참조하지 않는다.
그래야 오프라인에서 열리고, 그대로 전달할 수 있고, Artifact 게시의 CSP 제약도 통과한다.
이미지가 꼭 필요하면 프로젝트 폴더에 두고 상대경로로 참조하되, 배포 시 함께 전달한다고 알린다.
시작은 항상 골격 복사다.
```bash
cp ~/.claude/skills/lecture-deck-build/assets/deck-skeleton.html <프로젝트>/deck.html
```
골격에는 표지·목차·간지·핵심 메시지·대비형 표·흐름도·마무리 7장이 예시로 들어 있다.
**예시를 지우고 채우는 방식**으로 쓴다. 새 마크업을 발명하기 전에 골격에 있는 것을 먼저 쓴다.
## 절대 규칙 (라이브 편집이 이 위에서 돌아간다)
1. 슬라이드 1장 = `<section class="slide" data-sid="sNN">`. **`data-sid` 없는 슬라이드를 만들지 않는다.**
2. `data-sid` 는 **한 번 정하면 영구 고정**이다. 순서를 바꾸거나 중간에 장을 넣어도 그대로 둔다.
표시 번호는 런타임이 계산하므로 sid 가 순서와 어긋나도 아무 문제 없다.
- 분할: 앞쪽이 `s07` 승계, 뒤쪽은 `s07-2`. 삽입: `s07a`. 합치기: 앞쪽 sid 유지.
- **전체 재번호는 금지.** 대기 중인 피드백이 엉뚱한 장을 가리키게 된다.
3. 발표자 노트는 각 슬라이드 안 `<aside class="notes">` 에 쓴다(`N` 키로 열람, 화면엔 안 보임).
4. `<html>` 의 `data-lle-runtime` 속성을 지우지 않는다(새로고침 후 위치 복원에 쓰인다).
## 집필 규율
**한 장 한 메시지.** 슬라이드 제목(`<h2>`)은 주제가 아니라 **주장**으로 쓴다.
- ✗ "AI 도입 현황" → ✓ "도입률은 높지만 정착률은 3분의 1이다"
- 제목이 주장이면 본문은 자동으로 그 근거가 된다. 이것이 방어적·나열식 슬라이드를 막는 가장 싼 방법이다.
**분량.** 한 장에 불릿 3~5개, 한 불릿 한 줄(길면 `<span class="note">` 로 보조 설명을 내린다).
40~50분 강의 ≈ 20~28장. 축이 바뀔 때마다 간지(`.slide.divider`)를 넣는다.
**수치엔 출처.** 숫자를 쓰면 같은 장에 `<p class="src">출처: 기관(연도), 「자료명」</p>` 을 단다.
근거가 확실치 않으면 숫자를 쓰지 말고 정성 서술로 낮춘다. 조사가 필요하면 사용자에게 먼저 알린다.
**한국어 조판.** 골격이 `word-break: keep-all` 과 `text-wrap: balance` 를 이미 건다.
제목의 줄바꿈 위치를 지정하려면 `<br>` 을 의미 단위로 넣는다.
## 시각 형식 고르기
| 내용 성격 | 형식 | 마크업 |
|---|---|---|
| 항목 나열 | 불릿 | `<ul class="bullets">` |
| A와 B의 차이 | **대비형 표** (열 3개 이하) | `<table>` + `<td class="em">` |
| 순서·절차 | 흐름도 | `<div class="flow">` + `.step` |
| 병렬 개념 2~3개 | 카드 | `.grid-2` / `.grid-3` + `.card` |
| 핵심 수치 | 통계 블록 | `.stat` (`.num` + `.cap`) |
| 강조·경고 | 콜아웃 | `.callout` / `.callout.warn` |
표는 나열이 아니라 **대비**일 때만 쓴다. 3열을 넘기면 슬라이드에서 읽히지 않는다.
차트가 필요하면 `dataviz` 스킬을 읽고 인라인 SVG로 그린다(외부 라이브러리 금지).
세부 마크업 문법과 유형별 예시는 `references/slide-contract.md` 를 Read 한다.
인터뷰 질문 세트와 구성안 양식은 `references/interview-storyline.md` 를 Read 한다.
## 스크롤형 핸드아웃
배포용 참고자료(슬라이드가 아닌 읽는 문서)는 같은 골격에서
`.slide` 대신 `<section id="..." data-sid="...">` 를 세로로 쌓고 상단 목차를 단다.
라이브 편집은 동일하게 동작한다(섹션 단위 피드백).
## 빌드 후 자가 점검
- `grep -c 'data-sid' deck.html` 이 슬라이드 수와 일치하는가
- 중복 sid 는 없는가: `grep -o 'data-sid="[^"]*"' deck.html | sort | uniq -d` → 출력 없어야 함
- 외부 참조가 없는가: `grep -Eic 'https?://[^"]*\.(js|css|woff|png|jpg)' deck.html` → `0`
- 브라우저 스크린샷으로 첫 장과 표가 있는 장을 눈으로 확인 (텍스트 넘침·표 깨짐)
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
