OpenClaw
사용 사례중급15 min

OpenClaw로 브라우저 자동화하기

OpenClaw로 브라우저 작업을 자동화하세요. 웹 스크래핑, 폼 입력, 스크린샷 캡처, 데이터 추출, 다단계 웹 워크플로우까지 — 모두 AI로 처리합니다.

최종 업데이트: 2026-03-31

무엇을 구축하나요

OpenClaw를 활용한 브라우저 자동화 환경을 구성합니다:

  1. 웹사이트 탐색 — 페이지 열기, 버튼 클릭, 폼 입력, 콘텐츠 스크롤
  2. 데이터 추출 — 웹 페이지, 테이블, 대시보드에서 구조화된 데이터를 스크래핑
  3. 스크린샷 캡처 — 전체 페이지 또는 특정 요소의 스크린샷을 리포팅용으로 캡처
  4. 다단계 워크플로우 실행 — 브라우저 작업을 연결하여 복잡한 자동화 시퀀스를 구성

이 가이드를 완료하면 자연어로 원하는 작업을 설명하는 것만으로 모든 브라우저 작업을 자동화할 수 있습니다.

AI 기반 브라우저 자동화가 필요한 이유

기존 브라우저 자동화 도구(Selenium, Puppeteer, Playwright)는 강력하지만 모든 워크플로우마다 코드를 작성하고 유지해야 합니다. 웹사이트 레이아웃이 바뀌면 스크립트가 깨지고, 새로운 워크플로우가 필요하면 새 스크립트를 작성해야 합니다.

AI 기반 브라우저 자동화는 이를 근본적으로 바꿉니다:

  • 자연어 지시 — 셀렉터와 클릭 핸들러를 작성하는 대신 원하는 것을 말로 설명합니다
  • 자가 복구 — 스크립트 업데이트 없이 AI가 UI 변경에 자동으로 적응합니다
  • 코드 유지보수 불필요 — 워크플로우는 구현이 아닌 의도로 정의됩니다
  • 빠른 프로토타이핑 — 몇 시간이 아니라 몇 분 만에 새로운 자동화를 설정합니다
  • 시각적 이해 — AI가 페이지 레이아웃을 해석하고, 스크린샷에서 텍스트를 읽고, 보이는 내용을 기반으로 판단합니다

사전 준비

  • OpenClaw 설치 및 설정 완료 (시작 가이드)
  • Chrome 또는 Chromium 설치 완료
  • Node.js 18+

1단계: 필요한 Skills 설치

bash
# 1. 브라우저 제어
npx clawhub@latest install browser-use

# 2. 웹 데이터 추출
npx clawhub@latest install web-scraper

# 3. 스크린샷 캡처
npx clawhub@latest install screenshot

2단계: 브라우저 설정 확인

browser-use Skill은 Chrome/Chromium 설치가 필요합니다:

bash
clawhub inspect browser-use

호환 가능한 브라우저를 확인하고 감지된 경로를 표시합니다. Chrome이 자동으로 감지되지 않으면 Skill 설정에서 경로를 수동으로 지정하세요.

3단계: 브라우저 자동화 실행

예시 1: 대시보드에서 데이터 추출

매일 아침 웹 대시보드에서 지표를 가져와야 하는 경우:

https://analytics.example.com을 열고, 저장된 자격 증명으로 로그인한 다음,
Daily Metrics 페이지로 이동하여 어제의 KPI가 표시된 테이블을
Markdown 표로 추출해 줘.

브라우저 Skill이 로그인, 탐색, 데이터 추출을 처리합니다. 결과는 리포트나 Slack에 바로 붙여넣을 수 있는 깔끔한 Markdown 표입니다.

예시 2: 경쟁사 가격 페이지 모니터링

competitor.com/pricing에 접속해서 가격 표의 스크린샷을 캡처하고,
모든 플랜 이름, 가격, 기능 목록을 JSON 형식으로 추출해 줘.

출력 예시:

json
{
  "plans": [
    {
      "name": "Starter",
      "price": "$29/month",
      "features": ["5 users", "10GB storage", "Email support"]
    },
    {
      "name": "Professional",
      "price": "$79/month",
      "features": ["25 users", "100GB storage", "Priority support", "API access"]
    },
    {
      "name": "Enterprise",
      "price": "Custom",
      "features": ["Unlimited users", "Unlimited storage", "24/7 support", "SSO", "Audit logs"]
    }
  ]
}

예시 3: 폼 작성

expenses.company.com의 사내 경비 보고 폼을 열고,
date = 오늘, category = "Software", amount = $49.99,
description = "ClawHub Pro subscription"을 입력한 후 제출해 줘.

예시 4: 다단계 리서치 워크플로우

1. Google에서 "best CI/CD tools 2026 comparison" 검색
2. 상위 3개 결과 열기
3. 각 기사에서 주요 비교 항목 추출
4. 요약 표로 정리

4단계: 리포팅을 위한 스크린샷

screenshot Skill은 리포팅과 모니터링을 위한 시각적 증거를 캡처합니다:

bash
# 전체 페이지 스크린샷
clawhub run screenshot --url "https://status.example.com" --full-page

# 특정 요소
clawhub run screenshot --url "https://grafana.example.com/d/api-latency" --selector ".panel-container"

# 여러 페이지
clawhub run screenshot --urls "url1,url2,url3" --output "./screenshots/"

정기 시각 모니터링

cron과 결합하여 매일 스냅샷을 캡처합니다:

bash
clawhub run cron --schedule "0 9 * * *" --task "screenshot --url https://status.example.com --output ~/snapshots/{{date}}.png"

고급: 복잡한 워크플로우

브라우저 작업 체이닝

