← 포트폴리오 목록

영상 변환·전송 운영 콘솔

스트리밍 앱 뒤에서 운영 담당자가 쓰게 될 영상 변환 작업, 전송·접근 설정, 모니터링·장애 알림 화면을 제안형으로 구성한 확장 프로젝트입니다.

프로젝트 납품 요약

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

서비스 타입Web
업종모니터링
기술 스택
React 18Tailwind CSSNode.js + ExpressPostgreSQL + PrismaFFmpeg (HLS)RedisBull QueueCloudflare CDN
주요 기능
  • 운영 현황
  • 변환 작업
  • 전송·접근 설정
  • 모니터링·알림

프로젝트 개요

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

스트리밍 앱 뒤에서 운영 담당자가 쓰게 될 영상 변환 작업, 전송·접근 설정, 모니터링·장애 알림 화면을 제안형으로 구성한 확장 프로젝트입니다. 기존 영상 일괄 변환과 실패 재실행까지 포함해 MVP 이후의 운영 범위를 보여줍니다.

작업 범위

  • 운영 현황: 운영 담당자가 변환 대기·진행·실패 건수와 최근 장애 알림을 한 화면에서 확인하고 처리할 건부터 엽니다
  • 변환 작업: 업로드된 영상의 HLS 변환 작업을 큐에서 확인하고 비트레이트 단계별 진행을 보며, 실패 건을 다시 실행하거나 기존 영상을 일괄 변환합니다
  • 전송·접근 설정: Cloudflare 캐시 규칙과 CORS 허용 출처, 서명 URL·토큰의 유효 시간 정책을 설정 화면에서 확인하고 변경합니다
  • 모니터링·알림: 스트리밍 서버와 CDN의 상태를 확인하고 장애 알림 기준을 설정하며, 발생한 알림을 확인 처리합니다

주요 업무

  • 운영 현황 화면: 변환 작업 요약, 처리할 일 목록, 최근 설정 변경 기록을 급한 순서로 배치하는 구조를 설계합니다
  • 변환 작업 화면: 작업 목록과 상세 분할 구조, 단계별 진행 막대, 실패 사유 표시와 재실행, 기존 영상 일괄 변환 대화상자를 설계합니다
  • 전송·접근 설정 화면: 캐시 규칙 목록, CORS 출처 입력, 서명 URL 유효 시간 정책, 변경 전후 값 확인 대화상자와 변경 이력을 설계합니다
  • 모니터링·알림 화면: 서버·CDN 상태 목록, 알림 규칙 편집, 발생 알림 목록과 확인 처리, 시험 발송 결과 패널을 설계합니다
영상 변환·전송 운영 콘솔
요구사항 정의

프로젝트 핵심 과제

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

기존 영상 수천 건을 일괄 변환할 때 저장 공간과 변환 서버 부하를 함께 제한하는 배치 규칙 설계

변환 중 서버가 재시작될 때 진행 중이던 작업을 중복 없이 이어받는 복구 규칙 설계

캐시 규칙 변경이 이미 캐시된 세그먼트에 반영되는 시점과 무효화 범위 설계

클라우드 서비스 월 과금이 변환량에 따라 달라지므로 사전 합의 항목으로 분리해 화면에 표시하는 방식 설계

구현 내용

핵심 기능 상세

핵심 기능 1

운영 현황

운영 담당자가 변환 대기·진행·실패 건수와 최근 장애 알림을 한 화면에서 확인하고 처리할 건부터 엽니다. 변환 작업 요약, 처리할 일 목록, 최근 설정 변경 기록을 급한 순서로 배치하는 구조를 설계합니다.

  • 변환 작업·장애 알림·정책 변경 이력을 하나의 처리 목록으로 합쳐 급한 순서로 정렬하는 큐 설계
  • 작업 상태별 건수를 집계해 현황 카드에 표시하는 서버 쿼리 구조 구현
  • 역할별로 보이는 메뉴와 버튼을 같은 권한 표에서 읽는 접근 제어 구조 설계

서로 다른 출처의 처리 대기 건을 하나의 목록으로 묶어 급한 순서로 보여주는 구조를 구현합니다.

운영 현황
운영 현황 실제 화면
핵심 기능 2

변환 작업

