WebGL 제거 및 PWA 전환으로 로드 시간 85% 단축 및 완전 오프라인 환경 구현

Context

해커톤으로 개발된 초기 버전의 volatile memory 기반 상태 관리와 A-Frame WebGL 의존성으로 인한 저사양 기기 성능 저하 발생. 특히 네트워크 불안정 지역의 접근성 결여와 WCAG 미준수로 인한 실제 사용자 진입 장벽이 높은 구조적 한계 존재.

Technical Solution

• WebGL 기반 A-Frame을 GPU-composited transforms 기반 CSS requestAnimationFrame 파티클 시스템으로 교체하여 렌더링 부하 최소화
• localStorage와 JSON serialization을 결합한 상태 계층 재설계로 서버리스 환경에서의 데이터 지속성 및 개인정보 보호 구현
• Web Speech API의 브라우저별 호환성 매트릭스 및 Graceful Degradation 로직을 적용한 음성 입력 인터페이스 구축
• Service Worker의 Cache-first 전략과 Blob URL 기반 PWA manifest 도입을 통한 오프라인 작동 환경 확보
• 각 모듈에 isolated try-catch 패턴과 UI fallback 메커니즘을 적용하여 단일 지점 장애(SPOF)를 방지하는 탄력적 아키텍처 설계
• ARIA roles 및 Focus Trap 구현을 통한 WCAG 2.1 AA 표준 준수 및 스크린 리더 접근성 강화

Impact

• 초기 로드 시간: 2.8s → 0.4s로 단축
• CPU Idle 점유율: 18% → 3%로 감소
• 저사양 기기 프레임 레이트: 20fps → 58fps로 향상
• 메모리 사용량: 85MB → 22MB로 절감
• ARIA 위반 사례: 6건 → 0건으로 해결

Key Takeaway

최종 사용자의 하드웨어 제약과 네트워크 환경을 고려한 '리소스 다이어트'와 'Fallback 설계'가 서비스의 실질적 도달 범위를 결정하는 핵심 엔지니어링 요소임.