scroll-sequencinglisted

# Scroll Sequencing — 스크롤 내러티브의 리듬을 코드 계약으로 ## Overview 스크롤 진행도를 주는 도구는 많다(drei `ScrollControls`, lenis, GSAP ScrollTrigger). 곡선 카메라 경로도 있다(drei `MotionPathControls`). **없는 것은 리듬 계층이다** — 어떤 구간이 길고 짧아야 하는지, 구간마다 이징과 스크럽이 어떻게 달라야 하는지, 어떤 값이 스크롤에 직결되고 어떤 값이 느슨하게 정착해야 하는지. 이 레시피는 그 계층의 판단 규칙이다. 값들은 실제 제작된 스크롤 릴(30씬·클립 54·세그먼트 70+)에서 사용자 판정을 거치며 역검증됐다 — "이렇게 하면 좋다"가 아니라 "이렇게 안 했더니 밋밋했고, 이렇게 바꾸니 살았다"의 기록이다. **적용 지면:** 스크롤 스토리텔링(포트폴리오 릴·제품 쇼케이스·케이스 스터디), three.js/R3F 씬 시퀀스. **오버스펙인 지면:** 단순 섹션 스냅, 단일 패럴랙스, 일반 문서 페이지 — 거기는 CSS scroll-snap이나 단일 IntersectionObserver로 충분하다. ## 판단 규칙 7 ### 1. 타임라인은 가중치 비균등으로 선언한다 균등 분할(씬 N개 = 1/N씩)은 길이만 긴 한 동작이 된다. **리듬은 값이 아니라 값의 차이에서 나온다.** 구간마다 가중치를 주고 정규화해서 진행도 구간을 만든다. 실전값: 인트로 0.6 · 단독 체류 1.0 · 챕터 타이틀 0.7 · 챕터 ��부 체류 0.55 · 챕터 간 전환 0.5 · 내부 전환 0.32. 스크롤 트랙 총 높이도 이 가중치 합에서 역산한다(구간당 ~155vh). ### 2. 이징은 구간 "타입"에 붙인다 전 구간이 시그니처 커브 하나로 굴러가면 안 된다. 타입별 차등 — 시그니처 `cubic-bezier(0.45, 0, 0.35, 1)`(기본 체류·등장) · 내부 컷 `(0.62, 0, 0.28, 1)`(짧고 타이트 — 늦게 출발해 빨리 붙는다) · 챕터 간 브릿지 `(0.22, 0, 0.12, 1)`(일찍 풀리고 길게 정착). 커브 계보는 `motion-judgment` 원칙 1(지면 판정·비대칭 기본)을 따른다. ### 3. 스크럽 강도도 구간 타입별로 차등한다 스크럽 = 스크롤 목표값을 따라가는 lerp 계수(클수록 즉응 — GSAP `scrub: true` ↔ `scrub: 0.5`의 스펙트럼). 실전값: 인트로 5 · 체류 7 · **전환 10.5**(가장 즉응 — 손맛이 여기서 난다) · 챕터 간 전환 5.5(무게) · 챕터 타이틀 4(가장 느슨 — 쉼표). 스크럽 계수는 "직전 프레임의 구간"으로 고른다 — 구간 판정 자체가 스무딩된 값에 의존하기 때문. ### 4. 전환 값은 스크롤에 직결하고, 체�� 값만 lerp로 정착시킨다 이 레시피에서 가장 비싼 교훈. 전환(카메라·오브젝트가 무대를 가로지르는 축)을 lerp로 목표를 뒤따르게 하면 "건너감"이 "따라옴"이 되고, 스크롤을 멈춘 만큼 정확히 멈추지도 않는