Canvas 렌더링과 광생물학 모델링을 통한 고성능 PWA 구현

Context

단순한 태양 고도 계산기를 넘어 개인별 피부 타입과 기상 조건을 반영한 정밀 비타민 D 합성 예측 시스템 구축 필요. 기존 SVG 기반 렌더링 방식으로는 수만 개의 데이터 셀을 처리하는 모바일 환경에서 성능 병목 발생.

Technical Solution

• DOM 노드 과부하 방지를 위해 47,450개 셀의 Heatmap을 SVG에서 Canvas 렌더링으로 전환하여 모바일 성능 최적화
• 인터랙티브 요소(툴팁, 클릭 타겟)는 SVG Overlay를 적용하여 Canvas의 낮은 제어력을 보완하는 하이브리드 구조 설계
• 단순 선형 계산이 아닌 포화 지수 모델(Saturating Exponential)을 도입하여 UVB에 의한 Previtamin D3의 광분해 및 생성 한계치 구현
• Open-Meteo API의 UV Index 데이터와 이론적 태양 기하학 모델 간의 중복 계산(Double-counting)을 방지하는 데이터 필터링 로직 적용
• 개발 리소스 최적화 및 플랫폼 범용성 확보를 위해 Native 앱 대신 iOS 16.4+ 및 Android를 지원하는 PWA 아키텍처 채택
• Supabase의 pg_trgm 기반 Full-text Search를 활용하여 20만 개 이상의 도시 데이터셋에 대한 효율적인 검색 성능 구현