클로드스킬마트스킬 둘러보기스킬이 뭐예요?
← 목록으로

agent-browser 브라우저 자동화

Claude가 실제 브라우저를 열어 페이지 탐색·폼 입력·스크린샷·데이터 추출까지 자동으로 처리하게 해주는 스킬입니다.

자동화·워크플로중급★ 67,531⑂ 5,507AI 점수 9/10마지막 업데이트: 2026. 8. 9.

무엇을 해주나

agent-browser CLI를 감싸서 Claude Code가 실제 Chromium 브라우저를 조작할 수 있게 합니다. 핵심 흐름은 열기 → 스냅샷 → 참조(@e1)로 조작입니다.

  • 페이지 이동, 뒤로/앞으로, 새로고침, 탭·창·iframe 전환
  • 접근성 트리 스냅샷으로 클릭 가능한 요소 목록과 @e1 같은 참조 획득
  • 클릭·입력·체크·드롭다운·드래그·파일 업로드 등 전체 인터랙션
  • 스크린샷(전체 페이지, 번호 라벨 주석), PDF 저장, 영상 녹화
  • 쿠키/localStorage/sessionStorage 조작, 로그인 상태 저장·재사용
  • 네트워크 요청 가로채기·모킹, 콘솔 로그·에러 확인, 트레이스·프로파일링
  • 스냅샷/스크린샷/URL 간 diff 비교로 시각적 회귀 테스트
  • 디바이스 에뮬레이션(iPhone 등), iOS 시뮬레이터, 클라우드 브라우저 연동

이런 분께 추천

  • 웹 애플리케이션 E2E 테스트를 자연어로 시키고 싶은 개발자
  • 로그인이 필요한 사이트에서 반복 작업을 자동화하려는 분
  • 디자인 변경 전후 화면을 픽셀 단위로 비교하고 싶은 프런트엔드 담당자
  • 공개 웹 페이지에서 데이터를 수집·정리해야 하는 리서처

활용 예시

  1. 로그인 폼 테스트: "example.com/login에 접속해서 테스트 계정으로 로그인하고 대시보드가 뜨는지 확인해줘" → open → snapshot -i → fill @e1/@e2 → click @e3 → wait --url "**/dashboard"
  2. 인증 상태 재사용: 한 번 로그인한 뒤 state save auth.json으로 저장하고, 이후 작업에서는 state load auth.json으로 로그인 과정을 건너뜁니다.
  3. 시각 회귀 확인: diff url https://old.example.com https://new.example.com --screenshot로 배포 전후 화면 차이를 이미지로 뽑아냅니다.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 code-yeongyu/oh-my-openagent 의 packages/omo-opencode/src/features/builtin-skills/agent-browser 폴더를 내 ~/.claude/skills/agent-browser/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/code-yeongyu/oh-my-openagent.git /tmp/omo && mkdir -p ~/.claude/skills && cp -r /tmp/omo/packages/omo-opencode/src/features/builtin-skills/agent-browser ~/.claude/skills/ && bun add -g agent-browser && agent-browser install

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. Bun이 설치돼 있는지 확인합니다: bun --version (없다면 curl -fsSL https://bun.sh/install | bash)
  2. 브라우저 CLI를 전역 설치합니다: bun add -g agent-browser
  3. 브라우저 엔진을 내려받습니다: agent-browser install (리눅스라면 agent-browser install --with-deps)
  4. 스킬 저장소를 클론합니다: git clone https://github.com/code-yeongyu/oh-my-openagent.git /tmp/omo
  5. 스킬 폴더를 복사합니다: mkdir -p ~/.claude/skills && cp -r /tmp/omo/packages/omo-opencode/src/features/builtin-skills/agent-browser ~/.claude/skills/
  6. Claude Code를 재시작한 뒤 "브라우저로 example.com 열고 스크린샷 찍어줘"처럼 요청해 동작을 확인합니다.
  7. 자주 쓰는 옵션은 ~/.agent-browser/config.json에 {"headed": true}처럼 저장해두면 편합니다.
GitHub에서 원본 보기 ↗라이선스: NOASSERTION