Gemma Gem: Google의 Gemma 4 모델을 WebGPU로 브라우저에서 완전히 실행하는 온디바이스 AI 어시스턴트 크롬 확장

9bow · 4월 11, 2026, 9:30오전

Gemma Gem 소개

ChatGPT나 Claude 같은 AI 어시스턴트를 브라우저에서 사용할 때, 입력한 모든 텍스트는 외부 서버로 전송됩니다. 민감한 정보가 포함된 웹 페이지를 분석하거나, 개인 데이터를 다루는 업무에 AI를 활용하고 싶을 때 이 점은 언제나 아쉬운 제약이었습니다. 특히 기업 내부 문서, 의료 기록, 법률 자료 등을 다루는 환경에서는 클라우드 기반 AI의 활용이 사실상 불가능한 경우도 많습니다.

Gemma Gem은 이 문제를 정면으로 해결하는 오픈소스 크롬 확장 프로그램입니다. Google의 Gemma 4 모델을 WebGPU를 통해 완전히 브라우저 내에서 실행함으로써, 사용자의 데이터가 단 한 바이트도 외부로 나가지 않는 온디바이스(On-Device) AI 환경을 구현합니다. API 키 없이, 클라우드 연결 없이, 오직 사용자의 GPU만으로 동작합니다. kessler가 개발한 이 프로젝트는 Apache-2.0 라이선스 하에 공개되어 있으며, Hugging Face Transformers.js를 활용하여 ONNX 포맷으로 양자화된 Gemma 4 모델을 브라우저에서 직접 추론합니다.

Gemma Gem의 아키텍처: 3계층 설계

Gemma Gem은 크롬 확장 프로그램의 특성에 맞게 세 가지 독립적인 실행 컨텍스트로 아키텍처를 분리합니다. 이 설계는 WebGPU 추론의 제약과 브라우저 보안 모델을 모두 고려한 결과입니다.

Offscreen Document         Service Worker          Content Script
(Gemma 4 + 에이전트 루프) <-> (메시지 라우터) <-> (Chat UI + DOM 도구)
       |                         |
  WebGPU 추론              스크린샷 캡처
  토큰 스트리밍            JS 실행

오프스크린 문서(Offscreen Document) 는 Gemma 4 모델의 실제 추론이 일어나는 핵심 컴포넌트입니다. Hugging Face의 @huggingface/transformers 라이브러리와 WebGPU를 조합하여 하드웨어 가속 텐서 연산을 수행하며, 에이전트 루프를 관리합니다. WebGPU는 GPU에 직접 접근하는 웹 표준 API로, 기존 WebGL보다 훨씬 강력한 범용 GPU 연산을 가능하게 합니다.

서비스 워커(Service Worker) 는 오프스크린 문서와 콘텐츠 스크립트 사이의 메시지를 라우팅하는 중개자 역할을 합니다. 또한 take_screenshot(현재 페이지 캡처)과 run_javascript(페이지 내 JS 실행) 같이 권한이 필요한 작업도 처리합니다.

콘텐츠 스크립트(Content Script) 는 사용자가 실제로 상호작용하는 Chat UI를 페이지에 주입하고, DOM 조작 도구들(read_page_content, click_element, type_text, scroll_page)을 실행합니다.

Gemma Gem이 제공하는 도구들

Gemma Gem은 단순한 질의응답을 넘어 웹 페이지와 직접 상호작용하는 에이전트 기능을 제공합니다. 현재 지원하는 도구는 다음과 같습니다.

도구 이름	상세 설명	실행 위치
read_page_content	웹페이지 전체의 텍스트나 HTML, 혹은 특정 CSS 선택자에 해당하는 영역의 콘텐츠를 추출하여 읽어옵니다.	Content Script
take_screenshot	현재 사용자가 보고 있는 가시적인 웹페이지 영역을 PNG 형태의 이미지로 캡처하여 모델의 시각적 판단을 돕습니다.	Service Worker
click_element	CSS 선택자를 활용하여 페이지 내의 버튼, 링크, 체크박스 등의 특정 DOM 요소를 자동으로 클릭합니다.	Content Script
type_text	CSS 선택자로 입력 폼(Input)이나 텍스트 영역을 찾아 사용자가 지시한 텍스트를 자동으로 타이핑합니다.	Content Script
scroll_page	모델의 판단에 따라 지정한 픽셀 단위만큼 웹페이지를 위나 아래로 스크롤하여 더 많은 정보를 탐색합니다.	Content Script
run_javascript	완전한 DOM 접근 권한을 가지고 현재 페이지의 컨텍스트 내에서 직접 자바스크립트 코드를 실행하여 복잡한 로직을 처리합니다.	Service Worker

Gemma 4 모델 선택: E2B vs E4B

Gemma Gem은 두 가지 모델 크기를 지원합니다. 경량형인 E2B 모델은 약 500MB의 저장 공간이 필요하며, 보다 강력한 E4B 모델은 약 1.5GB를 차지합니다.

두 모델 모두 q4f16 양자화가 적용된 ONNX 포맷(onnx-community/gemma-4-E2B-it-ONNX, onnx-community/gemma-4-E4B-it-ONNX)으로 제공되며, 최대 128K 컨텍스트 윈도우를 지원합니다. 모델은 첫 실행 시 브라우저 캐시에 다운로드되어 이후 오프라인에서도 사용 가능합니다.

Gemma Gem 설치 및 사용법

Gemma Gem은 현재 크롬 웹 스토어가 아닌 개발자 모드 로컬 설치 방식으로만 사용 가능합니다. pnpm이 설치된 환경에서 다음 과정을 통해 설치할 수 있습니다:

# 저장소 클론
git clone https://github.com/kessler/gemma-gem.git
cd gemma-gem

# 의존성 설치 및 빌드
pnpm install
pnpm build

빌드 완료 후에는 Chrome Browser에서 chrome://extensions를 열고, 개발자 모드를 활성화한 뒤 .output/chrome-mv3-dev/ 디렉토리를 로드합니다. 이후 아무 웹 페이지나 방문하여 화면 오른쪽 하단의 젬(gem) 아이콘을 클릭하면 채팅 인터페이스가 열립니다. 처음 실행 시 모델 다운로드가 완료될 때까지 잠시 기다려야 합니다.

설정(기어 아이콘)에서는 E2B/E4B 모델 전환, Gemma 4의 네이티브 사고(Thinking) 모드 토글, 도구 호출 반복 한도 조정, 대화 기록 초기화, 사이트별 비활성화 등 다양한 옵션을 사용할 수 있습니다.

라이선스

Gemma Gem은 Apache-2.0 라이선스로 공개되어 있어 자유롭게 수정 및 배포가 가능합니다. 단, 사용하는 Gemma 4 모델 자체는 Google의 별도 사용 약관을 따릅니다.

Gemma Gem GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~