비디오 → 스크롤 구동 랜딩 페이지은(는) 무엇을 하나요?
히어로가 시간 대신 스크롤에 따라 재생되는 시네마틱 랜딩 페이지를 빌드합니다. 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, 최대 너비 1920 (소스가 더 크면 다운스케일). - 템플릿 복사 및 사용자화 —
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로 클램프). idx = floor(progress * (N - 1))— 해당 프레임에.active클래스 전환.- 리스너를
requestAnimationFrame으로 래핑하여 60fps 유지.
디자인 규칙
- 프로젝트가 YUV.AI 브랜드 (Yuval 개인, 포트폴리오, 브랜드)인 경우:
yuv-design-system호출, 매체에 따라 모드 고정:- 네온 모드 (YUV.AI 웹 기본): 핫 핑크 (
#FF1464) + 네온 시안 (#00E5FF) + 흰색 또는 진한 검정 캔버스. Anton + Inter (영어) / Rubik + Assistant (히브리어). 0px 또는 999px 반경. - 웜 에디토리얼 모드: Hope, Marcus, bigcats.ai, practical.yuv.ai 전용 — 핑크 + 옐로우 + 본, 순수
#fff가 아닌 오프-화이트. - 랜딩 페이지에 Decks 모드(Fly High 퍼플/옐로우) 사용 금지 — 해당 팔레트는 슬라이드 덱 전용.
- 네온 모드 (YUV.AI 웹 기본): 핫 핑크 (
- 프로젝트가 YUV.AI 브랜드가 아닌 경우: yuv-design-system 적용하지 않음. 소스 비디오 분위기에 맞는 팔레트 선택. Anton + Inter는 합리적인 기본값이지만 필수는 아님.
- 히어로 오버레이는 미묘하게 — 비네트와 큰 헤드라인 하나만; 프레임을 압도하지 말 것.
- 히어로 아래 섹션: 밝은 캔버스 (네온 모드에서 흰색, 웜 에디토리얼에서 오프-화이트, 일반 웜의 경우 본), 큰 Anton 헤드라인, Inter 본문 18–22px, CTA는 날카로운 알약 버튼 (
border-radius: 999px) — 네온 모드에서 핑크 채우기, 그 외 브랜드 색상 사용. - 히브리어: RTL 준수, 헤드라인에 Rubik 900, 본문에 Assistant 400/500 사용.
파일 참조
| 파일 | 용도 |
|---|---|
references/extract-frames.py | ffmpeg 기반 프레임 추출기; 선택적으로 전체 HTML을 한 번에 빌드 |
references/landing-template.html | 스크롤 메커니즘이 포함된 자체 완결형 랜딩 페이지 스켈레톤 |
references/design-notes.md | 타이포그래피, 팔레트 및 모션 기본값 |