개발자가 로컬-퍼스트 아키텍처(Evolu + SQLite WebAssembly)를 도입해 시간 및 금융 추적 앱을 서버·인증·구독 없이 구현

Context

기존 시간 추적 및 금융 관리 서비스들은 계정 생성, 서버 저장소 사용, 월 구독료를 필수로 요구했다. 사용자 데이터 프라이버시와 오프라인 접근성, 무료 제공의 필요성이 있었다.

Technical Solution

• SQLite를 WebAssembly로 브라우저에서 직접 실행: 모든 데이터를 IndexedDB에 저장하고 네트워크 요청 없이 로컬 쿼리 처리
• Evolu 프레임워크를 도입해 CRDTs(Conflict-free Replicated Data Types) 기반 다중 기기 동기화: 24단어 복구 문구로 기기 간 엔드-투-엔드 암호화 동기화
• Vue 3 + TypeScript + Vite + Tailwind CSS v4로 구성: 전체 앱 크기를 450KB gzipped로 제한
• JSON 백업·복원 기능과 PWA 설치 옵션으로 로컬 데이터 손실 방지
• 금융 데이터를 정수 문자열(센트 단위)로 저장하고 현지 시간대 기준 날짜 처리: 부동소수점 오류와 시간대 문제 제거

Impact

앱 전체 크기 450KB(gzipped). 릴레이 서버가 암호화된 데이터 블롭만 관찰하므로 복호화 불가능. 네트워크 왕복이 없어 모든 쿼리가 로컬 SQLite 데이터베이스에 대해 즉시 실행.

Key Takeaway

로컬-퍼스트 아키텍처는 인증, API 엔드포인트, 데이터베이스 마이그레이션, 서버 모니터링을 제거함으로써 개발 복잡도를 극적으로 단순화하며, 아키텍처 수준의 프라이버시 보장과 인프라 비용 제로화를 동시에 달성할 수 있다.