THE UNDERTOW — 스크롤이 카메라가 되는 리미티드 시리즈 사이트

가상의 리미티드 시리즈 The Undertow를 위한 스크롤 필름 사이트입니다. 페이지를 내리면 절벽 도로가 바다로 들어가고, 자막과 깊이가 같은 호흡으로 따라옵니다. 라이브는 the-undertow.pages.dev입니다.

과제

일반 랜딩은 섹션이 끊깁니다. 이 작업은 스크롤 한 줄을 카메라 한 컷으로 취급해야 했습니다. 프레임 956장을 재생하되, 올렸다 내려도 그림과 자막이 어긋나면 안 되고, Chrome에서 스크롤하다 렌더러가 죽으면 안 됩니다.

두 가지 스크롤 필름

같은 목표라도 만드는 길이 둘입니다.

• 스크롤 월드 — 미리 렌더한 연속 비행 푸티지를 스크롤에 붙입니다. 카메라는 씬 밖에서 안으로 들어가고, 컷 없이 다음 씬으로 이어집니다. 공간감이 강합니다.
• 스크롤 필름 — 코드로 타임라인을 짭니다. 스크롤 진행률이 재생헤드가 되고, 자막·깊이·이음매가 같은 축을 탑니다. 수정이 빠르고, 브라우저 메모리와 정면으로 싸웁니다.

스크롤 월드는 왜 끊기지 않나

비결은 전환이 아니라 한 번의 연속 비행입니다. 각 씬을 따로 찍고 페이드로 잇면 이음매가 보입니다. 카메라가 바깥에서 들어와 다음 공간으로 미끄러지게 찍어야, 스크롤이 컷이 아니라 이동이 됩니다.

스크롤 필름은 재생헤드다

구현은 단순합니다. 긴 스크롤 트랙을 만들고, 진행률 0..1을 프레임 인덱스로 바꿉니다. 그 위에 자막 페이드와 깊이 미터를 올립니다.

• 진행률은 손가락, 재생헤드는 살짝 뒤따르게 둡니다. 반대로 돌리면 헤드가 더 빨리 붙게 해서 자막이 어긋나지 않게 했습니다.
• 적재는 재생헤드가 아니라 손가락 위치를 따라갑니다. 관성이 남는 동안 엉뚱한 프레임을 받지 않습니다.
• JPEG를 그리는 순간 메인 스레드가 막히므로, 보이는 근처만 createImageBitmap으로 풀어 두고 지난 것은 바로 버립니다.

Lenis, GSAP, 패럴랙스

이 데모는 바닐라입니다. 같은 구조를 프로덕션에 옮길 때 쓰는 도구는 역할이 갈립니다.

• Lenis — 스크롤을 부드럽게 만듭니다. 카메라가 아닙니다. 진행률의 입력만 다듬습니다.
• GSAP + ScrollTrigger — 그 진행률을 타임라인에 묶습니다. 자막, 마스크, 이음매 페이드를 프레임 인덱스와 같은 축에 올립니다.
• 패럴랙스 — 레이어를 다른 속도로 밀면 깊이가 납니다. 스크롤 월드의 연속 비행을 대신하지는 못합니다. 레이어가 많으면 스크롤 필름의 메모리 문제가 그대로 inter니다.

Chrome 오류 11

스크롤 중 탭이 죽으면 JS 예외가 아닙니다. 렌더러 SIGSEGV입니다. 956장을 전부 풀어 두면 약 2.3GB가 남고, 화면보다 큰 SVG feTurbulence 그레인이 GPU를 때립니다. 고친 방법은 창 밖의 프레임을 버리고, 그레인을 PNG 타일로 바꾸고, 캔버스 폭을 1600으로 캡한 것입니다.

기술

• HTML · CSS · 바닐라 JS. 빌드 없음.
• 956프레임 JPEG + sticky 풀블리드 캔버스.
• Fraunces / Source Sans 3 (OFL).
• 배포: Cloudflare Pages · the-undertow.pages.dev