📂 OPFS (Origin Private File System)

OPFS는 웹 브라우저가 제공하는 고성능, 저지연 전용 파일 시스템이다. 웹 애플리케이션(도메인/Origin)별로 완전히 격리된 가상 파일 시스템 공간을 제공하며, 사용자의 개별 파일 선택 창이나 권한 승인 팝업 없이도 대용량 데이터를 빠르고 안전하게 읽고 쓸 수 있도록 돕는다.

기존의 웹 스토리지는 대용량 바이너리 데이터를 다루기에 한계가 명확했습니다. LocalStorage는 용량이 너무 작고 문자열만 저장할 수 있으며, IndexedDB는 구조화된 데이터를 저장하기엔 좋지만 대용량 미디어 편집이나 WebAssembly(Wasm) 기반의 무거운 연산(예: 브라우저용 SQLite)을 처리할 때는 입출력(I/O) 병목 현상이 심했습니다.

이에 따라 디스크 I/O 성능을 극대화하여 데스크톱 네이티브 앱 수준의 파일 처리가 가능하도록 설계된 웹 표준 기술이 바로 OPFS입니다.

🔑 OPFS의 핵심 특징

OPFS는 사용자 눈에 보이는 일반적인 파일 시스템(데스크톱, 다운로드 폴더 등)과 분리되어 브라우저 내부의 숨겨진 최적화 공간에서 동작합니다.

• 사용자 개입 없음 (No UX Prompt): 일반적인 File System Access API와 달리, 파일 생성 및 수정 시 유저에게 권한 허용 팝업을 띄우지 않아 매끄러운 UX를 제공합니다.
• 보안 및 격리 (Sandbox): 해당 파일을 생성한 원천(Origin)에서만 접근할 수 있습니다. 다른 사이트에서 절대로 내 파일 시스템을 들여다볼 수 없습니다.
• 압도적인 속도 (Exclusive Write Locks): 웹 워커(Web Worker) 환경에서 비동기 전용 메서드를 사용할 경우, 파일에 대한 독점적 잠금(Lock)을 획득하여 브라우저의 메인 스레드를 방해하지 않고 초고속으로 바이너리 데이터를 읽고 씁니다.
• 임시성 및 브라우저 관리: 사용자가 직접 지울 수는 없지만, 브라우저가 디스크 용량 부족 등의 이유로 스토리지 정리 가이드라인에 따라 삭제할 수 있습니다.

🔥 핵심 차별점

• 성능 최적화: 브라우저가 OS의 파일 시스템 레이어와 최대한 가깝게 소통하도록 설계되어, IndexedDB 대비 수 배에서 수십 배 빠른 파일 쓰기가 가능합니다.
• Wasm 친화적: C/C++나 Rust로 작성된 헤비한 프로그램을 WebAssembly로 컴파일하여 웹에서 돌릴 때, 파일 I/O 백엔드로 OPFS를 지정하면 네이티브 앱과 유사한 속도가 나옵니다.

🧱 전통적 스토리지와의 차이점

💻 기본 사용법 (코드 예제)

OPFS는 메인 스레드에서도 접근이 가능하지만, 진정한 고성능(강력한 플러시 및 잠금 기능)을 활용하려면 웹 워커(Web Worker) 내부에서 createWritable() 대신 createSyncAccessHandle()을 사용하는 것이 정석입니다.

1. 메인 스레드에서 파일 다루기 (기본 비동기)

async function writeToOPFS() {
    // 1. OPFS 루트 디렉토리 가져오기
    const root = await navigator.storage.getDirectory();
    
    // 2. 파일 생성 또는 열기
    const fileHandle = await root.getFileHandle("example.txt", { create: true });
    
    // 3. 쓰기 스트림 생성 및 데이터 기록
    const writable = await fileHandle.createWritable();
    await writable.write("Hello, Origin Private File System!");
    await writable.close();
    
    console.log("파일 쓰기 완료!");
}

2. 웹 워커에서 동기식 초고속 파일 접근 (추천)

// Worker.js 내부 코드
self.onmessage = async (e) => {
    const root = await navigator.storage.getDirectory();
    const fileHandle = await root.getFileHandle("heavy_data.bin", { create: true });
    
    // 동기식 액세스 핸들 획득 (메인 스레드에서는 호출 불가)
    const accessHandle = await fileHandle.createSyncAccessHandle();
    
    // 바이너리 데이터 버퍼 쓰기
    const encoder = new TextEncoder();
    const writeBuffer = encoder.encode("High performance data string");
    
    const bytesWritten = accessHandle.write(writeBuffer, { at: 0 });
    
    // 디스크에 완전히 플러시(저장) 후 닫기
    accessHandle.flush();
    accessHandle.close();
    
    self.postMessage(`성공적으로 ${bytesWritten} 바이트를 기록했습니다.`);
};

💭 고찰

OPFS는 웹 브라우저를 단순한 페이지 뷰어에서 '강력한 애플리케이션 플랫폼'으로 진화시킨 핵심 기술입니다. Figma 같은 웹 기반 그래픽 툴, 영상 편집기, 웹브라우저 내부에서 돌아가는 가벼운 데이터베이스(SQLite Wasm) 등이 모두 이 OPFS 덕분에 매끄럽게 구동됩니다.

다만, 유저 눈에 보이지 않는 격리된 저장소인 만큼 디스크 용량 관리(Quota 관리)에 신경 써야 하며, 브라우저 환경에 따라 예기치 않게 정리될 수 있으므로 유저가 영구 보존해야 하는 최종 결과물은 반드시 일반 다운로드 API를 통해 로컬 디스크로 내보내도록 유도하는 설계가 필요합니다.