AI 에이전트를 위한 브라우저 자동화, agent-browser

요즘 AI 에이전트가 웹을 직접 다루는 일이 많아졌다. 검색하고, 클릭하고, 폼을 채우고, 로그인하는 것들. 그런데 기존 브라우저 자동화 도구들은 AI와 함께 쓰기에 불편한 점이 있었다.

바로 토큰 낭비 문제다.

기존 방식의 문제

Playwright나 Puppeteer 같은 도구는 페이지 상태를 DOM 전체를 JSON으로 반환한다. 단순한 페이지 하나도 3,000~5,000 토큰을 쓴다. AI 에이전트가 웹 페이지 여러 개를 탐색하다 보면 컨텍스트 창이 순식간에 꽉 찬다.

또 다른 문제는 불안정한 요소 선택이다. CSS 셀렉터나 XPath로 요소를 지목하면, 페이지가 조금만 바뀌어도 셀렉터가 깨진다. AI는 매번 DOM을 다시 분석해야 한다.

agent-browser가 다른 이유

agent-browser는 처음부터 AI 에이전트를 위해 설계됐다.

핵심 아이디어는 두 가지다.

첫째, 접근성 트리만 반환한다. DOM 전체 대신 ARIA 접근성 트리를 텍스트로 추출한다. 같은 페이지를 200~400 토큰으로 표현한다. 기존 방식의 1/10 수준이다.

둘째, ref로 요소를 고정한다. 스냅샷을 찍으면 각 요소에 @e1, @e2 같은 고유 식별자가 붙는다. AI는 이 ref를 기억해뒀다가 클릭하거나 입력할 때 쓴다. DOM이 바뀌어도 스냅샷 시점의 요소를 정확히 참조한다.

`bash
# 스냅샷 찍기
agent-browser snapshot https://example.com

# 출력 예시
- button "로그인" [ref=e12]
- input "이메일" [ref=e13]
- input "비밀번호" [ref=e14]

# ref로 조작
agent-browser click e12
agent-browser type e13 "user@example.com"
`

아키텍처

내부는 두 레이어로 나뉜다.

- Rust CLI: 명령 파싱을 담당한다. 네이티브 바이너리라 시작이 빠르다.
- Node.js Daemon: Playwright를 감싸서 실제 브라우저를 제어한다. 데몬이 계속 떠 있어서 명령 간 브라우저 상태가 유지된다.

실험적으로 Node.js 없이 Rust가 직접 Chrome DevTools Protocol(CDP)로 브라우저를 제어하는 native daemon도 지원한다.

어디서 쓰나

Claude Code, Cursor, GitHub Copilot, OpenAI Codex처럼 셸 명령을 실행할 수 있는 AI 도구라면 바로 쓸 수 있다.

나는 주로 두 가지 상황에 쓴다.

1. 로그인이 필요한 페이지 자동화: defuddle이나 scrapling으로 접근 안 되는 인증 필요 페이지
2. 멀티스텝 워크플로우: 단순 콘텐츠 추출이 아닌, 여러 단계를 거치는 작업 (폼 제출, 설정 변경 등)

scrapling과 비교

비슷해 보이지만 목적이 다르다.

---	---	---
목적	브라우저 조작	콘텐츠 추출
상호작용	양방향 (클릭, 입력, 탐색)	단방향 (읽기만)
강점	AI 컨텍스트 최적화, 세션 유지	Cloudflare·안티봇 우회

간단히 말하면, 데이터를 가져오는 게 목적이면 scrapling, 브라우저 안에서 뭔가를 해야 한다면 agent-browser다.

---

설치는 한 줄이다.

`bash
npm install -g agent-browser
`

AI 에이전트에게 브라우저를 쥐여주는 가장 깔끔한 방법 중 하나라고 생각한다.