Vercel agent-browser 소개: AI 에이전트를 위한 새로운 헤드리스 브라우저 자동화 CLI

최근 AI 에이전트 기반 자동화가 빠르게 확산되면서 웹 브라우저를 자동으로 제어하는 기술의 중요성이 크게 높아지고 있습니다. 특히 LLM 기반 에이전트가 웹을 탐색하고, 데이터를 수집하고, 사용자 작업을 대신 수행하기 위해서는 효율적인 브라우저 자동화 도구가 필수적입니다.

이러한 흐름 속에서 Vercel은 agent-browser라는 새로운 CLI 기반 브라우저 자동화 도구를 공개했습니다. 기존의 Node.js + Playwright + CDP(Chrome DevTools Protocol) 구조에서 벗어나 Rust 기반 바이너리가 CDP를 직접 호출하는 방식을 도입해 성능과 효율성을 개선한 것이 특징입니다.

이번 글에서는 agent-browser가 무엇인지, 어떤 기술적 배경을 가지고 있는지, 그리고 AI 에이전트 환경에서 어떤 장점과 활용성을 제공하는지를 정리해 보겠습니다.

반응형

---

AI 에이전트를 위한 헤드리스 브라우저 자동화 도구, agent-browser

agent-browser란 무엇인가

agent-browser는 AI 에이전트가 웹 브라우저를 자동으로 제어할 수 있도록 설계된 헤드리스 브라우저 자동화 CLI 도구입니다.

기존 자동화 방식은 일반적으로 다음과 같은 구조를 사용합니다.

• Node.js 런타임
• Playwright 또는 Puppeteer
• Chrome DevTools Protocol(CDP)

하지만 agent-browser는 이러한 구조를 단순화하여 Rust 바이너리가 CDP를 직접 호출하는 방식을 사용합니다.

이러한 구조 덕분에 다음과 같은 특징이 있습니다.

• Node.js 런타임 없이 독립 실행
• 더 작은 메모리 사용량
• 더 가벼운 실행 환경
• AI 에이전트 친화적 CLI 인터페이스 제공

즉, AI가 웹을 탐색하고 조작하는 환경에 최적화된 브라우저 자동화 도구라고 볼 수 있습니다.

---

기존 브라우저 자동화 방식의 한계

전통적인 브라우저 자동화 환경은 대부분 다음과 같은 스택을 사용합니다.

Node.js
  └ Playwright / Puppeteer
        └ Chrome DevTools Protocol
             └ Browser

이 구조는 강력하지만 몇 가지 한계가 있습니다.

1. 런타임 의존성

Node.js 환경이 반드시 필요하기 때문에

• 실행 환경 관리 필요
• 컨테이너 이미지 크기 증가
• 서버 메모리 사용 증가

와 같은 문제가 발생할 수 있습니다.

2. AI 에이전트 환경에 비최적화

기존 자동화는 사람이 작성한 스크립트 기반입니다.

하지만 AI 에이전트는 다음과 같은 방식으로 작동합니다.

• 상태 기반 작업
• 동적 명령 실행
• 페이지 구조 이해

따라서 AI가 이해하기 쉬운 브라우저 인터페이스가 필요합니다.

---

agent-browser의 핵심 기술 구조

agent-browser는 기존 구조를 다음과 같이 단순화했습니다.

Rust Binary
   └ CDP 직접 호출
        └ Browser

핵심 특징은 다음과 같습니다.

Rust 기반 CLI

• macOS
• Linux
• Windows

환경에서 네이티브 Rust 바이너리로 실행됩니다.

독립 실행형 데몬

Node.js 프로세스 없이 독립 실행형 데몬 형태로 동작합니다.

이를 통해

• 메모리 사용량 감소
• 실행 속도 개선
• 배포 단순화

라는 장점을 제공합니다.

Node.js 폴백 지원

필요한 경우 기존 Node.js 기반 환경으로도 동작할 수 있도록 폴백 지원이 제공됩니다.

---

AI 친화적인 브라우저 자동화 명령어

agent-browser는 AI 에이전트가 쉽게 사용할 수 있도록 CLI 기반 명령 구조를 제공합니다.

주요 기능은 다음과 같습니다.

페이지 탐색 기능

웹 페이지 이동 및 탐색을 지원합니다.

예시 기능

• open
• goto

이를 통해 특정 웹 페이지로 이동하거나 새로운 페이지를 열 수 있습니다.

---

사용자 인터랙션 자동화

웹 페이지 요소를 직접 조작할 수 있습니다.

지원 기능 예시

• click
• fill
• type
• hover
• check

AI 에이전트가 다음과 같은 작업을 수행할 수 있습니다.

• 로그인
• 폼 입력
• 버튼 클릭
• UI 탐색

---

