내 기기에서 개인 AI 검색 구축: 브라우저 내 로컬 RAG
Source: Dev.to
프라이빗 PDF, 메모, 혹은 코드 파일을 AI로 검색하고 싶었지만 망설인 적이 몇 번이나 되셨나요? 민감한 문서를 외부 서버에 업로드하면 프라이버시 위험이 발생합니다. 서버도, API도, 비용도 없이 브라우저 안에서 100 % 동작하는 완전한 검색 엔진을 상상해 보세요.
Utilora에서는 바로 이와 같은 Personal RAG를 만들었습니다. 아래는 작동 원리와 직접 구현하는 방법을 간결히 정리한 가이드입니다.
Overview
Retrieval‑Augmented Generation (RAG)은 보통 백엔드 데이터베이스, 파이썬 서버, API 키에 의존합니다. 세 가지 최신 브라우저 기술을 결합하면 전체 파이프라인을 클라이언트 측에서 실행할 수 있습니다:
- Origin Private File System (OPFS) – 인덱스된 문서 벡터를 저장할 빠르고 프라이빗한 스토리지.
- Web Workers & Comlink – UI를 멈추지 않으면서 CPU 집약적인 벡터 검색을 백그라운드 스레드로 오프로드.
- Local Machine‑Learning Models – ONNX Runtime Web과 Transformers.js(CPU 또는 GPU)를 사용해 브라우저 내에서 직접 임베딩 생성.
Core Technologies
Origin Private File System (OPFS)
OPFS는 localStorage(5 MB 제한)와 비교해 사실상 무제한에 가까운 공간을 제공하는 샌드박스 파일 시스템입니다. 대용량 벡터 인덱스를 영구 저장하기에 최적입니다.
Web Workers & Comlink
Comlink은 메인 스레드와 Web Worker 사이의 통신을 단순화해 무거운 인덱싱 및 검색 작업을 비동기적으로 실행할 수 있게 해줍니다.
Local Machine‑Learning Models
ONNX Runtime Web과 Transformers.js를 활용하면 임베딩 모델을 완전히 브라우저 내에서 실행할 수 있어 원격 추론 API가 필요 없습니다.
Document Processing Flow
[ Your File ] → [ Client Parser ] → [ Chunking ] → [ Local ML Embedding ] → [ OPFS Storage ]
- Client Parser가 업로드된 파일을 읽어들입니다.
- Chunking 단계에서 텍스트를 관리 가능한 조각으로 나눕니다.
- Local ML Embedding이 각 조각에 대한 벡터 표현을 생성합니다.
- OPFS Storage가 벡터를 영구 파일에 기록합니다.
Code Samples
Storing Vectors with OPFS (JavaScript)
// Access the private root directory
const root = await navigator.storage.getDirectory();
// Create or open our index file
const fileHandle = await root.getFileHandle("vector-index.db", { create: true });
// Create a high‑speed write stream
const accessHandle = await fileHandle.createWritable();
await accessHandle.write(
new TextEncoder().encode(JSON.stringify(myVectorData))
);
await accessHandle.close();
Using Comlink with a Web Worker (JavaScript)
// In your main component
import * as Comlink from "comlink";
const worker = new Worker(
new URL("./rag-indexer.worker.ts", import.meta.url),
{ type: "module" }
);
const localIndexer = Comlink.wrap(worker);
// Run the indexer in the background
await localIndexer.processAndEmbedFile(myUploadedFile);
Benefits
- True Privacy – 백엔드가 없으므로 서버가 파일을 절대 볼 수 없습니다.
- Zero Backend Maintenance – 모든 로직이 로컬에서 실행돼 서버 비용과 배포 부담이 사라집니다.
- Instant Feedback – 벡터 검색이 디바이스 내에서 즉시 이루어져 낮은 지연 시간을 제공합니다.
- Cross‑Platform – OPFS와 Web Workers를 지원하는 최신 브라우저라면 어디서든 동작합니다.
Try It Yourself
Utilora의 라이브 데모를 방문해 보세요. 페이지에 PDF를 끌어다 놓고 인덱싱이 끝나면 질문을 입력해 보세요—데이터는 화면을 떠나지 않습니다.
Community
로컬 브라우저 모델을 활용해 만든 프로젝트가 있나요? 아래 댓글에 경험을 공유해 주세요!