← 포트폴리오 목록

해양쓰레기 거점 통합 관제 플랫폼

MVP의 거점별 판정 결과 조회를 넘어, 전국 해양환경 적치장 거점을 지도 위에서 실시간으로 관제하고 위험등급 알림·오프라인 일괄 업로드·다중 거점 통계 리포트를 통합 제공하는 확장 플랫폼을 FastAPI + Redis + Celery 기반으로 설계·구현합니다.

지도 기반 거점 관제 좌표 시각화 구현SVG 추상 지도 위에 거점 마커와 위험등급별 색상·범례를 렌더링하는 map-canvas 구조를 구현합니다
위험등급 알림 큐 아키텍처 구축Celery 주기 작업과 Redis Pub/Sub으로 임계값 초과 이벤트를 실시간 알림 큐로 전파하는 구조를 구축합니다
오프라인 일괄 업로드 재시도 로직 설계대량 이미지 배치 처리 중 실패 항목만 선별해 자동 재시도하는 비동기 큐 로직을 설계합니다
서비스 타입Web
업종모니터링
기술 스택
ReactTypeScriptTailwind CSSFastAPISQLAlchemyPostgreSQLRedisCelery
주요 기능
  • 거점 지도 관제
  • 위험등급 알림
  • 오프라인 일괄 업로드
  • 거점 통계 리포트
Overview

프로젝트 개요

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

MVP의 거점별 판정 결과 조회를 넘어, 전국 해양환경 적치장 거점을 지도 위에서 실시간으로 관제하고 위험등급 알림·오프라인 일괄 업로드·다중 거점 통계 리포트를 통합 제공하는 확장 플랫폼을 FastAPI + Redis + Celery 기반으로 설계·구현합니다.

작업 범위

  • 거점 지도 관제: 전체 거점을 지도 위에서 한눈에 확인하고 위험등급별로 구분
  • 위험등급 알림: 위험지수가 임계값을 초과한 거점을 자동으로 감지해 알림 센터에 표시
  • 오프라인 일괄 업로드: 오프라인 상태에서 누적된 촬영 데이터를 복귀 시 한 번에 일괄 업로드
  • 거점 통계 리포트: 전체 거점의 판정 통계를 기간별로 집계해 종합 리포트로 제공

주요 업무

  • 거점 지도 관제 화면: 거점 좌표를 지도 캔버스에 마커로 표시하고 클릭 시 상세 패널을 띄우는 구조를 구현합니다
  • 위험등급 알림 화면: 임계값 초과 이벤트를 큐로 전파해 알림 센터 목록에 실시간 반영하는 구조를 구현합니다
  • 오프라인 일괄 업로드 화면: 다건 이미지를 비동기 큐로 순차 처리하고 실패 항목만 재시도하는 배치 업로드 구조를 구현합니다
  • 거점 통계 리포트 화면: 거점·기간별 판정 통계를 사전 집계해 비교 차트와 통계 리포트로 제공하는 기능을 구현합니다
해양쓰레기 거점 통합 관제 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

다수 거점의 위치 좌표를 지도 위에 동시에 표시할 때 마커 밀집 구간의 시인성이 저하될 수 있어

클러스터링 로직으로 대응합니다

위험등급별 알림 발송 시 중복 알림이나 전파 지연 리스크

알림 큐 설계와 재시도 정책으로 대응합니다

오프라인 상태에서 축적된 대용량 촬영 데이터를 일괄 업로드할 때 처리 지연이 발생할 수 있어

비동기 배치 큐로 대응합니다

다중 거점 통계를 집계할 때 로트 단위 판정 결과의 시계열 정합성 검증이 필요하여

집계 파이프라인에 검증 단계를 포함합니다

구현 내용

핵심 기능 상세

핵심 기능 1

거점 지도 관제

전체 거점을 지도 위에서 한눈에 확인하고 위험등급별로 구분. 거점 좌표를 지도 캔버스에 마커로 표시하고 클릭 시 상세 패널을 띄우는 구조를 구현합니다.

  • 거점 좌표 데이터를 SVG 기반 추상 지도 위에 마커로 렌더링하는 map-canvas 구조 구현
  • 위험등급(안전/주의/위험)별 마커 색상 구분과 범례 컴포넌트 설계
  • 마커 클릭 시 플로팅 상세 카드로 거점 최근 판정 결과를 표시하는 인터랙션 구현

다수 거점의 위치와 위험등급을 하나의 관제 화면에서 동시에 파악할 수 있는 공간 시각화 구조를 설계합니다.

거점 지도 관제
거점 지도 관제 실제 화면
핵심 기능 2

