AI 요약
Claude Code와 같은 AI 코딩 에이전트에서 브라우저를 조작할 때 겪는 고질적인 문제인 MCP 설정의 번거로움과 인증 세션 미공유 문제를 해결하는 획기적인 방법이 제시되었습니다. 기존에는 별도의 포트(9222)를 열거나 복잡한 MCP 서버를 구성해야 했지만, playwright-cli의 'attach --cdp=chrome' 옵션을 사용하면 현재 사용자가 로그인하여 사용 중인 Chrome 인스턴스에 즉시 연결할 수 있습니다. 이를 통해 사용자는 로그인이 필요한 서비스에 다시 접속할 필요 없이 AI에게 직접 웹 기반 작업을 지시할 수 있게 됩니다. 특히 .claude/skills 경로에 SKILL.md를 생성하고 CLAUDE.md에 브라우저 조작 방침을 정의함으로써, Claude가 스스로 도구를 판단하고 실행하는 워크플로우를 구축할 수 있다는 점이 이 기술적 팁의 핵심입니다.
핵심 인사이트
- 버전 정보: playwright-cli v0.1.8부터 기존 Chrome에 attach하는 기능이 추가되었으며, 작성자 기준 v0.1.13 버전에서 안정적으로 작동함을 확인했습니다.
- 세션 유지: 별도의 브라우저 인스턴스를 띄우지 않고 기존 Chrome에 연결하므로, 이미 로그인된 서비스의 인증 세션을 그대로 상속받아 사용할 수 있습니다.
- 설정 간소화: MCP(Model Context Protocol) 서버를 개별적으로 설정하거나 관리할 필요 없이 Bash 도구를 통해 직접 제어가 가능합니다.
- 전용 스킬 생성:
playwright-cli install --skills명령어를 실행하면 Claude Code가 참조할 수 있는 SKILL.md 지침 파일이 자동 생성됩니다.
주요 디테일
- 원격 디버깅 활성화: Chrome 브라우저에서
chrome://inspect/#remote-debugging페이지에 접속하여 해당 옵션을 체크하는 것만으로 준비가 완료됩니다. - 세션 식별자:
attach --cdp=chrome명령 실행 시 생성되는 'chrome'이라는 세션명을-s=chrome옵션으로 호출하여 연속적인 작업을 수행합니다. - 고성능 스냅샷:
playwright-cli snapshot명령은 일반적인 스크린샷보다 더 많은 정보량을 제공하며 처리 속도도 빨라 AI가 페이지 구조를 파악하는 데 유리합니다. - CLI 도구 통합: Volta나 NPM을 통해 전역으로 설치한 후, Claude Code의 Bash 인터페이스 내에서 직접 브라우저 이동(goto), 요소 클릭(click), 탭 선택(tab-select) 등을 실행합니다.
- 실패 대응 로직: 연결이 끊길 경우 사용자가 직접 디버깅 옵션을 확인하도록 CLAUDE.md에 가이드를 작성하여 AI의 대응 능력을 높였습니다.
향후 전망
- AI 에이전트가 개발자의 로컬 환경과 더 깊게 통합되면서, 웹 서비스의 UI 테스트 및 실시간 데이터 추출 업무의 자동화 수준이 비약적으로 향상될 것입니다.
- 복잡한 서버-클라이언트 구조의 MCP 대신, CLI를 매개로 한 직접 연결 방식이 개별 개발자의 생산성 도구로 더 널리 채택될 가능성이 큽니다.