정의
스크롤을 내리면 화면이 "1단계 → 2단계 → 3단계"로 이야기처럼 전개되는 랜딩 페이지를 무거운 애니메이션 라이브러리 없이 만들고 싶을 때 쓰는 구조다. 스크롤을 얼마나 내렸는지(진행도)를 이야기의 재생 시간축처럼 쓰는 것이 핵심이다.
정확히 말하면, Scroll-driven narrative layout은 스크롤 진행도를 내러티브 타임라인으로 쓰는 페이지 구조다. 긴 래퍼 안에 position: sticky(스크롤해도 화면 특정 위치에 붙어 고정되는 CSS 배치) 스테이지를 두고, scroll() / view() 타임라인(스크롤 위치·요소의 뷰포트 진입을 애니메이션의 재생 진행으로 연결하는 CSS 기능)·animation-timeline·순수 CSS @keyframes(시간에 따른 애니메이션 단계를 CSS로 정의하는 문법)로 단계 전환·진행 표시·요소 등장을 동기화한다. GSAP·Lenis·Framer Motion 같은 JS 애니메이션 라이브러리 없이도 "Before → During → After" 같은 제품 스토리를 만들 수 있다.
왜 필요한가
랜딩·온보딩·기술 블로그 홈은 한 페이지 안에서 여러 단계를 설득해야 한다. JS 스크롤 라이브러리는 번들·hydration(서버가 만든 HTML에 React가 이벤트를 붙여 실제 동작하게 만드는 과정)·메인 스레드 비용을 추가하고, prefers-reduced-motion(사용자가 OS에서 "동작 줄이기"를 켰는지 감지하는 CSS 미디어 쿼리) 폴백이 복잡해진다. 2026년 화제 스타트업 랜딩(Granola·Browserbase 등)은 scroll-timeline + DOM 데모 조합으로 "살아 있는 제품" 느낌을 낸다. mp4 히어로 대비 텍스트가 선명하고, 스크롤과 프레임 단위로 맞추기 쉽다.
동작 원리
두 층으로 나눈다.
1) Sticky scrollytelling (구간 전환)
스크롤 진행도 p ∈ [0,1]을 JS scroll 리스너 또는 animation-timeline: scroll()로 읽어 phase = floor(p × 단계수)를 고른다. 래퍼 높이가 단계수 × 100vh이면 한 화면당 한 단계씩 넘긴다.
| 요소 | 역할 |
|---|---|
| 긴 래퍼 | 스크롤 “시간축” 확보 |
| sticky stage | 시각적 프레임 고정 — 콘텐츠만 교체 |
| phase rail | 현재 단계·다음 CTA를 텍스트로 앵커 |
| reduced motion | sticky 해제, 전 단계 정적 나열 |
2) Pure CSS loop demo (히어로 슬롯)
히어로 우측 라이브 노트 데모처럼, 14s 순환 연출은 JS 없이 keyframes만 쓴다.
- 자리 예약:
min-height+opacity/transform만 애니 — DOM 삽입 없음 → CLS(Cumulative Layout Shift, 로딩 중 요소가 밀려 화면이 흔들리는 정도를 재는 지표) 0 - 타이핑:
clip-path: inset()+steps()와이프 — 한글도 글리프 단위로 안전 - 승격 연출: TIL 카드 → 연결선 → Knowledge 카드 순차
animation-delay - reduced motion: 최종 상태(승격 완료)로 고정
3) View entry (보조 레이어)
목록·카드는 @supports (animation-timeline: view()) 안에서 view-reveal로 등장한다. 스크롤 내러티브와 독립 — 미지원 브라우저는 즉시 표시.
실무 적용
체크리스트:
- sticky 부모에
overflow: hidden금지 — sticky가 죽는다. - 데모는
aria-hidden+ 실제 링크는 별도 — 장식 UI와 내비 계약 분리. - phase 전환은 transition, 루프 데모는 keyframes — 역할을 섞지 않는다.
- 모션 축소 시 정적 폴백 — 정보 손실 없이 단계 나열.
트레이드오프
| 선택 | 이득 | 비용 |
|---|---|---|
| CSS scroll-timeline | 0kb, compositor(레이아웃 재계산 없이 GPU로 합성하는 렌더 단계) 친화 | Safari·구형 브라우저 폴백 필요 |
| sticky + JS phase | 정밀 제어, 링크·포커스 가능 | scroll listener 또는 rAF 비용 |
| pure CSS loop demo | hydration 0, 선명한 텍스트 | 타이밍 튜닝이 CSS에 분산 |
| mp4 히어로 | 제작 빠름 | 무거움, 스크롤 동기화 어려움 |
사용하면 안 되는 경우
- 콘텐츠가 짧아 스크롤 여유가 없을 때 — sticky만 남고 연출이 깨진다.
- 접근성이 핵심인 폼·결제 플로우 — 스크롤에 UI 상태를 묶지 않는다.
- SEO 본문이 스크롤 뒤에 숨을 때 — 크롤러·저대역폭에서 핵심 문장이 늦게 보인다.
흔한 실수
- sticky 조상에
overflow: hidden— 스테이지가 스크롤과 함께 사라짐. - 데모 텍스트를
<Link>로 감싸기 — Playwright·스크린리더 계약과 충돌. prefers-reduced-motion미처리 — 14s 루프가 계속 도는 피로.- 영상 데모 + scroll-timeline 이중 동기화 — 프레임 드리프트.
관련 개념
- 2026-startup-landing-page-trends — Granola·Browserbase 실측 패턴
- cls-skeleton-layout-reservation — 데모 자리 예약과 CLS
- largest-contentful-paint — 히어로 에셋 전략(DOM vs video)