← 포트폴리오 목록

포장 영상 업로드·보관 현황 통합 콘솔

MVP 이후 확장으로 작업대 4대의 녹화 상태 보드, 업로드 큐와 실패 재처리 센터, 저장소 용량·보관 만료 현황, 기간·작업대 조건으로 찾는 영상 아카이브 검색을 하나의 현황 화면으로 묶는 구현한 프로젝트입니다.

프로젝트 납품 요약

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

서비스 타입Web
업종물류 시스템
기술 스택
ReactTypeScriptRechartsNode.jsExpressPostgreSQLRedisBull QueueAWS S3
주요 기능
  • 작업대 4대 상태 보드
  • 업로드 큐·재처리 센터
  • 저장소·보관 만료 현황
  • 영상 아카이브 검색·상세

프로젝트 개요

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

MVP 이후 확장으로 작업대 4대의 녹화 상태 보드, 업로드 큐와 실패 재처리 센터, 저장소 용량·보관 만료 현황, 기간·작업대 조건으로 찾는 영상 아카이브 검색을 하나의 현황 화면으로 묶는 구현한 프로젝트입니다. P1과 같은 Node.js·PostgreSQL 기반에 Redis와 큐 처리를 더해 설계합니다.

작업 범위

  • 작업대 4대 상태 보드: 작업대별 녹화 상태, 마지막 스캔 송장번호, 업로드 대기 건수, 장치 연결 상태를 한눈에 보여주는 현황 보드입니다
  • 업로드 큐·재처리 센터: 대기·진행·실패 상태의 업로드 건을 모아 보고, 실패 사유별로 분류해 선택 재업로드할 수 있는 화면입니다
  • 저장소·보관 만료 현황: S3 저장 용량 추이와 3개월 만료 예정 영상 수, Lifecycle 규칙 적용 상태를 보여주는 현황 화면입니다
  • 영상 아카이브 검색·상세: 기간, 작업대, 업로드 상태 조건으로 영상을 찾고, 선택한 영상의 상세 정보와 재생·다운로드 이력을 한 화면에서 보는 검색 화면입니다

주요 업무

  • 작업대 4대 상태 보드 화면: 각 작업대 PC가 주기적으로 상태를 보내고 서버가 SSE로 화면에 전달하는 구조로 설계합니다
  • 업로드 큐·재처리 센터 화면: Bull Queue 작업 상태를 조회하고 실패 건을 사유별로 분류하여 재시도 정책을 적용하는 구조로 설계합니다
  • 저장소·보관 만료 현황 화면: S3 인벤토리 집계를 PostgreSQL 집계 테이블로 적재하고 일별 용량 추이와 만료 예정 건수를 계산하는 구조로 설계합니다
  • 영상 아카이브 검색·상세 화면: 목록과 상세를 좌우로 배치하고 서버 필터와 서명 URL 발급 이력을 함께 보여주는 구조로 설계합니다
포장 영상 업로드·보관 현황 통합 콘솔
요구사항 정의

프로젝트 핵심 과제

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

작업대 PC가 일시적으로 꺼지거나 네트워크가 끊긴 경우를 하트비트 시각으로 구분해 응답 없음 상태를 오탐 없이 표시하는 규칙 설계

업로드 실패를 사유별로 분류하면서 같은 영상이 두 번 올라가지 않

멱등 처리하는 재처리 정책 설계 필요

영상 수가 늘어도 S3 목록 호출 없이 저장소 현황을 보여주기 위한 인벤토리 집계 주기와 지연 허용 범위 설계

Lifecycle 만료 시점과 검색 목록이 어긋나 삭제된 영상이 목록에 남지 않

메타데이터 동기화 규칙 설계 필요

구현 내용

핵심 기능 상세

핵심 기능 1

작업대 4대 상태 보드

작업대별 녹화 상태, 마지막 스캔 송장번호, 업로드 대기 건수, 장치 연결 상태를 한눈에 보여주는 현황 보드입니다. 각 작업대 PC가 주기적으로 상태를 보내고 서버가 SSE로 화면에 전달하는 구조로 설계합니다.

  • SSE 기반 작업대 상태 스트림과 연결 끊김 자동 재연결 구현
  • 작업대별 하트비트 시각으로 응답 없음 상태를 판별하는 규칙 정의
  • Redis에 최신 상태를 캐시하고 PostgreSQL에는 변경 이력만 저장

상태 갱신은 Redis 캐시에서 읽고 이력은 별도 저장하여 현황 조회가 작업대 동작에 영향을 주지 않는 구조를 설계합니다.

