Gemma Gem – 브라우저에 내장된 AI 모델 (API 키 없음, 클라우드 없음) | AI Paper Digest

TL;DR Highlight

Chrome 확장 프로그램이 Google의 Gemma 4 모델을 WebGPU로 브라우저 안에서 완전히 로컬 실행하여 API 키나 서버 없이 웹 페이지를 읽고 클릭·입력 등 DOM 조작을 수행한다.

Who Should Read

개인정보 보호가 중요한 프로젝트에 LLM을 붙이고 싶은 프론트엔드/풀스택 개발자, 또는 외부 API 없이 브라우저 자동화를 실험해보고 싶은 개발자.

Core Mechanics

Google의 Gemma 4 모델을 브라우저 확장 프로그램 안에서 WebGPU(GPU를 웹에서 직접 쓰는 표준 API)로 실행한다. 데이터가 외부로 전혀 나가지 않고, API 키도 필요 없다.
모델 사이즈는 E2B(약 2B 파라미터) 기준 ~500MB, E4B(약 4B 파라미터) 기준 ~1.5GB이며 첫 실행 시 한 번만 다운로드해 캐시한다. 실행 환경은 WebGPU를 지원하는 Chrome만 있으면 된다.
Offscreen Document, Service Worker, Content Script 세 레이어로 아키텍처가 분리되어 있다. Offscreen Document에서 @huggingface/transformers 라이브러리로 모델을 로드하고 에이전트 루프를 돌리며, Service Worker가 메시지를 라우팅하고, Content Script가 실제 DOM을 조작한다.
에이전트가 사용할 수 있는 도구(Tool)로 read_page_content(페이지 텍스트/HTML 읽기), take_screenshot(페이지 스크린샷 PNG 캡처), click_element(CSS 셀렉터로 클릭), type_text(입력 필드에 텍스트 입력), scroll_page(스크롤) 등이 내장되어 있다.
모델이 추론 과정(chain-of-thought, 즉 '어떻게 생각했는지')을 UI에 그대로 보여주는 thinking mode를 지원한다. 모델이 페이지를 어떻게 해석하는지 투명하게 확인할 수 있다.
설치는 pnpm install → pnpm build 후 chrome://extensions에서 .output/chrome-mv3-dev/ 폴더를 개발자 모드로 로드하면 된다. 별도 서버나 백엔드 셋업이 없다.
JavaScript 실행 권한(run_javascript)도 Service Worker 레벨에서 처리되며, 에이전트가 페이지 위에서 직접 스크립트를 실행할 수 있다.

Evidence

Chrome이 Origin Trial로 제공 중인 Prompt API(developer.chrome.com/docs/ai/prompt-api)가 비슷한 접근법이라는 언급이 있었다. 한 댓글 작성자가 직접 확인한 결과 모델 폴더 사이즈가 무려 4,072MB(v3Nano 모델, GPU 백엔드)였다며, 언젠가는 브라우저 기본 기능이 되겠지만 모델 크기가 브라우저 자체보다 수 배 크기 때문에 당장은 어렵다는 의견이 있었다.
2B 모델에 JS 실행 권한을 라이브 페이지에서 전부 주는 것은 보안 관점에서 우려스럽다는 반론이 있었다. 또한 Chrome이 크래시되거나 탭이 버려지면 에이전트 상태가 사라지는 문제가 있으므로, 로컬 백그라운드 데몬을 서버로 두고 확장은 '얇은 클라이언트'로만 쓰는 게 더 안정적일 것이라는 대안도 제시됐다.
thinking mode(추론 과정 노출)가 이 확장의 킬러 피처라는 의견이 있었다. 단순한 신기한 시연이 아니라 모델이 페이지를 어떻게 해석하는지 이해할 수 있어 실제로 유용하다는 평가다.
민감한 데이터를 다루는 앱에서 로컬 LLM 플러그인 SDK 형태로 발전하면 좋겠다는 의견이 있었다. 기존에는 사용자에게 로컬 LLM 환경 구축을 요구하는 게 진입 장벽이 너무 높았는데, 이런 브라우저 내장 방식이 그 문제를 해결할 수 있다는 시각이다.
별도 확장 없이 브라우저가 로컬 모델을 기본 내장하고 개발자가 API로 쿼리할 수 있으면 좋겠다는 질문도 있었다. 이에 대해 Chrome의 Prompt API Origin Trial이 그 방향으로 가고 있다는 정보가 공유됐다.

