| name | frontend-slides |
| description | 처음부터 만들거나 PowerPoint 파일을 변환해, 강한 애니메이션과 시각적 완성도를 갖춘 HTML 프레젠테이션을 만듭니다. 발표 자료, PPT/PPTX의 웹 변환, 발표/피치용 슬라이드 제작에 사용합니다. 비디자이너도 추상적 선택보다 시각 탐색을 통해 취향을 찾을 수 있게 돕습니다. |
| origin | ECC |
프론트엔드 슬라이드
브라우저에서 완전히 동작하는 무의존성, 애니메이션 중심 HTML 프레젠테이션을 만듭니다.
zarazhangrui(@zarazhangrui)의 작업에서 보인 시각 탐색 접근법에서 영감을 받았습니다.
사용 시점
- 발표 자료, 피치 덱, 워크숍 덱, 내부 프레젠테이션을 만들 때
.ppt, .pptx 슬라이드를 HTML 프레젠테이션으로 변환할 때- 기존 HTML 프레젠테이션의 레이아웃, 모션, 타이포그래피를 개선할 때
- 아직 디자인 취향이 분명하지 않은 사용자와 스타일을 탐색할 때
필수 원칙
- 무의존성: 기본값은 inline CSS/JS를 포함한 단일 self-contained HTML 파일입니다.
- 뷰포트 완전 적합 필수: 모든 슬라이드는 내부 스크롤 없이 한 화면에 들어와야 합니다.
- 말보다 시각으로 보여주기: 추상적 스타일 설문 대신 시각적 프리뷰를 사용합니다.
- 분명한 디자인 방향: 뻔한 보라 그라디언트, 흰 배경 위 Inter, 템플릿 느낌의 덱을 피합니다.
- 운영 수준 품질: 코드는 주석, 접근성, 반응형, 성능을 갖춰야 합니다.
생성 전에 STYLE_PRESETS.md를 읽고 뷰포트 안전 CSS 베이스, 밀도 한도, 프리셋 카탈로그, CSS 주의점을 확인합니다.
워크플로
1. 모드 판별
다음 중 한 경로를 선택합니다.
- 새 프레젠테이션: 사용자가 주제, 노트, 완성된 초안을 보유
- PPT 변환: 사용자가
.ppt 또는 .pptx 보유
- 개선 작업: 사용자가 이미 HTML 슬라이드를 갖고 있고 개선을 원함
2. 콘텐츠 파악
필요한 최소 정보만 묻습니다.
- 목적: 피치, 교육, 컨퍼런스 발표, 내부 업데이트
- 길이: 짧음(5-10), 중간(10-20), 김(20+)
- 콘텐츠 상태: 완성 원고, 러프 노트, 주제만 있음
사용자가 콘텐츠를 갖고 있다면 스타일링 전에 먼저 붙여넣게 합니다.
3. 스타일 파악
기본값은 시각 탐색 방식입니다.
사용자가 원하는 프리셋을 이미 알고 있다면 프리뷰를 생략하고 바로 사용합니다.
그렇지 않다면:
- 덱이 어떤 감정을 만들어야 하는지 묻습니다. 예: impressed, energized, focused, inspired
.ecc-design/slide-previews/에 단일 슬라이드 프리뷰 3개를 만듭니다.- 각 프리뷰는 self-contained여야 하고, 타이포그래피/색/모션을 분명히 보여주며, 슬라이드 콘텐츠는 대략 100줄 이하로 유지합니다.
- 어떤 프리뷰를 유지할지, 혹은 어떤 요소를 섞을지 사용자에게 묻습니다.
감정에서 스타일로 매핑할 때는 STYLE_PRESETS.md의 프리셋 가이드를 사용합니다.
4. 프레젠테이션 제작
출력 파일은 다음 중 하나입니다.
presentation.html[presentation-name].html
추출한 이미지나 사용자 제공 이미지가 있을 때만 assets/ 폴더를 사용합니다.
필수 구조:
- 시맨틱 슬라이드 섹션
STYLE_PRESETS.md의 뷰포트 안전 CSS 베이스- 테마 값을 위한 CSS 커스텀 프로퍼티
- 키보드, 휠, 터치 내비게이션을 위한 프레젠테이션 컨트롤러 클래스
- 등장 애니메이션용 Intersection Observer
- reduced-motion 지원
5. 뷰포트 적합 강제
이 단계는 강제 게이트로 취급합니다.
규칙:
- 모든
.slide는 height: 100vh; height: 100dvh; overflow: hidden;를 사용해야 합니다.
- 모든 타이포그래피와 간격은
clamp()로 스케일링해야 합니다.
- 콘텐츠가 맞지 않으면 여러 슬라이드로 분할합니다.
- 읽기 어려운 크기까지 글자를 줄여 overflow를 해결하지 않습니다.
- 슬라이드 내부 스크롤바는 허용하지 않습니다.
STYLE_PRESETS.md의 밀도 한도와 필수 CSS 블록을 사용합니다.
6. 검증
완성된 덱을 다음 크기에서 확인합니다.
- 1920x1080
- 1280x720
- 768x1024
- 375x667
- 667x375
브라우저 자동화가 가능하면, 슬라이드 overflow가 없는지와 키보드 내비게이션이 동작하는지 검증합니다.
7. 전달
인계 시에는 다음을 수행합니다.
- 사용자가 유지하길 원하지 않는 한 임시 프리뷰 파일 삭제
- 필요하면 플랫폼에 맞는 방식으로 덱 열기
- 파일 경로, 사용한 프리셋, 슬라이드 수, 쉽게 커스터마이즈할 수 있는 테마 지점 요약
현재 OS에 맞는 열기 명령을 사용합니다.
- macOS:
open file.html
- Linux:
xdg-open file.html
- Windows:
start "" file.html
PPT / PPTX 변환
PowerPoint 변환 시:
- 텍스트, 이미지, 노트 추출에는
python3와 python-pptx를 우선 사용합니다.
python-pptx가 없으면 설치할지, 수동/내보내기 기반 흐름으로 갈지 확인합니다.- 슬라이드 순서, 발표자 노트, 추출 자산을 보존합니다.
- 추출 후에는 새 프레젠테이션과 같은 스타일 선택 워크플로를 적용합니다.
변환은 크로스플랫폼이어야 합니다. Python으로 해결할 수 있다면 macOS 전용 도구에 의존하지 않습니다.
구현 요구사항
HTML / CSS
- 사용자가 멀티파일 프로젝트를 원하지 않는 한 inline CSS/JS를 사용합니다.
- 폰트는 Google Fonts 또는 Fontshare를 사용할 수 있습니다.
- 분위기 있는 배경, 강한 타입 계층, 명확한 시각 방향을 우선합니다.
- 일러스트보다 추상 도형, 그라디언트, 그리드, 노이즈, 기하 요소를 활용합니다.
JavaScript
포함할 것:
- 키보드 내비게이션
- 터치 / 스와이프 내비게이션
- 마우스 휠 내비게이션
- 진행 표시기 또는 슬라이드 인덱스
- 진입 시 reveal 애니메이션 트리거
접근성
- 시맨틱 구조(
main, section, nav) 사용
- 충분한 대비 유지
- 키보드 전용 내비게이션 지원
prefers-reduced-motion 존중
콘텐츠 밀도 한도
사용자가 더 빽빽한 슬라이드를 명시적으로 원하고 가독성이 유지되는 경우가 아니라면 다음 상한을 지킵니다.
| Slide type | Limit |
|---|
| Title | 1 heading + 1 subtitle + optional tagline |
| Content | 1 heading + 4-6 bullets or 2 short paragraphs |
| Feature grid | 6 cards max |
| Code | 8-10 lines max |
| Quote | 1 quote + attribution |
| Image | 1 image constrained by viewport |
안티패턴
- 시각적 정체성 없는 뻔한 스타트업 그라디언트
- 의도된 에디토리얼 스타일이 아닌데 시스템 폰트만 쓰는 덱
- 긴 bullet 벽
- 스크롤이 필요한 코드 블록
- 작은 화면에서 깨지는 고정 높이 콘텐츠 박스
-clamp(...) 같은 잘못된 부호 CSS 함수
관련 ECC 스킬
frontend-patterns: 덱 주변의 컴포넌트/인터랙션 패턴liquid-glass-design: Apple glass 미감을 의도적으로 차용하는 경우e2e-testing: 최종 덱을 브라우저 자동화로 검증해야 할 경우
전달물 체크리스트
- 프레젠테이션이 로컬 파일에서 브라우저로 실행됨
- 모든 슬라이드가 스크롤 없이 뷰포트에 맞음
- 스타일이 뚜렷하고 의도적임
- 애니메이션이 의미 있고 산만하지 않음
- reduced motion을 존중함
- 파일 경로와 커스터마이징 지점을 인계 시 설명함
