4FACT VMS
웨어러블 바디캠 기반의 실시간 영상 관제 시스템을 위한 웹 경험을 설계하고 개발했습니다.
React
TypeScript
Next.js
Nest.js
PostgreSQL
Figma
4FACT VMS는 현장 요원이 착용한 웨어러블 바디캠의 영상을 실시간으로 수신하고, 관제 화면에서 여러 현장의 상황을 한눈에 확인할 수 있도록 만든 영상 관제 시스템입니다. 공공 안전, 시설 경비, 물류, 건설 안전, 민간 보안 순찰처럼 실시간 판단과 현장 대응이 중요한 환경을 주요 대상으로 합니다.
제품 경험은 랜딩 페이지와 웹 관제 화면이 하나의 흐름으로 이어지도록 구성했습니다. 랜딩 페이지에서는 실시간 영상 관제, 위치 기반 추적, 녹화 및 아카이빙, 그룹 관리, 권한 관리 같은 핵심 기능을 빠르게 이해할 수 있도록 정리했고, 관제 화면은 다중 영상 그리드와 지도 기반 확인, 기기 상태, 현장·사용자·워크스페이스 관리 흐름을 중심으로 설계했습니다.
특히 VMS 특성상 사용자가 장시간 화면을 주시하며 빠르게 판단해야 하므로, 정보 위계를 명확히 나누고 어두운 관제 환경에서도 상태가 잘 드러나는 대비와 인터랙션을 우선했습니다. 실시간 송출 상태, 배터리, 온라인·오프라인 상태, 현장 그룹 정보를 반복적으로 확인하는 운영 흐름을 기준으로 화면 밀도와 탐색 구조를 조정했습니다.
기술 아키텍처
애플리케이션은 Next.js 프론트엔드, NestJS 백엔드, 공통 API 계약 패키지, 운영 CLI를 하나의 Turborepo 모노레포로 관리합니다. 프론트엔드는 App Router 기반의 사용자·관리자 화면을 담당하고, 백엔드는 인증/인가, 워크스페이스, 현장, 사용자, 기기, 스트리밍, 녹화, 시스템 관리 모듈을 NestJS Modular Monolith 형태로 구성했습니다.
도메인은 크게 세 개의 시스템 경계로 나뉩니다.
- VMS 애플리케이션: Nginx를 단일 진입점으로 두고 Next.js, NestJS, PostgreSQL, Redis, S3 호환 스토리지를 연결합니다. 멀티테넌트 워크스페이스, 현장 단위 권한, 사용자·기기 관리, 관제 화면 상태를 담당합니다.
- CMAS/CMS 미디어 인프라: ST20 바디캠이 RTMP로 영상을 송출하면 CMS가 HLS로 변환하고, CMAS가 스트림 세션과 녹화 탐색 API를 제공합니다. 브라우저는 백엔드에서 검증된 스트리밍 세션 정보를 받은 뒤 hls.js로 CMAS의 HLS 스트림을 직접 재생합니다.
- AIoT Hub: 기기는 MQTT로 AIoT Hub와 통신하고, VMS 백엔드는 REST API와 웹훅을 통해 기기 상태, 텔레메트리, 설정, 원격 제어 명령을 처리합니다. 수신된 상태는 DB에 기록한 뒤 Socket.IO로 관제 화면에 전파합니다.
API 계층은 @4fact/api-contract 패키지에 oRPC 계약을 정의하고, 백엔드 컨트롤러와 프론트엔드 클라이언트가 같은 계약을 공유하도록 구성했습니다. 이를 통해 기기 제어, 녹화 탐색, 현장 멤버 관리처럼 입력과 응답 구조가 자주 변하는 화면에서도 타입 계약을 먼저 맞추고 구현을 진행할 수 있었습니다.
구현 포인트
기기 등록은 단순한 DB INSERT가 아니라 CMAS 스트림 생성, AIoT Hub 사전 등록, VMS DB 저장이 하나로 이어지는 흐름입니다. 외부 시스템 중 하나가 실패하면 이미 생성된 스트림을 롤백하도록 처리해, 관리 화면에는 존재하지만 실제 영상이나 MQTT 제어가 동작하지 않는 불일치 상태를 줄였습니다.
관제 화면은 그리드, 지도, 분할 보기 모드를 지원합니다. 화면 크기와 선택한 레이아웃에 따라 영상 슬롯 수를 계산하고, 현장 필터와 스트리밍 상태 필터를 서버 조회와 클라이언트 실시간 스냅샷 병합으로 처리했습니다. 같은 기기를 여러 컴포넌트가 구독해도 Socket.IO room 구독이 중복되지 않도록 구독 관리를 분리했습니다.
녹화 화면은 CMAS의 캘린더, 일별 구간, 타임라인 API를 바탕으로 구성했습니다. 사용자는 날짜 기준으로 녹화 가능 구간을 탐색하고, 필요한 구간만 다운로드 요청할 수 있습니다. 백엔드는 CMAS 오류를 인증 실패, 잘못된 요청, 리소스 없음, 서버 오류로 나눠 처리해 운영 중 원인 추적이 가능하도록 했습니다.
배포 구조는 SaaS와 구축형 환경을 모두 고려했습니다. 동일한 Docker 이미지와 스택 정의를 사용하고, 환경별 차이는 설정으로 분기합니다. 운영 CLI는 개발 환경과 고객 서버 환경의 엔트리포인트를 분리해 초기 설치, 인프라 시작, 마이그레이션, 헬스체크, 롤링 업데이트 같은 반복 작업을 자동화했습니다.
4FACT VMS 사이트에서 공개된 제품 소개와 주요 기능을 확인할 수 있습니다.