디자이너 없이도 애니메이션까지 살아있는 HTML 발표 자료(PPT)를 만드는 스킬

1. 어떤 문제를 해결하나요?

발표 자료를 만들 때마다 두 가지 문제가 있습니다. 하나는 '디자인 못해서 똑같은 PPT 템플릿만 쓴다'는 것, 다른 하나는 '애니메이션 넣고 싶은데 구현이 어렵다'는 것입니다.

PowerPoint나 Keynote는 웹에서 공유하기 불편하고, Notion이나 구글 슬라이드는 디자인 자유도가 낮습니다. 결국 멋있는 발표 자료는 디자이너가 만들어야 한다는 고정관념이 있습니다.

frontend-slides는 3개의 스타일 프리뷰를 먼저 보여줘서 자신이 원하는 느낌을 찾을 수 있게 합니다. 선택 후에는 키보드·터치·스와이프 네비게이션, 슬라이드 진입 애니메이션, 반응형까지 모두 포함된 단일 HTML 파일을 생성합니다. 외부 라이브러리 없이 브라우저에서 바로 실행됩니다.

2. 이런 분들에게 추천합니다

• 투자자 피치덱을 인상적으로 만들어야 하는 스타트업 대표

• 콘퍼런스 발표 자료를 차별화하고 싶은 연사

• 기존 PPTX를 웹 발표용으로 빠르게 변환하고 싶은 담당자

• 디자인 감각이 없어도 고퀄리티 발표 자료가 필요한 PM·PO

• 워크숍·사내 교육 자료를 시각적으로 매력 있게 만들고 싶은 HR·L&D 담당자

3. 어떻게 사용하는 기어인가요?

주제·내용·발표 분위기(인상적/활력/집중/영감)를 알려주면, 스킬이 3가지 스타일 프리뷰 파일을 먼저 생성합니다. 원하는 스타일을 선택하면 전체 프레젠테이션을 제작합니다. PPTX 파일이 있으면 변환 모드로 텍스트·이미지·노트를 추출해 HTML로 재구성합니다.

4. 어떤 결과를 얻을 수 있나요?

• 외부 라이브러리 없이 브라우저에서 바로 실행되는 단일 HTML 발표 파일

• 키보드(←→)·마우스 휠·터치 스와이프 내비게이션 완비

• 슬라이드 진입 애니메이션 + reduced-motion 접근성 지원

• 1920×1080부터 375×667까지 모든 화면 크기에서 완벽 뷰포트 핏

• PPTX → HTML 변환 (텍스트·이미지·스피커 노트 포함)

• 그래디언트·타이포그래피·기하학적 배경 등 개성 있는 디자인

5. 포함된 구성

• frontend-slides 스킬 소스 (SKILL.md)

• 스타일 프리셋 카탈로그 (STYLE_PRESETS.md) — 뷰포트 세이프 CSS 베이스 포함

• 스타일 탐색 워크플로우 (3-preview → 선택 → 전체 빌드)

• PPT/PPTX 변환 가이드 (python-pptx 기반)

• 뷰포트 핏 강제 규칙 (오버플로우 방지 CSS 패턴)

• 접근성 구현 가이드 (키보드 내비게이션 / reduced-motion / 시맨틱 구조)

6. 사용 AI 도구

Claude Sonnet 4 / Claude Opus 4 (Anthropic) + Python (python-pptx) 변환 엔진

7. 실제 활용 예시

• "다음 주 투자 IR 피치덱 만들어줘. 5분 발표용, 스타트업 느낌으로" → 3가지 스타일 프리뷰 제시 후 선택 → 애니메이션 완비 HTML 피치덱 생성

• "기존 PPTX 파일 웹으로 변환해줘" → 텍스트·이미지 추출 후 HTML 재구성, 발표 노트 포함

• "콘퍼런스 키노트용 슬라이드인데 좀 더 인상적으로 만들어줘" → 기존 내용 유지하고 디자인·애니메이션 업그레이드

8. 출처, 원본 링크

• Author: affaan-m

• Repository: affaan-m/everything-claude-code

• GitHub: https://github.com/affaan-m/everything-claude-code

• Skill file: https://github.com/affaan-m/everything-claude-code/tree/main/.cursor/skills/frontend-slides