동영상 → 스크롤 기반 랜딩 페이지
동영상의 히어로가 시간이 아닌 스크롤에 따라 재생되는 시네마틱 랜딩 페이지를 만듭니다. Apple 제품 페이지나 GitHub Copilot 랜딩 페이지와 같습니다. 소스 동영상에서 프레임을 추출하여 사용자가 스크롤할 때마다 프레임이 전환됩니다. 스티키 히어로 아래에는 일반 스크롤 섹션에 카피와 CTA가 배치됩니다.
호출 시점
- 사용자가 동영상을 업로드하고 랜딩 페이지, 스크롤 사이트, 스크롤 프레임 히어로, 또는 동영상으로 만든 웹사이트를 요청할 때
- "Apple 스타일 스크롤", "GitHub Copilot 랜딩", "스크롤 시 프레임 전환", "스크롤 동영상" 등의 언급이 있을 때
- 히브리어 동의어: "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"
저장 위치
기본값: ~/Documents/yuv-projects/landings/<slug>/ — 랜딩 페이지는 항상 이곳에 저장하여 나중에 다시 찾을 수 있도록 합니다. 상위 디렉토리가 없으면 생성합니다.
mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# 여기에 <slug>/를 빌드합니다.
최종 경로: ~/Documents/yuv-projects/landings/<slug>/. 빌드가 끝날 때마다 사용자에게 랜딩 페이지 위치를 알려줍니다.
워크플로우 (8단계)
- 소스 조사 —
ffprobe를 사용하여 재생 시간, FPS, 해상도, 오디오 정보를 확인합니다. - 프레임 수 선택 — 기본값
80. 최소40(이보다 낮으면 끊김), 최대160(페이지가 무거워짐). 재생 시간에 따라 선택: ≤10초 → 50, 10–30초 → 80, 30–60초 → 120, >60초 → 160. - 출력 디렉토리 결정 — 기본값
~/Documents/yuv-projects/landings/<slug>/.<slug>는 짧게, 동영상 이름이나 주제에서 파생합니다. 명시적 요청이 있을 때만 재정의합니다. - 프레임 추출 —
references/extract-frames.py <source-video> <output-dir> [count]실행.output-dir/frames/f_0001.jpg... 형식으로 JPG 품질 82, 최대 너비 1920px(소스가 더 크면 다운스케일)로 출력합니다. - 복사 및 커스터마이징 —
references/landing-template.html을output-dir/index.html로 복사합니다:__FRAMES__플레이스홀더를 각 프레임의<img>태그로 교체합니다(빌드 스크립트가--build-html옵션을 전달하면 자동으로 처리).__HEADLINE__,__TAGLINE__,__CTA_TEXT__,__CTA_HREF__, 섹션을 채웁니다.- 히브리어 콘텐츠의 경우:
<html lang="he" dir="rtl">로 설정하고 폰트를 Rubik/Assistant로 교체합니다(references/design-notes.md참조).
- 프레임 최적화 — 빌드 스크립트가 이미 최대 1920px로 스케일링합니다. 페이지 전체 용량이 12MB를 초과하면 품질을 75로 낮추거나 프레임 수를 줄입니다.
- 미리보기 — 출력 디렉토리 내에서
python -m http.server를 실행하고http://localhost:8000을 엽니다. 적절한 머신에서 부드러운 스크롤을 확인할 수 있습니다. - 배포 — 폴더를 Vercel/Netlify/Cloudflare Pages에 업로드합니다. 빌드 단계가 필요 없습니다.
스크롤 메커니즘
- 외부 스크롤러
.scroll-stage의 높이는 뷰포트 단위로 설정됩니다(기본값600vh= 모든 프레임을 이동하려면 5번의 스크롤 페이지 필요). - 스티키 히어로
position: sticky; top: 0; height: 100vh에는 모든 프레임이 절대 위치로 배치되며 활성 프레임만 표시됩니다. - 스크롤 리스너가
progress = scrolledIntoStage / scrollableHeight를 계산하여 0–1로 고정(clamp)합니다. idx = floor(progress * (N - 1))— 해당 프레임에.active클래스를 전환합니다.- 리스너를
requestAnimationFrame으로 감싸서 60fps를 유지합니다.
디자인 규칙
- 프로젝트의 디자인 시스템이 지정된 경우 따르고, 그렇지 않으면 yuv-design-system 스킬의 기본값을 사용합니다: Anton + Inter (영어) / Rubik + Assistant (히브리어), Fly High 퍼플 (
#5E17EB) + 노랑 (#FFEC00) + 회색 (#F1F2F2) 팔레트, 오프화이트(순수#fff사용 금지), 0px 또는 999px 반경(8–12px 코너 금지). Warm Editorial(분홍+노랑+본)은 Hope/bigcats 브랜드군 전용입니다. - 히어로 오버레이는 미묘하게 — 비네트와 하나의 큰 헤드라인만; 프레임을 가리지 않습니다.
- 히어로 아래 섹션: 본 배경, 큰 Anton 제목, 18–22px의 Inter 본문, 날카로운 분홍색 사각형에 Anton 텍스트가 있는 CTA.
- 히브리어: RTL 준수, 제목에는 Rubik 900, 본문에는 Assistant 400/500 사용.
파일 참조
| 파일 | 용도 |
|---|---|
references/extract-frames.py | ffmpeg 기반 프레임 추출기; 한 번에 전체 HTML을 빌드하는 옵션도 있음 |
references/landing-template.html | 스크롤 메커니즘이 포함된 자체 완결형 랜딩 페이지 스켈레톤 |
references/design-notes.md | 타이포그래피, 팔레트 및 모션 기본값 |