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

dev-browser (브라우저 자동화)

페이지 상태를 유지한 채 작은 스크립트로 웹사이트를 탐색·조작·스크래핑하는 Playwright 기반 브라우저 자동화 스킬.

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

무엇을 해주나

Playwright를 감싼 로컬 서버를 띄워 두고, Claude가 짧은 TypeScript 스크립트를 반복 실행하며 브라우저를 조작합니다. 핵심은 페이지 상태가 스크립트 실행 사이에도 유지된다는 점입니다. client.page("checkout")처럼 이름 붙인 페이지를 만들면 다음 스크립트에서 같은 페이지에 다시 붙어 이어서 작업할 수 있습니다.

  • 새 Chromium을 띄우는 표준 모드와, 이미 로그인된 사용자의 Chrome에 붙는 확장 모드 지원
  • getAISnapshot()으로 접근성 트리(YAML)를 받아 [ref=e5] 같은 참조로 요소 클릭 — CSS 셀렉터를 몰라도 조작 가능
  • 스크린샷(전체 페이지 포함), URL/제목/본문 확인 등 상태 점검 도구
  • 대량 데이터는 DOM 스크롤 대신 네트워크 요청을 가로채 재생하는 스크래핑 가이드 제공

이런 분께 추천

  • 웹 앱을 개발하며 로그인·폼 제출·결제 플로우를 반복 검증해야 하는 개발자
  • 셀렉터를 직접 찾기 귀찮거나 페이지 구조를 모르는 상태에서 자동화를 시작하려는 분
  • 로그인이 필요한 사이트에서 데이터를 추출하거나 반복 업무를 자동화하려는 분

활용 예시

  1. 로컬 앱 회귀 테스트: "localhost:3000 열고 테스트 계정으로 로그인한 뒤 대시보드 스크린샷 찍어줘" → 로그인 스크립트 실행 → 상태 로그 확인 → tmp/dashboard.png 저장.
  2. 레이아웃 모르는 사이트 조작: 뉴스 사이트에서 getAISnapshot()으로 링크 목록을 뽑고 selectSnapshotRef("news", "e8")로 원하는 기사만 클릭해 본문 추출.
  3. 페이지네이션 스크래핑: 첫 페이지에서 XHR 요청을 캡처해 API 스키마를 파악하고, 같은 요청을 페이지 파라미터만 바꿔 반복 호출해 전체 목록을 JSON으로 저장.

· · · 설치 가이드 · · ·

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/dev-browser 폴더를 내 ~/.claude/skills/dev-browser/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

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

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

  1. Node.js 18 이상과 npm이 설치되어 있는지 확인합니다 (node -v).
  2. 저장소를 클론합니다: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. 스킬 폴더를 복사합니다: mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/dev-browser ~/.claude/skills/
  4. 의존성을 설치합니다: cd ~/.claude/skills/dev-browser && npm i (Playwright 브라우저가 없으면 npx playwright install chromium도 실행).
  5. 스킬 폴더의 references/installation.md를 읽고 Windows 등 환경별 추가 설정을 확인합니다.
  6. 프로젝트 디렉터리에서 Claude Code를 실행하고 "example.com 열어서 스크린샷 찍어줘"처럼 요청하면 스킬이 서버(./skills/dev-browser/server.sh &)를 띄우고 Ready 메시지 후 동작합니다.
  7. 이미 로그인된 Chrome을 쓰려면 확장 모드를 사용하고, https://github.com/SawyerHood/dev-browser/releases 에서 확장을 설치·활성화한 뒤 npm run start-extension을 실행합니다.
GitHub에서 원본 보기 ↗라이선스: NOASSERTION