Chrome DevTools MCP: AI 코딩 에이전트를 위한 Chrome의 공식 MCP 공개 미리보기 출시

읽을거리&정보공유
, , , ,
1

Chrome DevTools MCP: AI 코딩 에이전트를 위한 Chrome의 공식 MCP 출시
Chrome DevTools MCP: AI 코딩 에이전트를 위한 Chrome의 공식 MCP 출시918×353 39.4 KB

Chrome DevTools MCP 소개

지난 2025년 9월 말, 구글은 Chrome DevTools MCP(Model Context Protocol) 서버의 공개 미리보기 버전(Public Preview)을 발표했습니다. 이 프로젝트는 인공지능(AI) 코딩 어시스턴트가 웹 브라우저 내부 동작을 직접 관찰하고 디버깅할 수 있도록 지원하는 새로운 시도입니다. 기존의 AI 코딩 도우미는 코드를 작성할 수는 있지만, 그 코드가 실제 브라우저에서 어떻게 동작하는지는 볼 수 없었습니다.

Chrome DevTools MCP 서버는 이러한 제약을 근본적으로 해결합니다. 이 프로토콜을 통해 AI 코딩 에이전트는 Chrome 브라우저와 직접 상호작용하며, 네트워크 요청, 콘솔 로그, 스타일, 레이아웃, 성능 문제 등 다양한 디버깅 정보를 실시간으로 확인할 수 있습니다. 결과적으로, AI는 코드 문제를 더 정확하게 진단하고 수정할 수 있으며, 개발자는 더 신뢰할 수 있는 AI 보조를 받을 수 있게 됩니다.

이번 공개 프리뷰는 단순히 새로운 기능을 추가한 것이 아니라, AI 개발 환경 자체를 한 단계 확장하는 시도입니다. 앞으로는 AI가 코드 작성뿐만 아니라, 실제 실행 결과를 바탕으로 개선점을 제시하는 ‘실행형 개발 파트너’로 진화할 수 있을 것입니다.

Model Context Protocol(MCP)란?

Model Context Protocol(MCP) 은 대규모 언어 모델(LLM)을 외부 도구 및 데이터 소스와 연결하기 위한 오픈소스 표준입니다. MCP를 활용하면 AI가 단순히 텍스트 기반의 추론을 넘어서, 실제 환경(예: 브라우저, 데이터베이스, 파일 시스템)과 직접 상호작용할 수 있습니다.

Chrome DevTools MCP 서버는 이 프로토콜을 기반으로, 디버깅 기능을 LLM에 부여합니다. 예를 들어, performance_start_trace라는 도구를 호출하면 AI는 Chrome을 실행하고, 특정 웹사이트의 성능 추적(trace)을 기록한 뒤 분석할 수 있습니다. 이렇게 수집된 데이터를 바탕으로 LLM은 “로딩 속도가 느린 원인”이나 “LCP가 높은 이유” 등을 구체적으로 제안할 수 있습니다.

Model Context Protocol에 대한 더 자세한 소개 및 동작 방식에 대한 소개는 MCP 공식 문서 또는 [Deep Research] Model Context Protocol(MCP) 개념 및 이해를 위한 학습 자료 게시물에서 확인하실 수 있습니다.

Chrome DevTools MCP로 할 수 있는 일

Chrome DevTools MCP는 단순한 디버깅 도구가 아닙니다. AI가 브라우저 환경을 ‘눈으로 보고 손으로 만질 수 있게’ 만들어주는 확장 플랫폼에 가깝습니다. 다음은 몇 가지 활용 예시입니다:

  • 실시간 코드 변경 검증: AI 에이전트가 생성한 코드 수정 사항을 브라우저에서 직접 검증할 수 있습니다. 예를 들어, 다음과 같은 프롬프트를 실행하면 됩니다:

    Verify in the browser that your change works as expected.

    Chrome DevTools MCP를 연계한 LLM 모델이 수정된 코드를 실행해보고 실제로 정상 동작하는지 확인할 수 있습니다.

  • 네트워크 및 콘솔 오류 진단: MCP를 통해 AI는 네트워크 요청과 콘솔 로그를 분석해 CORS 문제, API 응답 오류, 혹은 로컬 리소스 로드 실패 등의 원인을 파악할 수 있습니다. 다음은 예시 프롬프트입니다:

    A few images on localhost:8080 are not loading. What's happening?

  • 사용자 행동 시뮬레이션: AI는 브라우저 내에서 폼(Form) 입력, 클릭, 페이지 이동 등을 자동으로 수행하여, 복잡한 사용자 흐름을 재현하고 버그를 추적할 수 있습니다. 예를 들어, 다음과 같은 프롬프트를 실행해서 물어볼 수 있습니다:

    Why does submitting the form fail after entering an email address?

  • 스타일 및 레이아웃 디버깅: DOM과 CSS를 분석하여 레이아웃 깨짐, 오버플로우, 정렬 문제 등을 실시간으로 점검하고, 수정 방향을 제시할 수 있습니다.

    The page on localhost:8080 looks strange and off. Check what's happening there.

  • 성능 분석 자동화: LLM 모델에 “사이트 로딩이 느리다”라고 요청하면, MCP를 통해 브라우저 성능 추적을 시작하고 LCP, TBT 등 주요 지표를 분석한 뒤 개선 방안을 제시할 수 있습니다.

    localhost:8080 is loading slowly. Make it load faster.

Chrome DevTools MCP가 지원하는 전체 도구 목록은 tool reference 문서에서 확인할 수 있습니다.

Chrome DevTools MCP 시작하기

Chrome DevTools MCP를 사용하려면, MCP 클라이언트 설정에 다음 내용을 추가합니다:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

또는, Cluade Code나 Cursor 등에서는 다음과 같이 설치할 수 있습니다:

# Claude Code
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Gemini CLI
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

설치 후, 다음 프롬프트를 실행하여 정상 작동을 확인할 수 있습니다:

Please check the LCP of web.dev.

자세한 사용법은 GitHub 저장소의 README 문서에서 확인 가능합니다.

커뮤니티 참여 및 피드백

이번 MCP 서버는 퍼블릭 프리뷰 버전으로, 구글 팀은 향후 기능 확장을 위해 개발자 피드백을 적극적으로 수집하고 있습니다. AI 코딩 도우미를 사용하는 개발자이든, 차세대 개발 도구를 만드는 벤더이든, 모두 참여할 수 있습니다. 문제가 있거나 새로운 기능 제안을 하고 싶다면 GitHub 저장소의 이슈 페이지에 남길 수 있습니다.

:scroll: Chrome DevTools MCP 공개 프리뷰 출시 블로그

:github: Chrome DevTools MCP 프로젝트 GitHub 저장소



이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: