11.14 3주차 데모 회의

3주차 데모 회의

세그먼트가 너무 늦게 생성되는 문제

HLS.js 데모 페이지에서 제공하는 디버깅 도구를 활용한 스트리밍 환경 분석 결과를 공유드리고자 합니다. 보시는 이미지는 HLS.js의 내부 동작을 시각화해주는 도구입니다. 상단의 미디어 버퍼, 비디오 버퍼, 오디오 버퍼 상태와 함께 각 품질 레벨별 세그먼트 파일의 로딩 상태를 실시간으로 모니터링할 수 있습니다. 이 도구를 통해 저희 스트리밍 환경을 검토한 결과, 중요한 문제점을 발견했습니다. 인코딩된 영상 세그먼트 파일들이 오브젝트 스토리지에 업로드되는 시간이 지연되어 클라이언트에서 적시에 파일을 읽어오지 못하는 상황이 발생하고 있었습니다. 라이브 스트리밍에서 버퍼링과 지연 시간은 사용자 경험에 직접적인 영향을 미치는 핵심 요소입니다. 따라서 이 업로드 지연 문제는 서비스 품질 향상을 위해 반드시 해결해야 할 과제로 판단됩니다.

hls.js 라이브러리를 선택한 이유

저희가 HLS.js 라이브러리를 선택한 이유에 대해 말씀드리겠습니다. 첫째, Safari를 제외한 Chrome, Firefox 등의 브라우저에서 HLS 스트리밍 지원이 필요했습니다. HLS.js는 이런 브라우저 호환성 문제를 효과적으로 해결해줍니다. manifest 파일을 파싱하고 세그먼트 파일과 연결하는 복잡한 과정을 라이브러리가 자동으로 처리해주기 때문입니다. 둘째, 네트워크 상태에 따라 자동으로 품질을 조정하는 적응형 스트리밍 기능이 사용자 경험 측면에서 중요했습니다. 또한 버퍼 길이 조절이나 디버깅 모드 등 다양한 옵션을 통한 커스터마이징이 가능했죠. 셋째, 이벤트 기반으로 에러를 감지하고 모니터링할 수 있어 개발 과정에서의 디버깅이 용이했습니다. 스트리밍 중 발생하는 문제들을 실시간으로 파악하고 대응할 수 있었습니다. HLS 스트리밍의 동작 원리를 이해하기 위해 manifest 파일 파싱부터 직접 구현해보는 것도 의미 있는 접근이었겠지만, 프로젝트 기간이 제한적이었기에 그것만으로는 아쉬웠습니다. 저희는 적응형 스트리밍, 라이브 스트리밍 최적화, 스트리밍 모니터링 등 라이브 스트리밍의 전반적인 흐름을 경험해보고 싶었고, 이러한 이유로 HLS.js 라이브러리를 선택하게 되었습니다.

프론트엔드에서 에러처리의 문제

라이브 스트리밍 서비스를 개발하면서 프론트엔드의 에러 처리에 대한 중요한 인사이트를 얻었습니다. 비디오 관련 요소를 다루면서 다양한 상황에 대응해야 했습니다. 네트워크 에러, 미디어 로드 실패와 같은 기술적 에러부터 초기 로딩 지연, 버퍼링과 같은 사용자 경험 관련 상황까지, 각각에 대한 적절한 피드백과 예외 처리가 필요했습니다. 초기에는 if문을 활용한 명령형 방식으로 이러한 상황들을 처리했습니다. 하지만 고려해야 할 상황이 늘어나면서, 비디오 컴포넌트 내부에 비즈니스 로직과 에러 처리, 로딩 상태 관리 코드가 뒤섞이는 문제가 발생했습니다. 이러한 경험을 통해 선언적이고 체계적인 에러 처리의 필요성을 절감했고, React의 Suspense와 ErrorBoundary를 활용한 개선 방안을 고민하게 되었습니다. 이는 단순한 리팩토링을 넘어, 더 나은 사용자 경험과 유지보수성을 위한 다음 단계의 과제가 되었습니다.