개발자가 서버 전송 없이 기기 내에서만 AES-256-GCM 암호화로 동작하는 오프라인 우선 PWA 지출 추적기를 구축했다

Context

대부분의 지출 관리 앱은 사용자 데이터를 외부 서버로 전송한다. 데이터 프라이버시 위험이 존재하며 네트워크 연결에 의존한다. 오프라인 환경에서는 사용한다.

Technical Solution

• React + Vite 조합으로 PWA 기반 프론트엔드를 구성했다
• Dexie.js를 통해 IndexedDB에 데이터를 로컬 저장소에만 저장했다
• AES-256-GCM 암호화와 PBKDF2 600,000 iteration으로 데이터를 암호화했다
• WebAuthn으로 지문과 PIN 잠금 인증을 구현했다
• Open Food Facts API를 연동하여 바코드 스캔으로 식품 정보를 가져왔다
• Tesseract.js OCR로 영수증 사진을 텍스트로 변환하는 기능을 추가했다

Impact

모든 데이터가 서버 전송 없이 기기 내에서만 처리되어 네트워크 의존성이 완전히 제거되었다.

Key Takeaway

데이터를 서버에 저장하지 않는 설계는 프라이버시 위험을 근본적으로 제거하며 오프라인 우선 아키텍처가 핵심이다