Home.About.

Chrome DevTools MCP

2025.10.23,

about 8 min.

#AI

회사에서 Claude Code를 도입하며, "AI 도구를 실무에 어떻게 활용하여 어떤 것들을 개선하면 좋을까?"를 팀원들과 함께 실험 중입니다.
몇몇 분들은 Figma MCP를 통해 간단한 템플릿 컴포넌트/페이지를 자동 생성하는 에이전트 및 커맨드를 생성해 보시기도 했습니다.
반복적인 마크업을 빠르게 쌓을 수 있다는 점이 꽤 유용했죠.

그러던 중, 제가 우연히 GeekNews에서 Chrome DevTools MCP가 공개되었다는 아티클을 발견하게 되었습니다.
그리고 여기서 생각이 이어졌습니다.

"새로 만든 컴포넌트나 페이지를 Chrome DevTools MCP를 통해 1차적으로 검증하면 어떨까?"

즉, 해당 MCP를 통해 AI가 만든 결과물을 실제 브라우저에서 띄워보고, 렌더링/성능/접근성을 1차로 점검하는 루프를 만들고자 했습니다.

MCP란? 🤔

Model Context Protocol

저는 Chrome DevTools MCP를 사용해보기 전, 우선 MCP라는 용어에 대해 먼저 이해하고 넘어가려고 했습니다.

MCP는 Anthropic이 제안한 오픈소스 표준 프로토콜로,
AI 애플리케이션을 외부 시스템에 연결할 수 있게 해주는 프로토콜입니다.

쉽게 말하자면, USB-C처럼 다양한 기기를 하나의 표준으로 연결하듯이,
MCP는 AI와 데이터 소스, 도구, 워크플로우를 표준화된 방식으로 연결합니다.

기존의 AI는 "텍스트 입력 → 텍스트 출력"이라는 고립된 환경에 제한되어 있었지만,
MCP를 통해 AI가 특정 데이터나 도구에 접근할 수 있게 되었습니다.

예를 들어, Claude는 MCP를 통해 다음과 같은 일을 할 수 있습니다.

  • Figma MCP → 디자인 파일 제어, 컴포넌트 자동 생성
  • Chrome DevTools MCP → 브라우저 실행 및 성능 측정
  • GitHub MCP → 저장소 관리, PR 생성 및 리뷰

Chrome DevTools MCP

Chrome DevTools MCP는 AI 에이전트(Claude, Cursor, Gemini 등)가 Chrome 브라우저를 조작할 수 있게 도와주는 MCP 서버입니다.

간단히 말하면, AI와 Chrome DevTools 사이의 다리 역할을 합니다.
사용자가 자연어로 요청하면, AI가 이를 분석하여 적절한 MCP 툴을 선택하고, MCP 서버가 Chrome을 제어한 뒤 결과를 반환합니다.

예를 들어 "이 웹사이트 성능 체크해줘"라고 요청하면, AI가 자동으로 성능 측정 툴을 호출하여 분석 결과를 제공합니다.

Chrome DevTools MCP는 Node.js 기반으로 동작하며, AI와는 **표준 입출력(stdin/stdout)**을 통해 통신합니다.
이때 메시지는 MCP 프로토콜이 정의한 JSON-RPC 형식으로 주고받으며, 내부적으로는 Puppeteer를 사용해 CDP(Chrome DevTools Protocol) 에 접근하여 Chrome을 제어합니다.

제공하는 26개의 툴 목록과 상세 기능은 Chrome DevTools MCP Tool Reference에서 확인할 수 있습니다.

플로우

그럼 좀더 자세한 흐름에 대해 알아봅시다.
특정 페이지의 성능을 측정해야한다고 가정해볼까요?
그리고 해당 작업을 Claude Code에 Chrome DevTools MCP를 연결하여 수행한다면 다음과 같은 플로우로 진행됩니다.

1. 사용자 입력

> "https://example.com"의 성능을 체크해줘

2. Claude Code (AI 분석)

Claude Code는 사용자가 입력한 자연어를 분석하고 문맥을 파악하기 시작합니다.
그리고 어떤 작업이 필요한지 결정하게 됩니다.

위 예시를 바탕으로, 현재는 성능 측정이 필요하다고 결정하고
Chrome DevTools MCP의 tool 중 이를 위해 필요한 아래와 같은 tool들을 선택합니다.

 navigate_page → performance_start_trace → performance_stop_trace

3. Claude Code → MCP 서버 (stdin)

이제 MCP 서버와 통신을 시작하는데, 먼저 브라우저가 실행되고 있는지 확인을 진행합니다.
만약 실행되고 있지 않다면, 아래와 같은 디버깅용 브라우저를 실행합니다.

Debugging Chrome BrowserDebugging Chrome Browser

그리고 이어서 선택한 tool들을 차례대로 실행하며 브라우저를 제어하기 시작합니다.

/* 0. 브라우저 실행 */
  {
    "method": "tools/call", 
    "params": {
      "name": "new_page",
      "arguments": {
        "url": "about:blank"
      }
    }
  }
 
/* 1. 페이지 이동 */
  {
    "method": "tools/call", 
    "params": {
      "name": "navigate_page",
      "arguments": {
        "url": "https://example.com"
      }
    }
  }
 
/* 2. 성능 측정 시작 */
  {
    "method": "tools/call", 
    "params": {
      "name": "performance_start_trace",
      "arguments": {}
    }
  }
 
/* 3. 성능 측정 종료 */
  {
    "method": "tools/call", 
    "params": {
      "name": "performance_stop_trace",
      "arguments": {}
    }
  }

