← 포트폴리오 목록

스트림포지 트랜스코딩 관제 콘솔

다운로드 방식 영상 재생을 HLS/DASH 적응형 스트리밍으로 전환하는 백엔드 인프라를 구현합니다.

FFmpeg 기반 적응형 트랜스코딩 파이프라인 구현원본 영상을 다중 해상도 HLS 세그먼트로 자동 변환하는 워커 큐 설계, Redis 기반 작업 상태 추적 적용
HLS/DASH 스트리밍 API 설계세그먼트 매니페스트 동적 생성 로직 구현, Cloudflare CDN 캐시 정책과 연동한 엣지 배포 구조 설계
네트워크 적응형 재생 로직 구현HLS.js 기반 대역폭 감지 및 비트레이트 자동 전환 로직 구현, 버퍼 상태에 따른 프리페치 전략 설계
서비스 타입Web
업종모니터링
기술 스택
ReactNode.jsExpressPostgreSQLPrismaFFmpegHLS/DASH 스트리밍 프로토콜AWS S3 + Cloudflare CDNFlutter 연동 인터페이스
주요 기능
  • 트랜스코딩 파이프라인 관제 대시보드
  • HLS/DASH 스트리밍 API 상태 모니터링
  • 적응형 비트레이트 플레이어 & 네트워크 시뮬레이터
  • AWS·Cloudflare CDN 인프라 구성
Overview

프로젝트 개요

범위: 개발, 디자인, 기획
다운로드 방식 영상 재생을 HLS/DASH 적응형 스트리밍으로 전환하는 백엔드 인프라를 구현합니다. FFmpeg 기반 트랜스코딩 파이프라인과 오픈소스 스트리밍 생태계를 활용해 AWS S3·Cloudflare CDN 연동, HLS.js 적응형 플레이어 데모를 포함한 풀스택 관제 콘솔을 React + Node.js 기반으로 설계·구현합니다.
스트림포지 트랜스코딩 관제 콘솔
요구사항 정의

프로젝트 핵심 과제

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

원본 해상도·코덱이 다양한 업로드 영상을 일관된 HLS 세그먼트로 변환하는 트랜스코딩 큐의 동시성 제어 설계

Wi-Fi/4G/5G 전환 시 버퍼링 없이 비트레이트를 전환하는 적응형 재생 로직의 네트워크 감지 정확도 확보

기존 다운로드 방식 앱과의 하위호환성을 유지하며 스트리밍 방식으로 점진 전환하는 배포 전략 설계

대용량 세그먼트 파일의 CDN 캐시 무효화·갱신 타이밍을 트랜스코딩 완료 시점과 동기화하는 구조 설계

핵심 기능 1

트랜스코딩 파이프라인 관제 대시보드

업로드된 원본 영상이 HLS/DASH 세그먼트로 변환되는 전 과정을 실시간으로 확인할 수 있는 관제 화면입니다
트랜스코딩 파이프라인 관제 대시보드
핵심 기능 2

HLS/DASH 스트리밍 API 상태 모니터링

클라이언트에 세그먼트를 전달하는 스트리밍 API의 엔드포인트별 응답 상태와 트래픽을 확인할 수 있는 화면입니다
HLS/DASH 스트리밍 API 상태 모니터링
핵심 기능 3

적응형 비트레이트 플레이어 & 네트워크 시뮬레이터

Wi-Fi/4G/5G 등 네트워크 환경 변화에 따라 화질이 자동 전환되는 스트리밍 재생을 시뮬레이션으로 확인할 수 있는 화면입니다
적응형 비트레이트 플레이어 & 네트워크 시뮬레이터
핵심 기능 4

AWS·Cloudflare CDN 인프라 구성

스트리밍 세그먼트가 저장되는 AWS S3 오리진과 Cloudflare CDN 캐시 규칙 구성을 확인·관리할 수 있는 화면입니다
AWS·Cloudflare CDN 인프라 구성
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석 및 스트리밍 아키텍처 설계

다운로드→스트리밍 전환 요구사항 분석, HLS/DASH 세그먼트 구조 및 트랜스코딩 파이프라인 아키텍처 설계

STEP 2

트랜스코딩 파이프라인 및 큐 시스템 개발

FFmpeg 기반 세그먼트 변환 워커 구현, Redis 큐로 비동기 트랜스코딩 작업 스케줄링 API 연동

STEP 3

스트리밍 API 및 CDN 연동 구현

HLS/DASH 매니페스트 서빙 API 구현, AWS S3 오리진 + Cloudflare CDN 캐시 규칙 연동

STEP 4

관제 콘솔 UI 및 플레이어 데모 개발

React 기반 파이프라인 관제 대시보드, HLS.js 적응형 플레이어 데모 화면 구현

STEP 5

통합 테스트 및 네트워크 시뮬레이션 검증

Wi-Fi/4G/5G 네트워크 시나리오 시뮬레이션, 버퍼링·전환 지연 측정 테스트 케이스 작성

프로젝트 성과
FFmpeg 기반 적응형 트랜스코딩 파이프라인 구현원본 영상을 다중 해상도 HLS 세그먼트로 자동 변환하는 워커 큐 설계, Redis 기반 작업 상태 추적 적용
HLS/DASH 스트리밍 API 설계세그먼트 매니페스트 동적 생성 로직 구현, Cloudflare CDN 캐시 정책과 연동한 엣지 배포 구조 설계
네트워크 적응형 재생 로직 구현HLS.js 기반 대역폭 감지 및 비트레이트 자동 전환 로직 구현, 버퍼 상태에 따른 프리페치 전략 설계
AWS·Cloudflare 인프라 코드화(IaC) 구성S3 오리진 스토리지와 CDN 연동 구조를 코드로 정의, 배포 자동화 스크립트 설계
Review

기술적 주안점

  • WebSocket 기반 실시간 작업 상태 동기화 구조를 구현하며, 실패 작업은 지수 백오프 재시도 큐로 자동 이관하는 로직을 설계합니다
  • HLS/DASH 프로토콜 표준을 준수하는 매니페스트 생성 로직을 구현하며, 세그먼트 요청 로그를 기반으로 캐시 적중률을 높이는 구조를 설계합니다
  • 네트워크 조건 변화에 실시간 대응하는 적응형 재생 로직을 구현하며, 버퍼 임계치 기반 프리페치 전략으로 초기 로딩 지연을 최소화하는 구조를 설계합니다

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

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기