01
첫 진입 경험을 만드는 Hero 비디오와 로고 연출
포스터 → 비디오 전환 흐름 구성, 로딩 종료 이후 로고 등장 타이밍 연결 → 첫 화면에서 브랜드 무드가 바로 전달되는 진입 경험
Loading...
프로젝트 개요
01
요약
브랜드의 무드와 서비스 방향성을 한 화면 흐름으로 전달하기 위해 만든 메인 랜딩입니다. 비디오와 인터랙션을 활용했지만, 연출보다 실제 사용자 경험이 끊기지 않도록 안정성 쪽에 더 신경 썼습니다.
02
구현 포인트
스크롤 진행률을 비디오 currentTime과 동기화해 장면 전환 흐름 구성
로딩 상태와 진입 타이밍을 함께 제어해 첫 화면 경험이 끊기지 않도록 정리
스크롤 이벤트를 렌더링과 분리하고 spring 보간 적용으로 전환 시 버벅임 최소화
03
주요 기능
Framer Motion 기반 DOM 속성 직접 제어
비디오 재생(currentTime)과 스크롤 진행률 동기화
기기 및 브라우저 환경별 예외 대응(Fallback)
핵심 설계
02
스크롤 기반 비디오 스토리텔링 섹션
스크롤 진행률을 video currentTime과 동기화하고 텍스트 상태를 함께 제어 → 장면 전환 중심으로 브랜드 메시지 전달
기술적 의사결정
01
로딩 상태와 진입 타이밍 통합
문제
로딩과 화면 전환 타이밍이 어긋날 경우 첫 진입 흐름이 끊기는 문제
해결
비디오 readyState와 로딩 상태를 함께 관리하고, 로딩 중 스크롤을 제한해 진입 타이밍 정렬
결과
첫 화면 흐름이 끊기지 않고 자연스럽게 이어지는 구조로 개
02
스크롤 기반 비디오 동기화
문제
스크롤과 영상 타이밍 불일치로 스토리 흐름이 깨지는 문제
해결
scroll progress를 video currentTime에 매핑하고 spring 보간 적용으로 전환 타이밍 보정
결과
스크롤과 영상이 자연스럽게 동기화되는 흐름 구현
트러블슈팅
모바일/Safari에서 영상 로딩 지연과 비율 문제로 첫 화면이 깨지는 이슈 → 미디어 상태 체크 세분화 + fallback 적용으로 렌더링 안정성 확보
결과
브랜드 메시지를 하나의 스크롤 흐름으로 연결된 경험으로 구현
비디오와 인터랙션이 분리되지 않는 첫 진입 경험 구성
모바일 및 브라우저 환경을 고려한 미디어 대응 구조 정리
회고
- 인터랙션에서는 화려한 연출보다 타이밍과 상태 제어가 더 중요하다는 걸 느꼈습니다.
- 미디어가 들어간 UI일수록 구현 자체보다 안정성과 예외 처리가 먼저라는 기준을 갖게 됐습니다.