Keyword Gap
브라우저에서 LLM 실행: 개인 정보 보호 우선 이력서 편집을 위해 WebGPU 및 WebLLM을 사용하는 방법
오늘날 시장에 나와 있는 모든 AI 기반 이력서 도구는 데이터를 서버로 보냅니다. 그들은 그것이 “안전하다”고 말할 것입니다. SOC 2 규정 준수 배지를 가리킵니다. 그러나 엔지니어링 현실은 다음과 같습니다. 귀하의 이력서가 귀하의 장치를 떠나면 더 이상 귀하만의 것이 아닙니다. 이력서는 데이터베이스, 로그 파일, 교육 파이프라인 또는 데이터 침해 발생을 기다리고 있습니다.
우리는 그러한 절충안을 받아들이기를 거부했습니다. 그래서 우리는 WebGPU 및 Transformers.js를 사용하여 브라우저에서 직접 5억 매개변수 언어 모델을 실행하는 완전한 클라이언트 측 AI 이력서 재작성기라는 뭔가 다른 것을 구축했습니다. API 키가 없습니다. 클라우드 추론이 없습니다. 서버가 없습니다.
이 기술 심층 분석에서 배울 내용은 다음과 같습니다.
- 서버리스 AI가 민감한 문서를 위한 유일한 진정한 비공개 아키텍처인 이유
- WebGPU가 브라우저에서 GPU 가속 추론을 잠금 해제하는 방법
- 우리가 사용한 정확한 스택(Astro, Transformers.js, Xenova/Qwen1.5-0.5B-Chat)
- 300MB 모델을 브라우저 탭에 전달하는 데 따른 엔지니어링 과제
- 성능 벤치마크 및 실제 대기 시간 수치
최신 AI 도구의 개인정보 보호 역설
AI 이력서 재작성기의 인기가 폭발적으로 증가했습니다. Teal, Resume.io 및 Jobscan과 같은 도구는 작은 글씨를 읽을 때까지 마법처럼 들리는 “AI 기반 글머리 기호 재작성”을 제공합니다. 거의 모두 클라이언트-서버 아키텍처에서 작동합니다.
- 이력서를 웹 양식에 붙여넣습니다.
- 귀하의 데이터는 전송 중에 암호화됩니다(TLS)
- 클라우드 서버에서 복호화됩니다.
- LLM API(OpenAI, Anthropic 또는 자체 호스팅 모델)가 이를 처리합니다.
- 다시 작성된 텍스트가 다시 전송됩니다.
표면적으로는 안전해 보입니다. 그러나 공격 표면은 엄청납니다.
- 서버 로그에는 디버깅을 위해 전체 이력서가 보관될 수 있습니다.
- 타사 LLM API는 엔터프라이즈 계층에 대한 비용을 지불하지 않는 한 데이터를 학습할 수 있습니다.
- 데이터 유출로 인해 집 주소, 전화번호, 고용 이력, 급여 데이터가 포함된 이력서가 노출됩니다.
- 규정 준수 격차 — 대부분의 도구는 삭제를 보장할 수 없기 때문에 EU 사용자에 대해 GDPR을 준수하지 않습니다.
결론: 이력서가 서버에 닿는 경우 제3자가 가장 민감한 전문 문서를 읽거나, 기록하거나, 유출하거나, 수익을 창출하지 않을 것이라고 신뢰하는 것입니다. 이는 우리가 사용자에게 기꺼이 요청하는 내기가 아닙니다.
클라이언트 측 AI가 모든 것을 바꾸는 이유
클라이언트 측 AI는 아키텍처를 완전히 뒤집습니다. 귀하의 데이터를 모델로 보내는 대신 저희는 귀하의 데이터로 모델을 보냅니다. LLM은 브라우저 메모리로 직접 다운로드하고 로컬 GPU 또는 CPU에서 실행되며 이력서 텍스트를 장치 외부로 전송하지 않습니다.
개인정보 보호에 미치는 영향은 절대적입니다.
- 이력서 데이터가 포함된 네트워크 호출 제로
- 귀하의 개인 정보가 포함된 제로 서버 로그
- 불투명한 데이터 정책을 갖춘 제3자 LLM API 없음
- 귀하의 데이터에 영향을 미치는 인프라가 없기 때문에 인프라에서 데이터 침해에 대한 위험 없음
그러나 클라이언트 측 AI는 단순한 개인 정보 보호 플레이가 아닙니다. 또한 실질적인 성능 이점을 제공합니다.
- 원거리 데이터 센터까지의 왕복으로 인한 지연 시간 없음
- 비율 제한 없음 또는 API 할당량
- AI 기능에 대한 구독 게이트 없음
- 모델이 캐시되면 오프라인 기능
WebGPU: 컴퓨팅 엔진으로서의 브라우저
최근까지 브라우저에서 LLM을 실행하는 것은 계산상 불가능했습니다. WebGL은 사용 가능한 유일한 GPU API였으며 범용 컴퓨팅이 아닌 그래픽용으로 설계되었습니다. 그런 다음 WebGPU가 도착했습니다.
WebGPU란 무엇입니까?
WebGPU는 최신 GPU 기능(Vulkan, Metal, DirectX 12)을 JavaScript에 직접 노출하는 차세대 웹 표준입니다. WebGL과 달리 범용 GPU 컴퓨팅 셰이더를 지원하므로 신경망 추론과 같은 행렬이 많은 작업에 이상적입니다.
브라우저 LLM을 가능하게 하는 주요 기능:
- 컴퓨팅 파이프라인 — 대규모 병렬 행렬 곱셈 커널 실행
- 통합 메모리 모델 — 값비싼 CPU-GPU 사본 없이 GPU 버퍼에 직접 액세스
- 셰이더 언어 — 사용자 정의 추론 커널을 위한 WGSL(WebGPU 셰이딩 언어) 작성
- 교차 플랫폼 — 기본 성능으로 Chrome, Edge, Firefox 및 Safari에서 작동
LLM 추론을 위한 WebGPU와 WebGL 비교
| 기능 | 웹GL | 웹GPU |
|---|---|---|
| 컴퓨팅 셰이더 | ❌ 아니요 | ✅ 예 |
| 매트릭스 연산 | 느림(시뮬레이션) | 네이티브, 병렬 |
| 메모리 효율성 | 높은 CPU-GPU 오버헤드 | 통합되고 낮은 오버헤드 |
| LLM 추론 속도 | ~10-20개 토큰/초 | ~50-100개 토큰/초 |
| 브라우저 지원 | 유니버설 | 최신 브라우저(94%+) |
500M 매개변수 모델로 이력서 글머리 기호 다시 작성과 같은 사용 사례의 경우 WebGPU는 CPU 전용 폴백보다 4~5배 빠른 추론, WebGL 기반 접근 방식보다 2~3배 빠른 기능을 제공합니다.
우리 스택: Astro + Transformers.js + Xenova/Qwen1.5
클라이언트 측 AI 리라이터를 구축하려면 신중한 기술 선택이 필요했습니다. 우리는 빠르고, 최소한이며, 과도한 브라우저 측 계산과 호환되는 프레임워크가 필요했습니다. 우리가 착륙한 정확한 아키텍처는 다음과 같습니다.
프레임워크: Astro
우리는 zero-JS-by-default 철학을 위해 Astro를 선택했습니다.** 대부분의 이력서 도구는 사용자가 이력서를 붙여넣기도 전에 500KB 이상의 JavaScript를 제공하는 비대한 React 앱입니다. Astro를 사용하면 랜딩 페이지와 블로그에 정적 HTML을 제공한 다음 필요한 경우 대화형 구성 요소(편집기, AI 패널)만 하이드레이션할 수 있습니다.
Astro가 클라이언트 측 AI에 중요한 이유:
- 초기 페이지 로드는 JavaScript 50KB 미만입니다.
- 사용자가 “AI로 다시 작성”을 클릭하면 무거운 AI 모델이 주문형 로드됩니다.
- 블로그나 마케팅 페이지와 같은 정적 콘텐츠에 대한 수화 오버헤드 없음
AI 런타임: Transformers.js
Hugging Face’s Transformers.js는 이를 가능하게 하는 다리입니다. 이는 Python Transformers 라이브러리를 ONNX Runtime Web으로 포트한 것입니다. 이를 통해 사전 훈련된 모델을 WebGPU 또는 WebGL 폴백을 통해 브라우저에서 실행할 수 있습니다.
주요 기술 세부정보:
- 크기와 메모리 공간을 줄이기 위해 모델을 INT8로 양자화합니다.
- WebGPU 실행 공급자와 함께 ONNX Runtime Web 백엔드를 사용합니다.
- 파이프라인은 브라우저에서 토큰화, 추론 및 디코딩을 처음부터 끝까지 처리합니다.
모델 선택: Xenova/Qwen1.5-0.5B-Chat
우리는 Xenova ONNX 포트를 통해 Qwen1.5-0.5B-Chat에 정착하기 전에 여러 모델을 평가했습니다.
선택 기준:
- 사용자 경험을 파괴하지 않고 다운로드할 수 있을 만큼 작은 크기(양자화 ~300MB)
- “더 큰 영향을 미치도록 이 글머리 기호를 다시 작성하세요” 프롬프트에 대한 강력한 지침 따르기
- 상업적 사용을 위한 허용 라이센스
- 소비자 GPU에 대한 빠른 추론(짧은 글머리 기호 다시 쓰기를 위한 3초 미만 세대)
Llama-2-7B, Mistral-7B 및 Phi-2를 테스트했습니다. 모두 실시간 브라우저 추론을 하기에는 너무 크거나(1.5GB 이상) 너무 느렸습니다. Qwen1.5-0.5B는 최적의 위치를 차지합니다. 실용적일 만큼 작고, 유용할 만큼 충분히 유능합니다.
아무도 말하지 않는 엔지니어링 과제
300MB 모델을 브라우저 탭으로 전송하는 것은 이론적으로 간단해 보입니다. 실제로 이는 몇 달에 걸친 엔지니어링 노력이었습니다. 우리가 해결한 세 가지 가장 어려운 문제는 다음과 같습니다.
과제 1: 점진적 모델 다운로드
4G 연결에서 300MB를 다운로드하는 데는 2~3분이 걸리며 브라우저 시간 초과가 발생할 가능성이 있습니다. 우리는 점진적 청크 다운로드 시스템을 구현했습니다.
- 모델이 10MB 샤드로 분할됩니다.
- 재시도 논리 및 지수 백오프를 통해 각 샤드 다운로드
- 실시간 다운로드된 MB를 보여주는 사용자 정의 진행률 표시줄 UI가 오른쪽 상단에 떠 있습니다.
- 모델은 첫 번째 다운로드 후 IndexedDB에 캐시되므로 이후 방문 시 즉시 로드됩니다.
결과: 처음 사용자는 평균 광대역에서 최대 45초 동안 다운로드됩니다. 기존 사용자는 캐시에서 2초 미만의 모델 로드 시간을 얻습니다.
과제 2: WebGPU 컨텍스트 수명주기 관리
WebGPU 장치 컨텍스트는 까다롭습니다. 사용자가 탭을 전환하거나, 브라우저를 최소화하거나, 노트북을 절전 모드로 전환하면 GPU 컨텍스트가 손실될 수 있습니다. 우리는 강력한 컨텍스트 복구 시스템을 구축해야 했습니다:
gpu.lost이벤트를 감지하고 추론 파이프라인을 정상적으로 다시 초기화합니다.- WebGPU를 사용할 수 없게 되면 CPU(WASM) 추론으로 대체됩니다.
- 명확한 UI 메시지 제공: “CPU 모드로 전환 - 재작성 시간이 약간 더 오래 걸릴 수 있습니다.”
결과: AI 재작성은 Chrome, Edge 및 Firefox에서 안정적으로 작동하며 공격적인 전원 관리 기능이 있는 시스템에서도 작동합니다.
과제 3: 8GB RAM 시스템의 메모리 압박
INT8의 500M 매개변수 모델은 여전히 ~600MB의 GPU/CPU 메모리를 소비합니다. PDF 구문 분석, Quill 서식 있는 텍스트 편집기 및 Kanban 보드를 결합하여 예산 노트북의 한계를 뛰어 넘었습니다.
저희 최적화:
- 지연 로딩 — 사용자가 명시적으로 “다시 작성”을 클릭한 경우에만 모델이 다운로드됩니다.
- 모델 제거 — 사용자가 10분 동안 AI 패널을 사용하지 않은 경우 메모리에서 모델을 해제합니다(빠른 재로드를 위해 IndexedDB에 유지됨)
- 오프 메인 스레드 추론 — 모든 LLM 작업은 UI 정지를 방지하기 위해 웹 작업자에서 실행됩니다.
결과: 스캐너는 중급 Chromebook을 포함한 8GB RAM 시스템에서 원활하게 실행됩니다.
성능 벤치마크: 실수
우리는 동일한 조건에서 클라우드 기반 대안에 대해 클라이언트 측 AI 재작성을 벤치마킹했습니다. 우리가 찾은 내용은 다음과 같습니다.
| 미터법 | 클라이언트 측 AI | 클라우드 API(GPT-4o-mini) | 클라우드 API(클로드 하이쿠) |
|---|---|---|---|
| 1차 추론 지연 시간 | 45초(다운로드) + 2.3초 | 1.2초 | 1.8초 |
| 후속 추론 지연 시간 | 2.3초 | 1.2초 | 1.8초 |
| 개인정보보호 | 절대(제로 네트워크) | 서버 로그 + API 보존 | 서버 로그 + API 보존 |
| 오프라인 가능 | 예 | 아니요 | 아니요 |
| 비율 제한 | 없음 | 예(RPM/TPM 한도) | 예(RPM/TPM 한도) |
| 사용자 비용 | 무료 | $5-20/월 구독 | $5-20/월 구독 |
| 데이터 소유권 | 100% 사용자 | 플랫폼 의존적 | 플랫폼 의존적 |
상충관계는 분명합니다. 처음 사용자는 모델 다운로드를 위해 ~45초를 희생합니다. 그 이후에는 모든 재작성이 무료이고 비공개이며 무제한이며 오프라인이 가능합니다. 민감한 경력 데이터를 처리하는 도구의 경우 이것이 올바른 절충안이라고 생각합니다.
이 아키텍처가 웹 AI의 미래에 중요한 이유
우리는 단지 이력서 스캐너를 구축하는 것이 아닙니다. 우리는 AI의 미래에는 데이터 포기가 필요하지 않음을 증명하고 있습니다.
모든 주요 AI 회사는 수익성이 있기 때문에 클라우드 추론을 추진하고 있습니다. 그러나 강력한 개인용 클라이언트 측 AI를 위한 기술적 역량은 이미 여기에 있습니다. WebGPU는 성숙해졌습니다. Transformers.js는 프로덕션 준비가 되어 있습니다. 양자화된 모델은 놀라울 정도로 능력이 뛰어납니다.
이것이 사용자에게 의미하는 바:
- 채용 이력을 제3자에게 맡기지 않고도 AI 기반 이력서 지원을 받을 수 있습니다.
- 비행기 Wi-Fi, 기업 방화벽 또는 제한적인 네트워크에서 AI 도구를 사용할 수 있습니다.
- 귀하는 귀하의 데이터, 모델 가중치 및 추론 결과를 소유합니다.
이것이 개발자에게 의미하는 바:
- 브라우저가 합법적인 AI 배포 대상입니다.
- API 청구서 없이 정교한 NLP 기능을 구축할 수 있습니다.
- 개인 정보 보호 우선 아키텍처는 제한이 아닌 경쟁적 차별화 요소입니다.
클라이언트 측 AI Rewriter를 사용해 보는 방법
비공개 ATS 스캐너에는 AI Rewriter가 내장 기능으로 포함되어 있습니다. 작동 방식은 다음과 같습니다.
- 이력서를 업로드하세요(PDF 또는 DOCX) — 브라우저에서 완전히 구문 분석되며 업로드되지 않습니다.
- 서식 있는 텍스트 편집기에서 글머리 기호 선택
- **“Rewrite with AI”**를 클릭합니다. 모델이 다운로드되고(처음에만) 더 강력한 키워드 최적화 버전이 생성됩니다.
- 데이터를 전달하는 단일 네트워크 호출 없이 제안 비교, 편집 및 수락
주요 사항
- WebGPU 및 Transformers.js를 사용하는 클라이언트 측 AI는 이력서 재작성 및 NLP 작업을 위한 프로덕션 준비가 완료되었습니다.
- WebGPU는 CPU 전용 접근 방식보다 4~5배 더 빠른 추론을 제공하며 94% 이상의 최신 브라우저에서 지원됩니다.
- 500M 매개변수 모델(Qwen1.5-0.5B-Chat)은 300MB 미만을 유지하면서 고품질 글머리 기호 다시 쓰기에 충분합니다.
- 프로그레시브 다운로드, IndexedDB 캐싱 및 웹 워커는 대형 모델을 소비자 장치로 배송하는 데 필수적입니다.
- 개인 정보 보호 혜택은 절대적입니다 — 서버 로그 없음, API 보존 없음, 데이터 침해 위험 없음
웹 브라우저는 더 이상 단순한 문서 뷰어가 아닙니다. 안전한 비공개 AI 컴퓨팅 환경입니다. 그리고 우리는 이제 막 시작했습니다.