작업대 4대 상태 보드
작업대 4대 상태 보드 실제 화면
핵심 기능 2

업로드 큐·재처리 센터

대기·진행·실패 상태의 업로드 건을 모아 보고, 실패 사유별로 분류해 선택 재업로드할 수 있는 화면입니다.

  • Bull Queue 작업 상태 조회 API와 실패 사유 코드 분류 테이블 설계
  • 선택 재업로드 시 멱등 키로 중복 업로드를 막는 규칙 적용
  • 재시도 횟수·다음 시도 시각을 목록에 표시하는 상태 모델 구현

실패 사유를 네트워크·권한·용량·파일 손상으로 나누어 재시도 가능 건과 확인 필요 건을 구분하는 모델을 설계합니다.

업로드 큐·재처리 센터
업로드 큐·재처리 센터 실제 화면
핵심 기능 3

저장소·보관 만료 현황

S3 저장 용량 추이와 3개월 만료 예정 영상 수, Lifecycle 규칙 적용 상태를 보여주는 현황 화면입니다.

  • S3 인벤토리 리포트를 일 단위로 적재하는 집계 배치 설계
  • 만료 예정 영상을 주 단위 구간으로 집계하는 쿼리 구현
  • Recharts로 용량 추이와 만료 예정 분포 차트 구현

저장소 상태를 인벤토리 집계로 읽어 영상 수가 늘어도 현황 조회가 S3 목록 호출에 의존하지 않는 구조를 설계합니다.

저장소·보관 만료 현황
저장소·보관 만료 현황 실제 화면
핵심 기능 4

영상 아카이브 검색·상세

기간, 작업대, 업로드 상태 조건으로 영상을 찾고, 선택한 영상의 상세 정보와 재생·다운로드 이력을 한 화면에서 보는 검색 화면입니다.

  • 기간·작업대·상태 복합 필터를 URL 쿼리와 동기화하는 서버 필터 구현
  • 영상 메타데이터 인덱스(송장번호·시각·작업대) 설계
  • 서명 URL 발급 이력을 기록하고 상세 패널에 표시

복합 필터를 URL로 공유할 수 있게 하여 CS 담당자 간 같은 조회 결과를 바로 전달하는 구조를 설계합니다.

영상 아카이브 검색·상세
영상 아카이브 검색·상세 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

상태 수집·이력 모델 설계 · 2026.10

작업대 하트비트 수신 구조, Redis 최신 상태 캐시와 PostgreSQL 이력 테이블 설계

STEP 2

업로드 큐 조회·재처리 기능 개발 · 2026.10

Bull Queue 상태 조회 API, 실패 사유 분류, 멱등 키 기반 선택 재업로드 구현

STEP 3

저장소 집계·차트 화면 개발 · 2026.10

S3 인벤토리 집계 배치, 용량 추이와 만료 예정 차트 구현

STEP 4

아카이브 검색·상세 화면 구현 · 2026.10

복합 필터 서버 검색, 마스터-디테일 상세 패널, 서명 URL 발급 이력 구현

개발 결과

SSE 기반 작업대 상태 스트림 구현Redis 캐시에서 최신 상태를 읽어 SSE로 전달하고 하트비트 만료로 응답 없음을 판별하는 구조 설계
실패 사유 분류 재처리 모델 설계네트워크·권한·용량·손상 4개 사유 코드로 실패 건을 나누고 멱등 키로 중복 업로드를 막는 재처리 구조 구축
인벤토리 집계 기반 저장소 현황 구축S3 인벤토리를 일 단위 집계 테이블에 적재하고 용량 추이·만료 예정 분포를 쿼리 한 번으로 조회하는 구조 설계
URL 동기화 복합 필터 검색 구현기간·작업대·상태 필터를 URL 쿼리와 동기화하고 서명 URL 발급 이력을 상세 패널에 연결하는 구조 적용

기술적 주안점

  • 상태 갱신은 Redis 캐시에서 읽고 이력은 별도 저장하여 현황 조회가 작업대 동작에 영향을 주지 않는 구조를 설계합니다
  • 실패 사유를 네트워크·권한·용량·파일 손상으로 나누어 재시도 가능 건과 확인 필요 건을 구분하는 모델을 설계합니다
  • 저장소 상태를 인벤토리 집계로 읽어 영상 수가 늘어도 현황 조회가 S3 목록 호출에 의존하지 않는 구조를 설계합니다

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

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

프로젝트 문의