On-Device Browser Agent 소개
On-Device Browser Agent는 클라우드 서버를 거치지 않고, 사용자의 웹 브라우저 내에서 직접 AI 모델을 구동하여 웹 자동화 작업을 수행하는 크롬 확장(Chrome Extension) 프로그램입니다. 이 프로젝트는 WebLLM 및 WebGPU 기술을 활용하여, 외부 API 키나 인터넷 연결(모델 다운로드 후) 없이도 AI 에이전트가 브라우저의 DOM(문서 객체 모델)을 이해하고 상호작용할 수 있게 해줍니다.
최근 대규모 언어 모델(LLM)의 추론 트렌드가 서버 중심에서 온-디바이스(On-Device)로 확장됨에 따라, 브라우저 환경에서 실행 가능한 경량화 모델(SLM)들이 주목받고 있습니다. 이 도구는 Qwen 2.5, Phi-3.5, Llama 3.2와 같은 경량 모델들을 사용자의 GPU 가속을 통해 직접 실행합니다. 덕분에 사용자의 데이터가 외부로 전송되지 않아 완벽한 프라이버시가 보장되며, 클라우드 비용이 전혀 들지 않습니다.
중요 업데이트: SDK 통합 예정
개발팀은 현재 이 기술을 더 확장하여 runanywhere-web-sdk에 통합하여 곧 출시할 예정입니다. 메인 저장소를 통해 관련 SDK가 공개될 예정이니, 최신 개발 현황은 아래 저장소에서 확인하시기 바랍니다.
- RunAnywhere SDK 저장소: https://github.com/RunanywhereAI/runanywhere-sdks
On-Device Browser Agent vs. 기존 클라우드 기반 에이전트와 비교
ChatGPT 사이드바와 같은 일반적인 브라우저용 AI 도구와 On-Device Browser Agent의 가장 큰 차이점은 데이터 처리 위치와 작동 방식입니다. 일반적으로 클라우드 기반 에이전트는 사용자의 질문이나 현재 페이지의 정보를 OpenAI나 Anthropic 등과 같은 서비스 사업자의 서버로 전송하여 처리합니다. 이를 통해 높은 성능을 제공하지만, 민감한 개인 정보가 유출될 위험이 있고 API 사용료가 발생할 수 있습니다.
이에 비해, On-Device Browser Agent는 모든 연산이 사용자의 로컬 하드웨어(GPU 등)에서 이루어집니다. 따라서, 사용자의 데이터가 사용자의 기기(Device)를 벗어나지 않아 보안성이 뛰어나며, 인터넷 연결이 불안정하거나 끊긴 상태(오프라인)에서도 모델이 캐시되어 있다면 작동이 가능합니다. 단, 사용자가 선택한 모델 및 GPU 메모리와 같은 하드웨어 사양에 따라 실행 속도나 모델 크기에 제약이 있을 수 있습니다.
On-Device Browser Agent의 주요 기능
On-Device Browser Agent 프로젝트는 단순한 챗봇을 넘어, 웹 페이지를 탐색하고 작업을 수행하는 에이전트(Agent) 시스템을 구현하고 있습니다.
2단계 에이전트 시스템 (Multi-Agent System)
On-Device Browser Agent 확장 프로그램은 Nanobrowser 프로젝트에서 영감을 받은 두 가지 핵심 에이전트가 협력하여 작업을 수행합니다.
-
Planner Agent (기획자): 사용자가 입력한 작업을 분석하여 이를 수행하기 위한 높은 수준의 전략과 단계별 계획을 수립합니다.
-
Navigator Agent (항해사): 현재 웹 페이지의 DOM 상태를 분석하고, 계획을 실행하기 위한 구체적인 전술적 행동(클릭, 타이핑, 스크롤 등)을 결정합니다.
동작 원리 (Workflow)
사용자가 "위키피디아에서 'WebGPU'를 검색하고 첫 번째 문단을 요약해줘"라고 요청하게 되면, On-Device Browser Agent는 다음과 같은 흐름에 따라 처리합니다:
-
입력 분석: 사용자의 명령을 받아 Planner가 전체 작업 흐름을 설계합니다.
-
페이지 분석: Navigator가 현재 페이지의 요소를 파악합니다.
-
액션 실행: Content Script가 실제 브라우저 내에서 검색창 찾기, 검색어 입력, 버튼 클릭 등의 동작을 수행합니다.
-
반복: 작업이 완료되거나 실패할 때까지 이 루프를 반복합니다.
지원하는 로컬 LLM 모델
프로젝트는 WebLLM 엔진을 사용하여 다음과 같은 모델들을 브라우저에서 구동합니다. 단, 각 모델을 사용하기 위해서는 크롬 확장(Chrome Extension) 설치 후 첫 실행 시 모델 가중치를 다운로드해야 하며(약 1GB~2GB), 이후에는 다운로드 받아둔 모델(Cache)을 사용합니다:
- Qwen2.5-1.5B-Instruct (기본값): 약 1GB 크기로, 성능과 속도의 균형이 잡힌 기본 모델입니다.
- Phi-3.5-mini-instruct (설정 변경 가능): 약 2GB 크기로, 더 뛰어난 추론 능력을 제공합니다.
- Llama-3.2-1B-Instruct (설정 변경 가능): 약 0.7GB의 초경량 모델입니다.
모델 설정은 src/shared/constants.ts에서 변경할 수 있습니다.
On-Device Browser Agent의 기술 스택 (Tech Stack)
-
Chrome Extension Manifest V3: 최신 보안 정책을 준수하는 확장 프로그램 아키텍처
-
Vite + CRXJS: 빠르고 효율적인 빌드 도구
-
TypeScript & React: 타입 안정성이 보장된 개발 환경과 UI
On-Device Browser Agent 설치 및 사용
설치 방법: 직접 빌드 후 개발자 모드로 설치
On-Device Browser Agent 프로젝트는 현재 GitHub 저장소로부터 소스 코드를 직접 빌드한 뒤, 크롬 브라우저의 개발자 모드(Developer Mode)에서 설치해야 합니다. 설치 및 사용을 위해서는 Chrome 124 버전 이상, WebGPU를 지원하는 GPU, 그리고 18 이상의 버전의 NodeJS와 npm이 필요합니다.
먼저, 설치를 위해 GitHub 저장소를 복제(clone)한 뒤 빌드합니다:
# 저장소 복제
git clone https://github.com/RunanywhereAI/on-device-browser-agent.git
cd on-device-browser-agent
# 의존성 설치
npm install
# 빌드
npm run build
빌드가 완료된 뒤에는 크롬 주소창에 chrome://extensions를 입력하여 확장(Extension) 설정 화면을 열고, 화면 우측 상단의 '개발자 모드(Developer Mode)'를 활성화(enable)합니다.
이후 '압축해제된 확장 프로그램 불러오기(Load Unpacked)' 버튼을 클릭하여 이전에 빌드한 프로젝트의 dist/ 디렉토리를 선택하면 설치가 완료됩니다.
사용 방법
설치 후 사용자는 다음과 같은 간단한 흐름으로 AI에게 브라우저 제어를 명령할 수 있습니다.
-
웹페이지 이동: 작업을 수행하고자 하는 웹사이트로 이동합니다.
-
확장 프로그램 실행: 브라우저 툴바에서 'Local Browser' 아이콘을 클릭합니다.
-
작업 명령 입력: 원하는 작업을 자연어로 입력합니다. 예를 들어, 다음과 같이 입력합니다:
- "Search for 'WebGPU' on Wikipedia and extract the first paragraph (위키피디아에서 'WebGPU'를 검색하고 첫 번째 문단을 추출해줘)"
- "Go to example.com and tell me what's there (example.com으로 이동해서 거기에 무엇이 있는지 말해줘)"
- "Find the search box and search for 'AI news (검색창을 찾아서 'AI news'를 검색해줘)"
- 실행 확인: 선택한 모델이 단계별로 브라우저를 조작하며 작업을 수행하는 과정을 지켜봅니다.
On-Device Browser Agent 프로젝트의 한계점 (Limitations)
On-Device Browser Agent 프로젝트는 매우 혁신적이지만, 현재 시점에서 다음과 같은 몇 가지 기술적 제약 사항(Limitations)이 있습니다:
-
POC 범위: 현재는 개념 증명(Proof-of-Concept) 단계의 프로젝트로, 프로덕션 레벨의 소프트웨어가 아닙니다.
-
시각적 인식 불가 (No Vision): 화면의 이미지를 이해하는 시각(Vision) 기능은 없습니다. 오직 텍스트 기반의 DOM 분석만을 통해 페이지 구조를 파악합니다.
-
단일 탭 지원: 현재 사용자가 보고 있는 활성 탭(Active Tab)에서만 작동하며, 여러 탭을 동시에 제어하거나 백그라운드 탭을 조작할 수 없습니다.
-
기본 동작 한정: 이동(Navigate), 클릭(Click), 타이핑(Type), 추출(Extract), 스크롤(Scroll), 대기(Wait) 등 기본적인 웹 상호작용만 지원합니다.
-
모델 성능의 한계: 브라우저 구동을 위해 작은 크기의 모델을 사용하므로, 매우 복잡한 추론이 필요한 작업에서는 대형 모델에 비해 성능 저하가 발생할 수 있습니다.
라이선스
On-Device Browser Agent 프로젝트는 MIT License로 배포되고 있습니다. 누구나 자유롭게 수정 및 배포할 수 있으며, 상업적 이용 또한 가능합니다.
On-Device Browser Agent 프로젝트 GitHub 저장소
더 읽어보기
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 