Frontend Slides
브라우저에서 완전히 실행되는 제로 의존성의 애니메이션이 풍부한 HTML 프레젠테이션을 만듭니다.
zarazhangrui의 작업에서 선보인 시각적 탐색 접근 방식에서 영감을 받았습니다 (크레딧: @zarazhangrui).
활성화 시점
- 강연 덱, 피치 덱, 워크숍 덱 또는 내부 프레젠테이션을 만들 때
.ppt또는.pptx슬라이드를 HTML 프레젠테이션으로 변환할 때- 기존 HTML 프레젠테이션의 레이아웃, 모션 또는 타이포그래피를 개선할 때
- 아직 디자인 선호도를 모르는 사용자와 함께 프레젠테이션 스타일을 탐색할 때
필수 규칙
- 제로 의존성: 기본적으로 인라인 CSS와 JS를 포함한 단일 자체 포함 HTML 파일을 생성합니다.
- 뷰포트 맞춤 필수: 모든 슬라이드는 내부 스크롤 없이 하나의 뷰포트 안에 완전히 들어맞아야 합니다.
- 설명보다는 보여주기: 추상적인 스타일 설문지 대신 시각적 미리보기를 사용합니다.
- 독특한 디자인: 일반적인 보라색 그라데이션, 흰색 배경 Inter 폰트, 템플릿처럼 보이는 덱을 피합니다.
- 프로덕션 품질: 코드에 주석을 달고, 접근 가능하며, 반응형이고, 성능이 좋도록 유지합니다.
생성하기 전에 STYLE_PRESETS.md 파일에서 뷰포트 안전 CSS 베이스, 밀도 제한, 프리셋 카탈로그 및 CSS 주의 사항을 읽어보세요.
워크플로우
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
- 축소된 모션 지원
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: 최종 덱에 대한 자동화된 브라우저 검증이 필요한 경우
전달 가능한 체크리스트
- 프레젠테이션이 로컬 파일에서 브라우저에서 실행됩니다.
- 모든 슬라이드가 스크롤 없이 뷰포트에 맞습니다.
- 스타일이 독특하고 의도적입니다.
- 애니메이션이 의미 있고, 산만하지 않습니다.
- 축소된 모션이 존중됩니다.
- 파일 경로와 사용자 정의 지점이 인계 시 설명됩니다.