인터넷을 끊어도 계속 작동하는 웹사이트를 사용해 본 적 있나요?
Source: Dev.to
둘 다 아니었다. 그래서 직접 만들었다.
대부분의 웹사이트는 인터넷이 끊기는 순간 사라진다. 신호가 끊기면 빈 화면이나 멈추지 않는 스피너가 나타난다. 오프라인 상태에서 페이지를 새로 고치면 사라진다. “그게 웹이 작동하는 방식이야.” 라고 생각하겠지만, 나는 그걸 받아들이지 않았다.
나는 나이지리아 라고스에 사는 프론트엔드 엔지니어다. 라고스 버스 안에서 2G 신호가 끊겼다 켜졌다 하는 상황에서 웹 앱을 사용해 본 적이 있다면, 내가 왜 이런 문제를 다르게 생각하게 되었는지 이해할 수 있을 것이다. 네트워크는 신뢰할 수 없지만, 앱은 그래서는 안 된다. 그래서 나는 Browser Physics 라는 아키텍처를 만들었다.
Browser Physics란?
Browser Physics는 한 가지 질문에 대한 내 답이다: 브라우저가 전혀 인터넷을 필요로 하지 않는다면?
나는 브라우저를 자체적으로 유지되는 운영체제로, 네트워크는 선택적인 백업으로 간주한다.
사용자가 페이지를 이동할 때마다 서버에서 데이터를 받아오는 대신, 나는 3단계 저장 모델을 구축했다:
- Hot Data — 메모리 상의 Zustand. 페이지 전환이 0밀리초에 이루어진다. 네트워크가 아니라 RAM에서 읽기 때문이다.
- Warm Data — 디스크상의 IndexedDB. 하드 새로 고침에도 살아남는다. 인터넷이 없어도 로컬 디스크에서 앱이 부팅된다.
- Cold Data — 실제 데이터베이스인 Supabase. 최초 부팅 시와 사용자가 오프라인 후 다시 연결될 때만 조회한다.
이 위에 Service Worker가 네트워크 요청을 가로채어, 인터넷이 없어도 로컬 캐시에서 즉시 제공한다. 스피너도 없고, 깨진 상태도 없으며, 온라인과 동일한 속도를 유지한다.
온라인이 되면 WebSocket이 데이터베이스 변화가 있을 때마다 실시간 업데이트를 푸시한다. 오프라인 후 재연결하면 자동 재검증(fetch)이 실행돼 변경된 부분만 동기화돼 언제나 최신 데이터를 갖게 된다.
실시간 데모 보기
나는 현재 Browser Physics를 적용한 최초의 실전 플랫폼인 TSWorldTech를 개발 중이다.
tsworldtech.com
앱은 현재 85% 완성 단계다. 데이터, 네비게이션, 실시간 동기화, 오프라인 복원력이 모두 작동한다. 남은 작업은 이미지 오프라인 영속성 레이어이며 현재 활발히 개발 중이다.
도전 과제
- 온라인 상태에서 웹사이트에 접속한다.
- 데이터를 끈다.
- 페이지를 자유롭게 이동한다.
- 페이지를 새로 고친다.
여전히 같은 속도와 같은 데이터, 스피너 없이 모두 작동한다.
다시 온라인으로 돌아와서 화면에 무엇이 보이는지 알려줘.
구현 방법을 알고 싶나요?
Service Worker 아키텍처, 3단계 저장 모델, HydrationGate 패턴, WebSocket 및 IndexedDB 재연결 동기화, 각 레이어 뒤에 숨은 모든 설계 결정을 다루는 전체 기술 분석을 준비 중이다.
읽고 싶다면 아래에 댓글을 남겨줘. 관심이 많을수록 더 빨리 글을 쓸게.
나는 Abdullah Teslim, 스피너에 지친 프론트엔드 엔지니어다.