Notion이 WASM SQLite로 브라우저 속도를 향상시킨 방법

0

우리는 매일 디지털 세상에서 정보를 소비하고 있습니다. 하지만 페이지 로드 속도가 느려 답답했던 경험, 누구나 한 번쯤은 있겠지요? Notion은 이런 문제를 해결하기 위해 획기적인 기술을 도입했습니다. 오늘은 WASM SQLite로 브라우저 속도를 20% 향상시킨 Notion의 비법을 알아보겠습니다.

notion blog

Notion의 혁신: WASM SQLite 도입

3년 전, Notion은 Mac과 Windows용 앱에서 SQLite 데이터베이스를 활용해 데이터를 캐싱하며 속도를 대폭 개선했습니다. 이번에는 이 혁신적인 접근 방식을 브라우저에서도 적용했습니다. WASM(SQLite)의 도입으로 Notion은 모든 최신 브라우저에서 페이지 탐색 시간을 20% 단축했습니다. 이는 특히 API 응답 시간이 느린 환경에서 더욱 두드러졌다고 합니다.

지역별 성능 향상

  • 호주 사용자: 28% 빨라진 페이지 탐색 시간
  • 중국 사용자: 31% 향상된 속도
  • 인도 사용자: 33% 단축된 로드 시간

WebAssembly와 SQLite의 결합

Notion은 WebAssembly(WASM) 구현의 SQLite3를 사용해 성능을 개선했습니다. 이 기술을 통해 Notion은 브라우저의 OPFS(Origin Private File System)를 활용하여 세션 간 데이터를 유지했습니다. OPFS는 Web Workers에서만 사용 가능하며, 이 Web Worker는 별도의 스레드에서 실행됩니다.

Web Worker와 SharedWorker의 협력

Notion은 각 탭마다 전용 Web Worker를 두고, SharedWorker를 통해 활성 탭을 관리했습니다. 이 아키텍처는 각 탭이 동시성 문제 없이 SQLite 쿼리를 실행할 수 있도록 했습니다. 또한, Comlink 라이브러리를 사용해 메인 스레드와 Worker 간의 메시지 전달을 용이하게 했습니다.

주요 도전과 극복

크로스 오리진 격리

OPFS를 사용하려면 사이트가 “크로스 오리진 격리” 상태여야 합니다. 이는 많은 보안 헤더 설정이 필요해 상당한 작업이었습니다. Notion은 Origin Trials를 사용해 이 문제를 일시적으로 우회하며 성능 데이터를 얻을 수 있었습니다.

데이터 손상 문제

소수의 사용자에게서 데이터 손상 문제가 발생했습니다. 이는 다수의 탭에서 동시성을 제대로 처리하지 못했기 때문입니다. Notion은 Web Locks를 추가하고 포커스된 탭만 SQLite에 쓰도록 함으로써 손상률을 낮추는 데 성공했습니다.

느린 기기에서의 문제

일부 구형 Android 폰에서는 디스크 캐시가 오히려 성능을 저하시켰습니다. 이를 해결하기 위해 Notion은 API와 SQLite 캐시를 경쟁시키는 로직을 구현했습니다. 이로 인해 모든 기기에서 성능 향상을 달성할 수 있었습니다.

결론: 기술과 혁신의 조화

Notion의 성능 개선은 기술적 도전과 혁신의 산물입니다. 브라우저에서의 SQLite 캐싱으로 페이지 탐색 시간을 20% 개선한 것은 중요한 성과입니다. 이러한 성공은 WebAssembly와 SQLite의 공식 WASM 구현팀, 그리고 실험적 접근 방식을 제공한 Roy Hashimoto 덕분입니다.

참고 자료: Notion, “How we sped up Notion in the browser with WASM SQLite”

답글 남기기