인터랙티브 비디오 스토리텔링을 구현할 때마다 특정 시점 이벤트, 역재생, 멀티 비디오 연결 등의 복잡한 로직을 반복해서 개발해야 하는 상황이었습니다. 기존 HTML5 비디오만으로는 매끄러운 스토리텔링 경험을 만들기 어렵고, 매번 비슷한 기능을 새로 구현하느라 핵심 스토리텔링에 집중하기 어려웠습니다.
버퍼링 끊김 없이 즉시 탐색을 통해 매끄러운 멀티 비디오 타임라인 경험을 제공하는 React 컴포넌트 라이브러리를 개발하여, 개발자가 스토리텔링 자체에 집중할 수 있는 환경을 만드는 것을 목표로 했습니다.
사전 로딩 및 Blob 캐싱을 이용한 끊김 없는 탐색 경험을 구현하고, 여러 비디오를 연결한 매끄러운 타임라인과 특정 시점에서 자동으로 콜백을 실행하는 인터랙티브 마커 시스템을 개발했습니다. 정방향 및 역방향 재생을 간단한 API로 제어할 수 있도록 하여 일관된 개발 경험을 제공하도록 설계했습니다.
개인적으로 반복 구현하던 인터랙티브 비디오 로직을 하나의 컴포넌트로 정리하여 npm 패키지로 배포했습니다. 짧은 영상 스토리텔링이나 재생/역재생 인터페이스를 구현할 때 활용할 수 있는 도구를 만들 수 있었습니다.
핵심 기능: 버퍼링 없는 즉시 탐색, 인터랙티브 마커 시스템, 멀티 비디오 타임라인
최적 사용처: 짧고 흐름이 중요한 영상 스토리텔링, 재생/역재생 인터페이스
기술적 특징: Blob 캐싱, 사전 로딩, GOP-1 최적화 지원