안정적으로 실행해야 하는 다단계 워크플로우의 경우:

yaml
# .openclaw/browser-workflow.yml
workflow:
  name: "Daily Metrics Collection"
  steps:
    - action: navigate
      url: "https://analytics.example.com"
    - action: login
      credentials: "analytics_dashboard"
    - action: click
      target: "Daily Report tab"
    - action: wait
      condition: "table is fully loaded"
    - action: extract
      target: "metrics table"
      format: "csv"
    - action: screenshot
      target: "full page"
    - action: save
      output: "~/reports/{{date}}-metrics.csv"

인증 처리

로그인이 필요한 사이트의 경우:

yaml
credentials:
  analytics_dashboard:
    url: "https://analytics.example.com/login"
    username_field: "#email"
    password_field: "#password"
    # 자격 증명은 OpenClaw의 보안 자격 증명 저장소에 저장됩니다

clawhub credentials set analytics_dashboard를 사용하여 로그인 정보를 안전하게 저장합니다.

SPA 및 동적 콘텐츠 처리

최신 싱글 페이지 애플리케이션은 콘텐츠를 동적으로 로드합니다. 브라우저 Skill은 다음을 자동으로 처리합니다:

  • 네트워크 요청 완료 대기
  • 페이지가 완전히 렌더링되었는지 감지
  • 콘텐츠가 아직 로드되지 않았으면 재시도

특히 느린 페이지의 경우 명시적인 대기 조건을 설정할 수 있습니다:

대시보드로 이동하고 "Revenue" 차트가 표시될 때까지 기다린 후 스크린샷을 찍어 줘.

문제 해결

브라우저가 실행되지 않는 경우

  • Chrome/Chromium이 설치되어 있는지 확인합니다: which google-chrome 또는 which chromium
  • Skill 설정의 경로를 확인합니다: clawhub inspect browser-use
  • 헤드리스 서버에서는 설정에서 --no-sandbox 플래그가 활성화되어 있는지 확인합니다

페이지 콘텐츠가 로드되지 않는 경우

  • 일부 페이지는 JavaScript가 필요합니다 — 브라우저 Skill은 전체 브라우저를 실행하므로 기본적으로 동작해야 합니다
  • 쿠키 동의 배너가 콘텐츠를 차단하고 있는지 확인합니다
  • 해당 URL이 사용자 환경에서 접근 가능한지 확인합니다 (VPN, 방화벽)

스크린샷이 비어 있거나 불완전한 경우

  • 캡처 전 대기 시간을 추가합니다: 페이지가 아직 렌더링 중일 수 있습니다
  • 스크롤이 필요한 페이지에는 --full-page 플래그를 사용합니다
  • 페이지에 인증이 필요한지 확인합니다

추출된 데이터가 정확하지 않은 경우

  • 추출할 요소를 더 구체적으로 지정합니다
  • 시각적 참조를 사용합니다: "두 번째 섹션의 표" 또는 "오른쪽의 가격 카드"
  • 복잡한 페이지의 경우 먼저 스크린샷을 찍어 페이지 상태를 확인한 후 추출합니다

자주 묻는 질문

아닙니다. 기존 자동화 도구는 명시적인 셀렉터(`document.querySelector('.price-table')`)로 코드를 작성해야 합니다. OpenClaw의 브라우저 자동화는 AI를 사용하여 페이지를 시각적, 의미론적으로 이해합니다 — 자연어로 원하는 것을 설명하면 AI가 페이지와 상호작용하는 방법을 스스로 파악합니다. 따라서 UI 변경에 훨씬 강하고 설정도 빠릅니다.

가능합니다. 브라우저 Skill은 인증이 필요한 사이트를 위한 자격 증명 관리를 지원합니다. `clawhub credentials set`으로 자격 증명을 안전하게 저장하면 Skill이 로그인 과정을 자동으로 처리합니다. 표준 사용자명/비밀번호 폼, OAuth 리다이렉트, 기본 인증을 지원합니다.

웹 스크래핑의 합법성은 사이트의 이용 약관, 수집하는 데이터의 종류, 그리고 관할 지역에 따라 달라집니다. 일반적으로 공개 데이터를 개인 용도로 스크래핑하는 것은 허용됩니다. 항상 사이트의 `robots.txt`와 이용 약관을 확인하세요. 개인정보, 저작권 콘텐츠, 또는 인증 뒤의 데이터를 허가 없이 스크래핑하지 마세요. OpenClaw는 CAPTCHA나 접근 제한을 우회하지 않습니다.

브라우저 Skill은 CAPTCHA를 자동으로 풀지 않습니다. 사이트에서 CAPTCHA가 표시되면 워크플로우가 일시 중지되고 사용자에게 알림을 보냅니다. 정기적으로 접속하는 사이트의 경우 수동으로 한 번 로그인하고 세션 쿠키를 저장하면 반복적인 CAPTCHA를 피할 수 있습니다.

가능합니다. 브라우저 Skill은 Chrome을 화면 없이 실행하는 헤드리스 모드를 지원합니다. 디스플레이가 없는 서버에서는 이것이 기본값입니다. 설정에서 `headless: true`로 지정하거나 `--headless` 플래그를 전달하세요. 모든 기능이 헤드리스 모드에서 동일하게 작동합니다.

각 브라우저 인스턴스는 약 200-500MB의 RAM을 사용합니다. 여러 워크플로우를 동시에 실행하면 비례적으로 메모리 사용량이 증가합니다. CPU 사용량은 페이지 렌더링과 스크린샷 캡처 시 급증하지만 대기 중에는 낮습니다. 예약 작업의 경우 브라우저가 각 실행마다 시작되고 종료되므로 실행 중에만 리소스가 사용됩니다.

관련 사용 사례