| name | frontend-slides |
| description | 파워포인트 파일을 변환하거나 처음부터 멋지고 애니메이션이 풍부한 HTML 프레젠테이션을 만듭니다. 사용자가 프레젠테이션을 구축하거나, PPT/PPTX를 웹으로 변환하거나, 발표/피치를 위한 슬라이드를 만들고 싶어할 때 사용합니다. 비디자이너가 추상적인 선택 대신 시각적 탐색을 통해 자신의 미적 취향을 발견하도록 돕습니다. |
| origin | ECC |
프론트엔드 슬라이드 (Frontend Slides)
브라우저에서 완전히 실행되는 의존성 없는(Zero-dependency) 애니메이션이 풍부한 HTML 프레젠테이션을 만듭니다.
zarazhangrui의 작품(@zarazhangrui)에서 보여준 시각적 탐색 방식에서 영감을 받았습니다.
활성화 시점
- 발표 자료, 피치 덱, 워크숍 자료 또는 내부 프레젠테이션 작성 시
.ppt 또는 .pptx 슬라이드를 HTML 프레젠테이션으로 변환할 때- 기존 HTML 프레젠테이션의 레이아웃, 모션 또는 타이포그래피를 개선할 때
- 디자인 선호도를 아직 모르는 사용자와 함께 프레젠테이션 스타일을 탐색할 때
필수 준수 사항
- 의존성 제로: 인라인 CSS와 JS를 포함한 하나의 자체 포함된(Self-contained) HTML 파일을 기본으로 합니다.
- 뷰포트 맞춤 필수: 모든 슬라이드는 내부 스크롤 없이 하나의 뷰포트 안에 들어맞아야 합니다.
- 말보다 시각화(Show, don't tell): 추상적인 스타일 설문 대신 시각적 미리보기를 사용합니다.
- 독특한 디자인: 흔한 보라색 그라데이션, 흰색 배경에 Inter 폰트 같은 템플릿 느낌의 덱은 피합니다.
- 프로덕션 품질: 주석이 잘 달리고, 접근 가능하며, 반응형이고 성능이 좋은 코드를 유지합니다.
생성하기 전에 STYLE_PRESETS.md를 읽고 뷰포트 안전 CSS 베이스, 밀도 제한, 프리셋 카탈로그 및 CSS 주의 사항을 확인하세요.
워크플로
1. 모드 감지
다음 중 하나를 선택합니다:
- 신규 프레젠테이션: 사용자에게 주제, 메모 또는 전체 초안이 있는 경우
- PPT 변환: 사용자에게
.ppt 또는 .pptx가 있는 경우
- 개선: 사용자가 이미 HTML 슬라이드를 가지고 있고 개선을 원하는 경우
2. 콘텐츠 파악
최소한의 필요한 것만 묻습니다:
- 목적: 피치, 강의, 컨퍼런스 발표, 내부 업데이트
- 분량: 짧음(5-10), 중간(10-20), 김(20+)
- 콘텐츠 상태: 완성된 원고, 거친 메모, 주제만 있음
사용자에게 콘텐츠가 있다면 스타일링 전에 먼저 붙여넣어 달라고 요청하세요.
3. 스타일 파악
시각적 탐색을 기본으로 합니다.
사용자가 이미 원하는 프리셋을 알고 있다면 미리보기를 건너뛰고 바로 사용하세요.
그렇지 않은 경우:
- 덱이 어떤 느낌(Feeling)을 주어야 하는지 묻습니다: 감명 깊은, 에너지가 넘치는, 집중된, 영감을 주는.
.ecc-design/slide-previews/에 3개의 단일 슬라이드 미리보기 파일을 생성합니다.- 각 미리보기는 자체 포함되어야 하며, 타이포그래피/색상/모션을 명확히 보여주어야 하고, 슬라이드 콘텐츠는 약 100줄 이내로 유지합니다.
- 사용자에게 어떤 미리보기를 유지할지 또는 어떤 요소를 섞을지 묻습니다.
분위기를 스타일에 매칭할 때는 STYLE_PRESETS.md의 프리셋 가이드를 사용하세요.
4. 프레젠테이션 구축
다음 중 하나를 출력합니다:
presentation.html[presentation-name].html
덱에 추출되거나 사용자가 제공한 이미지가 포함된 경우에만 assets/ 폴더를 사용하세요.
필수 구조:
- 시맨틱 슬라이드 섹션
STYLE_PRESETS.md의 뷰포트 안전 CSS 베이스- 테마 값을 위한 CSS 커스텀 속성(변수)
- 키보드, 휠, 터치 내비게이션을 위한 프레젠테이션 컨트롤러 클래스
- 등장(Reveal) 애니메이션 트리거를 위한 Intersection Observer
- 동작 줄이기(Reduced-motion) 지원
5. 뷰포트 맞춤 강제
이를 엄격한 기준으로 삼으세요.
규칙:
- 모든
.slide는 height: 100vh; height: 100dvh; overflow: hidden;을 사용해야 합니다.
- 모든 타이포그래피와 간격은
clamp()를 사용하여 크기가 조절되어야 합니다.
- 콘텐츠가 맞지 않으면 여러 슬라이드로 나눕니다.
- 텍스트를 읽기 힘든 크기로 줄여서 오버플로를 해결하지 마세요.
- 슬라이드 내부에 스크롤바가 생기지 않게 하세요.
STYLE_PRESETS.md의 밀도 제한과 필수 CSS 블록을 사용하세요.
6. 검증
완성된 덱을 다음 크기에서 확인하세요:
- 1920x1080
- 1280x720
- 768x1024
- 375x667
- 667x375
브라우저 자동화가 가능하다면 슬라이드 오버플로가 없는지, 키보드 내비게이션이 작동하는지 확인하세요.
7. 전달
전달 시 다음을 수행합니다:
- 사용자가 원하지 않는 한 임시 미리보기 파일을 삭제합니다.
- 플랫폼에 맞는 실행 도구(Opener)를 사용하여 덱을 엽니다.
- 파일 경로, 사용된 프리셋, 슬라이드 수 및 쉬운 테마 커스터마이징 포인트를 요약합니다.
현재 OS에 맞는 실행 도구를 사용하세요:
- macOS:
open file.html
- Linux:
xdg-open file.html
- Windows:
start "" file.html
PPT / PPTX 변환
파워포인트 변환 시:
- 텍스트, 이미지 및 메모를 추출하기 위해
python3와 python-pptx 사용을 선호합니다.
python-pptx가 없다면 설치할지, 아니면 수동/내보내기 기반 워크플로로 대체할지 묻습니다.- 슬라이드 순서, 발표자 메모 및 추출된 자산을 유지합니다.
- 추출 후 신규 프레젠테이션과 동일한 스타일 선택 워크플로를 실행합니다.
변환은 크로스 플랫폼을 유지하세요. Python으로 할 수 있는 작업에 macOS 전용 도구에만 의존하지 마세요.
구현 요구 사항
HTML / CSS
- 사용자가 명시적으로 다중 파일 프로젝트를 원하는 경우가 아니면 인라인 CSS와 JS를 사용합니다.
- 폰트는 Google Fonts나 Fontshare를 사용할 수 있습니다.
- 분위기 있는 배경, 강한 타이포그래피 계층 구조 및 명확한 시각적 방향을 선호합니다.
- 삽화보다는 추상적인 모양, 그라데이션, 그리드, 노이즈 및 기하학적 요소를 사용합니다.
JavaScript
포함 내용:
- 키보드 내비게이션
- 터치 / 스와이프 내비게이션
- 마우스 휠 내비게이션
- 진행 표시줄 또는 슬라이드 인덱스
- 등장 애니메이션 트리거
접근성
- 시맨틱 구조(
main, section, nav)를 사용합니다.
- 대비를 읽기 쉽게 유지합니다.
- 키보드 전용 내비게이션을 지원합니다.
prefers-reduced-motion을 존중합니다.
콘텐츠 밀도 제한
사용자가 명시적으로 더 조밀한 슬라이드를 요청하고 가독성이 유지되는 경우가 아니면 다음 최대치를 준수하세요:
| 슬라이드 유형 | 제한 |
|---|
| 제목 | 제목 1 + 부제목 1 + 선택적 태그라인 |
| 콘텐츠 | 제목 1 + 글머리 기호 4-6개 또는 짧은 단락 2개 |
| 특징 그리드 | 카드 최대 6개 |
| 코드 | 최대 8-10줄 |
| 인용구 | 인용구 1 + 출처 |
| 이미지 | 뷰포트에 맞게 제한된 이미지 1개 |
안티 패턴
- 시각적 정체성이 없는 일반적인 스타트업 그라데이션
- 의도적으로 편집 스타일을 추구하는 경우가 아닌데 시스템 폰트를 사용하는 경우
- 긴 글머리 기호 나열
- 스크롤이 필요한 코드 블록
- 작은 화면에서 깨지는 고정 높이 콘텐츠 박스
-clamp(...)와 같은 잘못된 음수 CSS 함수 사용
관련 ECC 스킬
frontend-patterns: 덱 주변의 컴포넌트 및 상호작용 패턴liquid-glass-design: 프레젠테이션에 의도적으로 Apple 글래스 미학을 차용할 때e2e-testing: 최종 덱에 대해 자동화된 브라우저 검증이 필요할 때
결과물 체크리스트
- 프레젠테이션이 브라우저의 로컬 파일에서 실행되는가?
- 모든 슬라이드가 스크롤 없이 뷰포트에 들어맞는가?
- 스타일이 독특하고 의도적인가?
- 애니메이션이 시끄럽지 않고 의미 있는가?
- 동작 줄이기 설정을 존중하는가?
- 전달 시 파일 경로와 커스터마이징 포인트가 설명되었는가?
