브라우저 자동화는 전통적으로 복잡한 스크립트를 작성하고, 셀렉터를 관리하며, 예측할 수 없는 페이지 상태를 처리해야 했습니다. Claude Code는 사용자가 원하는 바를 자연어로 설명하면 AI가 이를 정확한 브라우저 동작으로 번역하여 이 과정을 혁신합니다.
Claude Code 브라우저 자동화가 강력한 이유:
- 자연어 제어: 셀렉터 코드를 작성하는 대신 Claude에게 "로그인 버튼 클릭"이라고 말하세요.
- 지능형 적응: AI는 컨텍스트를 이해하고 페이지 변경 사항에 적응합니다.
- 시각적 이해: 접근성 트리 및 스냅샷 모드는 신뢰할 수 있는 요소 타겟팅을 제공합니다.
- 크로스 브라우저 지원: Chromium, Firefox 및 WebKit에서 작동합니다.
- 원활한 통합: 개발 워크플로우에 직접 실행됩니다.
💡
브라우저 워크플로우와 함께 API를 테스트하시나요? Apidog는 시각적 API 테스트 및 목 서버를 제공하여 Claude Code 브라우저 자동화를 보완합니다. 브라우저 테스트가 API 호출을 트리거할 때 Apidog는 전체 요청-응답 주기를 검증하는 데 도움을 줍니다. 종합적인 엔드투엔드 테스트 워크플로우를 구축하려면 Apidog를 무료로 사용해 보세요.
이 가이드는 기본 설정부터 MCP(모델 컨텍스트 프로토콜) 서버를 사용한 고급 자동화 패턴까지 모든 것을 다룹니다.
브라우저 자동화 옵션 이해
Claude Code는 다양한 사용 사례에 적합한 여러 브라우저 자동화 접근 방식을 제공합니다.
옵션 1: Playwright MCP (권장)
Microsoft의 Playwright MCP는 Claude Code를 사용한 브라우저 자동화를 위한 권장 접근 방식입니다. 다음을 제공합니다:
- 공식 지원: Microsoft에서 유지 관리
- 크로스 브라우저: Chromium, Firefox, WebKit에서 작동
- 접근성 트리 모드: 깨지기 쉬운 셀렉터 없이 신뢰할 수 있는 요소 타겟팅
- 활발한 개발: 정기적인 업데이트 및 개선
옵션 2: Puppeteer MCP (커뮤니티)
공식 Puppeteer MCP 패키지는 더 이상 사용되지 않지만, 커뮤니티에서 유지 관리하는 대안이 있습니다:
- 친숙한 API: Puppeteer를 이미 알고 있다면
- Chrome 중심: Chrome/Chromium에 최적화됨
- 레거시 지원: 기존 Puppeteer 기반 워크플로우용
옵션 3: Claude 컴퓨터 사용 API
브라우저를 넘어선 전체 데스크톱 제어의 경우:
- 완벽한 데스크톱 액세스: 모든 애플리케이션 제어
- 스크린샷 기반: 화면 콘텐츠에 대한 시각적 이해
- API 통합: 사용자 지정 자동화 솔루션 구축
비교표
| 기능 | Playwright MCP | Puppeteer MCP | Computer Use API |
|---|---|---|---|
| 브라우저 지원 | Chromium, Firefox, WebKit | Chromium 전용 | 모든 브라우저 |
| 유지보수 | Microsoft (공식) | 커뮤니티 | Anthropic |
| 요소 타겟팅 | 접근성 트리 | CSS 셀렉터 | 시각/좌표 |
| 헤드리스 모드 | 예 | 예 | 아니요 (디스플레이 필요) |
| 최적 사용처 | 웹 테스트, 스크래핑 | 레거시 프로젝트 | 데스크톱 자동화 |
Playwright MCP 설정
Playwright MCP는 Claude Code에 브라우저 자동화를 추가하는 권장 방법입니다. 설정 방법은 다음과 같습니다.
선행 조건
- Node.js 18 이상
- Claude Code CLI 설치
- npm 또는 npx 사용 가능
1단계: MCP 서버 구성
Playwright MCP를 Claude Code 구성에 추가합니다. .claude/settings.json 파일을 생성하거나 편집합니다:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_BROWSERS_PATH": "0"
}
}
}
}
2단계: 설치 확인
Claude Code를 시작하고 MCP 서버가 실행 중인지 확인합니다:
claude
사용 가능한 도구 목록에 Playwright MCP가 표시되어야 합니다. 간단한 명령으로 테스트합니다:
https://example.com으로 이동하여 페이지 제목을 알려주세요.
3단계: 브라우저 옵션 구성
더 많은 제어를 위해 MCP 서버 설정을 사용자 지정합니다:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--browser", "chromium",
"--headless"
],
"env": {
"PLAYWRIGHT_BROWSERS_PATH": "0"
}
}
}
}
사용 가능한 옵션:
--browser:chromium,firefox또는webkit선택--headless: 시각적인 브라우저 창 없이 실행--port: 사용자 지정 포트 지정 (기본값: 자동 할당)--host: 특정 호스트에 바인딩 (기본값: localhost)
4단계: CI/CD에서 실행
자동화된 파이프라인의 경우 헤드리스 모드를 사용합니다:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--headless",
"--browser", "chromium"
]
}
}
}
대안: Puppeteer MCP
Puppeteer를 선호하거나 기존 Puppeteer 기반 워크플로우가 있는 경우, 커뮤니티에서 유지 관리하는 MCP 서버를 사용할 수 있습니다.
설치
커뮤니티 Puppeteer MCP 서버를 사용합니다:
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "puppeteer-mcp-server"]
}
}
}
대안: puppeteer-mcp-claude
포괄적인 브라우저 자동화를 제공하는 또 다른 커뮤니티 옵션:
# 저장소 복제
git clone https://github.com/jaenster/puppeteer-mcp-claude.git
cd puppeteer-mcp-claude
npm install
.claude/settings.json에서 구성:
{
"mcpServers": {
"puppeteer": {
"command": "node",
"args": ["/path/to/puppeteer-mcp-claude/index.js"]
}
}
}
Playwright와의 주요 차이점
| 측면 | Playwright MCP | Puppeteer MCP |
|---|---|---|
| 설정 | npx (설치 불필요) | npm 설치 필요할 수 있음 |
| 브라우저 | 다수 | Chrome/Chromium |
| 셀렉터 전략 | 접근성 트리 | CSS/XPath |
| 유지보수 | Microsoft | 커뮤니티 |
기본 브라우저 자동화 명령
MCP 서버가 구성되면 자연어를 사용하여 브라우저를 제어할 수 있습니다.
탐색
https://github.com으로 이동합니다.
github.com의 로그인 페이지로 이동합니다.
새 탭에서 https://docs.example.com/api를 엽니다.
요소와 상호작용
"로그인" 버튼을 클릭합니다.
이메일 필드에 "my-username"을 입력합니다.
국가 드롭다운에서 "미국"을 선택합니다.
"기억하기" 체크박스를 선택합니다.
페이지 콘텐츠 읽기
기본 헤딩의 텍스트 내용을 가져옵니다.
현재 페이지의 모든 링크를 나열합니다.
이 페이지에서 제품 가격을 추출합니다.
스크린샷 찍기
현재 페이지의 스크린샷을 찍습니다.
내비게이션 메뉴만 스크린샷으로 캡처합니다.
대기 및 타이밍
로딩 스피너가 사라질 때까지 기다립니다.
3초 기다린 후 제출 버튼을 클릭합니다.
"성공" 메시지가 나타날 때까지 기다립니다.
폼 처리
연락처 폼을 작성합니다:
- 이름: 홍길동
- 이메일: hong@example.com
- 메시지: 자동화 테스트
그리고 폼을 제출합니다.
복잡한 상호작용
바닥글로 스크롤하여 "개인정보처리방침" 링크를 클릭합니다.
"제품" 메뉴 위에 마우스를 올리고 "기업"을 클릭합니다.
슬라이더를 75% 위치로 드래그합니다.
고급 자동화 패턴
패턴 1: 다단계 워크플로우
복잡한 자동화 시퀀스를 생성합니다:
다음 결제 흐름을 자동화합니다:
1. https://shop.example.com으로 이동
2. "무선 헤드폰" 검색
3. 첫 번째 제품 결과 클릭
4. 가능하면 "Medium" 사이즈 선택
5. "장바구니에 추가" 클릭
6. 장바구니로 이동하여 품목이 있는지 확인
7. 장바구니 스크린샷 찍기
패턴 2: 데이터 추출
웹 페이지에서 구조화된 데이터를 추출합니다:
https://news.ycombinator.com으로 이동하여 다음을 포함하는 상위 10개 스토리를 추출합니다:
- 제목
- URL
- 포인트
- 댓글 수
- 게시된 시간
JSON 형식으로 출력합니다.
패턴 3: 인증 흐름
로그인 시퀀스를 처리합니다:
애플리케이션에 로그인합니다:
1. https://app.example.com/login으로 이동
2. 사용자 이름 입력: test@example.com
3. 환경 변수 LOGIN_PASSWORD에서 비밀번호 입력
4. 로그인 클릭
5. 대시보드가 로드될 때까지 기다립니다.
6. "환영합니다" 텍스트를 확인하여 로그인 성공 여부 검증
패턴 4: 시각적 회귀 테스트
페이지 상태를 비교합니다:
1. https://staging.example.com으로 이동
2. "staging-homepage"라는 이름으로 전체 페이지 스크린샷을 찍습니다.
3. https://production.example.com으로 이동
4. "production-homepage"라는 이름으로 전체 페이지 스크린샷을 찍습니다.
5. 두 스크린샷을 비교하고 차이점을 보고합니다.
패턴 5: 모니터링 및 알림
모니터링 워크플로우를 생성합니다:
서비스가 정상적인지 확인합니다:
1. https://status.example.com으로 이동
2. "모든 시스템 정상 작동" 텍스트를 찾습니다.
3. 찾을 수 없는 경우 현재 상태 메시지를 추출합니다.
4. 문서화를 위해 스크린샷을 찍습니다.
5. 발견 사항을 보고합니다.
패턴 6: API 검증을 통한 E2E 테스트
브라우저 및 API 테스트를 결합합니다:
사용자 등록 흐름을 테스트합니다:
1. https://app.example.com/register로 이동
2. 테스트 데이터로 등록 폼 작성
3. 폼 제출
4. 확인 페이지 대기
5. API 응답을 확인하여 사용자가 생성되었는지 검증
6. 성공 페이지 스크린샷 찍기
API가 포함된 흐름을 테스트할 때 Apidog를 사용하여 백엔드 응답을 검증하세요. 브라우저 동작이 올바른 API 호출을 트리거하고 예상 응답을 받는지 확인할 수 있습니다.
실제 사용 사례
사용 사례 1: 자동화된 코드 검토 스크린샷
코드 검토를 위한 시각적 문서를 캡처합니다:
PR 검토를 위해 다음의 스크린샷을 캡처합니다:
1. 변경 전 로그인 페이지
2. 변경 후 로그인 페이지
3. 유효하지 않은 자격 증명을 입력했을 때의 오류 상태
4. 유효한 로그인 후 성공 리디렉션
모든 스크린샷을 ./review-screenshots/에 저장합니다.
사용 사례 2: 경쟁 분석
경쟁사 웹사이트를 모니터링합니다:
경쟁사 가격을 분석합니다:
1. https://competitor.com/pricing으로 이동
2. 모든 플랜 이름과 가격 추출
3. 가격 페이지 스크린샷 찍기
4. 현재 가격 데이터와 비교
5. 요약 보고서 생성
사용 사례 3: 자동화된 폼 테스트
다양한 시나리오에서 폼 유효성 검사를 테스트합니다:
연락처 폼 유효성 검사를 테스트합니다:
테스트 1: 빈 제출
- 빈 폼 제출
- 모든 필수 필드 오류가 나타나는지 확인
- 스크린샷: empty-form-errors.png
테스트 2: 유효하지 않은 이메일
- 이름에 "존" 입력
- 이메일에 "invalid-email" 입력
- 제출
- 이메일 유효성 검사 오류 확인
- 스크린샷: invalid-email-error.png
테스트 3: 유효한 제출
- 모든 필드를 올바르게 작성
- 제출
- 성공 메시지 확인
- 스크린샷: form-success.png
사용 사례 4: SEO 감사
SEO 검사를 자동화합니다:
https://mysite.com에서 SEO 감사를 수행합니다:
1. 페이지 제목 길이 확인 (50-60자여야 함)
2. 메타 설명 존재 여부 및 길이 확인
3. H1 태그 존재 여부 및 고유성 확인
4. 모든 이미지에 alt 텍스트가 있는지 확인
5. 정식 URL이 설정되었는지 확인
6. 페이지의 깨진 링크 확인
7. 감사 보고서 생성
사용 사례 5: 접근성 테스트
접근성 검사를 자동화합니다:
https://app.example.com에서 접근성 감사를 실행합니다:
1. 홈페이지로 이동
2. 색상 대비 비율 확인
3. 모든 상호작용 요소가 키보드로 접근 가능한지 확인
4. ARIA 레이블이 있는지 확인
5. 포커스 표시기가 보이는지 확인
6. 스크린 리더 시뮬레이션으로 테스트
7. 접근성 보고서 생성
사용 사례 6: 성능 모니터링
페이지 성능을 추적합니다:
페이지 로드 성능을 모니터링합니다:
1. 브라우저 캐시 지우기
2. https://app.example.com으로 이동
3. 첫 번째 콘텐츠 표시까지의 시간 기록
4. 상호작용 가능까지의 시간 기록
5. 네트워크 워터폴 캡처
6. 완전히 로드되면 스크린샷 찍기
7. 기준 메트릭과 비교
CI/CD 파이프라인 통합
GitHub Actions 통합
CI 파이프라인에 브라우저 자동화를 추가합니다:
# .github/workflows/e2e-tests.yml
name: E2E 브라우저 테스트
on:
pull_request:
branches: [main, develop]
jobs:
browser-tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Node.js 설정
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Playwright 브라우저 설치
run: npx playwright install --with-deps chromium
- name: Claude Code 설치
run: npm install -g @anthropic-ai/claude-code
- name: 브라우저 테스트 실행
env:
ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
run: |
claude --mcp playwright "
다음 브라우저 테스트를 실행합니다:
1. ${{ env.STAGING_URL }}로 이동
2. 테스트 자격 증명으로 로그인 흐름 테스트
3. 대시보드가 올바르게 로드되는지 확인
4. 각 단계의 스크린샷을 찍습니다.
5. 모든 실패를 보고합니다.
"
- name: 스크린샷 업로드
if: always()
uses: actions/upload-artifact@v4
with:
name: browser-test-screenshots
path: screenshots/
브라우저 테스트 스킬 생성
브라우저 테스트를 위한 재사용 가능한 스킬을 생성합니다:
---
name: browser-test-runner
version: "1.0.0"
description: Playwright MCP를 사용하여 브라우저 기반 E2E 테스트를 실행합니다.
user-invocable: true
allowed-tools:
- Bash
- Read
- Write
- mcp_playwright
---
# 브라우저 테스트 러너
Playwright MCP를 사용하는 자동화된 브라우저 테스트 스킬입니다.
## 사용법
```bash
/browser-test-runner --url https://app.example.com --suite smoke
/browser-test-runner --url https://staging.example.com --suite full
Claude 컴퓨터 사용 API
전체 데스크톱 제어가 필요한 시나리오의 경우, Claude의 컴퓨터 사용 API는 포괄적인 자동화 기능을 제공합니다.
개요
컴퓨터 사용은 Claude가 다음을 수행할 수 있도록 하는 베타 기능입니다:
- 화면 스크린샷 찍기
- 마우스 이동 및 클릭
- 텍스트 입력
- 스크롤 및 탐색
기본 설정
import anthropic
client = anthropic.Anthropic()
response = client.messages.create(
model="claude-sonnet-4-20250514",
max_tokens=1024,
tools=[
{
"type": "computer_20250124",
"name": "computer",
"display_width_px": 1920,
"display_height_px": 1080,
"display_number": 1
}
],
messages=[
{
"role": "user",
"content": "Chrome을 열고 github.com으로 이동하세요."
}
],
betas=["computer-use-2025-01-24"]
)
컴퓨터 사용 API와 MCP 중 어떤 것을 사용할 것인가
| 시나리오 | 권장 접근 방식 |
|---|---|
| 웹 스크래핑 | Playwright MCP |
| E2E 테스트 | Playwright MCP |
| 데스크톱 앱 자동화 | Computer Use API |
| 크로스 애플리케이션 워크플로우 | Computer Use API |
| CI/CD 파이프라인 | Playwright MCP (헤드리스) |
| 시각적 테스트 | 둘 중 하나 |
컴퓨터 사용 API 모범 사례
- 클릭하기 전에 항상 작업을 확인하세요.
- 가능한 경우 특정 좌표를 사용하세요.
- 빠른 동작 사이에 지연을 추가하세요.
- 누락된 클릭에 대한 오류 복구를 구현하세요.
- 필요한 권한으로 범위를 제한하세요.
보안 고려 사항
인증 처리
할 일:
- 자격 증명에 환경 변수 사용
- 테스트 후 자격 증명 지우기
- 프로덕션 자격 증명 대신 테스트 계정 사용
하지 말아야 할 일:
- 명령에 비밀번호 하드코딩
- 스크린샷에 자격 증명 저장
- 인증 상태 파일 공유
# 환경 변수 사용
export TEST_USERNAME="test@example.com"
export TEST_PASSWORD="secure-test-password"
환경 변수 TEST_USERNAME 및 TEST_PASSWORD에서 자격 증명을 사용하여 로그인합니다.
데이터 프라이버시
할 일:
- 스크린샷에서 민감한 데이터 마스킹
- 테스트 후 브라우저 데이터 지우기
- 스테이징/테스트 환경 사용
하지 말아야 할 일:
- 실제 사용자 데이터가 포함된 페이지 스크린샷 찍기
- 개인 정보 저장
- 실제 데이터로 프로덕션에 대해 실행
네트워크 보안
할 일:
- 브라우저 네트워크 액세스 제한
- 허용된 도메인에 대한 허용 목록 사용
- 네트워크 요청 모니터링
하지 말아야 할 일:
- 무제한 인터넷 액세스 허용
- 프로덕션에서 SSL 인증서 오류 무시
- 신뢰할 수 없는 콘텐츠 다운로드
MCP 서버 보안
- 가능할 때 로컬에서 실행
- 사용하기 전에 MCP 서버 코드 감사
- 최소한의 필요한 권한으로 도구 권한 제한
- 이상 징후에 대해 MCP 서버 로그 모니터링
결론
Claude Code를 사용한 브라우저 자동화는 개발자가 웹 테스트, 스크래핑 및 자동화에 접근하는 방식을 변화시킵니다. 자연어 지침과 Playwright와 같은 강력한 MCP 서버를 결합하여 복잡한 스크립트 작성 없이 정교한 자동화 워크플로우를 구축할 수 있습니다.
종합적인 테스트를 위해 Claude Code 브라우저 자동화를 API 검증과 함께 사용하세요. 프런트엔드와 백엔드를 모두 다루는 완벽한 테스트 워크플로우를 구축하려면 Apidog를 무료로 다운로드하세요.