브라우저 파일 시스템의 혁신: OPFS(Origin Private File System)

웹 애플리케이션이 고도화됨에 따라 클라이언트 측에서 대용량 데이터를 처리하고 저장해야 하는 요구가 급증하고 있습니다. 기존의 localStorage나 IndexedDB는 대용량 바이너리 데이터나 파일 기반의 읽기/쓰기 작업에서 성능 한계와 용량 제약을 겪어왔습니다.

이를 해결하기 위해 등장한 표준이 바로 OPFS(Origin Private File System) 입니다. 웹 오리진(Origin)에 격리되어 안전하면서도, 네이티브 파일 시스템에 준하는 고성능 입출력을 제공하는 강력한 저장소 API입니다.

OPFS란 무엇인가?

OPFS는 File System Access API의 일부로, 브라우저 내에 생성되는 비공개 가상 파일 시스템 공간입니다.

• 오리진 격리: 각 웹사이트마다 완전히 독립된 전용 공간을 제공하여 다른 사이트에서 접근할 수 없습니다.
• 고성능 접근: 기존의 IndexedDB보다 훨씬 빠른 속도로 대용량 파일을 읽고 쓸 수 있으며, 특히 동기식(Sync) Access Handle을 웹 워커(Web Worker) 내부에서 지원하여 C/C++ 수준의 성능을 낼 수 있습니다.
• 공간 효율성: 브라우저의 일반적인 캐시와 분리되어 관리되며, 대용량 파일(예: SQLite 데이터베이스, 미디어 파일 등)을 효율적으로 다룰 수 있습니다.

주요 현황과 지원 범위

현재 대부분의 모던 브라우저(Chrome, Safari, Firefox 등)에서 안정적으로 지원하고 있으며, 특히 WebAssembly(Wasm)를 웹에서 구동할 때 SQLite 같은 데이터베이스를 고성능으로 마운트하는 표준 방식으로 널리 쓰이고 있습니다. (브라우저별 OPFS 지원 현황)

간단한 예시 코드

다음은 JavaScript를 이용해 OPFS에 파일을 생성하고 내용을 쓰는 기본적인 비동기(Async) 예시입니다.

// OPFS 루트 디렉토리 가져오기
async function writeToOPFS() {
  const root = await navigator.storage.getDirectory();

  // 'example.txt' 파일 핸들 가져오기 (없으면 생성)
  const draftHandle = await root.getFileHandle('example.txt', { create: true });

  // 쓰기 가능한 스트림(WritableStream) 생성
  const accessHandle = await draftHandle.createWritable();

  // 데이터 작성
  await accessHandle.write('안녕하세요, OPFS 세상입니다!');
  
  // 스트림 닫기
  await accessHandle.close();
  console.log('파일 작성 완료!');
}

writeToOPFS();

웹 워커(Web Worker) 환경에서는 동기식 FileSystemSyncAccessHandle을 사용할 수 있어 더욱 빠른 블록 단위 읽기/쓰기가 가능합니다.

실무적 시사점

클라이언트 측에서 대용량 파일을 다루거나, 브라우저 기반의 에디터, 오프라인 지원 미디어 앱, 또는 브라우저 내 SQLite/Wasm 기반 데이터베이스를 구축해야 한다면 OPFS는 선택이 아닌 필수적인 아키텍처 요소가 되고 있습니다.