현대제철의 스마트 시티·스마트 팩토리 환경에서는 CCTV 영상 관제와 IoT 센서 기반 위험 알림이
안전 관리의 핵심 요소로 자리 잡고 있습니다.
그러나 기존 시스템은 CCTV 스트리밍과 센서 이벤트를 별도 화면 또는 각기 다른 플랫폼에서 제공
이벤트 발생 시 수작업으로 대응 우선순위를 정해야 하고, 담당자 간 상황 공유 지연 발생
이력 조회·분석이 어려워 유사 사고 재발 방지를 위한 인사이트 확보에 한계
와 같은 문제로 인해 실시간 대응력 및 운영 효율성이 크게 떨어지는 한계를 보였습니다.

특히 관제센터 운영자와 현장 유지보수 엔지니어는 폭주하는 CCTV 채널을 일일이 모니터링해야 하고
개별 센서의 긴급 알림이 실시간 영상과 효과적으로 연계되지 않아
실제 위험 상황을 놓치거나, 불필요한 오경보에 인력 자원이 낭비되는 사례가 빈번했습니다.
이러한 배경 아래, CCTV RTSP 스트리밍, websocket 기반 IoT 센서 데이터, 위험 이력 로그를 하나의
웹 대시보드에서 통합 제공하고, 클릭 한 번으로 실시간 영상 레이아웃 전환 즉각적인 WebSocket 푸시 알림
페이징·필터링 가능한 이력 조회가 가능한 차세대 관제 시스템 구축이 필요해졌습니다.

따라서 본 프로젝트는 “스마트 안전조끼”를 비롯한 현장 IoT 솔루션과 기존 CCTV 관제망을 유기적으로 연동하여,
실시간 모니터링 효율성 극대화 위험 상황 즉시 대응 체계 확립 데이터 기반 사고 예방 인사이트 확보를 목표로 시작되었습니다.

1) 포트폴리오 소개
산업현장 실시간 스트리밍·IoT 모니터링 대시보드 (스마트 시티 / 스마트 팩토리)
IoT 센서와 CCTV 스트리밍을 연동해 위험 상황을 실시간으로 감시·알림하는 웹 대시보드

2) 작업 범위
프론트엔드: React + Next.js 기반 SPA
위험 이력 조회, 스트림 맵 관리, 실시간 모니터링, 경보 모달 UI 구현
백엔드: node.js
REST API, WebSocket 알림 서버, 인증·인가

IoT 연동: websocket 통한 센서 이벤트 수집
FFmpeg Video Streams / RTSP 스트리밍 연동

인프라: 폐쇄망 온프레미스

3) 주요 업무
데이터 모델링 & API 설계
위험 이력 조회용 페이징·필터링 API
스트림 리스트 CRUD, 실시간 알림용 WebSocket 엔드포인트
프론트엔드 화면 개발
위험 이력 조회: 조건별 검색, 페이징, 전체 건수 표시
스트림 맵 관리: URL 리스트, 키워드 검색, 토글형 상세 보기
실시간 모니터링: CCTV 영상 그리드 레이아웃
레이아웃 전환(1/4/9뷰) 기능
접속 현황 패널

경보 알림 모달:
발생시간·유형·대상·상세내용 표시
모달 오픈 시 배경 강조 & 재시도 로직

실시간 스트리밍 & 센서 연동
RTSP 플레이어 컴포넌트 개발
websocket 구독으로 센서 이벤트 수신 → UI 경보 트리거