페이지 캡처 및 문서 생성

웹 페이지 상태를 기록하는 기능도 제공합니다.

지원 기능

• screenshot
• pdf

이를 통해

• 페이지 스냅샷 저장
• PDF 문서 생성

이 가능합니다.

---

상태 조회 기능

페이지의 정보를 읽어오는 기능도 지원합니다.

예시 기능

• get text
• get attr
• is
• wait

이를 통해 AI 에이전트는 다음과 같은 작업을 수행할 수 있습니다.

• 특정 요소 텍스트 확인
• 속성 값 조회
• 조건 기반 대기 처리

---

snapshot 기반 요소 식별 방식

agent-browser의 가장 흥미로운 특징 중 하나는 snapshot 명령 기반 요소 식별 방식입니다.

snapshot 명령을 실행하면 다음과 같은 작업이 수행됩니다.

1. 페이지의 **접근성 트리(accessibility tree)**를 가져옵니다.
2. 각 요소에 고유 reference 번호를 부여합니다.

예시

@e1
@e2
@e3

AI 에이전트는 이 reference를 기반으로 요소를 조작합니다.

예를 들어

click @e2

이 방식은 전통적인 CSS Selector 방식보다 다음과 같은 장점이 있습니다.

• AI가 이해하기 쉬움
• 페이지 구조 변화에 덜 민감
• 자동화 안정성 향상

물론 기존 CSS selector 방식도 함께 지원합니다.

---

브라우저 상태 관리 기능

agent-browser는 브라우저 세션 관리 기능도 제공합니다.

세션 격리

--session

옵션을 사용하면 격리된 브라우저 인스턴스를 실행할 수 있습니다.

이를 통해

• 여러 자동화 작업 병렬 실행
• 작업 간 상태 충돌 방지

가 가능합니다.

---

로그인 상태 유지

다음 옵션을 통해 로그인 상태를 유지할 수 있습니다.

--profile
--session-name

이를 통해

• 쿠키 유지
• 스토리지 유지
• 로그인 세션 유지

가 가능합니다.

---

쿠키 및 스토리지 관리

다음과 같은 상태 관리 기능도 제공합니다.

• cookie 관리
• storage 관리

이를 통해 로그인 자동화 및 상태 유지가 쉬워집니다.

---

네트워크 제어 기능

agent-browser는 네트워크 레벨 제어 기능도 제공합니다.

예시 기능

• network route

이를 통해 다음과 같은 작업이 가능합니다.

• 네트워크 요청 가로채기
• API 응답 모킹
• 테스트 환경 구성

---

diff 기능: 페이지 상태 비교

agent-browser는 diff 기능도 제공합니다.

비교 대상

• snapshot
• screenshot
• URL

이를 통해 다음과 같은 활용이 가능합니다.

• 페이지 변경 감지
• UI 테스트 자동화
• 회귀 테스트

---

Annotated Screenshot 기능

--annotate

옵션을 사용하면 요소 번호가 표시된 스크린샷을 생성할 수 있습니다.

이 기능은 특히 AI 에이전트와 함께 사용할 때 유용합니다.

왜냐하면

• 요소 번호 확인 가능
• 자동화 대상 요소 파악 가능
• 디버깅 용이

하기 때문입니다.

---

간단한 사용 예시

agent-browser를 활용한 간단한 자동화 흐름 예시는 다음과 같습니다.

예시 시나리오

1. 웹 페이지 이동
2. snapshot 생성
3. 특정 요소 클릭
4. 결과 확인

예시 흐름

goto https://example.com
snapshot
click @e2
get text @e3

이처럼 CLI 명령을 통해 웹 자동화 작업을 단계적으로 수행할 수 있습니다.

---

728x90

agent-browser가 가져올 변화

agent-browser는 기존 브라우저 자동화 도구와 비교해 다음과 같은 특징을 가지고 있습니다.

핵심 특징

• Rust 기반 네이티브 바이너리
• Node.js 런타임 제거
• CDP 직접 호출 구조
• AI 에이전트 친화적 CLI
• snapshot 기반 요소 참조 시스템

기대 효과

이러한 특징 덕분에 agent-browser는 다음과 같은 분야에서 활용 가능성이 높습니다.

• AI 에이전트 웹 자동화
• 웹 데이터 수집
• 자동 테스트
• 브라우저 기반 업무 자동화

특히 AI 에이전트가 웹을 직접 탐색하고 작업을 수행하는 시대에 맞춰 설계된 점이 가장 큰 차별점입니다.

앞으로 AI 에이전트 기술이 발전할수록 agent-browser와 같은 AI 중심 자동화 도구의 중요성도 더욱 커질 것으로 기대됩니다.

300x250

https://agent-browser.dev/

Headless Browser Automation for AI | agent-browser