Puppeteer 기반 29종 도구로 AI Agent의 Chrome 제어권 확보

Context

기존 AI Agent는 스크린샷과 텍스트 복사 방식의 추상화 계층에 의존하여 브라우저 상태 파악에 한계 노출. 실시간 DOM 상태 및 네트워크 데이터 접근 불가능으로 인한 수동 디버깅 오버헤드 발생.

Technical Solution

• MCP(Model Context Protocol) 표준 채택을 통한 Claude Code, Cursor 등 다양한 AI Agent와의 범용적 인터페이스 구축
• Puppeteer를 래핑하여 Navigation, Performance, Network 등 7개 카테고리의 29가지 원격 제어 도구 제공
• Chrome M144+의 --autoConnect 옵션을 활용하여 기존 브라우저 세션의 SSO, 쿠키, 확장 프로그램 상태를 유지하는 Remote Debugging 구조 설계
• Live Debugging 중심 설계로 Playwright의 격리된 E2E 테스트 환경과 차별화된 실시간 상태 분석 최적화
• Lighthouse 및 CrUX 데이터의 네이티브 통합을 통한 AI 기반의 성능 회귀 분석 및 루트 코즈 진단 자동화

Impact

• 매주 수행하던 2시간 분량의 수동 성능 감사 프로세스를 10분 단위의 비동기 자동화 워크플로우로 단축

Key Takeaway

특정 환경의 상태(State)를 유지해야 하는 Live Debugging에서는 Test Isolation보다 Session Persistence를 우선하는 설계 전략이 효율적임