부산교통공사 1호선 시설 관제 시스템
3D 시설 모니터링 & WebRTC CCTV 스트리밍
Role: Frontend 단독 개발 (프론트 100%, 백엔드 30%)
Overview
부산교통공사 1호선 전체 노선의 시설물을 실시간으로 모니터링하고 제어하는 3D 관제 시스템입니다. Three.js 기반 3D 시각화, GPS 실시간 차량 위치 추적, WebRTC 기반 현장 CCTV 영상 스트리밍, WebSocket 센서 데이터 수신을 프론트엔드 단독으로 개발했습니다. 특히 폐쇄망 환경에서의 WebRTC CCTV 스트리밍 구조를 분석·구현하며 실시간 미디어 처리 역량을 심화했고, 현장에서 바로 배포하고 오류 발생 시 즉시 수정·재배포하는 현장 대응 경험을 쌓았습니다.
Tech Stack
Key Highlights
프론트엔드 단독 개발
Three.js 3D 관제 + WebRTC + WebSocket + GPS 통합
폐쇄망 환경 WebRTC CCTV 스트리밍
구조 분석부터 샘플 코드 작성까지
3D 맵 POI·조명·장치 관리 UI/UX
시설물 상태 직관적 시각화
GPS 기반 실시간 차량 위치 추적
노선 위 차량 위치 렌더링
SSE 기반 실시간 이벤트 알림 시스템
현장 배포·즉시 수정·재배포
실시간 버그 현장 대응
WebRTC CCTV 스트리밍
폐쇄망 환경에서 동작하는 WebRTC CCTV 스트리밍 구조 분석 및 구현
TURN/STUN 서버 없이 폐쇄망 내부 시그널링 처리
다중 CCTV 동시 스트리밍
관제 화면에서 복수 영상 동시 모니터링
스트림 연결 끊김 자동 감지 및 재연결 로직
3D 시설물 관제
Three.js 기반 전체 노선 3D 시설물 모니터링 뷰
3D 맵 위 POI·조명·장치 관리 UI
실시간 상태 반영
WebSocket 센서 데이터 수신
시설물 상태 실시간 시각화
카메라 제어 및 시점 전환
역사별·구간별 빠른 탐색
실시간 차량 추적 & 현장 대응
GPS 데이터 기반 실시간 차량 위치 추적
노선 위 차량 렌더링
SSE 기반 실시간 이벤트 알림
관리자 즉시 인지
WebView 컴포넌트 통합으로 레거시 시스템 연동
현장 폐쇄망 환경 배포
오류 발생 시 즉시 수정·재배포 반복
Screenshots
이미지 추가 예정
이미지 추가 예정
이미지 추가 예정
이미지 추가 예정