← 포트폴리오 목록

다운로드 영상 스트리밍 전환 앱

본 요구사항(다운로드 방식에서 HLS 스트리밍으로 전환, 기존 플레이어 교체, Wi-Fi·4G·5G 전환 시 재생 유지)을 시청자가 보는 모바일 앱 화면으로 설계한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
FlutterHLS (FFmpeg)AWSCloudflare CDNReact 18Tailwind CSSNode.js + ExpressPostgreSQL + Prismahls.js
주요 기능
  • 영상 목록
  • 재생 화면
  • 네트워크 전환
  • 버퍼·재시도

프로젝트 개요

범위: 개발, 디자인, 기획

본 요구사항(다운로드 방식에서 HLS 스트리밍으로 전환, 기존 플레이어 교체, Wi-Fi·4G·5G 전환 시 재생 유지)을 시청자가 보는 모바일 앱 화면으로 설계한 프로젝트입니다. 앱 화면은 모바일 웹앱 프레임으로 표현했습니다.

작업 범위

  • 영상 목록: 시청자가 첫 화면에서 이어 보기 중인 영상의 진행 위치와 새로 올라온 영상, 각 영상의 재생 준비 상태를 한 번에 봅니다
  • 재생 화면: 시청자가 영상을 재생하면서 현재 화질 단계와 자동 전환 상태를 확인하고, 필요하면 화질을 직접 고정합니다
  • 네트워크 전환: Wi-Fi에서 4G, 5G로 통신 환경이 바뀌어도 재생이 이어지는 흐름을 시나리오별로 확인합니다
  • 버퍼·재시도: 버퍼가 부족하거나 세그먼트 요청이 실패한 상황에서 재생 화면이 어떻게 안내하고 다시 시도하는지 확인합니다

주요 업무

  • 영상 목록 화면: 이어 보기 카드, 영상 목록, 변환 완료 영상만 재생 가능으로 표시하는 상태 알약 구조를 설계합니다
  • 재생 화면 화면: HLS 매니페스트의 비트레이트 단계를 읽어 현재 단계 표시, 자동 선택과 직접 고정 전환, 재생 위치 유지 구조를 설계합니다
  • 네트워크 전환 화면: 네트워크 종류별 시나리오 선택, 전환 시점의 버퍼 잔량과 화질 단계 변화, 재생 유지 결과 표시 구조를 설계합니다
  • 버퍼·재시도 화면: 버퍼 부족 안내, 자동 재시도 횟수 표시, 수동 다시 시도, 재시도 실패 시 안내 화면 구조를 설계합니다
다운로드 영상 스트리밍 전환 앱
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

통신 환경 전환 직후 버퍼 잔량이 급격히 줄 때 화질을 내리는 기준과 시점 설계

기존 다운로드 방식 영상과 스트리밍 영상이 함께 존재하는 전환 기간의 재생 경로 분기 규칙 설계

Wi-Fi·4G·5G 전환은 실기기 확인이 필요해 웹 데모와 실기기 점검의 역할 구분 설계

서명 URL 만료 시점이 긴 영상의 재생 중에 겹칠 때 끊김 없이 갱신하는 흐름 설계

구현 내용

핵심 기능 상세

핵심 기능 1

영상 목록

시청자가 첫 화면에서 이어 보기 중인 영상의 진행 위치와 새로 올라온 영상, 각 영상의 재생 준비 상태를 한 번에 봅니다.

  • 영상 목록 API가 재생 가능 여부와 매니페스트 주소를 함께 내려주는 응답 모델 설계
  • 이어 보기 위치를 서버에 주기 저장하고 앱 재진입 시 해당 지점부터 불러오는 구조 구현
  • 목록 썸네일을 지연 로딩하고 고정 비율 틀로 레이아웃 점프를 막는 카드 컴포넌트 분리

영상 한 건의 변환 상태와 재생 주소를 하나의 모델로 묶어, 목록·재생 화면이 같은 값을 읽도록 구현합니다.

영상 목록
영상 목록 실제 화면
핵심 기능 2

재생 화면

시청자가 영상을 재생하면서 현재 화질 단계와 자동 전환 상태를 확인하고, 필요하면 화질을 직접 고정합니다.

  • 멀티 비트레이트 매니페스트를 읽어 단계 목록과 현재 재생 단계를 화면에 표시하는 구조 설계
  • 자동 선택과 직접 고정을 분리한 화질 모드 상태 모델 구현, 고정 해제 시 자동 선택으로 복귀
  • 화질 단계가 바뀔 때 재생 위치와 일시정지 상태를 유지하는 플레이어 제어 로직 설계

