Loop Harmony
레거시 시스템을 개선하여 실시간 통신 기능이 통합된 관제 플랫폼을 모바일 환경에 맞춰 개발
목차 보기
개요
Loop Harmony는 관제와 커뮤니케이션 기능을 통합한 플랫폼입니다. 현장에서 모바일로 관제와 통신 기능을 사용할 수 있도록 기존 화면과 구조를 재설계하는 프론트엔드 개발을 맡았습니다.
주요 기능
- 실시간 커뮤니케이션: 같은 화면에서 음성·영상 통화와 채팅 사용
- 현장 관제: 지도와 CCTV 스트리밍, 화면 공유를 함께 확인
- 대시보드 구성: 필요한 위젯의 위치와 크기를 직접 조절
구현과 개선
-
통화와 채팅을 하나의 화면으로 통합
WebRTC와 WebSocket을 활용한 통화에 Rocket.chat API 기반 채팅을 연결했습니다. 관제 기능과 커뮤니케이션 기능을 같은 화면에서 사용할 수 있도록 프론트엔드 연결을 맡았습니다.
-
지도와 영상 정보를 연결한 모바일 인터페이스
Leaflet 기반 지도에 CCTV 스트리밍과 화면 공유 기능을 결합했습니다. 현장에서 모바일 기기로 관제 정보를 확인할 수 있도록 화면 구현을 맡았습니다.
-
사용자가 조절하는 대시보드
react-grid-layout을 활용해 위젯의 위치와 크기를 사용자가 직접 바꿀 수 있도록 구현했습니다. 업무에 필요한 정보를 중심으로 화면을 구성할 수 있게 했습니다.
사용 기술
프론트엔드
- React
- Tailwind CSS
- React Query
- Zustand
- react-grid-layout
실시간·지도
- WebRTC
- WebSocket
- Leaflet
- Express.js
결과와 현재 상태
기존 플랫폼의 관제와 통신 기능을 모바일 환경에 맞춰 재구성하는 데 프론트엔드 개발로 참여했습니다. 실시간 통신과 외부 서비스 연동, 사용자가 구성하는 대시보드의 화면 구현이 제 범위입니다.