웹앱·플랫폼
실시간 물류 트래킹 대시보드
전국 배송 현황을 지도 위에서 실시간으로 추적하는 관제 대시보드. 지연이 생기면 사람보다 먼저 알아챕니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
배송 상태를 기사 전화와 엑셀 취합으로 파악하다 보니, 지연을 고객 항의로 먼저 알게 되는 일이 잦았습니다. 차량 수백 대가 전국 노선을 도는데 지금 어디에서 무엇이 밀리는지 아는 사람이 없었습니다. 오전에 취합한 엑셀은 오후면 이미 낡은 정보가 됐고 야간과 주말에는 그마저도 끊겼습니다. 지연이 터진 뒤에야 노선과 거점을 되짚으니 원인 분석은 늘 하루 이틀 늦었습니다. 보고를 기다리는 관제가 아니라 화면이 먼저 알려 주는 관제가 필요했습니다. 전국 차량 위치와 배송 상태를 한 화면에 실시간으로 모으는 대시보드를 만들기로 했습니다.
해결
WebSocket으로 차량 위치와 배송 상태를 실시간 수집하고, 지연 징후가 보이면 대시보드와 알림에 즉시 띄우게 만들었습니다. 화면은 전국 지도를 중심에 두고 한쪽에 이벤트 로그, 다른 쪽에 차량·운송 현황을 붙여 위치와 사건, 목록이 한눈에 이어지는 구조입니다. 수집한 이벤트는 Redis 큐를 거치게 해 처리량이 몰려도 화면 갱신이 밀리지 않게 했습니다. 시간대별 처리량과 노선별 지연율, 거점별 물동량, 지연 사유 구성은 차트로 집계해 상황판 아래에 배치했습니다. 지연이 잡히면 이벤트 로그와 알림에 경고 등급으로 올라오고 해당 차량만 목록에서 걸러 볼 수 있습니다.
- -38%
- 지연 대응 시간
- 450대
- 동시 추적 차량
- 24/7
- 무중단 관제
제작 노트
상황판을 채운 요소들
상황판 중앙의 전국 지도는 확대·축소와 배율 초기화 버튼으로 거점과 노선을 훑어볼 수 있습니다. 이벤트 로그는 경고·주의·정보 세 등급 칩으로 걸러 보고 차량·운송 현황은 이동 중, 지연, 완료, 계획 상태별로 나눠 봅니다. 차량마다 날짜가 들어간 운송장 번호가 붙고 별표를 눌러 관심 차량으로 고정할 수 있습니다. 아래쪽에는 시간대별 처리량부터 지연 사유 구성까지 차트 네 개가 돌아갑니다. 실시간 백엔드가 필요한 차량·배송 데이터는 날짜 시드로 만든 모의 데이터로 재현한 데모라 관제 흐름을 그대로 눌러 보며 확인할 수 있습니다.
실시간 스택의 구성
관제 대시보드의 핵심은 새로 고침 없이 갱신되는 화면입니다. 요청이 올 때만 응답하는 방식으로는 차량 수백 대의 위치 변화를 따라갈 수 없어 서버가 먼저 밀어 주는 WebSocket을 축으로 잡았습니다. Laravel은 이벤트 브로드캐스트가 프레임워크에 들어 있어 배송 상태 변경을 적은 코드로 전 화면에 전파할 수 있고 Redis가 그 사이에서 큐와 발행·구독을 맡아 순간 처리량이 튀어도 이벤트가 유실되지 않습니다. 데모에서는 이 실시간 스트림을 날짜 시드 모의 데이터로 재현해 실제 백엔드 없이도 같은 화면 흐름이 돌게 했습니다.
먼저 알아채는 화면
관제자가 찾기 전에 화면이 먼저 말하게 하는 것이 설계 목표였습니다. 이상 징후는 이벤트 로그에 등급 색으로 올라오고 알림 드롭다운과 상단 티커가 같은 사건을 다시 상기시킵니다. 지연을 발견하면 목록에서 해당 차량을 걸러 운송장 번호로 상세를 확인하고 관제 메모나 기사 호출 버튼으로 이어지는 동선까지 배치했습니다. 24시간 켜 두는 화면이라 기본을 어두운 야간 모드로 잡고 주간 전환 버튼을 따로 두었습니다. 오래 응시해도 피로하지 않도록 경고 색만 도드라지게 쓰고 나머지는 명도를 낮췄습니다.
화면
