2026년 11월 8일 확인 · vercel-labs/agent-browser · 깃허브 별 46,920개(약 4.7만) · Apache-2.0 라이선스 · 직접 실행한 버전 0.41.2(Windows)

바이브코딩으로 사이트를 만들다 보면 AI가 "회원가입 기능 다 만들었어요"라고 답했는데, 막상 눌러 보면 버튼이 반응하지 않는 일이 생깁니다. agent-browser는 이런 일을 줄이려고 Vercel Labs가 만든 무료 오픈소스 도구입니다. AI 에이전트가 브라우저를 직접 열고, 버튼을 직접 누르고, 결과를 다시 읽어서 정말 됐는지 확인하게 해 줍니다.
AI는 다 됐다는데 왜 버튼이 안 눌릴까요?
AI가 코드만 보고 일을 끝냈기 때문인 경우가 많습니다. 코드에는 버튼이 있고 클릭하면 실행될 함수도 연결돼 있지만, 실제 화면에서는 쿠키 안내 띠나 팝업, 위에 붙은 메뉴가 버튼을 덮고 있을 수 있습니다. 코드만 읽어서는 이런 겹침을 알기 어렵습니다.

위 화면은 이 문제를 보여 주려고 우리가 직접 만든 예시 사이트('오늘의 빵' 가입 페이지)입니다. 아래쪽 쿠키 안내 띠가 회원가입 버튼을 덮고 있어서, 사람이 눌러도 버튼 대신 띠가 눌립니다. 에이전트가 실제 브라우저에서 한 번 눌러 보기만 해도 찾을 수 있는 문제입니다.
agent-browser는 무엇을 하나요?
AI 에이전트에게 명령 한 줄씩으로 움직이는 브라우저를 주는 도구입니다. README(11월 8일 확인)에 따르면 Rust로 만든 명령줄 도구(CLI)이고, 명령과 명령 사이에 브라우저가 열린 채로 유지돼서 한 단계가 짧은 명령 한 번으로 끝납니다.
일하는 순서는 네 단계입니다.
open으로 페이지를 엽니다.snapshot -i로 화면을 글로 읽습니다. 누를 수 있는 요소만 골라@e1,@e2같은 번호(ref)를 붙여 줍니다.click @e5처럼 그 번호로 누르거나,fill로 입력합니다.get url이나get text로 결과를 다시 읽어 정말 됐는지 확인합니다.

위 화면은 예시 사이트에서 직접 실행한 결과를 옮긴 것입니다. snapshot -i 한 번에 메뉴 링크 3개, 제목, 이메일 · 비밀번호 칸, 약관 체크 칸, 회원가입 버튼, 쿠키 안내의 확인 버튼까지 9개 요소에 번호가 붙었습니다. 에이전트는 화면을 사진으로 보는 대신 이 짧은 글을 읽고 다음 행동을 고릅니다.

가려진 버튼은 정말 실패로 알려 주나요?
네, 직접 돌려 보니 실패로 알려 줬습니다. README에는 클릭 대상이 숨겨졌거나, 꺼져 있거나, 화면 밖에 있거나, 쿠키 안내 같은 다른 요소에 가려져 있으면 성공이라고 보고하지 않고 실패한다고 적혀 있습니다. 이 동작을 예시 사이트에서 확인했습니다.

이메일 · 비밀번호 입력(fill)과 약관 체크(check)는 ✓ Done으로 끝났습니다. 그런데 회원가입 버튼(@e5)을 누르자 ✗ Element '@e5' is covered by <div#cookie>라는 실패 메시지가 나왔습니다. 쿠키 안내 띠에 가려져 있으니 그 요소를 먼저 닫으라는 안내까지 붙어 있었습니다.

