CHAP Platform Frontend

문제 정의

랜딩 첫 진입에서 대용량 비디오 리소스 로딩 상태가 사용자에게 불명확했고, 스크롤 기반 스토리텔링 섹션은 프레임 동기화와 모바일 대응을 동시에 만족해야 했습니다.

제약 조건

• 모바일/데스크톱 비디오 자산을 함께 다루면서도 첫 진입 체감 성능을 유지해야 했다
• 브라우저별 자동재생 제약과 iOS 렌더링 이슈를 고려해야 했다
• 스크롤 진행률과 영상 프레임, 텍스트 애니메이션이 안정적으로 동기화되어야 했다

목표

• 첫 진입 시 로딩 상태를 명확히 전달하고 로딩 완료 전후 전환을 자연스럽게 구성
• 스크롤 진행에 따라 영상 프레임과 카피가 매끄럽게 이어지는 몰입형 섹션 구현
• 모바일/데스크톱 환경에서 동일한 내러티브 품질을 유지

구현 접근

• LoadingContext를 구성해 실제 목표 진척도(target)와 화면 표시 진척도(current)를 분리하고, 보간 로직으로 숫자 점프 없이 프리로딩 진행률을 표현
• HeroSection에서 video buffered 구간(onProgress/onLoadedMetadata)을 읽어 퍼센트를 업데이트하고, onCanPlayThrough 시점에 로딩 완료 상태로 전환
• 비디오 준비가 지연될 경우를 대비해 fallback 타이머를 두고, 포스터 레이어 -> 비디오 레이어로 자연스럽게 전환되도록 구성
• 스크롤 섹션에서 useScroll + useSpring + useMotionValueEvent를 조합해 진행률을 video.currentTime에 매핑하고, 단계별 텍스트 trailing 애니메이션을 함께 설계
• iOS Safari 렌더링 이슈 대응을 위해 마지막 프레임 폴백 이미지와 모바일 회전 레이아웃을 적용

결과

• 첫 진입 시 로딩 상태와 진척도가 명확해져 초기 체감 품질이 안정화됨
• 스크롤 기반 영상 프레임 연출로 브랜드 스토리 전달력과 몰입감 강화
• 로딩/영상 제어 로직을 분리해 이후 연출 구간 튜닝과 유지보수가 쉬워짐

시각 증빙

회고

브랜드 랜딩에서는 시각적 완성도만큼 로딩 안정성과 디바이스 호환성이 중요했습니다. 애니메이션 구현을 상태 제어 로직과 분리해 설계하면, 연출 품질과 유지보수성을 동시에 확보할 수 있음을 확인했습니다.

추가 기록