Claude Code + agent-browser: 반복적인 웹 작업 자동화하는 방법

웹사이트에 접속해 정보를 확인하고, 버튼을 클릭하고, 입력 양식을 작성하는 작업을 반복하고 있다면 Claude Code와 agent-browser를 활용해 자동화할 수 있습니다.

agent-browser는 AI 에이전트가 실제 브라우저를 제어할 수 있도록 도와주는 브라우저 자동화 도구입니다. Claude Code에 설치하면 웹페이지 탐색, 데이터 확인, 폼 입력, 버튼 클릭, 스크린샷 촬영 및 웹사이트 테스트 등을 자연어 지시와 명령어로 처리할 수 있습니다.

특히 매일 반복하는 관리자 페이지 작업이나 웹사이트 테스트, 데이터 수집 업무를 자동화하려는 개발자에게 유용합니다.

📌 핵심 요약

• agent-browser는 Chrome 기반 브라우저를 명령어로 제어하는 AI 에이전트용 도구입니다.

• Claude Code Skill을 설치하면 브라우저 작업 방법과 명령어 사용법을 AI가 참고할 수 있습니다.

• 설치는 npm install -g agent-browser와 npx skills add vercel-labs/agent-browser를 활용합니다.

• snapshot, click, fill 등의 명령어로 웹페이지를 탐색하고 조작할 수 있습니다.

• 로그인, 결제, 게시물 삭제 등 중요한 작업은 실행 전에 직접 확인하는 것이 안전합니다.

🤖 agent-browser란 무엇인가요?

agent-browser는 Vercel Labs에서 공개한 AI 에이전트용 브라우저 자동화 CLI(Command Line Interface)입니다.

일반적인 웹 자동화가 미리 작성한 코드에 따라 움직인다면, agent-browser는 AI가 웹페이지의 구조를 확인하고 상황에 맞게 다음 행동을 결정하도록 지원합니다.

예를 들어 다음과 같은 작업이 가능합니다.

• 웹사이트에 접속하고 특정 메뉴 찾기

• 검색창에 키워드 입력하기

• 로그인 페이지의 입력 항목 채우기

• 버튼이나 링크 클릭하기

• 웹페이지의 텍스트와 정보 추출하기

• 화면 캡처 및 웹 애플리케이션 테스트

핵심은 AI가 페이지를 확인한 다음 실제 화면의 요소를 찾아 조작한다는 점입니다.

⚙️ Claude Code에 agent-browser 설치하기

설치는 크게 브라우저 자동화 도구와 Claude Code Skill을 준비하는 과정으로 나뉩니다.

먼저 터미널에서 agent-browser를 설치합니다.

npm install -g agent-browser

설치가 끝나면 자동화에 사용할 Chrome 브라우저를 설치합니다.

agent-browser install

이 명령은 Chrome for Testing을 내려받아 자동화 환경을 준비합니다.

다음으로 Claude Code에서 agent-browser를 활용할 수 있도록 Skill을 설치합니다.

npx skills add vercel-labs/agent-browser

이 과정에서 Claude Code 프로젝트에 .claude/skills/agent-browser/SKILL.md 형태의 안내 파일이 추가됩니다.

이 Skill은 실제 브라우저 자동화 작업에 필요한 지침을 연결해 주는 역할을 합니다. 따라서 CLI만 설치하는 것과 Skill까지 설치하는 것은 차이가 있습니다.

설치가 끝났다면 터미널에서 다음 명령어로 사용 가능한 기능을 확인할 수 있습니다.

agent-browser --help

🖥️ 실제 웹사이트 자동화는 어떻게 진행할까요?

agent-browser의 기본 작업 방식은 페이지 열기 → 화면 구조 확인 → 요소 조작 → 결과 재확인 순서입니다.

먼저 웹사이트를 엽니다.

agent-browser open https://example.com

다음으로 현재 페이지의 상호작용 가능한 요소를 확인합니다.

agent-browser snapshot -i

이 명령은 버튼, 링크, 입력창 등의 정보를 표시하고 @e1, @e2 같은 참조 번호를 부여합니다.

이제 해당 번호를 이용해 원하는 작업을 실행할 수 있습니다.

agent-browser click @e1

입력창에 내용을 작성하려면 다음과 같이 사용합니다.

agent-browser fill @e2 "검색할 키워드"

페이지가 변경되었다면 다시 snapshot -i를 실행해 현재 화면을 확인하는 것이 좋습니다. 이전 화면에서 사용한 참조 번호가 페이지 변경 후에도 유효하다고 가정해서는 안 됩니다.

💡 어떤 반복 업무를 자동화할 수 있을까요?

실무에서는 다음과 같은 작업에 활용할 수 있습니다.

예를 들어 매일 관리자 페이지에 접속해 게시물 목록을 확인해야 한다면, Claude Code에 접속 주소와 확인할 항목, 결과 정리 형식을 알려주면 됩니다.

다만 웹사이트의 로그인 방식이나 보안 정책, CAPTCHA 등에 따라 자동화가 제한될 수 있습니다. 로그인 정보나 인증 코드를 무분별하게 자동 입력하도록 구성하는 것은 피해야 합니다.

🔐 자동화할 때 주의해야 할 점

브라우저 자동화는 실제 웹사이트에 영향을 줄 수 있으므로 권한과 실행 범위를 명확하게 설정해야 합니다.

특히 다음 사항을 권장합니다.

• 처음에는 테스트용 계정과 테스트 환경을 사용합니다.

• 게시물 삭제, 결제, 전송 등 되돌리기 어려운 작업은 실행 전에 확인합니다.

• 비밀번호와 API 키를 프롬프트나 코드에 직접 기록하지 않습니다.

• 웹페이지에서 가져온 텍스트를 신뢰할 수 있는 명령으로 취급하지 않습니다.

• 자동화 결과를 다시 확인하는 검증 단계를 포함합니다.

🚀 Claude Code에 직접 자동화를 요청해 보세요

설치가 완료되었다면 Claude Code에 다음과 같이 요청할 수 있습니다.

agent-browser를 사용해서 지정한 웹사이트에 접속해 줘.

1. 메인 페이지를 열어 줘.
2. 주요 메뉴와 페이지 구조를 확인해 줘.
3. 검색 기능이 정상적으로 동작하는지 테스트해 줘.
4. 오류가 발견되면 해당 화면과 오류 내용을 정리해 줘.
5. 임의로 데이터를 삭제하거나 수정하지 말고 결과만 보고해 줘.

이처럼 작업 목적과 순서, 금지할 행동을 함께 전달하면 결과를 확인하기가 훨씬 수월합니다.

Claude Code와 agent-browser의 조합은 단순한 웹페이지 탐색을 넘어 반복적인 브라우저 업무와 웹사이트 테스트를 자동화하는 데 활용할 수 있습니다.

우선 테스트용 웹사이트를 하나 지정하고 open과 snapshot -i 명령부터 실행해 보세요. 페이지를 읽고 조작하는 기본 흐름을 익히면 자신에게 필요한 자동화 작업으로 확장할 수 있습니다.