프론트엔드 슬라이드은(는) 무엇을 하나요?
제로 의존성, 애니메이션이 풍부한 HTML 프레젠테이션을 만들어 브라우저에서 완전히 실행합니다.
Zarazhangrui(zarazhangrui)의 작업에서 선보인 시각적 탐색 접근 방식에서 영감을 받았습니다.
활성화 시점
- 토크 데크, 피치 데크, 워크숍 데크 또는 내부 프레젠테이션을 만드는 경우
.ppt또는.pptx슬라이드를 HTML 프레젠테이션으로 변환하는 경우- 기존 HTML 프레젠테이션의 레이아웃, 모션 또는 타이포그래피를 개선하는 경우
- 아직 디자인 선호도를 모르는 사용자와 함께 프레젠테이션 스타일을 탐색하는 경우
필수 조건
- 제로 의존성: 기본적으로 인라인 CSS와 JS를 포함한 단일 자체 포함 HTML 파일로 만듭니다.
- 뷰포트 맞춤 필수: 모든 슬라이드는 내부 스크롤 없이 하나의 뷰포트 안에 완벽하게 맞아야 합니다.
- 보여주기, 말하지 않기: 추상적인 스타일 설문 대신 시각적 미리보기를 사용합니다.
- 독특한 디자인: 일반적인 보라색 그라데이션, Inter-on-white, 템플릿처럼 보이는 데크를 피합니다.
- 프로덕션 품질: 코드에 주석을 달고, 접근 가능하며, 반응형이고, 성능이 뛰어나도록 유지합니다.
생성하기 전에 뷰포트 안전 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 변환의 경우:
- 텍스트, 이미지 및 노트를 추출하려면
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: 최종 데크에 대한 자동화된 브라우저 검증이 필요할 때
전달 체크리스트
- 프레젠테이션이 로컬 파일에서 브라우저로 실행됨
- 모든 슬라이드가 스크롤 없이 뷰포트에 맞음
- 스타일이 독특하고 의도적임
- 애니메이션이 의미 있고, 시끄럽지 않음
- reduced motion이 준수됨
- 파일 경로 및 사용자 정의 지점이 인계 시 설명됨