AI 웹 자동화의 미래: Vercel의 agent-browser에서 발견한 5가지 놀라운 기능
-
AI 에이전트를 위한 더 나은 웹 브라우저의 등장
AI 에이전트가 웹사이트의 데이터를 수집하거나 특정 작업을 수행하도록 자동화 스크립트를 작성해 본 적이 있다면, 그 과정이 얼마나 어려운지 잘 아실 겁니다. 동적으로 변하는 콘텐츠, 사소한 UI 변경에도 쉽게 깨져버리는 스크립트 등은 웹 자동화의 고질적인 문제였습니다. AI가 인간처럼 웹을 '이해'하고 상호작용하기에는 기존의 도구들이 가진 한계가 명확했습니다.
이러한 문제들을 해결하기 위해, Vercel Labs에서 agent-browser라는 새로운 오픈소스 도구를 공개했습니다. 이 도구는 단순히 기존의 자동화 스크립트를 개선하는 것을 넘어, AI 에이전트가 웹과 상호작용하는 방식을 근본적으로 재고하고 있습니다.이 글에서는 agent-browser가 제시하는 미래의 웹 자동화 패러다임을 엿볼 수 있는 가장 흥미롭고, 때로는 직관에 반하며, 강력한 5가지 핵심 기능을 깊이 있게 살펴보겠습니다.
- CSS 선택자는 이제 그만: 웹 상호작용의 새로운 패러다임, '스냅샷과 Ref'
기존 웹 자동화의 가장 큰 골칫거리는 단연 CSS 선택자였습니다. 웹사이트의 디자인이나 구조가 조금만 바뀌어도 선택자가 깨져 스크립트 전체가 멈추는 일은 비일비재했습니다. agent-browser는 이 문제를 '스냅샷'과 'Ref'라는 독창적인 방식으로 해결합니다.
agent-browser snapshot 명령어를 실행하면, 현재 웹페이지의 전체 '접근성 트리(accessibility tree)'를 텍스트로 생성합니다. 이 스냅샷에는 페이지의 모든 상호작용 가능한 요소들이 포함되며, 각 요소에는 @e1, @e2와 같은 고유한 참조(Reference), 즉 'Ref'가 부여됩니다.
이 Ref는 해당 스냅샷 내에서 절대 변하지 않는 고유 식별자입니다. AI는 이 스냅샷을 분석하여 "Submit 버튼은 @e2"라고 인지한 뒤, agent-browser click @e2와 같이 Ref를 사용해 정확하고 결정론적으로(deterministically) 요소를 제어할 수 있습니다.
'Ref' 시스템이 AI 에이전트에게 최적화된 이유는 명확합니다.
- 결정론적(Deterministic): Ref는 스냅샷의 정확한 요소를 가리킵니다.
- 빠름(Fast): DOM을 다시 쿼리할 필요가 없습니다.
- AI 친화적(AI-friendly): 스냅샷을 분석하고 Ref를 사용하는 워크플로우는 LLM에 최적화되어 있습니다.
실제로 최적의 AI 워크플로우는 agent-browser snapshot -i --json 명령어에서 시작됩니다. 여기서 -i 플래그는 버튼, 링크, 입력창 등 '상호작용 가능한' 요소만 필터링하여 AI에게 훨씬 깨끗하고 노이즈가 적은 페이지의 '지도'를 제공합니다. 이는 AI의 의사결정 과정을 더욱 효율적으로 만들어주는 전문가적인 전략입니다.
더 이상 깨지기 쉬운 선택자 대신, AI가 특정 시점의 웹페이지를 '설계도처럼' 구조적으로 파악하고, 그 안의 모든 부품을 정확히 지목할 수 있게 된 것입니다.
- 강력한 성능의 비밀: Rust와 Node.js의 영리한 하이브리드 아키텍처
Vercel 에서 만든 Agent Browser AI에게 웹의 열쇠를 주다 – 07:14
— 봄봄스쿨agent-browser는 터미널에서 실행되는 단순한 CLI 도구처럼 보이지만, 그 내부에는 영리한 '클라이언트-데몬' 아키텍처가 숨어있습니다.
- 클라이언트 (Rust CLI): 사용자가 터미널에서 직접 상호작용하는 부분은 네이티브 Rust로 작성되었습니다. 덕분에 명령어 입력, 파싱, 데몬과의 통신이 매우 빠르고 즉각적으로 반응합니다.
- 데몬 (Node.js): 실제 브라우저 인스턴스를 관리하고 제어하는 핵심 로직은 백그라운드에서 실행되는 Node.js 데몬이 담당합니다. 이는 성숙하고 강력한 브라우저 자동화 라이브러리인 Playwright를 직접 관리하고 제어하여, 그 모든 기능을 온전히 활용하기 위함입니다.
이러한 하이브리드 접근 방식은 두 세계의 장점만을 취합니다. 사용자는 Rust의 빠른 응답성을 체감하면서도, 내부적으로는 안정적이고 기능이 풍부한 Node.js와 Playwright가 복잡한 브라우저 제어를 처리하는 것입니다.
또한, Rust로 컴파일된 네이티브 바이너리를 사용할 수 없는 환경을 대비해 Node.js로 직접 실행되는 '폴백(Fallback)' 기능까지 내장되어 있어, 다양한 환경에서 높은 안정성과 신뢰성을 보장합니다.
- 기계가 아닌 사람처럼: 시맨틱 로케이터로 웹과 대화하기
agent-browser는 Ref 시스템 외에도 '시맨틱 로케이터(Semantic Locators)'라는 인간 친화적인 요소 탐색 방식을 제공합니다. 이는 복잡한 CSS 선택자나 XPath와 달리, 사람이 웹페이지를 인식하는 방식과 매우 유사합니다.예를 들어, "Submit"이라는 텍스트를 가진 버튼을 클릭하고 싶을 때, 기존 방식이라면 button#submit.btn.btn-primary 같은 복잡한 선택자를 사용해야 했을지 모릅니다. 하지만 시맨틱 로케이터를 사용하면 다음과 같이 명령할 수 있습니다.
- agent-browser find role button click --name "Submit"
- agent-browser find label "Email" fill "test@test.com"
이 방식은 단순히 코드를 읽기 쉽게 만드는 것을 넘어섭니다. 버튼의 클래스나 ID가 바뀌는 사소한 디자인 변경에도 스크립트는 깨지지 않습니다. 왜냐하면 이 명령어는 요소가 '어떻게 보이는가'가 아니라 '무엇을 하는가'(역할, 이름, 레이블)라는 의도에 집중하기 때문입니다. 이는 AI가 웹의 구조적 의미를 이해하고 더 견고한 자동화를 수행하도록 돕는 강력한 기능입니다.
- 전문가를 위한 설계: 격리된 세션과 안전한 인증 관리
agent-browser는 단순한 실험용 도구가 아닌, 프로덕션 환경에서의 복잡한 요구사항까지 고려하여 설계되었습니다. 이를 가장 잘 보여주는 기능이 바로 '세션'과 '인증' 관리 기능입니다.
--session 옵션을 사용하면, 완전히 격리된 여러 브라우저 인스턴스를 동시에 실행할 수 있습니다. 각 세션은 자신만의 쿠키, 로컬 스토리지, 방문 기록을 가지므로 여러 AI 에이전트가 서로의 작업에 전혀 간섭하지 않고 독립적으로 웹 서핑을 할 수 있습니다.
더 강력한 기능은 --headers 옵션입니다. 이 옵션을 사용하면 웹사이트의 로그인 UI를 일일이 거치지 않고, 특정 도메인에 대한 인증 토큰(예: Bearer 토큰)을 HTTP 헤더에 직접 설정할 수 있습니다. 놀라운 점은 이 헤더가 설정된 URL의 오리진(origin, 예: api.example.com)에 대한 요청에만 적용되고, 다른 도메인으로의 요청에는 절대 전송되지 않는다는 것입니다.
이러한 안전한 설계는 여러 전문적인 워크플로우를 가능하게 합니다:
- 복잡한 로그인 UI를 건너뛰고 즉시 인증 상태로 시작
- 각기 다른 세션에서 인증 토큰을 교체하며 여러 사용자 역할을 테스트
- 개발 중 보호된 API 엔드포인트와 직접 상호작용
이러한 철저한 보안 설계는 agent-browser가 보안이 중요한 실제 업무 환경에서도 신뢰하고 사용할 수 있는 전문가용 도구임을 증명합니다.
- 웹페이지만을 위한 것이 아니다: CDP 모드로 모든 브라우저 기반 앱 제어
agent-browser의 가장 놀라운 기능 중 하나는 CDP(Chrome DevTools Protocol) 모드입니다. CDP는 브라우저의 핵심 기능과 직접 통신할 수 있게 해주는 강력한 프로토콜입니다.
--cdp 옵션을 사용하면 agent-browser는 새로운 브라우저를 시작하는 대신, 이미 실행 중인 브라우저 인스턴스에 연결하여 제어권을 가져올 수 있습니다. 이는 이 도구의 활용 범위를 웹사이트 자동화 너머로 폭발적으로 확장시킵니다.
이 기능을 통해 제어할 수 있는 대상은 다음과 같습니다.
- Electron으로 만들어진 데스크톱 앱 (예: Slack, VS Code)
- 이미 원격 디버깅이 활성화된 일반 Chrome/Chromium 브라우저
- WebView2를 사용하는 윈도우 애플리케이션
- CDP 엔드포인트를 노출하는 모든 브라우저 기반 환경
웹페이지만을 제어할 것이라는 예상을 깨고, 사실상 브라우저 기술을 기반으로 하는 거의 모든 애플리케이션을 자동화할 수 있는 예상치 못한 깊이와 다재다능함을 보여주는 기능입니다.
결론: 웹과 상호작용하는 AI의 새로운 미래를 엿보다
지금까지 살펴본 5가지 기능—깨지기 쉬운 선택자를 대체하는 'Ref' 시스템, 성능과 안정성을 모두 잡은 하이브리드 아키텍처, 인간의 언어와 닮은 시맨틱 로케이터, 전문가를 위한 세션 및 인증 관리, 그리고 웹의 경계를 넘어서는 CDP 모드—은 agent-browser가 AI 시대의 웹 자동화를 위해 얼마나 깊이 고민하고 설계되었는지를 명확히 보여줍니다.
이 도구는 AI 에이전트가 더 이상 웹을 수동적인 정보의 집합이 아닌, 능동적으로 상호작용하고 작업을 수행할 수 있는 거대한 플랫폼으로 인식하게 만드는 중요한 첫걸음입니다.
미래의 AI 에이전트들이 오늘날 우리가 상상하지 못했던 새로운 방식으로 웹을 활용하게 될 그 변화의 서막 속에서, agent-browser는 바로 그 시작을 알리는 신호탄입니다.
