다운로드 영상 스트리밍 전환 앱
본 요구사항(다운로드 방식에서 HLS 스트리밍으로 전환, 기존 플레이어 교체, Wi-Fi·4G·5G 전환 시 재생 유지)을 시청자가 보는 모바일 앱 화면으로 설계한 프로젝트입니다.
프로젝트 개요
본 요구사항(다운로드 방식에서 HLS 스트리밍으로 전환, 기존 플레이어 교체, Wi-Fi·4G·5G 전환 시 재생 유지)을 시청자가 보는 모바일 앱 화면으로 설계한 프로젝트입니다. 앱 화면은 모바일 웹앱 프레임으로 표현했습니다.
작업 범위
- 영상 목록: 시청자가 첫 화면에서 이어 보기 중인 영상의 진행 위치와 새로 올라온 영상, 각 영상의 재생 준비 상태를 한 번에 봅니다
- 재생 화면: 시청자가 영상을 재생하면서 현재 화질 단계와 자동 전환 상태를 확인하고, 필요하면 화질을 직접 고정합니다
- 네트워크 전환: Wi-Fi에서 4G, 5G로 통신 환경이 바뀌어도 재생이 이어지는 흐름을 시나리오별로 확인합니다
- 버퍼·재시도: 버퍼가 부족하거나 세그먼트 요청이 실패한 상황에서 재생 화면이 어떻게 안내하고 다시 시도하는지 확인합니다
주요 업무
- 영상 목록 화면: 이어 보기 카드, 영상 목록, 변환 완료 영상만 재생 가능으로 표시하는 상태 알약 구조를 설계합니다
- 재생 화면 화면: HLS 매니페스트의 비트레이트 단계를 읽어 현재 단계 표시, 자동 선택과 직접 고정 전환, 재생 위치 유지 구조를 설계합니다
- 네트워크 전환 화면: 네트워크 종류별 시나리오 선택, 전환 시점의 버퍼 잔량과 화질 단계 변화, 재생 유지 결과 표시 구조를 설계합니다
- 버퍼·재시도 화면: 버퍼 부족 안내, 자동 재시도 횟수 표시, 수동 다시 시도, 재시도 실패 시 안내 화면 구조를 설계합니다



프로젝트 핵심 과제
통신 환경 전환 직후 버퍼 잔량이 급격히 줄 때 화질을 내리는 기준과 시점 설계
기존 다운로드 방식 영상과 스트리밍 영상이 함께 존재하는 전환 기간의 재생 경로 분기 규칙 설계
Wi-Fi·4G·5G 전환은 실기기 확인이 필요해 웹 데모와 실기기 점검의 역할 구분 설계
서명 URL 만료 시점이 긴 영상의 재생 중에 겹칠 때 끊김 없이 갱신하는 흐름 설계
핵심 기능 상세
영상 목록
시청자가 첫 화면에서 이어 보기 중인 영상의 진행 위치와 새로 올라온 영상, 각 영상의 재생 준비 상태를 한 번에 봅니다.
- 영상 목록 API가 재생 가능 여부와 매니페스트 주소를 함께 내려주는 응답 모델 설계
- 이어 보기 위치를 서버에 주기 저장하고 앱 재진입 시 해당 지점부터 불러오는 구조 구현
- 목록 썸네일을 지연 로딩하고 고정 비율 틀로 레이아웃 점프를 막는 카드 컴포넌트 분리
영상 한 건의 변환 상태와 재생 주소를 하나의 모델로 묶어, 목록·재생 화면이 같은 값을 읽도록 구현합니다.


재생 화면
시청자가 영상을 재생하면서 현재 화질 단계와 자동 전환 상태를 확인하고, 필요하면 화질을 직접 고정합니다.
- 멀티 비트레이트 매니페스트를 읽어 단계 목록과 현재 재생 단계를 화면에 표시하는 구조 설계
- 자동 선택과 직접 고정을 분리한 화질 모드 상태 모델 구현, 고정 해제 시 자동 선택으로 복귀
- 화질 단계가 바뀔 때 재생 위치와 일시정지 상태를 유지하는 플레이어 제어 로직 설계
화질 단계가 바뀌어도 재생 위치가 유지되도록 플레이어 상태를 단계 선택과 분리해 구현합니다.


네트워크 전환
Wi-Fi에서 4G, 5G로 통신 환경이 바뀌어도 재생이 이어지는 흐름을 시나리오별로 확인합니다. 네트워크 종류별 시나리오 선택, 전환 시점의 버퍼 잔량과 화질 단계 변화, 재생 유지 결과 표시 구조를 설계합니다.
- connectivity_plus 이벤트로 통신 환경 변화를 감지해 플레이어에 전달하는 구조 설계
- 전환 직후 버퍼 잔량을 기준으로 화질 단계를 한 단계씩 내리거나 유지하는 판정 규칙 설계
- 전환 시나리오별 재생 유지·재연결 결과를 같은 이력 모델에 기록해 목록으로 표시
통신 환경 변화 이벤트와 플레이어 상태를 한 흐름으로 묶어, 전환 시점마다 화질·버퍼·재생 결과가 함께 기록되도록 구현합니다.


버퍼·재시도
버퍼가 부족하거나 세그먼트 요청이 실패한 상황에서 재생 화면이 어떻게 안내하고 다시 시도하는지 확인합니다. 버퍼 부족 안내, 자동 재시도 횟수 표시, 수동 다시 시도, 재시도 실패 시 안내 화면 구조를 설계합니다.
- 세그먼트 요청 실패를 일시 오류와 영구 오류로 나눠 재시도 횟수와 간격을 달리하는 정책 설계
- 버퍼 잔량이 기준 아래로 내려가면 로딩 표시와 함께 낮은 화질 단계로 전환하는 규칙 구현
- 재시도 소진 후 안내 문구와 다시 시도 버튼을 제공하는 오류 화면 컴포넌트 설계
재시도 정책을 오류 종류별로 분리해, 일시 오류는 자동 복구하고 영구 오류는 시청자에게 바로 안내하도록 구현합니다.


프로젝트 진행 단계
요구사항 분석과 재생 흐름 설계 · 2026.11
다운로드 방식의 재생 흐름 분석, 스트리밍 재생 상태 정의, 화면 목록과 상태 모델 확정
스트리밍 API와 변환 연동 · 2026.11
Express 기반 영상 목록·매니페스트 API 구현, 변환 상태 연동, 서명 URL 발급 구조 설계
플레이어 화면과 상태 모델 구현 · 2026.11
화질 단계 표시, 자동 선택·고정 전환, 버퍼·재시도 안내 화면 구현
네트워크 전환 시나리오 점검 · 2026.11
Wi-Fi·4G·5G 전환 시나리오별 재생 유지 결과 점검과 실기기 확인 목록 작성
개발 결과
기술적 주안점
- 영상 한 건의 변환 상태와 재생 주소를 하나의 모델로 묶어, 목록·재생 화면이 같은 값을 읽도록 구현합니다
- 화질 단계가 바뀌어도 재생 위치가 유지되도록 플레이어 상태를 단계 선택과 분리해 구현합니다
- 통신 환경 변화 이벤트와 플레이어 상태를 한 흐름으로 묶어, 전환 시점마다 화질·버퍼·재생 결과가 함께 기록되도록 구현합니다