위험등급 알림

위험지수가 임계값을 초과한 거점을 자동으로 감지해 알림 센터에 표시. 임계값 초과 이벤트를 큐로 전파해 알림 센터 목록에 실시간 반영하는 구조를 구현합니다.

  • Celery 기반 주기적 위험지수 임계값 체크 작업과 알림 큐 설계
  • Redis Pub/Sub으로 알림 이벤트를 실시간 전파하는 구조 구현
  • 알림 우선순위(긴급/주의)별 정렬과 처리 상태(미확인/확인) 관리 UI 구현

위험등급 초과 거점을 자동 감지해 알림 큐로 전파하는 비동기 처리 구조를 구현합니다.

위험등급 알림
위험등급 알림 실제 화면
핵심 기능 3

오프라인 일괄 업로드

오프라인 상태에서 누적된 촬영 데이터를 복귀 시 한 번에 일괄 업로드. 다건 이미지를 비동기 큐로 순차 처리하고 실패 항목만 재시도하는 배치 업로드 구조를 구현합니다.

  • 다건 이미지 배치 업로드를 처리하는 비동기 큐 엔드포인트 구현
  • 업로드 진행률과 실패 항목을 구분 표시하는 배치 처리 UI 설계
  • 네트워크 재연결 감지 후 자동 재시도하는 업로드 재개 로직 구현

오프라인 구간에서 누적된 대량 이미지를 순차 처리하며 실패 항목만 선별 재시도하는 배치 업로드 구조를 구현합니다.

오프라인 일괄 업로드
오프라인 일괄 업로드 실제 화면
핵심 기능 4

거점 통계 리포트

전체 거점의 판정 통계를 기간별로 집계해 종합 리포트로 제공. 거점·기간별 판정 통계를 사전 집계해 비교 차트와 통계 리포트로 제공하는 기능을 구현합니다.

  • PostgreSQL Materialized View로 거점·기간별 판정 통계를 사전 집계하는 구조 설계
  • 거점 비교 차트와 위험등급 분포 도넛 차트를 조합한 통계 리포트 화면 구현
  • 통계 리포트도 PDF로 내보낼 수 있도록 P1 리포트 엔진을 확장 적용

다중 거점의 판정 데이터를 기간별로 집계해 정부지원사업 정산·보고에 활용할 수 있는 통계 리포트 구조를 설계합니다.

거점 통계 리포트
거점 통계 리포트 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

거점 지도 데이터 모델 및 관제 API 설계 · 2026.09

거점 좌표·위험등급 테이블 설계, 지도 마커 API 스펙 정의, 알림 큐 아키텍처 설계

STEP 2

위험등급 알림 및 오프라인 업로드 파이프라인 개발 · 2026.09

Celery 임계값 체크 작업, Redis Pub/Sub 알림 전파, 배치 업로드 큐 API 구현

STEP 3

지도 기반 거점 관제 UI 개발 · 2026.09

map-canvas 구조의 마커·플로팅 패널·범례 구현, 거점 통계 리포트 화면 구현

STEP 4

통합 부하 테스트 및 알림 정책 검증 · 2026.09

다중 거점 동시 알림 시뮬레이션, 배치 업로드 재시도 정책 검증, 통계 집계 정합성 테스트

프로젝트 성과

주요 성과

지도 기반 거점 관제 좌표 시각화 구현SVG 추상 지도 위에 거점 마커와 위험등급별 색상·범례를 렌더링하는 map-canvas 구조를 구현합니다
위험등급 알림 큐 아키텍처 구축Celery 주기 작업과 Redis Pub/Sub으로 임계값 초과 이벤트를 실시간 알림 큐로 전파하는 구조를 구축합니다
오프라인 일괄 업로드 재시도 로직 설계대량 이미지 배치 처리 중 실패 항목만 선별해 자동 재시도하는 비동기 큐 로직을 설계합니다
다중 거점 통계 집계 파이프라인 구현PostgreSQL Materialized View로 거점·기간별 판정 통계를 사전 집계하는 파이프라인을 구현합니다
Highlights

기술적 주안점

  • 다수 거점의 위치와 위험등급을 하나의 관제 화면에서 동시에 파악할 수 있는 공간 시각화 구조를 설계합니다
  • 위험등급 초과 거점을 자동 감지해 알림 큐로 전파하는 비동기 처리 구조를 구현합니다
  • 오프라인 구간에서 누적된 대량 이미지를 순차 처리하며 실패 항목만 선별 재시도하는 배치 업로드 구조를 구현합니다

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

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

무료 상담 시작하기