Vanilla JS와 Supabase를 활용한 48시간 내 무설치 탄소 추적 시스템 구축

Context

기존 탄소 계산기의 지나친 단순함 또는 기업 보고서 중심의 복잡한 접근 방식이라는 한계 존재. 사용자 진입 장벽을 낮추기 위해 별도 설치와 가입 절차가 없는 경량화된 개인 맞춤형 도구 필요성 대두.

Technical Solution

• Zero-build 전략을 통한 HTML5, CSS3, Vanilla JS 기반의 Lean Stack 채택으로 node_modules 제거 및 배포 효율 극대화
• LocalStorage 기반의 Persistent device_id 생성 및 Supabase RLS(Row-Level Security)를 결합한 익명 Cloud Sync 구조 설계
• 15개 이상의 복잡한 입력 항목을 Collapsible Section으로 그룹화하여 사용자 인지 부하 감소 및 데이터 입력 최적화
• Chart.js 인스턴스의 명시적 Destroy 프로세스 구현을 통한 Canvas Context 충돌 및 Undefined 레이블 런타임 에러 해결
• IPCC, EPA 등 검증된 데이터셋 기반의 EMISSION_FACTORS 객체 구조화를 통한 계산 로직의 신뢰성 확보

Impact

• GitHub Copilot 활용을 통한 전체 개발 공수 50% 절감