배경: 영상을 보여주면서 운영 상태도 확인해야 한다
NUVION은 실시간 영상 모니터링 서비스입니다. 카메라 영상을 브라우저에서 수신하는 흐름과 대시보드의 통합 로그·알림 화면을 개발했습니다.
저는 영상 수신·연결과 운영 UI를 맡았습니다. 영상 분석 모델과 장비·네트워크 설계는 다른 팀의 영역이었습니다.
구조: 영상 수신과 연결 신호를 나누기
- 카메라별 식별메시지 처리 대상 구분
- 시그널링WebSocket / STOMP
- 연결 협상offer·answer·ICE 후보 교환
- 영상 수신RTCPeerConnection
- 화면 표시대시보드 영상 카드
WebRTC 수신과 WebSocket/STOMP 시그널링을 연결했습니다. 카메라별 메시지를 처리하고 연결·통신 로직을 화면의 렌더링 코드에서 분리했습니다.
핵심 구현: 화면의 종료와 통신 수명주기 맞추기
영상은 연결을 시작하는 것만으로 끝나지 않습니다. 시청을 종료하거나 화면을 떠날 때 연결·구독도 함께 정리해야 합니다. 구현에서 시청 종료와 구독 해제를 다뤘습니다.
| 단계 | 구현에서 다룬 내용 | 확인할 동작 |
|---|---|---|
| 연결 준비 | 카메라별 메시지·시그널링 | 메시지 대상 구분 |
| 연결 협상 | offer/answer·ICE 교환 | 브라우저 수신 연결 |
| 시청 중 | 영상 카드 상태·통신 로직 | 연결 상태의 화면 표현 |
| 시청 종료 | 연결·구독 정리 | 종료 이후 자원 수명주기 |
운영 화면: 영상 외의 정보를 같은 서비스에서
대시보드에 통합 로그 조회와 해결 처리, 알림 화면을 개발했습니다. 데스크톱에서는 알림 패널, 모바일에서는 페이지 형태를 다뤘습니다.
| 영역 | 담당 범위 | 연결 |
|---|---|---|
| 영상 카드 | 상태별 UI | 카메라 연결·메시지 |
| 통합 로그 | 조회·해결 처리 | API·query·화면 |
| 알림 | 데스크톱 패널·모바일 페이지 | 기기 화면 크기에 맞는 UI |
카메라 연결과 로그·알림은 같은 대시보드에 있지만, 영상 통신과 운영 기록이라는 서로 다른 흐름으로 나눠 구현했습니다.
상태별 화면과 테스트 기준을 함께 만들었습니다
Vitest·Testing Library·MSW 기반 테스트 환경과 상태별 UI, 명세·테스트 연결 기준을 도입했습니다. 인증·API 계약·영상·알림 등 기능별 검증 절차도 정리했습니다.
NUVION은 AI혁신 프로토타이핑 챌린지에서 총장상·전체 2위를 받은 팀 서비스입니다. 제가 맡은 작업은 영상 연결과 운영 화면이며, 영상 지연이나 장애율의 개선 효과를 측정한 결과는 아닙니다.
영상 카드와 통신 수명주기를 분리한 이유
영상 표시, 카메라별 메시지 처리, 연결 협상과 시청 종료를 나눴습니다. 화면을 떠날 때 연결과 구독을 함께 정리할 수 있도록 통신 수명주기를 화면 렌더링과 분리했습니다.