최근 AI 에이전트의 발전은 텍스트 생성을 넘어 실제 환경에서의 ‘행동(Action)‘으로 이어지고 있습니다. 그중에서도 웹 브라우저는 AI가 정보를 탐색하고 서비스를 이용하기 위한 가장 중요한 인터페이스 중 하나입니다.
Vercel Labs에서 선보인 Agent Browser는 이러한 AI 에이전트의 브라우저 자동화 경험을 한 차원 높여주는 도구입니다. 단순히 Playwright나 Puppeteer를 감싼 래퍼(Wrapper)를 넘어, AI 에이전트가 브라우저를 ‘이해’하고 ‘상호작용’하는 방식에 최적화되어 있습니다.
1. 왜 AI 에이전트를 위한 별도의 브라우저 도구가 필요한가?
기존의 브라우저 자동화 도구들은 주로 ‘사람’이 작성한 고정된 스크립트를 실행하는 데 초점이 맞춰져 있습니다. 하지만 AI 에이전트가 웹을 탐색할 때는 다음과 같은 고유한 문제들에 직면합니다.
- DOM의 복잡성: 현대의 웹페이지는 수천 개의 노드로 구성되어 있어, LLM의 컨텍스트 윈도우(Context Window)를 금방 채워버립니다.
- 비결정성(Nondeterminism): 동일한 페이지라도 로딩 상태나 광고 등으로 인해 셀렉터가 수시로 바뀔 수 있습니다.
- 성능 오버헤드: 명령 하나를 실행할 때마다 노드 엔진을 띄우고 브라우저를 제어하는 과정이 너무 느리면 에이전트의 응답성도 떨어집니다.
Agent Browser는 이러한 문제들을 해결하기 위해 Rust 기반의 고성능 CLI와 AI 친화적인 스냅샷 시스템을 도입했습니다.
2. 핵심 기능: AI의 눈과 손이 되는 도구
🚀 Rust 기반의 압도적인 속도
Agent Browser는 Rust로 작성된 CLI와 백그라운드에서 실행되는 Node.js 데몬 아키텍처를 사용합니다. 명령 실행 시 발생하는 파싱 오버헤드가 밀리초(ms) 단위 이하로 매우 낮으며, 브라우저 인스턴스가 데몬으로 유지되어 다음 명령을 즉각 실행할 수 있습니다.
📸 AI를 위한 스마트 스냅샷 (snapshot)
가장 혁신적인 기능 중 하나는 snapshot 명령입니다. 단순히 HTML을 긁어오는 것이 아니라, 브라우저의 **접근성 트리(Accessibility Tree)**를 기반으로 AI가 이해하기 쉬운 텍스트 형태의 스냅샷을 생성합니다.
이때 각 요소에는 @e1, @e2와 같은 **고유한 참조(Ref)**가 부여됩니다. AI는 복잡한 CSS 셀렉터 대신 이 참조 번호만을 사용하여 클릭(click @e1)하거나 입력(fill @e2 "text")할 수 있습니다. 이는 선택의 정확도를 획기적으로 높여줍니다.
🏷️ 시각적 레이블링 (--annotate)
멀티모달 AI(예: GPT-4o, Claude 3.5 Sonnet)를 위해 스크린샷 위에 요소 번호를 직접 오버레이하는 기능을 제공합니다. 텍스트 정보만으로는 식별하기 어려운 아이콘 버튼이나 캔버스 요소들을 AI가 시각적으로 인식하고, 동일한 참조 번호(@eN)로 상호작용할 수 있게 해줍니다.
3. 강력한 보안과 제어 정책
AI 에이전트가 자율적으로 브라우징을 수행할 때 가장 우려되는 부분은 보안입니다. Agent Browser는 이를 위해 강력한 옵트인(Opt-in) 보안 기능을 제공합니다.
- 도메인 허용 목록(Domain Allowlist): 특정 도메인 외의 네비게이션이나 리소스 요청을 차단합니다.
- 동작 정책(Action Policy): 파괴적인 동작(예:
eval, 다운로드)에 대해 정책 파일을 통해 제한하거나 명시적인 승인을 요구할 수 있습니다. - 암호화된 자격 증명 금고(Auth Vault): 비밀번호나 API 키를 로컬에 암호화하여 저장하고, AI에게는 이름으로만 참조하게 하여 실제 정보가 프롬프트에 노출되는 것을 방지합니다.
4. 고급 활용: 도메인 특화 스킬(Skills) 확장
Agent Browser는 단순한 도구를 넘어, 특정 목적에 최적화된 ‘스킬(Skills)’ 시스템을 통해 그 능력을 무한히 확장할 수 있습니다. Vercel Labs가 공식적으로 제공하는 대표적인 스킬들은 다음과 같습니다.
🧪 독푸딩(Dogfood): 시스템화된 QA 및 테스팅
에이전트에게 “이 사이트에서 버그를 찾아줘”라고 요청하면, Dogfood 스킬이 활성화됩니다.
- 체계적인 탐색: 메인 내비게이션부터 하위 페이지까지 계층적으로 접근합니다.
- 증거 기반 보고: 이슈 발견 시 즉시 동영상 녹화(
record)와 단계별 스크린샷을 캡처하여 상세 리포트를 생성합니다. - 재현 경로 보장: 사람이 보고 즉시 따라 할 수 있는 수준의 재현 단계를 자동으로 기록합니다.
🖥️ 일렉트론(Electron) 앱 자동화
웹 브라우저를 넘어 VS Code, Slack, Discord, Notion과 같은 데스크톱 앱도 제어할 수 있습니다.
- CDP 연결: 일렉트론 앱 실행 시
--remote-debugging-port플래그를 통해 Agent Browser를 네이티브 앱에 직접 연결합니다. - 데스크톱 워크플로우: 웹과 동일한 스냅샷-참조(Ref) 방식을 사용하여 데스크톱 앱의 UI 요소를 클릭하거나 텍스트를 입력합니다.
💬 슬랙(Slack) 자동화 스킬
슬랙 워크스페이스 내에서의 복잡한 상호작용을 자동화합니다.
- 메시지 및 채널 관리: 읽지 않은 메시지 확인, 특정 채널 내비게이션, 메시지 전송 및 데이터 추출을 수행합니다.
- 지능형 검색: 슬랙의 검색 기능을 활용하여 필요한 정보를 찾고, 대화 맥락을 스냅샷으로 이해합니다.
5. 모바일 사파리까지 제어하는 확장성
놀랍게도 Agent Browser는 데스크톱 크롬뿐만 아니라 iOS 시뮬레이터의 실기기 사파리(Mobile Safari) 제어도 지원합니다. Xcode가 설치된 macOS 환경이라면 appium을 통해 실제 아이폰 환경에서의 웹 자동화 테스트나 에이전트 실행이 가능합니다.
또한 Browserbase나 Browser Use 같은 클라우드 브라우저 인프라와도 원활하게 연동되어, 로컬 리소스 없이도 대규모 자동화 워크플로우를 구축할 수 있습니다.
6. 실전 활용 예시
설치와 실행은 매우 간단합니다:
# 설치
npm install -g agent-browser
agent-browser install # 브라우저 엔진 다운로드
# 네비게이션 및 상호작용
agent-browser open https://github.com
agent-browser snapshot -i # 상호작용 가능한 요소만 스냅샷
agent-browser click @e1 # 스냅샷에서 확인한 ref로 클릭Claude Code 같은 도구를 사용 중이라면 npx skills add vercel-labs/agent-browser 명령을 통해 에이전트에게 브라우저를 다루는 기술을 즉시 가르칠 수 있습니다.
마치며: 브라우저가 AI의 새로운 운영체제가 되는 시대
Agent Browser는 브라우저를 단순한 웹 페이지 뷰어가 아닌, **AI 에이전트가 자유롭게 조작할 수 있는 ‘애플리케이션 인터페이스’**로 바라보고 있습니다. Vercel Labs의 이러한 시도는 AI가 인간의 복잡한 웹 업무를 대신 수행하는 ‘에이전틱 워크플로우(Agentic Workflow)‘의 핵심 인프라가 될 것입니다.
이미 많은 AI 오픈소스 프로젝트들이 Agent Browser를 기본 자동화 도구로 채택하고 있습니다. 웹 자동화의 미래를 미리 경험해보고 싶다면, 지금 바로 Agent Browser를 설치해보세요.
🔗 관련 정보
- GitHub 저장소: https://github.com/vercel-labs/agent-browser
- 공식 문서: https://agent-browser.vercel.app
- 개발사: Vercel Labs
- 라이선스: Apache-2.0