“클로드 코드(Claude Code)가 브라우저를 직접 열고, 클릭하고, 스크린샷까지 찍을 수 있다”는 말, 처음 들으시면 좀 의심스러우실 겁니다. 가능합니다. 단, 클로드 코드 자체가 브라우저를 가진 것이 아니라 외부 도구(MCP 서버)를 통해 조작합니다. 이 분야에서 가장 많이 비교되는 두 도구가 Chrome DevTools MCP와 Playwright MCP입니다. 이름은 비슷해 보여도 설계 철학과 강점이 분명히 다릅니다. 어떤 작업에 어느 쪽을 써야 후회가 없는지 한 번에 정리해 드립니다.
목차
한눈에 보는 두 MCP
핵심 차이를 한 줄로 요약하시면, “Playwright는 동작시킨다, Chrome DevTools는 디버깅한다”입니다. 비슷한 일을 둘 다 어느 정도 할 수 있지만 무게 중심이 다릅니다.
| 구분 | Chrome DevTools MCP | Playwright MCP |
|---|---|---|
| 운영 주체 | Google Chrome 팀 | Microsoft Playwright 팀 |
| 중심 기능 | 디버깅·성능 분석·네트워크 검사 | 자동화·E2E 테스트·페이지 조작 |
| 지원 브라우저 | Chrome 전용 | Chromium·Firefox·WebKit |
| 기반 기술 | Chrome DevTools Protocol | Playwright 엔진 |
| 특화 도구 | Performance Trace, Lighthouse, 네트워크 분석 | 크로스 브라우저, 폼 조작, 탭 관리 |
| 대표 사용 시점 | 이미 떠 있는 페이지의 문제 진단 | 처음부터 끝까지 자동 실행 시나리오 |
Chrome DevTools MCP: 디버깅에 강한 도구
Chrome DevTools MCP는 구글 Chrome 팀이 직접 운영하는 MCP 서버입니다. 평소 개발자 도구(F12)에서 보시던 그 기능들을 클로드가 직접 호출할 수 있도록 노출해 줍니다. 동작 원리는 Chrome DevTools Protocol을 통해 실행 중인 Chrome 인스턴스에 연결하는 방식입니다.
주요 도구를 정리하면 다음과 같습니다.
- 페이지 조작:
navigate_page,click,type_text,fill_form,press_key,hover,scroll같은 기본 액션 - 화면·상태 캡처:
take_screenshot,take_snapshot(접근성 트리),evaluate_script(임의 JS 실행) - 네트워크 분석:
list_network_requests,get_network_request로 요청·응답·헤더·바디까지 검사 - 콘솔 추적:
list_console_messages,get_console_message로 에러·경고 수집 - 성능 측정:
performance_start_trace,performance_stop_trace,performance_analyze_insight - 품질 감사:
lighthouse_audit,take_memory_snapshot - 환경 시뮬레이션:
emulate(모바일·네트워크 조건),resize_page
한마디로 “이미 띄워 둔 Chrome 페이지의 문제를 같이 들여다보는” 작업에 가장 잘 맞습니다. LCP가 왜 느린지, 어떤 네트워크 요청이 막혔는지, 메모리 누수가 어디서 일어나는지 같은 진단형 작업에서 진가를 발휘합니다.
설치 명령은 다음과 같습니다.
claude mcp add --scope user chrome-devtools -- npx -y chrome-devtools-mcp
Playwright MCP: 자동화에 강한 도구
Playwright MCP는 Microsoft가 만든 Playwright 자동화 엔진을 MCP로 감싼 서버입니다. 이미 만들어진 페이지를 진단하기보다는, “처음부터 끝까지 시나리오를 따라 실행”하는 데 최적화되어 있습니다.
주요 도구는 다음과 같습니다.
- 네비게이션·탭:
browser_navigate,browser_navigate_back,browser_tabs(여러 탭 관리) - 요소 상호작용:
browser_click,browser_type,browser_fill_form,browser_select_option,browser_drag,browser_hover - 입력·키보드:
browser_press_key,browser_handle_dialog,browser_file_upload - 화면 분석:
browser_snapshot(접근성 트리),browser_take_screenshot - 실행·진단:
browser_evaluate,browser_run_code,browser_console_messages,browser_network_requests - 대기·동기화:
browser_wait_for(특정 요소·텍스트·시간 대기)
가장 큰 강점은 크로스 브라우저 지원입니다. Chromium·Firefox·WebKit을 같은 코드로 자동화할 수 있어, “Safari에서만 깨지는 버그”, “Firefox에서만 안 보이는 요소” 같은 케이스도 같이 검증할 수 있습니다. 또한 동작이 픽셀이 아닌 접근성 트리 기반이라 작은 디자인 변경에 덜 흔들립니다.
설치 명령은 다음과 같습니다.
claude mcp add --scope user playwright -- npx -y @playwright/mcp
구체적인 작업별 추천
본인이 어떤 작업을 자주 하시는지 떠올리시면서 보세요. 둘 다 가능하지만 더 잘 맞는 쪽은 분명히 있습니다.
| 작업 | 추천 | 이유 |
|---|---|---|
| 회원가입·로그인 자동화 시나리오 | Playwright | 대기·동기화·폼 조작 기본기 강함 |
| 여러 브라우저에서 동작 검증 | Playwright | 크로스 브라우저 지원 유일 |
| 로딩 느린 페이지 원인 분석 | Chrome DevTools | Performance Trace·Lighthouse |
| 특정 API 응답 헤더 확인 | Chrome DevTools | 네트워크 요청 상세 검사 |
| JS 콘솔 에러 디버깅 | Chrome DevTools | 콘솔·DOM·메모리 동시 확인 |
| 스크린샷·시각 회귀 테스트 | Playwright | 안정적 캡처 + 비교 워크플로우 |
| 봇 탐지 우회 필요한 스크래핑 | 케이스별 | 둘 다 한계 있음, 별도 도구 검토 |
같이 깔아 두면 어떨까요
충돌하지 않습니다. 둘 다 깔아 두시고 작업 성격에 맞춰 자연어 요청에서 자연스럽게 둘 중 하나가 선택되도록 두는 패턴이 실무에서 가장 흔합니다.
- “이 페이지가 왜 느린지 트레이스 떠 줘” → Chrome DevTools가 자동으로 트리거
- “회원가입 플로우 끝까지 시뮬레이션해 줘” → Playwright가 자동으로 트리거
한 가지 팁은 처음 한두 번은 명시적으로 “Chrome DevTools로”, “Playwright로”라고 지정해 호출 패턴을 잡아 두시는 것입니다. 일단 흐름이 잡히면 이후로는 알아서 적절한 도구를 골라 갑니다.
안전·보안 관점에서 알아 둘 점
두 도구 모두 본인의 컴퓨터에서 실제 브라우저 세션을 조작합니다. 강력한 만큼 신경 쓰셔야 할 부분도 있습니다.
- 로그인 세션 노출: 이미 로그인된 브라우저를 그대로 조작하므로, 세션 쿠키·민감 페이지가 의도치 않게 캡처될 수 있습니다.
- 파괴적 액션: “전송”, “삭제” 같은 버튼을 자동 클릭하면 실제로 메시지·데이터가 사라집니다. 운영 환경 사이트에는 사용을 자제하십시오.
- 스크린샷 보관: 캡처 이미지에 개인정보·비밀이 포함될 수 있습니다. 임시 폴더에 쌓이는 파일을 주기적으로 정리하시는 것을 권합니다.
- 퍼블릭 배포: 자동화 스크립트나 결과물을 공개 저장소에 올릴 때, 캡처와 로그에 비밀정보가 들어 있지 않은지 한 번 더 확인하십시오.
Anthropic 공식 “Claude in Chrome” 확장은 또 뭔가요
이 글의 두 MCP와 자주 헷갈리는 것이 Anthropic의 Claude in Chrome입니다. 이건 MCP 서버가 아니라 Chrome 웹 스토어에서 받는 브라우저 확장입니다. 클로드가 본인 브라우저 안에 직접 들어와 페이지를 보고 작업을 도와주는 형태입니다.
| 구분 | Chrome DevTools MCP / Playwright MCP | Claude in Chrome |
|---|---|---|
| 형태 | MCP 서버 (클로드 코드용) | 크롬 확장 (일반 브라우징용) |
| 호출 주체 | 클로드 코드 세션 | 브라우저에서 사용자가 직접 |
| 주된 용도 | 코드 작업·테스트·디버깅 | 웹 서핑 보조·요약·정리 |
| 요금 | API/구독 + MCP는 무료 | Pro 이상 유료 플랜 필요 |
코드 작업 흐름 안에서 브라우저를 다루실 거라면 MCP 두 가지가 본 흐름이고, 평소 웹 서핑하면서 클로드 도움을 받고 싶으시면 Claude in Chrome 확장이 맞습니다.
안 될 때 점검 순서
설치는 했는데 호출이 안 되는 흔한 상황의 빠른 진단 순서입니다.
- 1.
claude mcp list로 등록 여부와 활성 상태 확인 - 2. Chrome이 실제로 띄워져 있는지(Chrome DevTools MCP는 보통 실행 중인 인스턴스가 필요)
- 3. Playwright MCP는 첫 실행 시 브라우저 바이너리 다운로드가 필요할 수 있음 — 시간을 두고 기다려 보기
- 4. Mac에서 자동화 권한 요청이 떴는지 확인 (시스템 환경설정 → 보안 및 개인정보 보호 → 손쉬운 사용)
- 5. 클로드 코드 세션 완전히 재시작
- 6.
claude --debug로 띄워 어떤 MCP 서버가 로드 실패인지 직접 확인
자주 묻는 질문
Playwright는 테스트용 아닌가요? 일반 자동화에도 써도 되나요?
물론입니다. 원래 E2E 테스트용으로 만들어졌지만 폼 자동 채우기, 정기 데이터 수집, 반복 작업 자동화 등 일반 RPA 영역에서도 자주 쓰입니다. MCP를 통하면 클로드 코드가 자연어 지시만으로 그 흐름을 짤 수 있습니다.
Chrome DevTools MCP는 Chrome 외 다른 브라우저는 정말 안 되나요?
기본적으로 Chrome 전용입니다. Edge·Brave 같은 Chromium 기반 브라우저에서 일부 동작이 가능한 경우도 있지만, 공식 지원 대상은 Chrome입니다. 다른 브라우저까지 다루실 거라면 Playwright MCP가 자연스러운 선택입니다.
둘 다 깔면 어떤 게 우선 호출되나요?
요청 문장의 키워드와 각 MCP의 도구 설명을 보고 클로드가 판단합니다. 명시적으로 “Chrome DevTools로”, “Playwright로”를 붙이시면 의도한 쪽이 호출됩니다.
스크래핑 목적으로 써도 되나요?
법적·약관적으로 허용된 사이트라면 가능합니다. 다만 두 도구 모두 봇 탐지 우회 기능은 기본 제공하지 않으므로, 그런 페이지는 별도 우회 솔루션이 필요합니다. 그리고 스크래핑은 사이트 약관·저작권을 반드시 확인하시고 진행하십시오.
정리
클로드 코드의 브라우저 조작은 두 갈래로 나뉩니다. “진단·디버깅·성능”이 중심이면 Chrome DevTools MCP, “자동화·E2E·크로스 브라우저”가 중심이면 Playwright MCP입니다. 둘은 서로 대체재가 아니라 보완재이므로, 본인 작업에 둘 다 자주 등장한다면 함께 깔아 두시고 자연스럽게 골라 쓰이도록 두시는 편이 가장 효율적입니다. 한 가지만 골라야 한다면, 자동화 시나리오가 더 많으면 Playwright, 진단·점검이 더 많으면 Chrome DevTools부터 시작하시기를 권해 드립니다.