4. MCP 서버 (데이터 처리 및 포맷팅)

MCP 서버는 Claude Code로부터 받은 performance_stop_trace 요청을 처리하기 시작합니다.

내부적으로 src/tools/performance.ts의 tool.handler()가 실행되며,
Puppeteer를 통해 Chrome DevTools Protocol에 접근하여 성능 트레이스를 분석합니다.

이 과정에서 LCP(Largest Contentful Paint), FCP(First Contentful Paint) 등 핵심 성능 메트릭을 추출하고,
"LCP: 2.5s, FCP: 1.2s..." 형식으로 포맷팅하여 Claude Code에 전달할 준비를 완료합니다.

5. MCP 서버 → Claude Code (stdout)

MCP 서버는 포맷팅된 성능 데이터를 표준 출력(stdout)을 통해 Claude Code에게 다시 전달합니다.

  {
    "result": {
      "content": [
        {
          "type": "text",
          "text": "# performance_stop_trace response\nLCP: 2.5s\n..."
        }
      ]
    }
  }

6. Claude Code (AI 해석)

Claude Code는 MCP 서버로부터 받은 성능 메트릭을 분석합니다.

"LCP 2.5s는 개선이 필요하다"고 판단하고,
이를 바탕으로 구체적인 최적화 제안을 생성합니다.

7. 사용자에게 응답

마지막으로 Claude Code는 분석 결과를 사용자가 이해하기 쉬운 자연어로 변환하여 응답합니다.

  "example.com의 성능을 분석했습니다.
  - LCP: 2.5초 (권장: 2.5초 이하)
  - 큰 이미지 로드가 지연 원인입니다
  - 이미지 압축과 lazy loading을 추천합니다"

어떻게 활용할 수 있을까?

어느 정도 Chrome DevTools MCP에 대해 이해를 하고 나서, 본격적으로 어떻게 활용해볼 수 있을지에 대해 고민해보았습니다.

Figma MCP와의 연계

팀원분들께서 Figma MCP를 사용해 페이지나 컴포넌트를 생성한 경우, 디테일적인 부분에 있어 아래와 같은 아쉬움이 존재한다고 말씀해주셨습니다.

  • 같은 컴포넌트에 대해 다른 결과가 나옴
  • 스타일이 제대로 적용되지 않음
  • 이미지가 누락됨
  • ...

따라서 이러한 아쉬움을 해당 MCP로 보완하면 어떨까 생각하게 되었습니다.

이후, Figma에서 특정 프레임을 선택한 후, Figma MCP로 새로운 컴포넌트나 페이지를 생성하여 Chrome DevTools에게 해당 코드가 적용된 URL로 이동해 검증을 진행해보았습니다.

이때 Chrome DevTools MCP의 두 가지 도구를 활용했습니다.

take_screenshot는 브라우저에 렌더링된 화면을 이미지로 캡처하여, Figma 디자인과 실제 구현을 시각적으로 비교할 수 있게 해줍니다.
take_snapshot은 페이지의 접근성 트리를 텍스트로 추출하여, 버튼/링크/헤딩 등의 구조가 올바른지 확인할 수 있습니다.

이 두 도구를 통해 선택한 Figma 프레임과 비교하며 잘못 구현된 부분을 짚어내고, 약간의 수정으로 코드를 완성할 수 있었습니다.

SEO

위 실험(?)을 진행한 후, take_snapshot을 활용한다면 SEO에도 활용할 수 있지 않을까 생각하게 되었습니다.

그래서 특정 페이지의 SEO 향상을 위해 가이드라인을 제시해달라는 요청을 지시해보았습니다.
실제로 take_snapshot을 통해 페이지의 접근성 트리를 텍스트로 추출한 후, evaluate_script라는 tool을 추가로 활용하여 해당 페이지를 분석하기 시작하였습니다.

evaluate_script는 페이지 내에서 JavaScript 코드를 실행하고 결과를 JSON 형태로 반환하여, document.title이나 메타 태그 같은 SEO 관련 정보를 추출할 수 있습니다.

추가적으로 성능 분석을 위한 tool들이 더 사용되었지만, 위의 두 tool이 메인으로 활용되어 가이드라인을 제시해주는 것을 확인할 수 있었습니다.

위의 내용들 이외에도 form의 값을 채워넣거나 특정 버튼 클릭 등 여러가지 시나리오를 확인할 수 있어 사용성 검증에도 활용될 수 있을 것이라 생각하였습니다.

마무리

운이 좋게도 회사에서 시범적으로 Claude Code를 도입해 다양하게 사용해보고, 개념적으로만 보던 MCP를 직접 활용해볼 수 있었던 좋은 경험이였습니다.

이를 통해 Playwright MCP와 비슷하지만 Chrome DevTools MCP를 통해서도 AI가 코드를 작성하는 것을 넘어 AI가 직접 브라우저에서 검증까지 수행하는 것이 가능하다는 것을 간략하게나마 확인할 수 있었습니다.

물론 아직 모든 케이스를 완벽하게 커버하지는 못하지만, 반복적인 검증 작업을 자동화하고 1차 품질 체크를 AI에게 맡길 수 있다는 가능성을 확인한 것만으로도 충분히 의미 있는 실험이었던 것 같습니다.

이외에도 GitLab, GitHub MCP 등을 통해 PR, MR을 자동으로 생성하거나 테스트하는 플로우도 추가하는 등 다양한 활용도를 고민해보면 더 좋지 않을까 생각해보게 되었습니다 :)

GitHub
LinkedIn
Instagram
Email