Local-First Software: Replicache와 PGLite로 구현하는 오프라인 우선 웹 앱

우리는 그동안 “데이터는 서버에 있고, 클라이언트는 이를 잠시 빌려온다”는 모델에 익숙해져 있었습니다. 하지만 네트워크 지연, 오프라인 상태에서의 먹통 현상, 복잡한 로딩 스피너는 항상 사용자 경험의 걸림돌이었죠.

이제 Local-First(로컬 우선) 소프트웨어가 이 고정관념을 깨고 있습니다. 데이터의 주인은 서버가 아닌 사용자의 디바이스입니다.

---

1. Local-First란 무엇인가?

Local-First 소프트웨어는 사용자의 디바이스 내부에 로컬 데이터베이스를 두고, 모든 읽기와 쓰기를 여기서 즉시 처리합니다. 서버와의 동기화는 백그라운드에서 비동기로 이루어집니다.

• 지연 시간 제로: 네트워크를 거치지 않으므로 모든 인터랙션이 즉각적입니다.
• 오프라인 지원: 비행기 모드에서도 앱은 완벽하게 작동합니다.
• 복원력: 서버가 잠시 중단되어도 사용자는 작업을 계속할 수 있습니다.

---

2. PGLite: 브라우저 속으로 들어온 PostgreSQL

최근 가장 놀라운 기술적 진보는 PGLite입니다. Postgres를 WASM으로 컴파일하여 브라우저에서 직접 실행할 수 있게 되었습니다.

import { PGLite } from "@electric-sql/pglite";

// 브라우저 내부에서 실시간 SQL 쿼리 실행
const db = new PGLite();
await db.query("CREATE TABLE users (id SERIAL PRIMARY KEY, name TEXT)");
await db.query("INSERT INTO users (name) VALUES ($1)", ["Gemini"]);

const res = await db.query("SELECT * FROM users");
console.log(res.rows);

---

3. Replicache: 완벽한 동기화 엔진

로컬에서 데이터를 변경했다면, 이를 다른 기기나 서버와 어떻게 충돌 없이 합칠 수 있을까요? Replicache는 이 난해한 동기화 문제를 해결해주는 프레임워크입니다.

• Optimistic Updates: 서버 응답을 기다리지 않고 UI를 먼저 업데이트합니다.
• Conflict Resolution: 서로 다른 기기에서 같은 데이터를 수정했을 때의 충돌을 지능적으로 해결합니다.
• Push/Pull 모델: 변경된 최소한의 차이(Delta)만 서버와 주고받아 효율적입니다.

---

4. 로컬 우선으로 가는 길: 새로운 개발 패러다임

Local-First는 단순한 기술 도입을 넘어 개발 방식의 변화를 요구합니다.

1. 상태 관리의 변화: API 호출 후 응답을 기다리는 로직이 사라지고, 로컬 DB의 ‘관찰(Subscribe)’ 시스템으로 대체됩니다.
2. CRDT와 인과 관계: 데이터 순서가 뒤섞여도 결과적으로 같은 상태를 유지하는 알고리즘(CRDT)에 대한 이해가 중요해집니다.
3. DX의 향상: “로딩 중” 처리가 거의 필요 없어지며, 코드가 훨씬 단순해집니다.

---

5. 마치며

사용자는 더 이상 로딩 바를 보고 싶어 하지 않습니다. Local-First는 웹 앱이 마치 설치형 네이티브 앱처럼 부드럽게 작동하게 만드는 유일한 길입니다.

PGLite로 브라우저에 강력한 쿼리 엔진을 달고, Replicache로 완벽한 동기화를 구현해 보세요. 웹의 미래는 서버가 아닌 사용자의 손끝(Local)에 있습니다.