단일 HTML과 JSON 구조로 구현한 고효율 영양 계산기 설계

Context

Subway 공식 영양 정보 PDF의 파편화된 데이터 구조로 인한 계산 불편함. 커스텀 샌드위치 조합 시 수동 계산에 따른 높은 오류 가능성. 사용자 경험을 저해하는 복잡한 UI 구조의 한계.

Technical Solution

• 300개 이상의 항목을 포함한 단일 JavaScript 객체 기반의 정규화된 데이터 구조 설계
• 6인치와 풋롱 사이즈 구분을 위한 sizeAffected 플래그 도입 및 조건부 배수 계산 로직 구현
• 항목 ID와 수량을 매핑하는 currentSelection 딕셔너리 구조를 통한 상태 관리 최적화
• Vanilla JavaScript 기반의 클라이언트 사이드 필터링 및 동적 DOM 렌더링 방식 채택
• 브라우저 호환성 확보를 위해 Blob과 URL.createObjectURL을 이용한 파일 저장 기능 구현
• 검색어 유실 방지를 위한 검색 상태 캐싱 및 리렌더링 후 재적용 메커니즘 도입

Key Takeaway

복잡한 백엔드 인프라 없이도 정제된 데이터 구조와 클라이언트 사이드 로직만으로 충분한 실용적 도구 구현 가능. UI 설계 전 데이터 모델링과 핵심 계산 엔진의 검증이 개발 효율성을 결정하는 핵심 요소임.