[SK쉴더스 루키즈] 3회차 멘토링 (6/27)

1. 개인용 / 기업용 알림 인프라 분리

기존 시스템은 '단일 시설(Facility)' 기준으로만 알림이 하드코딩되어 있어, 여러 시설을 관리해야 하는 '기업용 통합 관제(Company)'로 확장할 때 구조적인 병목이 있었음.

[문제 상황: 데이터 혼선 및 확장성 제한] API와 내부 캐시 시스템이 개별 시설의 ID만 바라보고 동작하다 보니, 기업 관리자가 접속했을 때 알림 데이터를 캐싱하고 조회하는 과정에서 데이터 충돌이 발생할 위험이 컸음.

[해결 방법] 가장 먼저 식별자(Prefix) 패턴을 도입해 캐시 메모리의 무결성을 확보함.

• 캐시 키 분리: 인메모리나 Redis에 저장되는 최근 알림 데이터의 Key를 단순 숫자 ID에서 COMP_{id}(기업용)와 FAC_{id}(개인용)로 명확히 나눠 데이터 혼선을 원천 차단함.
• 동적 라우팅: 클라이언트 단에서 현재 로그인한 유저의 권한 타입(개인/기업)을 판별해, 서버의 각기 다른 API 엔드포인트로 알아서 분기되도록 구현함.
• 보안 방어 로직 추가: 실시간 소켓으로 수신되는 데이터 중, 현재 로그인한 사용자가 볼 권한이 없는 타인의 카메라 이벤트인 경우 화면에 렌더링하지 않고 즉시 드롭(Drop)시키는 필터링 과정을 추가함.

2. 실시간 AI 오버레이 시인성(UX) 개선

관제 화면 CCTV 영상 위에 AI가 사람을 인식해 박스를 그려주는데, 이 '실시간 오버레이' 기능이 눈에 잘 안 들어온다는 피드백이 있었음.

[문제 상황: 위험 상황 인지 피로도 증가] 기존에는 AI가 객체를 탐지하면 무조건 '빨간색 박스'로만 표시됨. 관제 인력 입장에서는 화면에 늘 빨간 박스가 떠 있다 보니, 실제 쓰러짐 같은 응급 상황이 발생했을 때 시각적으로 바로 알아채기가 꽤 피로하고 어려웠음.

[해결 방법] 사용자 경험(UX) 향상을 위해 일반 상황과 위험 상황의 컬러 팔레트를 명확히 나누고, 상태 값에 따라 색상이 동적으로 변하도록(Dynamic Color) 렌더링 컴포넌트 로직을 수정함.

• 일반 상황: 단순히 사람을 인식하고 추적(Tracking)만 할 때는 시야에 안정감을 주는 초록색(Green)으로 렌더링함.
• 위험 상황: 쓰러짐 등의 이벤트 발생 즉시 박스 색상을 빨간색(Red)으로 변경하고, 그림자(Glow) 효과를 추가해 즉각적으로 위험을 인지할 수 있게 함.

3. 실시간 웹소켓 알림(Toast) 누락 버그 해결

영상 오버레이를 켜고 모니터링을 하는 중에는 새로운 위험 이벤트가 발생해도 알림 팝업이 안 뜨고, 오버레이를 껐을 때만 알림이 오는 묘한 버그가 있었음.

[문제 상황: 알림 쿨타임 충돌 및 과도한 디바운싱] 알림 폭탄을 막기 위해 설정해둔 '중복 알림 방지 쿨타임'이 너무 길게 잡혀 있던 것이 원인. 한 번 알림이 울린 뒤 장시간 동안 뒤이어 오는 알림들이 모두 차단되고 있었음.

[해결 방법]

• 동기화 주기 조절: 디바운싱 및 중복 방지를 통제하는 로직을 점검하여, 쿨타임을 실시간 관제에 적합한 수준(약 15초)으로 대폭 줄임.
• 이벤트 트리거 분리: 실시간 영상(오버레이 스트림)과 이벤트 알림(메시징 스트림) 간의 상태 점유 간섭을 완전히 분리함. 이제 영상을 보는 와중에도 새로운 위험 감지 시 알림 팝업이 즉시 정상 수신됨.

회고

이번 작업을 진행하며 단순히 눈에 보이는 UI만 고치는 것이 다가 아님을 많이 느낌. 그 밑단에서 돌아가는 Redis 데이터 캐싱 방식이나 WebSocket의 상태 점유 문제까지 수직적으로(Full-Stack) 파고들어 최적화해야 비로소 쓸만한 실시간 관제 경험을 제공할 수 있다는 것을 다시 한번 배운 시간이었음.