화질 단계가 바뀌어도 재생 위치가 유지되도록 플레이어 상태를 단계 선택과 분리해 구현합니다.

재생 화면
재생 화면 실제 화면
핵심 기능 3

네트워크 전환

Wi-Fi에서 4G, 5G로 통신 환경이 바뀌어도 재생이 이어지는 흐름을 시나리오별로 확인합니다. 네트워크 종류별 시나리오 선택, 전환 시점의 버퍼 잔량과 화질 단계 변화, 재생 유지 결과 표시 구조를 설계합니다.

  • connectivity_plus 이벤트로 통신 환경 변화를 감지해 플레이어에 전달하는 구조 설계
  • 전환 직후 버퍼 잔량을 기준으로 화질 단계를 한 단계씩 내리거나 유지하는 판정 규칙 설계
  • 전환 시나리오별 재생 유지·재연결 결과를 같은 이력 모델에 기록해 목록으로 표시

통신 환경 변화 이벤트와 플레이어 상태를 한 흐름으로 묶어, 전환 시점마다 화질·버퍼·재생 결과가 함께 기록되도록 구현합니다.

네트워크 전환
네트워크 전환 실제 화면
핵심 기능 4

버퍼·재시도

버퍼가 부족하거나 세그먼트 요청이 실패한 상황에서 재생 화면이 어떻게 안내하고 다시 시도하는지 확인합니다. 버퍼 부족 안내, 자동 재시도 횟수 표시, 수동 다시 시도, 재시도 실패 시 안내 화면 구조를 설계합니다.

  • 세그먼트 요청 실패를 일시 오류와 영구 오류로 나눠 재시도 횟수와 간격을 달리하는 정책 설계
  • 버퍼 잔량이 기준 아래로 내려가면 로딩 표시와 함께 낮은 화질 단계로 전환하는 규칙 구현
  • 재시도 소진 후 안내 문구와 다시 시도 버튼을 제공하는 오류 화면 컴포넌트 설계

재시도 정책을 오류 종류별로 분리해, 일시 오류는 자동 복구하고 영구 오류는 시청자에게 바로 안내하도록 구현합니다.

버퍼·재시도
버퍼·재시도 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석과 재생 흐름 설계 · 2026.11

다운로드 방식의 재생 흐름 분석, 스트리밍 재생 상태 정의, 화면 목록과 상태 모델 확정

STEP 2

스트리밍 API와 변환 연동 · 2026.11

Express 기반 영상 목록·매니페스트 API 구현, 변환 상태 연동, 서명 URL 발급 구조 설계

STEP 3

플레이어 화면과 상태 모델 구현 · 2026.11

화질 단계 표시, 자동 선택·고정 전환, 버퍼·재시도 안내 화면 구현

STEP 4

네트워크 전환 시나리오 점검 · 2026.11

Wi-Fi·4G·5G 전환 시나리오별 재생 유지 결과 점검과 실기기 확인 목록 작성

개발 결과

변환 상태·재생 주소 단일 모델 설계영상 한 건의 변환 상태와 매니페스트 주소를 하나의 모델로 묶어 목록과 재생 화면이 같은 값을 읽도록 구현합니다.
화질 모드 상태 모델 구현자동 선택과 직접 고정을 분리한 상태 모델로 화질이 바뀌어도 재생 위치가 유지되는 구조를 설계합니다.
오류 종류별 재시도 정책 설계일시 오류와 영구 오류를 나눠 재시도 횟수와 간격을 달리하고 소진 후 안내까지 이어지는 흐름을 구현합니다.
통신 환경 변화 이력 모델 구축전환 시점의 화질 단계·버퍼 잔량·재생 결과를 한 이력 모델에 기록해 시나리오별로 비교할 수 있게 설계합니다.

기술적 주안점

  • 영상 한 건의 변환 상태와 재생 주소를 하나의 모델로 묶어, 목록·재생 화면이 같은 값을 읽도록 구현합니다
  • 화질 단계가 바뀌어도 재생 위치가 유지되도록 플레이어 상태를 단계 선택과 분리해 구현합니다
  • 통신 환경 변화 이벤트와 플레이어 상태를 한 흐름으로 묶어, 전환 시점마다 화질·버퍼·재생 결과가 함께 기록되도록 구현합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의