1MB 이하로 실시간 경기장 관리 Dashboard 구축
Source: Dev.to
소개
대형 스포츠 이벤트에 가서 전반전을 보고 나서, 15분짜리 하프타임 동안 화장실이나 햄버거를 사기 위해 줄을 서 본 적 있나요?
이것이 물리적 이벤트 경험에서 흔히 겪는 **“대기 시간 딜레마”**입니다. 관중이 최대 수용 인원에 도달하면 자연스럽게 가장 가까운 시설로 몰리게 되는데, 바로 옆 섹터에 완전히 비어 있는 동일한 시설이 있다는 사실을 알지 못합니다. 실시간으로 그 인원을 수학적으로 재분배한다면 전 세계적으로 대기 시간을 크게 줄일 수 있을까요?
Promptwars 2026을 위해 저는 이 문제를 해결하고자 Stadium Control Center라는 초고속, 실시간 경기장 동기화 플랫폼을 극한 제약 하에 설계했습니다.
부여된 제약: 1 MB 이하 유지
현대 웹 개발에서는 대시보드를 배포할 때 보통 거대한 JavaScript 번들(React, Angular, Tailwind)을 다운로드합니다. 우리는 완전히 반대 방향으로 나아갔습니다:
- 프레임워크 제로 – 순수 바닐라 JS와 순수 CSS Grid 사용.
- 이미지 자산 제로 – 완전 벡터화된 인라인 SVG와 수학적 기하학을 UI에 활용.
- HTTP 폴링 오버헤드 제로.
아키텍처: WebSocket을 통한 상태 동기화
몇 초마다 REST API를 무작위로 호출하는 대신, 백엔드에서는 FastAPI(Python)를 이용한 순수 WebSocket 파이프라인을 구축했습니다. 이것이 우리의 실시간 상태 엔진 역할을 합니다.
- 인증된 사용자 또는 크라우드소싱 참여자가 업데이트된 대기 시간을 입력합니다.
- 백엔드가 즉시 상태 맵을 변형합니다.
- JSON 업데이트가 경기장 내 모든 활성 화면에 방송되어 진정한 제로 레이턴시 업데이트를 보장합니다.
“스마트 라우트” 엔진
데이터 시각화만으로는 충분하지 않습니다; 이를 실행 가능한 형태로 만들어야 합니다. 엔진은 완전히 브라우저에서 동작합니다:
- 시설 대기열이 15분을 초과하면 “Red” 임계값을 트리거합니다.
- 엔진은 주변의 동등한 시설들을 분석합니다(예: 북문과 남문 매칭).
- 대체 시설이 발견되면 지리적 거리를 계산하고 스마트 어시스턴트 배너를 표시합니다:
“프로 팁: 북 푸드 코트가 붐비고 있습니다. 서쪽 섹터로 가는 더 짧은 경로를 찾았습니다—15분 절감!”
포괄적 라우팅 (ADA)
교통 라우팅은 모두에게 동일하게 적용될 수 없습니다. 우리는 물리적 ♿ ADA 토글을 통합했습니다. 토글이 활성화되면 경로 탐색 로직이 실제 보행 시간에 1.2배의 패널티를 적용해, 모든 추천 경로가 실질적으로 접근 가능하도록 보장합니다.
경기 이벤트 기반 시뮬레이션
제품을 시연하기 위해 Python 백엔드는 5배 속도(Stadium Time)로 움직이는 비동기 백그라운드 타임루프를 실행합니다. 이는 Match Schedule을 파싱하고, 하프타임이 다가오면 시뮬레이션 루프가 음식, 출입구, 화장실 트래픽을 40 % 급증시켜 클러스터 전반에 자연스러운 병목 현상을 동적으로 유발합니다. 이를 통해 예측 트렌드 지표(↑/↓)가 즉시 반응하는 모습을 관찰할 수 있습니다.
결론
고성능 인터페이스를 구축하는 데 반드시 거대한 번들 크기가 필요한 것은 아닙니다. 이 프로젝트는 무거운 추상화를 버리고 순수 WebSocket 파이프와 바닐라 메커니즘으로 설계된 적절한 규모의 아키텍처가 있으면, 브라우저에서 직접 물리적 세계 솔루션을 제공할 수 있음을 보여줍니다.