안내대로 쿠키 띠의 확인 버튼(@e6)을 먼저 누르고 다시 회원가입 버튼을 누르자 이번에는 ✓ Done이 나왔습니다. 마지막으로 get text "#done"으로 화면 글자를 읽어 "가입 완료! 환영합니다"가 실제로 떴는지까지 확인했습니다. "눌렀다"에서 끝나지 않고 "눌러서 원하는 결과가 나왔다"까지 확인하는 흐름입니다.
설치와 연결은 어떻게 하나요?
설치는 명령 두 줄, 에이전트 연결은 한 줄입니다. 아래는 README(11월 8일 확인)의 순서이고, Windows(x64)에서 1단계를 직접 해 봤습니다.
- 설치:
npm install -g agent-browser, 그다음agent-browser install(처음 한 번 Chrome for Testing을 받습니다). 설치 없이 써 보려면npx agent-browser open example.com도 됩니다. - 에이전트에 스킬 추가:
npx skills add vercel-labs/agent-browser. 또는 프로젝트의AGENTS.md에 안내를 넣거나, MCP를 쓰는 도구라면agent-browser mcp로 MCP 서버를 켭니다. - 에이전트에게 말하기: "내 사이트 회원가입 버튼까지 눌러 보고 결과 알려 줘."


| 항목 | 내용 |
|---|---|
| 준비물 | Node.js(npm), AI 코딩 에이전트, 테스트할 내 사이트 주소 |
| 지원 OS | macOS(ARM64 · x64), Linux(ARM64 · x64), Windows(x64) |
| 비용 · 라이선스 | 무료, Apache-2.0 |
| 핵심 명령 | open · snapshot -i · click @e1 · fill · get url · get text · close |
| 에이전트 연결 | npx skills add · AGENTS.md 안내 · agent-browser mcp |
쓸 때 주의할 점은?
내 사이트나 테스트용 주소에서만 쓰는 것이 원칙입니다. 브라우저를 자동으로 움직이는 도구라서, 남의 사이트에 자동으로 가입하거나 내용을 긁어 오는 데 쓰면 그 사이트의 약관을 어기거나 법적인 문제가 생길 수 있습니다.
- 진짜 계정 · 비밀번호 대신 테스트용 계정을 쓰세요. 우리 예시도
[email protected]과 가짜 비밀번호만 넣었습니다. - 처음 실행할 때 우리 PC에서는 "설치된 Chrome이 최신이 아니다"라는 경고가 나왔습니다. 안내대로
agent-browser install로 Chrome for Testing을 받아 두면 됩니다. - 에이전트가 실패를 알려 줘도 원인을 고치는 건 별개입니다. 쿠키 띠가 버튼을 덮는다면 띠의 위치나 크기를 고치는 코드 수정이 필요합니다.
한 번에 정리
- agent-browser는 AI 에이전트가 브라우저를 직접 열어 화면을 글로 읽고(
snapshot), 번호(@e1)로 누르고, 결과를 다시 읽어 확인하게 해 주는 무료 CLI입니다. - 숨겨졌거나 꺼졌거나 가려진 버튼은 성공이 아니라 실패로 알려 줍니다. 예시 사이트에서 쿠키 띠에 가려진 회원가입 버튼을 실제로 찾아냈습니다.
- 따라 하기: 설치 두 줄 →
npx skills add vercel-labs/agent-browser→ "회원가입 버튼까지 눌러 보고 결과 알려 줘". - 깃허브 별 약 4.7만, Apache-2.0, Windows x64 지원(11월 8일 확인).
- 내 사이트 · 테스트 주소에서만, 테스트 계정으로 쓰세요.
출처
- vercel-labs/agent-browser 저장소와 README(2026년 11월 8일 확인): https://github.com/vercel-labs/agent-browser
- 별 수 · 라이선스: GitHub API(2026년 11월 8일 값)
- 예시 화면: 우리가 만든 테스트 사이트에서 agent-browser 0.41.2를 직접 실행한 출력(2026년 11월 8일)
- 영상: AItoZ 유튜브 쇼츠 'AI 브라우저 자동화 무료 — agent-browser'
