Vercel이 만든 브라우저 자동화 CLI agent-browser, 토큰 93% 줄이고 별 4만 개 넘게 받은 이유
AI 에이전트에게 “이 페이지에서 로그인 버튼 찾아서 눌러줘” 같은 작업을 시키려면 결국 브라우저를 붙여야 합니다. 가장 흔한 방법이 Playwright MCP를 연결하는 건데, 이 방식은 세션을 시작하는 순간부터 문제가 시작됩니다. 도구 정의만으로 13,700토큰 넘게 컨텍스트를 먹고, 페이지 하나를 읽을 때마다 접근성 트리 전체가 통째로 들어옵니다. 노드 수천 개짜리 트리 한 번이면 15,000토큰이 그냥 날아갑니다.
에이전트가 클릭 한 번, 스크롤 한 번 할 때마다 이 트리를 다시 받아야 하니, 작업이 몇 단계만 길어져도 컨텍스트 윈도우가 금방 바닥납니다. Vercel 랩스가 만든 vercel-labs/agent-browser는 이 문제를 정면으로 겨냥한 프로젝트입니다. 2026년 1월에 만들어져서 아직 1년도 안 됐는데 별 41.7k, 포크 2.8k를 받았습니다.
vercel-labs/agent-browser 저장소, 별 41.7k를 받았다
vercel-labs/agent-browser 저장소 바로가기
접근성 트리 대신 참조 번호를 돌려주는 방식
agent-browser의 핵심은 스냅샷과 참조(ref)를 분리한 구조입니다. agent-browser snapshot을 실행하면 페이지 전체 접근성 트리를 텍스트로 쏟아내는 대신, 인터랙티브한 요소마다 @e1, @e2, @e3 같은 짧은 참조 번호를 붙여서 돌려줍니다.
에이전트는 이후 명령에서 이 참조 번호만 쓰면 됩니다. 예를 들어 agent-browser click @e2라고 하면 별도로 셀렉터를 다시 찾을 필요 없이 스냅샷에서 얻은 번호로 바로 클릭할 수 있습니다. 페이지 구조를 매번 다시 파싱하지 않고, 한 번 찍은 스냅샷의 좌표만 계속 재사용하는 셈입니다.
Vercel 측 벤치마크에 따르면 이 방식으로 Playwright MCP 대비 컨텍스트 사용량을 93% 줄일 수 있습니다. Pulumi 블로그가 독립적으로 진행한 테스트에서는 6개 테스트를 돌렸을 때 Playwright MCP가 약 31,000자, agent-browser가 약 5,500자를 사용해서 82% 절감이라는 결과가 나왔습니다. 수치는 테스트 방식에 따라 82퍼센트에서 93퍼센트 사이로 갈리지만, 어느 쪽이든 같은 작업을 절반도 안 되는 컨텍스트로 처리한다는 방향은 같습니다.
여기에 CLI 자체도 Rust 네이티브 바이너리라 부팅 시간이 50밀리초 이하입니다. Node.js 없이도 동작하고, 첫 명령을 실행하면 데몬이 백그라운드에서 뜬 채로 유지되기 때문에 이후 명령들은 브라우저를 다시 켤 필요 없이 바로 실행됩니다.
설치는 npm이나 Homebrew, Cargo 중 아무거나 고르면 된다
설치 경로는 네 가지입니다. 가장 간단한 건 npm으로 전역 설치하는 방법입니다.
npm install -g agent-browser
agent-browser install # Chrome for Testing에서 Chrome 최초 1회 다운로드
macOS라면 Homebrew도 지원합니다.
brew install agent-browser
agent-browser install
Rust 툴체인이 있다면 Cargo로도 설치할 수 있습니다.
cargo install agent-browser
agent-browser install
설치된 Chrome, Brave, Playwright, Puppeteer가 이미 있다면 자동으로 감지하기 때문에 데몬 실행 자체에는 Playwright나 Node.js가 별도로 필요하지 않습니다. 소스에서 직접 빌드하려면 Node.js 24 이상, pnpm 11 이상, Rust가 필요합니다.
페이지 하나 열고 클릭하기까지 명령 여섯 줄
기본 사용 흐름은 다음과 같습니다.
agent-browser open example.com
agent-browser snapshot # 참조 번호가 붙은 접근성 트리
agent-browser click @e2 # 스냅샷에서 얻은 참조로 클릭
agent-browser fill @e3 "test@example.com"
agent-browser get text @e1
agent-browser screenshot page.png
agent-browser close
물론 전통적인 CSS 셀렉터도 그대로 지원합니다.
agent-browser click "#submit"
agent-browser find role button click --name "Submit"
명령이 108개가 넘는데, 크게 나누면 클릭과 입력 같은 핵심 조작, 텍스트나 속성을 가져오는 정보 조회, 시맨틱 로케이터로 요소를 찾는 탐색, 쿠키와 스토리지 제어, 네트워크 라우팅과 HAR 기록, 탭과 윈도우 관리, 콘솔 로그와 트레이스를 보는 디버그 명령으로 갈립니다. 여러 명령을 한 번에 실행하는 batch 명령도 있어서, 프로세스 시작 오버헤드 없이 다단계 작업을 한 번에 밀어넣을 수 있습니다.
Claude 같은 MCP 클라이언트와 연동하는 방법
agent-browser mcp 명령으로 표준입출력 기반 MCP 서버를 띄울 수 있습니다. Claude 같은 MCP 클라이언트는 이 명령을 서브프로세스로 실행해서 stdin과 stdout으로 JSON-RPC를 주고받습니다.
{
"mcpServers": {
"agent-browser": {
"command": "agent-browser",
"args": ["mcp"]
}
}
}
기본 프로필은 core인데, 일상적인 브라우저 자동화에 필요한 도구만 담아서 MCP 컨텍스트를 작게 유지합니다. --tools all을 주면 전체 CLI 기능을 다 노출하고, --tools core,network,react처럼 콤마로 프로필을 조합할 수도 있습니다. 프로필 종류는 core, network, state, debug, tabs, react, mobile, all까지 8가지입니다.
각 MCP 도구는 url, selector, text, key 같은 필드가 타입으로 지정되어 있어서, 클라이언트가 원시 명령 배열 대신 의미 있는 승인 프롬프트를 보여줄 수 있다는 점도 눈에 띕니다.
클라우드 브라우저와 iOS 시뮬레이터까지 provider로 갈아끼운다
기본으로는 Chrome for Testing을 로컬에 띄워서 쓰지만, --provider 옵션으로 다른 브라우저 환경을 붙일 수 있습니다. Browserless, Browserbase, Browser Use, Kernel, AWS Bedrock AgentCore 같은 클라우드 브라우저 서비스를 그대로 붙일 수 있고, --cdp 옵션으로 이미 켜져 있는 Chrome이나 Electron, WebView2 인스턴스에 원격 디버깅 포트로 연결하는 것도 가능합니다.
iOS 시뮬레이터도 지원 대상이라, Appium과 XCUITest를 통해 모바일 Safari를 직접 제어할 수 있습니다. 웹 앱을 데스크톱 브라우저에서만 검증하고 모바일 사파리는 손으로 확인하던 과정을 자동화 스크립트 안으로 끌어올 수 있다는 뜻입니다.
React 컴포넌트 트리와 Web Vitals까지 들여다본다
브라우저 조작 명령 말고도 눈여겨볼 만한 기능이 몇 가지 더 있습니다. --enable react-devtools 옵션으로 브라우저를 띄우면 agent-browser react tree로 컴포넌트 트리 전체를, react inspect <fiberId>로 특정 컴포넌트의 props와 훅, 상태까지 확인할 수 있습니다. Next.js, Remix, Vite, CRA 등 대부분의 React 프레임워크에서 동작합니다.
agent-browser vitals는 LCP, CLS, TTFB, FCP, INP 같은 Web Vitals 지표를 프레임워크 상관없이 측정해줍니다. axe-core가 바이너리에 내장되어 있어서 agent-browser a11y 한 줄로 접근성 감사도 돌릴 수 있는데, 오프라인 상태에서도 동작하고 엄격한 CSP 환경에서도 문제없이 실행됩니다.
세션 격리와 인증 상태 저장도 지원합니다. --session 옵션으로 여러 브라우저 인스턴스를 독립적으로 띄울 수 있고, --restore 옵션을 쓰면 쿠키와 로컬스토리지를 자동으로 저장했다가 다음 실행에서 복원합니다. 로그인 한 번 해두면 매번 다시 인증할 필요가 없다는 뜻입니다.
vercel-labs/agent-browser 저장소 바로가기
정리
agent-browser가 붙잡은 문제는 단순합니다. AI 에이전트가 브라우저를 조작하는 매 순간마다 페이지 전체를 다시 읽어야 한다면, 그 컨텍스트 비용이 작업의 병목이 됩니다. 접근성 트리를 참조 번호로 압축하고 Rust 네이티브 바이너리로 부팅 시간을 없앤 조합이 별 4만 개가 넘는 반응으로 이어진 배경입니다. Playwright MCP로 브라우저 자동화 워크플로우를 짜다가 컨텍스트가 자꾸 바닥나는 걸 겪어봤다면, npm install -g agent-browser 한 줄로 바로 비교해볼 수 있습니다.
Leave a comment