결 DETAIL CARE — 921프레임으로 설계한 출장 손세차 스크롤 필름

가상의 프리미엄 출장 손세차 브랜드 결 DETAIL CARE를 위해 만든 시네마틱 스크롤 필름 사이트입니다. 숙련된 손, 정밀한 마감, 모바일 작업실, 전국 네트워크를 하나의 샴페인 가이드 라이트로 연결했습니다. 스크롤은 페이지 이동이 아니라 한 아틀리에를 관통하는 카메라 전진이 됩니다. 라이브 사이트는 ononc-gyeol-detail-care.pages.dev에서 볼 수 있습니다.

과제

일반적인 세차 사이트는 서비스를 카드와 섹션으로 나열합니다. 이 작업은 손세차의 감각을 따로 설명하는 대신, 한 사람의 작업이 전국의 기준으로 이어지는 한 장면으로 기억되게 만드는 것이 목표였습니다. 화면이 컷처럼 끊기지 않아야 했고, 헤더의 서비스·기준·출장·네트워크 페이지도 실제 콘텐츠로 읽혀야 했습니다.

하나의 빛, 아틀리에를 잇다

카메라는 처음부터 끝까지 같은 샴페인 가이드 라이트를 따라 앞으로만 이동합니다. 두 대의 은색 세단 사이에서 시작해 핸드 워시, 1년 교육, 정밀 마감, 출장 밴을 지나 전국 거점의 운영 홀로 이어집니다. 장소와 스케일이 바뀌어도 같은 작업자, 같은 차량, 같은 전진 벡터가 장면의 연속성을 지킵니다.

30초 영상을 921프레임의 스크롤로

6개 키프레임과 5개 클립을 한 편의 필름으로 조립하고, 네이티브 프레임을 1024px JPEG 921장으로 추출했습니다. 스크롤 진행률을 프레임 인덱스로 바꾸되, 디코딩된 ImageBitmap은 최대 48장만 유지하는 슬라이딩 윈도우를 사용했습니다. 네트워크 요청은 개별 JPEG 921회 대신 무손실 프레임 팩 77개로 묶어 끊김을 줄였습니다.

• 현재 위치 앞뒤만 선로드하고, 창 밖의 비트맵은 즉시 해제합니다.
• 동시 요청은 최대 2개로 제한하고, 활성 창 밖의 요청은 중단합니다.
• 장면 카피는 교차 페이드로 묶여 이동 중에도 텍스트가 비지 않도록 했습니다.

헤더가 실제 페이지로 이어지게

서비스, 전문가 기준, 출장 세차, 전국 네트워크, 예약 상담은 홈의 스크롤 앵커가 아니라 각각 독립 페이지입니다. 공정 구성, 1년 교육 경로, 현장 작업 조건, 권역 운영 방식, 상담 폼까지 실제 브랜드 사이트처럼 읽을 수 있게 구성했습니다. 우측 리모컨은 위아래 화살표와 장면 메뉴를 같은 축에 맞춰, 01에서 00으로, 04에서 05로 이동해도 카피가 중간에 흐려지지 않도록 착지 위치를 강제했습니다.

제품으로 마감하기

영화적인 첫인상만으로 끝내지 않고, 초기 프레임 로더, 모바일 안전 크롭, prefers-reduced-motion 대응, 한국어 전자상거래 관례에 맞는 가상 사업자 정보를 넣었습니다. 365개 대리점과 연락처는 모두 포트폴리오 콘셉트이며, 실제 예약은 접수되지 않음을 페이지 전면에서 분명히 밝혔습니다.

기술

Next.js App Router · React · TypeScript

Canvas · ImageBitmap 슬라이딩 윈도우 · 921 JPEG 프레임 · 77개 무손실 프레임 팩

6개 챕터, 우측 장면 리모컨, 독립 상세 페이지

Cloudflare Pages · 라이브 사이트 보기