mare-browser-mcp를 개발해 AI 에이전트가 스크린샷 대신 DevTools 데이터로 웹앱 디버깅하도록 변경

Context

기존 AI 브라우저 MCP는 스크린샷에만 의존해 로그인 실패 사유, 네트워크 요청 페이로드, 콘솔 에러 등 실제 디버깅 증거를 모델이 볼 수 없었다. 이로 인해 "AI 코드 작성 → 수동 테스트 → 버그 설명 → AI 추측 수정 → 반복" 루프가 발생했다.

Technical Solution

• browser_debug 도구: URL, 페이지 타이틀, 콘솔 로그, 페이지 에러, 다이얼로그, 네트워크 요청 히스토리를 한 번에 반환하며, 네트워크 히스토리는 메서드, URL, 쿼리 파라미터, 요청 헤더, 요청 본문, 상태 코드, JSON 응답 본문, 밀리초 단위 소요 시간을 포함
• browser_act 도구: 클릭, 호버, 드래그, 우클릭, 입력, 선택, 키 입력, 대기, 스크롤, 콘솔 초기화 등의 액션을 배열로 일괄 전송해 요청 수 감소
• browser_query 도구: CSS 선택자로 DOM을 구조화된 데이터로 쿼리하며, 행 개수, 버튼 표시 여부, 배지 텍스트, 입력 필드 비활성화 상태 등을 선택적으로 반환
• 데이터 보호: 정적 자산 스킵, OPTIONS preflight 무시, 바디 4KB 상한선, 인증 헤더 마스킹, 쿠키를 "[present]"로 축약해 컨텍스트 낭비 방지
• Playwright와 MCP SDK 기반 구현: 브라우저 자동화를 통해 실제 브라우저 이벤트 캡처

Impact

AI 에이전트가 "제출 버튼 클릭 후 페이지가 여전히 잘못됨"이 아닌 {"method": "POST", "url": "https://app.example.com/api/session", "requestBody": {"user_email": "user@example.com", "password": "secret"}, "status": 401, "responseBody": {"error": "missing field: email"}, "duration_ms": 23}을 확인하게 되어 디버깅 루프가 "AI 코드 작성 → AI 테스트 → AI 실패 읽기 → AI 수정"으로 변경됨.

Key Takeaway

AI 에이전트의 브라우저 디버깅 성능은 시각적 정보 해석 능력보다 개발자가 실제 사용하는 DevTools 신호(네트워크 요청, 콘솔 로그, 응답 페이로드)에 접근할 수 있는지 여부가 더 중요하다.