| name | frontend-slides |
| description | 처음부터 또는 PowerPoint 파일을 변환하여 멋지고 애니메이션이 풍부한 HTML 프레젠테이션을 제작합니다. 프레젠테이션을 구축하거나, PPT/PPTX를 웹으로 변환하거나, 발표/피치용 데크를 만들 때 사용하세요. 비디자이너가 추상적인 선택이 아닌 시각적 탐색을 통해 자신의 미적 취향을 발견하도록 돕습니다. |
| origin | ECC |
프론트엔드 슬라이드 (Frontend Slides)
브라우저에서 완전히 실행되는 종속성 없는 애니메이션 풍부한 HTML 프레젠테이션을 제작합니다.
zarazhangrui의 시각적 탐색 방식에서 영감을 받았습니다 (제작: @zarazhangrui).
활성화 시점
- 발표 데크, 피치 데크, 워크숍 데크 또는 내부 프레젠테이션 제작 시
.ppt 또는 .pptx 슬라이드를 HTML 프레젠테이션으로 변환할 때- 기존 HTML 프레젠테이션의 레이아웃, 모션 또는 타이포그래피를 개선할 때
- 디자인 선호도를 아직 모르는 사용자와 함께 프레젠테이션 스타일을 탐색할 때
타협할 수 없는 사항
- 제로 종속성: 인라인 CSS 및 JS가 포함된 하나의 자립형 HTML 파일을 기본으로 합니다.
- 뷰포트 맞춤 필수: 모든 슬라이드는 내부 스크롤 없이 하나의 뷰포트 내에 맞아야 합니다.
- 말보다 시각화: 추상적인 스타일 설문 대신 시각적 미리보기를 사용하세요.
- 독창적인 디자인: 일반적인 보라색 그라데이션, 흰색 배경의 Inter 폰트 같은 템플릿 느낌의 데크를 피하세요.
- 프로덕션 품질: 코드를 주석 처리하고, 접근성 있으며, 반응형이고 성능이 좋게 유지하세요.
생성하기 전에 뷰포트 안전 CSS 베이스, 밀도 제한, 프리셋 카탈로그 및 CSS 주의 사항에 대해 STYLE_PRESETS.md를 읽으세요.
워크플로우
1. 모드 감지
하나의 경로를 선택하세요:
- 새 프레젠테이션: 사용자가 주제, 메모 또는 전체 초안을 가지고 있음
- PPT 변환: 사용자가
.ppt 또는 .pptx를 가지고 있음
- 개선: 사용자가 이미 HTML 슬라이드를 가지고 있으며 개선을 원함
2. 콘텐츠 발견
필요한 최소한의 것만 질문하세요:
- 목적: 피치, 교육, 컨퍼런스 발표, 내부 업데이트
- 길이: 짧음 (5-10), 중간 (10-20), 김 (20+)
- 콘텐츠 상태: 완성된 문구, 거친 메모, 주제만 있음
사용자가 콘텐츠를 가지고 있다면 스타일링 전에 붙여넣어 달라고 요청하세요.
3. 스타일 발견
시각적 탐색을 기본으로 합니다.
사용자가 이미 원하는 프리셋을 알고 있다면 미리보기를 건너뛰고 직접 사용하세요.
그렇지 않은 경우:
- 데크가 어떤 느낌을 주어야 하는지 질문하세요: 깊은 인상, 활기참, 집중됨, 영감을 줌.
.ecc-design/slide-previews/에 3개의 단일 슬라이드 미리보기 파일을 생성합니다.- 각 미리보기는 자립형이어야 하며, 타이포그래피/컬러/모션을 명확하게 보여주어야 하고, 슬라이드 콘텐츠를 약 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()를 사용하여 크기를 조정해야 함
- 콘텐츠가 맞지 않을 경우 여러 슬라이드로 나눔
- 텍스트를 가독성 이하로 줄여서 넘침 문제를 해결하지 마세요
- 슬라이드 내부에 스크롤바를 허용하지 마세요
STYLE_PRESETS.md의 밀도 제한 및 필수 CSS 블록을 사용하세요.
6. 검증
완성된 데크를 다음 크기에서 확인하세요:
- 1920x1080
- 1280x720
- 768x1024
- 375x667
- 667x375
브라우저 자동화를 사용할 수 있는 경우, 슬라이드가 넘치지 않고 키보드 네비게이션이 작동하는지 확인하는 데 사용하세요.
7. 전달
핸드오프 시:
- 사용자가 보관을 원하는 경우가 아니면 임시 미리보기 파일을 삭제하세요
- 유용한 경우 플랫폼에 적합한 오프너로 데크를 엽니다
- 파일 경로, 사용된 프리셋, 슬라이드 개수 및 쉬운 테마 커스텀 포인트를 요약하세요
현재 OS에 맞는 오프너를 사용하세요:
- macOS:
open file.html
- Linux:
xdg-open file.html
- Windows:
start "" file.html
PPT / PPTX 변환
PowerPoint 변환의 경우:
- 텍스트, 이미지 및 메모 추출을 위해
python-pptx와 함께 python3을 선호합니다.
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: 최종 데크에 대해 자동화된 브라우저 검증이 필요한 경우
인도물 체크리스트
- 프레젠테이션이 브라우저의 로컬 파일에서 실행됨
- 모든 슬라이드가 스크롤 없이 뷰포트에 맞음
- 스타일이 독특하고 의도적임
- 애니메이션이 소음이 아닌 의미가 있음
- 줄어든 동작(reduced motion)이 존중됨
- 파일 경로 및 커스텀 포인트가 핸드오프 시 설명됨
