Claude Code 브라우저 자동화, /chrome·CDP·Playwright 선택법

`/chrome`은 CDP 실행 명령이 아니라 공식 확장 연결이다

`/chrome`은 CDP 실행 명령이 아니라 공식 확장 연결이다

클코단에서는 CDP가 설정하기 편하다는 의견이 많았다. 하지만 지금 Claude Code에서 가장 짧은 경로는 공식 `/chrome` 통합 쪽이다. Anthropic 문서에 따르면 Claude Code는 Claude in Chrome 확장과 연결해 DOM, 콘솔, 네트워크 요청을 읽고 클릭과 입력을 실행한다.

Claude in Chrome 확장을 설치하고 Claude Code에서 `claude --chrome`을 실행하면 된다. 이미 세션을 열어둔 상태라면 `/chrome`으로 연결 상태와 사이트 권한을 관리할 수 있다. 이후엔 `localhost:3000을 열고 회원가입 폼을 제출한 뒤 콘솔 오류를 확인해`처럼 요청하면 그만이다.

이 방식은 별도 원격 디버깅 포트를 열지 않는다. Claude Code와 확장은 native messaging으로 연결되고, 자동화 과정은 화면에 그대로 표시된다. 로그인이나 CAPTCHA가 뜨면 Claude는 멈추고 처리를 사용자에게 맡긴다.

로그인 상태를 그대로 쓸 수 있다는 게 가장 큰 장점이다. Gmail이나 사내 관리 화면처럼 인증이 필요한 페이지를 테스트할 때 별도 쿠키 파일을 만들 필요가 없다. 다만 Anthropic 계정으로 직접 `/login`한 유료 플랜이 있어야 하고, API 키·Bedrock·Vertex AI 같은 제3자 인증만 쓰는 세션에서는 켤 수 없다.

원시 CDP는 더 깊게 보지만 브라우저 격리가 필요하다

CDP는 Chrome DevTools Protocol의 약자로, Chromium 계열 브라우저의 DOM, Network, Runtime, Debugger 기능을 JSON 메시지로 제어한다. 브라우저가 공개한 WebSocket 주소에 붙기 때문에 콘솔 평가, 요청 가로채기, 성능 추적까지 낮은 수준에서 다룰 수 있다.

보통 흐름은 Chrome을 `--remote-debugging-port=9222 --user-data-dir=<별도 경로>`로 띄우는 것이다. `localhost:9222/json/version`에서 WebSocket 주소를 확인하고 CDP 클라이언트를 붙인다. Playwright라면 `chromium.connectOverCDP('http://localhost:9222')`로 같은 브라우저에 연결하면 된다.

여기서 예전 방식을 그대로 따라 하면 막힌다. Chrome 136부터 Google은 기본 사용자 데이터 디렉터리에 원격 디버깅 스위치를 적용하지 않는다. 정보 탈취 공격을 줄이려고 별도 `--user-data-dir`가 필수가 됐고, 자동화용으로는 Chrome for Testing도 권장한다.

평소 쓰는 가정용 PC의 브라우저를 그대로 움직이는 구성은 로그인 유지가 편하다. 다만 메일, 결제, 업무 계정까지 한 프로필에 몰려 있으면 노출 범위도 그만큼 커진다. 일상 프로필 대신 자동화 전용 프로필을 두는 편이 지금 Chrome의 보안 방향과 맞다.

Playwright 공식 문서는 CDP 연결이 Chromium 계열에만 해당하며, 자체 Playwright 프로토콜보다 기능 충실도도 낮다고 명시한다. CDP는 범용 기본값이라기보다 DevTools 수준의 제어가 필요한 작업에 맞는 선택이다.

다른 브라우저와 반복 테스트는 Playwright가 맡는다

Firefox나 WebKit까지 확인해야 한다면 Playwright가 명확한 선택이다. Chromium, Firefox, WebKit을 한 API로 제어하기 때문이다. 다만 Firefox는 Playwright가 패치한 빌드이고, WebKit도 Safari 자체가 아니라 프로젝트가 제공하는 빌드라는 점은 알아둘 만하다.

Claude Code에는 Playwright MCP를 한 줄로 연결할 수 있다.

`claude mcp add playwright npx @playwright/mcp@latest`

