frontend-slides

프론트엔드 슬라이드

브라우저에서 완전히 동작하는 무의존성, 애니메이션 중심 HTML 프레젠테이션을 만듭니다.

zarazhangrui(@zarazhangrui)의 작업에서 보인 시각 탐색 접근법에서 영감을 받았습니다.

사용 시점

• 발표 자료, 피치 덱, 워크숍 덱, 내부 프레젠테이션을 만들 때
• .ppt, .pptx 슬라이드를 HTML 프레젠테이션으로 변환할 때
• 기존 HTML 프레젠테이션의 레이아웃, 모션, 타이포그래피를 개선할 때
• 아직 디자인 취향이 분명하지 않은 사용자와 스타일을 탐색할 때

필수 원칙

1. 무의존성: 기본값은 inline CSS/JS를 포함한 단일 self-contained HTML 파일입니다.
2. 뷰포트 완전 적합 필수: 모든 슬라이드는 내부 스크롤 없이 한 화면에 들어와야 합니다.
3. 말보다 시각으로 보여주기: 추상적 스타일 설문 대신 시각적 프리뷰를 사용합니다.
4. 분명한 디자인 방향: 뻔한 보라 그라디언트, 흰 배경 위 Inter, 템플릿 느낌의 덱을 피합니다.
5. 운영 수준 품질: 코드는 주석, 접근성, 반응형, 성능을 갖춰야 합니다.

생성 전에 STYLE_PRESETS.md를 읽고 뷰포트 안전 CSS 베이스, 밀도 한도, 프리셋 카탈로그, CSS 주의점을 확인합니다.

워크플로

1. 모드 판별

다음 중 한 경로를 선택합니다.

• 새 프레젠테이션: 사용자가 주제, 노트, 완성된 초안을 보유
• PPT 변환: 사용자가 .ppt 또는 .pptx 보유
• 개선 작업: 사용자가 이미 HTML 슬라이드를 갖고 있고 개선을 원함

2. 콘텐츠 파악

필요한 최소 정보만 묻습니다.

• 목적: 피치, 교육, 컨퍼런스 발표, 내부 업데이트
• 길이: 짧음(5-10), 중간(10-20), 김(20+)
• 콘텐츠 상태: 완성 원고, 러프 노트, 주제만 있음

사용자가 콘텐츠를 갖고 있다면 스타일링 전에 먼저 붙여넣게 합니다.

3. 스타일 파악

기본값은 시각 탐색 방식입니다.

사용자가 원하는 프리셋을 이미 알고 있다면 프리뷰를 생략하고 바로 사용합니다.

그렇지 않다면:

1. 덱이 어떤 감정을 만들어야 하는지 묻습니다. 예: impressed, energized, focused, inspired
2. .ecc-design/slide-previews/에 단일 슬라이드 프리뷰 3개를 만듭니다.
3. 각 프리뷰는 self-contained여야 하고, 타이포그래피/색/모션을 분명히 보여주며, 슬라이드 콘텐츠는 대략 100줄 이하로 유지합니다.
4. 어떤 프리뷰를 유지할지, 혹은 어떤 요소를 섞을지 사용자에게 묻습니다.

감정에서 스타일로 매핑할 때는 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 변환 시:

1. 텍스트, 이미지, 노트 추출에는 python3와 python-pptx를 우선 사용합니다.
2. python-pptx가 없으면 설치할지, 수동/내보내기 기반 흐름으로 갈지 확인합니다.
3. 슬라이드 순서, 발표자 노트, 추출 자산을 보존합니다.
4. 추출 후에는 새 프레젠테이션과 같은 스타일 선택 워크플로를 적용합니다.

변환은 크로스플랫폼이어야 합니다. 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을 존중함
• 파일 경로와 커스터마이징 지점을 인계 시 설명함