name: lecture-slides description: "대학 강의용 슬라이드 생성기. 교안(.md)이나 주제를 기반으로 HTML 프레젠테이션을 만든다. frontend-slides 스킬을 활용하여 애니메이션이 풍부한 슬라이드를 생성하며, 이미지와 영상을 올바르게 임베드한다. /lecture-slides 또는 '슬라이드 만들어줘', '발표자료 만들어줘' 등의 요청에 트리거된다."
/lecture-slides — 강의 슬라이드 생성기
역할: 대학 강의용 슬라이드 디자이너 트리거:
/lecture-slides또는 슬라이드/발표자료 작성 요청 출력: 단일 HTML 프레젠테이션 파일 의존:frontend-slides스킬 (필수)
Purpose
교안이나 수업 주제를 기반으로 강의용 HTML 슬라이드를 생성한다. frontend-slides 스킬의 디자인 시스템을 활용하되, 교육 목적에 최적화된 레이아웃과 구성을 적용한다.
Prerequisites
이 스킬은 frontend-slides 스킬에 의존한다.
확인 방법:
ls ~/.claude/skills/frontend-slides/SKILL.md
설치 안내 (frontend-slides가 없는 경우):
frontend-slides스킬이 필요합니다. 다음 명령으로 설치하세요:claude skill install frontend-slides또는 https://github.com/anthropics/claude-code-skills 에서 수동으로 설치할 수 있습니다.
Behavior
Phase 0: 의존성 확인
실행 시 frontend-slides 스킬이 설치되어 있는지 확인한다.
- 있으면 → Phase 1 진행
- 없으면 → 설치 안내 메시지 출력 후 중단
Phase 1: 입력 확인
소스 판별:
| 입력 유형 | 설명 | 예시 |
|---|---|---|
| 교안 파일 | 기존 마크다운 교안을 슬라이드로 변환 | /lesson-plan으로 생성한 .md 파일 |
| 주제 직접 입력 | 주제를 받아 슬라이드 구성 | "제너레이티브 아트 소개" |
| 기존 슬라이드 수정 | 이미 만든 HTML 슬라이드 수정/보강 | 경로 지정 |
교안 파일이 있으면 읽고 내용을 파악한다.
출력 경로 질문 (필수):
"슬라이드 파일을 어디에 저장할까요?"
예:
./slides/,/Users/.../lectures/week03/, 현재 디렉토리
사용자가 경로를 지정하면 해당 위치에 폴더를 만들고 그 안에 HTML 파일을 생성한다. 자동으로 경로를 결정하지 않는다.
스타일 질문 (선택):
"슬라이드에 특별히 원하는 스타일이나 분위기가 있나요?"
없으면 교육용 기본 스타일을 적용합니다.
Phase 2: 슬라이드 설계
교안 내용을 슬라이드 단위로 분할한다.
강의 슬라이드 구성 원칙:
- 제목 슬라이드 — 수업 제목, 과목명, 날짜
- 목차 슬라이드 — 오늘 다룰 내용 개요
- 내용 슬라이드 — 개념별 1-3장
- 레퍼런스 슬라이드 — 이미지/영상 중심
- 실습 안내 슬라이드 — 실습이 있는 경우
- 요약 슬라이드 — 핵심 정리
- 다음 수업 예고 — 마지막 슬라이드
슬라이드당 내용 밀도:
- 텍스트: 핵심 키워드와 짧은 문장 위주 (교안의 상세 설명을 요약)
- 이미지: 가능한 크게, 슬라이드 면적의 50% 이상 활용
- 한 슬라이드에 하나의 개념만
Phase 3: 미디어 임베딩 규칙
강의 슬라이드에서 가장 중요한 부분. 이미지와 영상이 올바르게 표시되어야 한다.
이미지 임베딩:
<!-- 외부 이미지 -->
<img src="https://example.com/image.jpg"
alt="작품 설명"
style="max-height: min(60vh, 500px); width: auto; object-fit: contain;"
loading="lazy"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div style="display:none; align-items:center; justify-content:center;
height: min(60vh, 500px); background: rgba(255,255,255,0.05);
border-radius: 8px; color: rgba(255,255,255,0.5); font-size: 0.9rem;">
이미지를 불러올 수 없습니다
</div>
영상 임베딩 (YouTube):
<div style="max-width: min(90%, 900px); aspect-ratio: 16/9; margin: 0 auto;">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
style="width: 100%; height: 100%; border: none; border-radius: 8px;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
allowfullscreen></iframe>
</div>
영상 임베딩 (Vimeo):
<div style="max-width: min(90%, 900px); aspect-ratio: 16/9; margin: 0 auto;">
<iframe src="https://player.vimeo.com/video/VIDEO_ID"
style="width: 100%; height: 100%; border: none; border-radius: 8px;"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen></iframe>
</div>
미디어 관련 주의사항:
- 외부 이미지는 반드시
onerror핸들러를 포함하여 로드 실패 시 fallback 표시 - 영상은 embed URL을 사용한다 (youtube.com/watch?v= → youtube.com/embed/)
- viewport 규칙을 준수한다: 이미지
max-height: min(60vh, 500px), 영상max-height: min(60vh, 500px) loading="lazy"로 초기 로딩 성능 확보
Phase 4: 슬라이드 생성
frontend-slides 스킬의 워크플로우를 따른다:
-
지원 파일 읽기 —
frontend-slides스킬의 다음 파일을 읽는다:html-template.md— HTML 구조 및 JS 기능viewport-base.css— 필수 CSS (전체 포함)animation-patterns.md— 애니메이션 레퍼런스
-
HTML 생성 — 단일 HTML 파일로 생성
viewport-base.css전체를<style>태그에 포함- 키보드 네비게이션 (좌우 화살표, 스페이스바)
- 슬라이드 번호 표시
- 전체화면 지원
-
교육용 추가 기능:
- 발표자 노트 토글 (N키) —
<div class="speaker-note">요소를 각 슬라이드에 포함 가능 - 슬라이드 개요 오버레이 (O키) — 전체 슬라이드 썸네일 보기
- 발표자 노트 토글 (N키) —
Phase 5: 전달
- HTML 파일을 저장한다
- 브라우저에서 자동으로 연다 (
open명령) - 사용법을 안내한다:
- ← → 화살표: 슬라이드 이동
- N: 발표자 노트 토글
- O: 슬라이드 개요
- F: 전체화면
- 수정 사항이 있는지 확인한다
- PDF로 내보내려면
/lecture-export를 사용하라고 안내한다
Style Guidelines for Lectures
교육용 슬라이드에 적합한 스타일:
- 가독성 우선: 본문 폰트 최소
clamp(1rem, 2.5vw, 1.5rem) - 대비: 배경과 텍스트의 명확한 대비 (WCAG AA 이상)
- 여백: 슬라이드 가장자리에 충분한 패딩 (
5vw이상) - 색상 절제: 주 색상 2-3개, 강조 색상 1개
- 코드 블록: 프로그래밍 수업의 경우 구문 강조 포함
- 다크 테마 권장: 강의실 프로젝터에서 눈의 피로도가 낮음
Notes
- 이 스킬은
frontend-slides스킬의 디자인 시스템 위에서 동작한다 - 교안이 없어도 주제만으로 슬라이드를 생성할 수 있다
- 교안에서 슬라이드를 만들 때 내용을 요약하여 키워드 중심으로 변환한다
- PDF 익스포트는
/lecture-export스킬을 사용한다