연결 후에는 `demo 페이지를 Firefox로 열고 장바구니 흐름을 끝까지 검사해`라고 지시하면 된다. MCP 설정에 `--browser=firefox`를 넣으면 브라우저를 고정할 수 있고, 지원값은 `chrome`, `firefox`, `webkit`, `msedge`다.

Playwright MCP는 화면 픽셀보다 접근성 트리와 요소 참조를 중심으로 작동하며, 클릭, 입력, 탭 전환, 스크린샷, 네트워크 모킹, 저장 상태 복구를 구조화된 도구로 제공한다. 긴 탐색이나 상태를 유지해야 하는 에이전트 작업에 유리하다.

Microsoft는 코딩 에이전트용 Playwright CLI도 별도로 내놓았다. 설치 순서는 `npm install -g @playwright/cli@latest`, `playwright-cli install --skills`다. 공식 저장소는 CLI가 큰 도구 스키마와 접근성 트리를 매번 문맥에 싣지 않아 MCP보다 토큰을 적게 쓴다고 설명한다.

써본 사람들 사이에서도 MCP의 문맥 소비가 크고 탭이나 요소 참조를 놓친다는 불만이 있다. 반면 CLI는 가볍지만 복잡한 탐색에서는 직접 명령을 이어야 한다는 반응도 나온다. 지속적인 페이지 이해가 필요하면 MCP, 짧은 검사 명령을 반복하면 CLI가 알맞다.

로그인 편의성과 안전은 같은 축에 놓여 있다

Anthropic은 브라우저 에이전트의 가장 큰 위험으로 프롬프트 인젝션을 든다. 웹페이지 안의 숨은 문장이 Claude를 다른 사이트로 유도할 수 있다. Claude in Chrome은 콘텐츠와 실행 직전 행동을 분류기로 검사하지만 위험이 사라지지는 않는다.

공식 안전 안내는 민감한 계정이 없는 별도 프로필을 쓰라고 권한다. Claude는 작업 중인 탭을 이해하려고 화면을 캡처하기 때문에, 금융, 의료, 법률 문서나 다른 사람의 개인정보가 보이는 탭에는 확장을 열지 않는 편이 안전하다.

Playwright도 인증 상태를 파일로 저장할 때 주의해야 한다. `storageState`에는 사용자로 가장할 수 있는 쿠키와 헤더가 포함될 수 있다. Playwright는 `playwright/.auth`를 `.gitignore`에 넣고 저장 파일을 저장소에 커밋하지 말라고 안내한다.

연결 안정성도 도구 선택에 들어가는 요소다. Anthropic 문서에는 장시간 유휴 상태에서 확장의 service worker가 잠들 수 있고, 이 경우 `/chrome`에서 다시 연결해야 한다고 적혀 있다. 실제 사용자들도 느린 페이지, 오래된 요소 참조, 끝나지 않는 대기가 실패를 키운다고 말한다.

작업의 최종 산출물이 도구를 결정한다

세 도구를 경쟁 제품처럼 하나만 고를 필요는 없다. 한 기능을 만드는 동안에도 확인 단계에 따라 역할을 나눌 수 있다.

• **빠른 프런트엔드 수정** — `/chrome`으로 현재 로그인된 화면을 열고 DOM, 콘솔, 시각 상태를 함께 확인한다.
• **여러 브라우저의 회귀 방지** — Playwright Test로 흐름을 코드에 남기고 Chromium, Firefox, WebKit에서 반복 실행한다.
• **짧고 빈번한 에이전트 점검** — Playwright CLI와 스킬을 사용해 문맥 소비를 줄인다.
• **장시간 탐색과 상태 유지** — Playwright MCP로 접근성 트리와 브라우저 상태를 이어간다.
• **네트워크·런타임 정밀 제어** — 격리된 Chrome 프로필에 CDP로 연결하고 필요한 DevTools 도메인만 사용한다.

개인 개발자라면 `/chrome`으로 수정 결과를 눈앞에서 확인한 뒤, 중요한 사용자 흐름만 Playwright 테스트로 승격할 수 있다. 소규모 팀은 그 테스트를 CI에서 실행해 사람의 브라우저 상태와 배포 검증을 분리한다. 가장 편한 연결은 `/chrome`이지만, 다시 실행해도 같은 답을 내야 하는 순간부터 Playwright가 기록의 기준이 된다.