Firestore onSnapshot 기반의 초저지연 실시간 스타디움 관제 시스템 구축

Context

5만 명 규모의 대형 경기장 내 정적 안내 체계와 PA 시스템의 정보 전달 지연 문제 해결 필요. 설치 과정 없는 Web 기반 접근성과 대규모 동시 접속 환경에서의 실시간 데이터 동기화가 핵심 요구사항으로 분석됨.

Technical Solution

• Firestore onSnapshot을 통한 Push 기반 데이터 동기화로 클라이언트 리프레시 없는 밀리초 단위의 실시간 알림 구현
• 계정 생성 절차를 제거하고 Session Code와 sessionStorage를 결합한 인증 구조로 사용자 진입 장벽 최소화
• 100dvh(Dynamic Viewport Height) 적용을 통한 모바일 브라우저 URL 바 간섭 제거 및 UI 레이아웃 안정성 확보
• CSS-in-JS 라이브러리를 배제한 Vanilla CSS 채택으로 런타임 오버헤드를 줄여 Time to Interactive(TTI) 최적화
• Glassmorphism 디자인 패턴 적용을 통해 고대비 환경의 경기장 내 시인성 및 가독성 개선
• Firebase Storage 기반의 에셋 최적화를 통한 불안정한 경기장 Wi-Fi 환경 내 데이터 전송 효율 극대화