네트워크 지연을 완전히 제거한 Local-first 아키텍처로 응답 속도 300ms에서 수ms로 단축

Context

전통적인 CRUD 앱의 요청-응답 사이클로 인한 수백 밀리초 단위의 UI 지연 및 Spinner 노출 발생. 네트워크 레이턴시가 사용자 경험의 최대 병목 지점으로 작용하는 한계 확인.

Technical Solution

• Browser 기반 IndexedDB를 기본 Database로 활용하여 네트워크 요청 없는 즉각적인 데이터 읽기 구현
• MobX 기반 In-memory Datastore를 통한 상태 업데이트 및 UI 동기적 렌더링으로 지연 시간 제거
• Local Mutation 우선 적용 후 Sync Engine을 통해 서버로 비동기 전송 및 WebSocket 기반 Delta 브로드캐스팅 처리
• Service Worker를 활용한 정적 리소스 Pre-caching으로 초기 로딩 속도 최적화
• Per-property Observable 설계를 통한 리스트 전체 리렌더링 방지 및 개별 셀 단위의 정밀한 업데이트 구현
• GPU 가속 애니메이션 및 100ms 이하의 지속 시간 설정을 통한 시각적 반응성 극대화

Impact

• 기존 CRUD 앱의 약 300ms 소요되는 업데이트 시간을 수 밀리초(ms) 수준으로 단축

Key Takeaway

사용자 체감 속도는 서버 응답 속도가 아닌 인터페이스의 즉각적인 반응성에 결정됨. 서버를 Truth Source가 아닌 Sync Target으로 정의하는 Local-first 접근법을 통한 Network Latency 은닉 전략 유효함.