AI & IT · AI 뉴스 ·

agent-browser 사용법: 클로드 코드로 웹 브라우저 자동화하기

웹사이트에 접속하고, 버튼을 클릭하고, 로그인 폼을 입력하는 작업을 AI가 직접 수행하게 만들 수 있을까요? agent-browser를 사용하면 Claude Code에서 명령어만으로 실제 웹 브라우저를 제어하고 웹사이트 테스트와 반복 작업을 자동화할 수 있습니다.

agent-browser는 Vercel Labs에서 공개한 AI 에이전트용 브라우저 자동화 CLI 도구입니다. 웹페이지를 읽고, 화면의 요소를 찾아 클릭하거나 입력하는 작업을 터미널 명령으로 처리할 수 있습니다.

⚡ 핵심 요약

  • 설치: npm install -g agent-browser

  • 브라우저 준비: agent-browser install

  • Claude Code 연동: npx skills add vercel-labs/agent-browser

  • 주요 기능: 웹페이지 접속, 버튼 클릭, 입력폼 작성, 데이터 추출, 스크린샷 촬영

  • 활용 분야: 웹사이트 테스트, 업무 자동화, UI 검증, 반복적인 웹 작업

agent-browser란 무엇인가요?

일반적인 AI 코딩 도구는 소스코드를 작성하고 수정하는 데 강점이 있습니다. 하지만 실제 브라우저에서 웹사이트가 정상적으로 작동하는지 확인하려면 별도의 브라우저 자동화 도구가 필요합니다.

agent-browser는 이 과정을 AI가 수행할 수 있도록 연결해 줍니다.

특히 웹페이지의 구조를 텍스트 형태로 읽어오는 snapshot 기능이 유용합니다. AI는 페이지에 있는 버튼과 입력창 등을 확인한 다음, 해당 요소를 지정해 클릭하거나 내용을 입력할 수 있습니다.

Claude Code에 agent-browser 설치하기

먼저 Node.js와 npm이 설치되어 있는지 확인하세요. 이후 터미널에서 다음 명령어를 실행합니다.

npm install -g agent-browser
agent-browser install

첫 번째 명령은 agent-browser를 전역 설치하고, 두 번째 명령은 자동화에 사용할 Chrome 브라우저를 준비합니다.

이어서 Claude Code에서 사용할 스킬을 설치합니다.

npx skills add vercel-labs/agent-browser

이 명령은 Claude Code가 agent-browser의 사용법을 이해하고 필요한 명령을 활용하도록 안내하는 스킬을 설치합니다.

설치 후에는 Claude Code를 실행하고 웹 브라우저 자동화 작업을 요청하면 됩니다.

실제 웹사이트 자동화하는 방법

기본적인 사용 흐름은 웹사이트 접속 → 페이지 구조 확인 → 요소 선택 → 작업 실행 → 결과 확인 순서입니다.

먼저 웹사이트를 열어보겠습니다.

agent-browser open https://example.com

웹페이지가 열리면 다음 명령으로 페이지의 상호작용 가능한 요소를 확인합니다.

agent-browser snapshot -i

출력 결과에는 버튼이나 입력창 등의 정보와 함께 @e1, @e2 같은 참조 번호가 표시됩니다.

이 번호를 이용하면 원하는 요소를 지정할 수 있습니다.

agent-browser click @e1
agent-browser fill @e2 "검색할 내용"

작업 후에는 다시 snapshot을 실행해 변경된 화면을 확인하는 것이 좋습니다.

Claude Code에서 이렇게 활용해 보세요

agent-browser를 설치했다면 Claude Code에 자연어로 작업을 요청할 수 있습니다.

예를 들어 다음과 같이 입력할 수 있습니다.

agent-browser를 사용해서 우리 웹사이트에 접속해 줘.

메인 페이지의 메뉴를 확인하고
각 메뉴를 클릭했을 때 정상적으로 이동하는지 테스트해 줘.

오류가 발생하면 해당 페이지와 문제를 정리하고
주요 화면은 스크린샷으로 저장해 줘.

이처럼 개발자가 직접 브라우저를 조작하지 않아도 AI가 테스트 절차를 진행하도록 만들 수 있습니다.

사용할 때 알아둘 점

agent-browser는 단순한 페이지 수집 도구가 아니라 실제 브라우저에서 동작을 수행하는 도구입니다. 따라서 로그인, 게시물 작성, 데이터 삭제, 결제 등 중요한 작업은 실행 전에 권한과 동작 범위를 확인해야 합니다.

또한 웹페이지에 표시되는 내용은 신뢰할 수 없는 입력으로 취급해야 합니다. 개인정보나 인증정보를 자동화 과정에 사용할 때도 주의가 필요합니다.

agent-browser는 Claude Code의 활용 범위를 넓혀주는 도구입니다. 코드 작성뿐 아니라 실제 웹사이트 접속, 기능 테스트, 화면 검증까지 자동화하고 싶다면 먼저 설치한 다음 agent-browser open 명령으로 간단한 브라우저 작업부터 실행해 보세요.