업로드된 영상의 HLS 변환 작업을 큐에서 확인하고 비트레이트 단계별 진행을 보며, 실패 건을 다시 실행하거나 기존 영상을 일괄 변환합니다.

  • Bull Queue로 변환 작업을 쌓고 FFmpeg 프로세스를 동시 실행 수 한도 안에서 처리하는 구조 구현
  • 비트레이트 단계별 진행을 작업 상세에 개별 막대로 표시하고 단계 단위로 실패를 기록하는 모델 설계
  • 실패 건 재실행 시 완료된 단계는 건너뛰고 실패한 단계부터 이어서 변환하는 복구 흐름 구현

변환 작업을 비트레이트 단계 단위로 기록해, 실패 건을 처음부터가 아니라 실패한 단계부터 다시 실행하도록 구현합니다.

변환 작업
변환 작업 실제 화면
핵심 기능 3

전송·접근 설정

Cloudflare 캐시 규칙과 CORS 허용 출처, 서명 URL·토큰의 유효 시간 정책을 설정 화면에서 확인하고 변경합니다.

  • 세그먼트와 매니페스트에 서로 다른 캐시 규칙을 적용하는 규칙 모델과 Cloudflare 설정 연동 구조 설계
  • 서명 URL 유효 시간과 토큰 검증 규칙을 정책 한 곳에서 관리해 API가 같은 값을 읽도록 구현
  • 설정 저장과 변경 이력 기록을 Prisma 트랜잭션 하나로 묶어 값과 이력이 일치하도록 설계

캐시 규칙과 접근 정책을 하나의 설정 모델로 관리하고 저장 시 변경 이력을 함께 남기도록 구현합니다.

전송·접근 설정
전송·접근 설정 실제 화면
핵심 기능 4

모니터링·알림

스트리밍 서버와 CDN의 상태를 확인하고 장애 알림 기준을 설정하며, 발생한 알림을 확인 처리합니다. 서버·CDN 상태 목록, 알림 규칙 편집, 발생 알림 목록과 확인 처리, 시험 발송 결과 패널을 설계합니다.

  • 서버 응답 확인과 변환 큐 적체를 주기 점검해 상태를 정상·주의·장애 3단계로 판정하는 구조 설계
  • 같은 조건이 이어질 때 알림을 간격 기준으로 묶어 발송하는 큐 구조 구현
  • 시험 발송 결과를 접수·발송·실패 단계로 표시하는 결과 패널 설계

상태 판정과 알림 발송을 분리해, 같은 장애가 이어질 때 알림이 반복 발송되지 않도록 구현합니다.

모니터링·알림
모니터링·알림 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

운영 범위 정의와 데이터 모델 설계 · 2026.11

영상·변환 작업·단계·정책·알림·변경 이력 테이블 설계와 역할별 권한 표 정의

STEP 2

변환 큐와 FFmpeg 작업 구현 · 2026.11

Bull Queue 기반 작업 등록, FFmpeg 단계별 변환, 실패 단계 기록과 재실행 흐름 구현

STEP 3

전송·접근 설정 화면 구현 · 2026.11

캐시 규칙·CORS·서명 URL 정책 화면, 변경 전후 비교 대화상자, 트랜잭션 저장과 이력 기록 구현

STEP 4

모니터링과 알림 구성 · 2026.11

상태 판정 점검, 알림 규칙과 반복 간격 묶음 발송, 시험 발송 결과 패널과 권한별 화면 점검

개발 결과

단계 단위 변환 작업 모델 설계비트레이트 단계별로 진행과 실패를 기록해 실패 건을 실패한 단계부터 다시 실행하는 구조를 구현합니다.
변환 큐 동시 실행 제어 구축Bull Queue에서 FFmpeg 동시 실행 수 한도를 두고 기존 영상 일괄 변환이 신규 업로드를 막지 않도록 우선순위를 나누는 구조를 설계합니다.
설정 저장·이력 단일 트랜잭션 설계캐시 규칙과 접근 정책 변경을 Prisma 트랜잭션 하나로 묶어 저장 값과 이력이 항상 일치하도록 구현합니다.
장애 알림 묶음 발송 큐 구현같은 장애 조건이 이어질 때 간격 기준으로 알림을 묶고 접수·발송·실패 단계를 기록하는 구조를 설계합니다.

기술적 주안점

  • 서로 다른 출처의 처리 대기 건을 하나의 목록으로 묶어 급한 순서로 보여주는 구조를 구현합니다
  • 변환 작업을 비트레이트 단계 단위로 기록해, 실패 건을 처음부터가 아니라 실패한 단계부터 다시 실행하도록 구현합니다
  • 캐시 규칙과 접근 정책을 하나의 설정 모델로 관리하고 저장 시 변경 이력을 함께 남기도록 구현합니다

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

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

프로젝트 문의