How to Apply

개인정보가 포함된 웹 페이지(사내 인트라넷, 의료 기록 등)를 AI로 분석해야 하는데 외부 API로 데이터를 보내기 어려운 경우, 이 확장을 베이스로 사용하면 데이터가 로컬 밖으로 나가지 않으면서 LLM 기능을 붙일 수 있다.
브라우저 기반 자동화 에이전트(폼 자동 입력, 페이지 요약, 버튼 클릭 워크플로우)를 외부 서비스 의존 없이 프로토타이핑하고 싶다면, pnpm install → pnpm build 후 Chrome 개발자 모드로 로드해 바로 실험해볼 수 있다.
민감 데이터를 다루는 SaaS 앱에 로컬 LLM 기능을 옵션으로 제공하고 싶다면, 이 프로젝트의 Offscreen Document + @huggingface/transformers + WebGPU 조합을 참고해 Chrome 확장 형태의 로컬 추론 모듈을 설계할 수 있다.
에이전트의 추론 과정을 사용자에게 보여줘야 하는 UX가 필요한 경우, thinking mode(chain-of-thought 노출) 구현 방식을 이 프로젝트의 코드에서 참고해 적용할 수 있다.

Code Example

snippet

# 설치 및 빌드
pnpm install
pnpm build

# Chrome에서 로드
# chrome://extensions 접속 → 개발자 모드 ON
# '압축 해제된 확장 프로그램 로드' → .output/chrome-mv3-dev/ 선택

# 아키텍처 요약
# Offscreen Document: @huggingface/transformers + WebGPU로 Gemma 4 모델 실행 + 에이전트 루프
# Service Worker: 메시지 라우팅, take_screenshot, run_javascript 처리
# Content Script: 채팅 UI(Shadow DOM) 주입, DOM 도구 실행

# 사용 가능한 도구(Tool) 목록
# read_page_content  - 페이지 텍스트/HTML 읽기 (Content Script)
# take_screenshot    - 페이지 PNG 캡처 (Service Worker)
# click_element      - CSS 셀렉터로 클릭 (Content Script)
# type_text          - 입력 필드에 텍스트 입력 (Content Script)
# scroll_page        - 페이지 스크롤 (Content Script)
# run_javascript     - JS 코드 실행 (Service Worker)

Terminology

WebGPU브라우저에서 GPU를 직접 프로그래밍할 수 있게 해주는 웹 표준 API. 기존 WebGL보다 훨씬 범용적이고 ML 연산에 적합하다.

Offscreen DocumentChrome 확장 프로그램에서 화면에 보이지 않는 숨겨진 HTML 문서를 백그라운드로 실행하는 기능. 무거운 연산(모델 추론 등)을 UI와 분리해 처리할 때 쓴다.

Service Worker브라우저 백그라운드에서 실행되는 스크립트. 페이지가 열려 있지 않아도 동작하며, 여기서는 각 컴포넌트 간 메시지 라우터 역할을 한다.

Shadow DOM웹 페이지의 기존 스타일과 완전히 격리된 독립적인 DOM 트리. 확장 프로그램 UI가 페이지 CSS에 의해 깨지지 않도록 채팅 오버레이를 Shadow DOM으로 주입한다.

chain-of-thoughtLLM이 최종 답변을 내기 전에 '이렇게 생각했다'는 중간 추론 과정을 텍스트로 출력하는 것. 모델의 판단 근거를 투명하게 볼 수 있어 디버깅에 유용하다.

Origin TrialChrome이 아직 정식 표준이 아닌 실험적 기능을 일부 개발자에게 미리 테스트하게 해주는 프로그램. 등록하면 해당 기능을 프로덕션 Chrome에서 사용할 수 있다.

Gemma Gem – 브라우저에 내장된 AI 모델 (API 키 없음, 클라우드 없음)