frontend-slides

name	frontend-slides
description	처음부터 만들거나 PowerPoint 파일을 변환해, 강한 애니메이션과 시각적 완성도를 갖춘 HTML 프레젠테이션을 만듭니다. 발표 자료, PPT/PPTX의 웹 변환, 발표/피치용 슬라이드 제작에 사용합니다. 비디자이너도 추상적 선택보다 시각 탐색을 통해 취향을 찾을 수 있게 돕습니다.
origin	ECC

프론트엔드 슬라이드

브라우저에서 완전히 동작하는 무의존성, 애니메이션 중심 HTML 프레젠테이션을 만듭니다.

zarazhangrui(@zarazhangrui)의 작업에서 보인 시각 탐색 접근법에서 영감을 받았습니다.

사용 시점

• 발표 자료, 피치 덱, 워크숍 덱, 내부 프레젠테이션을 만들 때
• .ppt, .pptx 슬라이드를 HTML 프레젠테이션으로 변환할 때
• 기존 HTML 프레젠테이션의 레이아웃, 모션, 타이포그래피를 개선할 때
• 아직 디자인 취향이 분명하지 않은 사용자와 스타일을 탐색할 때

필수 원칙

1. 무의존성: 기본값은 inline CSS/JS를 포함한 단일 self-contained HTML 파일입니다.
2. 뷰포트 완전 적합 필수: 모든 슬라이드는 내부 스크롤 없이 한 화면에 들어와야 합니다.
3. 말보다 시각으로 보여주기: 추상적 스타일 설문 대신 시각적 프리뷰를 사용합니다.
4. 분명한 디자인 방향: 뻔한 보라 그라디언트, 흰 배경 위 Inter, 템플릿 느낌의 덱을 피합니다.
5. 운영 수준 품질: 코드는 주석, 접근성, 반응형, 성능을 갖춰야 합니다.

생성 전에 STYLE_PRESETS.md를 읽고 뷰포트 안전 CSS 베이스, 밀도 한도, 프리셋 카탈로그, CSS 주의점을 확인합니다.

워크플로

1. 모드 판별

다음 중 한 경로를 선택합니다.

• 새 프레젠테이션: 사용자가 주제, 노트, 완성된 초안을 보유
• PPT 변환: 사용자가 .ppt 또는 .pptx 보유
• 개선 작업: 사용자가 이미 HTML 슬라이드를 갖고 있고 개선을 원함

2. 콘텐츠 파악

필요한 최소 정보만 묻습니다.

• 목적: 피치, 교육, 컨퍼런스 발표, 내부 업데이트
• 길이: 짧음(5-10), 중간(10-20), 김(20+)
• 콘텐츠 상태: 완성 원고, 러프 노트, 주제만 있음