온빛 동인천 — 936프레임으로 설계한 시네마틱 스크롤 필름

가상의 주거 브랜드 온빛 동인천을 위해 만든 시네마틱 스크롤 필름 사이트입니다. 대단지, 동인천역, 서해, 신포시장, 건축적 완성도를 하나의 브론즈 빛줄기로 연결했습니다. 스크롤은 페이지 이동이 아니라 한 번의 카메라 전진이 됩니다. 라이브 사이트는 onbit-dongincheon.pages.dev에서 볼 수 있습니다.

과제

일반적인 분양 사이트는 입지 장점을 카드와 섹션으로 나열합니다. 이 작업은 다섯 가지 가치를 따로 보여주는 대신, 도시를 관통하는 하나의 연속 장면으로 기억되게 만드는 것이 목표였습니다. 화면 전환이 컷처럼 보이지 않아야 했고, 사용자가 역방향으로 스크롤해도 영상과 카피가 어긋나지 않아야 했습니다.

하나의 선, 도시를 잇다

카메라는 처음부터 끝까지 브론즈 라인을 따라 앞으로만 이동합니다. 주거 단지에서 출발해 역의 축을 지나고, 서해 수평선의 반사광이 되었다가 신포시장 골목을 통과한 뒤 건축 구조의 그리드로 정리됩니다. 위치·빛·스케일이 바뀌어도 같은 선과 같은 전진 벡터가 장면의 연속성을 지킵니다.

39초 영상을 936프레임의 스크롤로

5개 클립을 한 편의 39초 필름으로 조립하고, 네이티브 24fps 기준 JPEG 936장으로 추출했습니다. 사용자의 스크롤 진행률을 프레임 인덱스로 바꾸되, 현재 위치 주변만 ImageBitmap으로 디코딩하는 슬라이딩 윈도우를 사용했습니다. 덕분에 전체 프레임을 메모리에 쌓지 않고도 앞뒤 스크롤을 매끄럽게 유지합니다.

• 진행률과 렌더 프레임 사이에 짧은 보간을 두어 카메라가 손끝을 자연스럽게 따라오게 했습니다.
• 현재 프레임 앞뒤만 선로드하고 창 밖의 비트맵은 즉시 해제합니다.
• 프레임을 아직 받지 못했을 때는 핵심 키프레임으로 폴백해 빈 캔버스를 보여주지 않습니다.

영상과 카피가 같은 타임라인을 타게

다섯 장면의 제목, 통계, 하단 캡션, 우측 리모컨을 하나의 진행률에 묶었습니다. 각 정지점에서는 해당 장면만 완전히 보이고 다음 카피는 0% 상태를 유지하도록 구간을 분리했습니다. 특히 신포생활권은 실제 영상이 가장 명확하게 도착하는 75.73% 지점에 맞춰, 배경과 텍스트가 같은 순간에 멈추도록 조정했습니다.

제품으로 마감하기

영화적인 첫인상만으로 끝내지 않고 실제 웹사이트로 사용할 수 있는 장치를 더했습니다. 다섯 장면을 바로 이동하는 리모컨, 초기 프레임 로더, 모바일 안전 크롭, prefers-reduced-motion 대응, 별도 소개 페이지와 CTA를 구성했습니다. 사이트 전체는 데모임을 명시하고, 실제 분양 정보처럼 오해될 수 있는 요소는 포트폴리오 연출임을 분명히 밝혔습니다.

기술

• Next.js App Router · React · TypeScript
• Canvas · ImageBitmap 슬라이딩 윈도우 · 936 JPEG 프레임
• 5개 챕터, 우측 장면 리모컨, 스크롤 동기화 카피
• Cloudflare Pages · 라이브 사이트 보기