lecture-slide — 강의·발표 자료 HTML Skill

Claude Code / Codex Skill. 강의·발표 자료를 HTML 한 파일로 만든다. PPT 안 만든다.

왜 HTML인가

• F11 한 번이면 풀스크린 슬라이드 쇼
• 키보드 ← → 키로 슬라이드 전환
• 페이드·줌·하이라이트 효과가 자연스럽게 들어감
• 회사 제출용 PDF는 브라우저에서 Ctrl+P → "PDF로 저장"
• 한 파일 = 슬라이드 전체 (박스 1개 = 슬라이드 1장, 박스 8개 쌓으면 8장)

설치

Claude Code 또는 Codex 사용자 양쪽 다 지원.

1. GitHub에서 Code → Download ZIP으로 내려받기
2. 압축을 풀고 폴더 이름을 lecture-slide로 변경
   • GitHub ZIP은 보통 lecture-slide-main처럼 풀리므로, 설치 전에 lecture-slide로 바꾸는 것이 안전하다.
3. 아래 경로 중 본인이 쓰는 도구 한 곳에 넣기

# Claude Code 쓰면
mkdir -p ~/.claude/skills
mv lecture-slide ~/.claude/skills/lecture-slide

# Codex 쓰면
mkdir -p ~/.codex/skills
mv lecture-slide ~/.codex/skills/lecture-slide

Windows에서는 사용자 폴더 기준으로 .claude/skills/lecture-slide 또는 .codex/skills/lecture-slide에 넣으면 된다.

사용법

1) 자료 생성 — 한 줄 호출

설치 후 Claude Code 또는 Codex에서 한 줄이면 작동:

"[주제] 강의·발표 자료 [N]장 만들어줘. 청중은 [페르소나]."

예시:

• "1인 사업가 시간 관리 강의안 8장 만들어줘. 청중은 외부 출강 수강생."
• "사내 영업팀 대상 신규 CRM 발표자료 10장. 30대 영업 직원."
• "신입 사원 온보딩 슬라이드 12장. 첫 출근 직후."

Skill이 자동 호출되어 slides.html을 생성한다.

알려주실 3가지:

• 주제 — 무엇에 관한 강의·발표인가
• 청중 — 누가 보는가
• 분량 — 몇 장 (기본 8장)

2) 발표

생성된 slides.html을 브라우저에서 연다.

키	동작
F11	풀스크린 진입
→ · Space · PageDown	다음 슬라이드
← · PageUp	이전 슬라이드
Home	첫 슬라이드
End	마지막 슬라이드

3) PDF 내보내기

브라우저에서 Ctrl+P (Mac은 Cmd+P) → "대상: PDF로 저장" → 저장.

3대 룰 (Skill에 들어 있는 본질)

이 Skill은 다음 3가지를 자동 적용한다.

1. 큼지막하게 — 제목 ≥ 4rem (64px), 본문 ≥ 2.5rem (40px). 작은 폰트 안 씀.
2. 한 페이지 한 메시지 — 두 가지 욱여넣지 않음. 추가 메시지면 페이지 분리.
3. 글자 양 적게 — 한 페이지 한국어 ≤ 6줄, 가장 긴 줄 ≤ 40자. 핵심 키워드·짧은 문장 위주.

룰이 깨질 때 정정도 한 줄로 됨:

"그 메시지는 다음 페이지로 분리해줘"

폰트 위계

자리	폰트
메인 (제목·본문·강조)	Paperlogy (9 굵기)
보조 (코드·파일명·터미널 표시 등)	Pretendard
fallback	-apple-system, system-ui, sans-serif

🚫 monospace 폰트(SF Mono·Menlo·Courier) 사용 안 함. 코드 자리도 Pretendard로.

본인 컴퓨터에 Paperlogy가 없으면 자동 fallback. 폰트 임베드가 필요하면 Paperlogy, Pretendard, 또는 자체 라이선스 폰트로 교체.

본인 톤으로 개조

examples/example_green.html 참고. 상단 CSS 변수만 바꾸면 톤 전체가 바뀐다.

:root {
  --font-main: 'Paperlogy', 'Pretendard', sans-serif;  /* 메인 폰트 */
  --accent: #2563eb;        /* 강조색 — 본인 회사 색으로 교체 */
  --accent-deep: #1e3a8a;   /* 진한 강조 (표지 그래디언트) */
  --accent-soft: #dbeafe;   /* 옅은 강조 (하이라이트·배경) */
  --ink: #1a1a1a;           /* 본문색 */
  --bg: #ffffff;            /* 배경 */
  --pad-x: 9%;              /* 좌우 여백 */
  --pad-y: 7%;              /* 상하 여백 */
  --size-h1: 5.5rem;        /* 제목 사이즈 */
  --size-body: 2.5rem;      /* 본문 사이즈 */
}

톤 교체 예시

환경	--accent	--accent-deep	--accent-soft
블루 기본	#2563eb	#1e3a8a	#dbeafe
진한 녹색 (강의 톤)	#166534	#14532d	#dcfce7
보라 (창의 톤)	#7c3aed	#5b21b6	#ede9fe
다크 (시크)	#0f172a	#020617	#cbd5e1

효과 추가

기본 제공:

• 페이지 전환 페이드 (300~400ms)
• 핵심 텍스트 등장 fadeUp (500~600ms)

추가 예시:

• 줌 등장: animation: zoomIn 600ms ease both;
• 하이라이트 페인트 (밑줄): background: linear-gradient(120deg, var(--accent-soft) 0%, var(--accent-soft) 100%); background-size: 0% 50%; transition: background-size 800ms ease;

자판기 아닌 레퍼런스

이 Skill은 그대로 쓰는 자판기가 아니다. 본인 디자인 톤·색·폰트로 개조하라는 레퍼런스다.

본인 회사·브랜드 색상이 있으면 --accent를 그 색으로 바꾸고, 학생 청중이면 --size-body를 더 크게(예: 3rem) 올린다.

라이선스

MIT. 자유롭게 개조·재배포 가능.

출처

archigent — AI로 일과 사업을 시스템화하는 사람.