인터랙티브 · 모션
스크롤 시네마틱 웹 인터랙션 '에디터 속으로'
스크롤이 카메라가 되는 시네마틱 랜딩입니다. 빈 에디터에서 시작한 코드가 도시 같은 구조를 이루고, 실시간 편집을 거쳐 완성된 화면으로 모이는 네 장면을 끊김 없는 한 번의 비행으로 보여줍니다. 미리 렌더한 영상을 스크롤 위치로 스크럽해, 무거운 실시간 3D 없이 부드럽게 돌아갑니다.
서비스 방문 ↗Vanilla JS, Seedance 2.0, ffmpeg, Nginx
문제
브랜드 색과 데브툴 편집 미학을 지키면서도, 배터리를 많이 쓰는 실시간 3D 없이 몰입형 스크롤 경험을 만드는 게 과제였습니다. 랜딩 본편의 성능 예산도 건드리면 안 됐습니다.
해결
장면을 미리 영상으로 렌더하고, 스크롤 위치를 영상 재생 시점에 매핑하는 방식으로 풀었습니다. 네 장면을 각자의 마지막 프레임에서 이어 붙여 컷 없는 한 번의 카메라 비행으로 만들고, 영상을 Blob으로 받아 어느 지점이든 부드럽게 탐색하게 했습니다. 저사양·절전 모드에서는 정지 이미지로 자동 전환됩니다.
- 4장면
- 컷 없는 연속 비행
- 실시간 3D 0
- WebGL 미사용
- 720p
- 스크럽 최적화 인코딩
화면
