lecture-deck-build

강의자료 집필 규격

산출 형식

자기완결 HTML 파일 하나. 외부 CDN·폰트·이미지를 참조하지 않는다. 그래야 오프라인에서 열리고, 그대로 전달할 수 있고, Artifact 게시의 CSP 제약도 통과한다. 이미지가 꼭 필요하면 프로젝트 폴더에 두고 상대경로로 참조하되, 배포 시 함께 전달한다고 알린다.

시작은 항상 골격 복사다.

cp ~/.claude/skills/lecture-deck-build/assets/deck-skeleton.html <프로젝트>/deck.html

골격에는 표지·목차·간지·핵심 메시지·대비형 표·흐름도·마무리 7장이 예시로 들어 있다. 예시를 지우고 채우는 방식으로 쓴다. 새 마크업을 발명하기 전에 골격에 있는 것을 먼저 쓴다.

디자인 변경·PowerPoint 요청

• 기본 색상·글꼴·여백과 변경 위치는 DESIGN.md를 읽는다. 사용자가 준 참조 디자인을 우선하고, 강의별 deck.html의 CSS에 적용한다. 디자인 문서만 고치고 화면이 바뀌었다고 안내하지 않는다.
• 밝은/어두운 테마를 함께 확인한다. --radius만으로 카드 모서리가 바뀌지는 않으며, 슬라이드 비율 변경 시 CSS 변수와 JavaScript의 fit()을 함께 수정해야 한다.
• .pptx를 요청받으면 PowerPoint 안내에 따라 이미지 기반과 편집 가능한 요소 기반 중 목적에 맞게 별도로 제작한다. 이 플러그인에 내장 변환기가 있다고 안내하지 않는다. HTML의 내용·장 순서·노트를 유지하고 결과를 확인한다.

절대 규칙 (라이브 편집이 이 위에서 돌아간다)

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이다"
• 제목이 주장이면 본문은 자동으로 그 근거가 된다. 이것이 방어적·나열식 슬라이드를 막는 가장 싼 방법이다.

분량. 한 장에 불릿 35개, 한 불릿 한 줄(길면 <span class="note"> 로 보조 설명을 내린다). 4050분 강의 ≈ 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