React Video Timestone

마커 역/정방향 재생을 지원하는 인터랙티브 영상 타임라인 React 라이브러리

프로젝트 소개 및 문제의식: 인터랙티브 비디오 스토리텔링을 만들 때마다 특정 시점 이벤트, 역재생, 멀티 비디오 연결 같은 복잡한 로직을 계속 새로 만들어야 했습니다. HTML5 비디오만으로는 매끄러운 스토리텔링을 만들기 어려웠고, 비슷한 기능을 매번 다시 구현하느라 정작 중요한 스토리텔링에 집중하기 힘들었습니다.
방향성: 버퍼링 없이 바로 탐색되는 매끄러운 멀티 비디오 타임라인을 제공하는 React 컴포넌트 라이브러리를 만들어, 개발자가 스토리텔링에만 집중할 수 있게 하는 것이 목표였습니다.
구현: 사전 로딩과 Blob 캐싱으로 끊김 없는 탐색을 구현했고, 여러 비디오를 이어 붙인 매끄러운 타임라인과 특정 시점에 콜백을 자동 실행하는 인터랙티브 마커 시스템을 개발했습니다. 정방향·역방향 재생을 간단한 API로 제어할 수 있게 해 일관된 개발 경험을 주도록 설계했습니다.
결과: 혼자 반복해서 구현하던 인터랙티브 비디오 로직을 하나의 컴포넌트로 정리해 npm 패키지로 배포했습니다. 짧은 영상 스토리텔링이나 재생/역재생 인터페이스를 만들 때 쓸 수 있는 도구가 되었습니다.

패키지 정보