requestAnimationFrame 기반의 Stories 진행 바 제어 로직 구현

Context

CSS Animation만으로 구현하기 어려운 정밀한 타이머 제어와 상태 전환의 한계점 분석. 특히 일시정지 및 건너뛰기 같은 사용자 인터랙션 시 애니메이션의 중간 상태를 제어해야 하는 기술적 요구사항 존재.

Technical Solution

• requestAnimationFrame 루프를 통한 경과 시간과 스토리별 지속 시간(약 4s)의 실시간 비교 및 동기화
• 활성 세그먼트의 Width를 0%에서 100%까지 선형적으로 업데이트하는 상태 기반 렌더링 구조 설계
• pointerdown 및 pointerup 이벤트를 활용하여 타이머 루프를 제어하는 Pause/Resume 메커니즘 구현
• 화면을 좌우 두 영역으로 분리하여 이전/다음 스토리로 즉시 이동하는 Tap Zone 인터랙션 설계
• 스토리 점프 시 이전 및 이후 세그먼트의 상태를 즉시 갱신하는 State Reset 로직 적용
• CSS Animation 대신 JS 기반 타이머를 채택하여 인터럽트 발생 시의 상태 제어 유연성 확보