공식 Chrome MCP, Playwright를 제치다 (더 많은 도구 & 적은 토큰)

채널 아이콘
JeredBlu 구독자 6,020명

요약

이 영상은 Google이 공식 출시한 Chrome DevTools MCP 서버를 Playwright MCP와 비교하며 설치 방법, 사용 방법, 성능 차이를 보여준다. Chrome DevTools MCP는 별도 브라우저 확장 없이 간단한 JSON 설정만으로 26개의 강력한 도구를 제공해 컨텍스트 윈도우 사용량과 토큰 오버헤드를 줄인다. 실제 YouTube 자동화와 웹 앱 감시 실습을 통해 Playwright MCP 대비 빠른 처리 속도와 전체 토큰 절감을 입증한다. 마지막으로 Cloud Code와 Codeex 통합 팁을 공유하며, 더욱 효율적인 웹 자동화 환경 구성을 제안한다.

주요 키워드

Chrome DevTools MCP 서버 Playwright MCP 서버 컨텍스트 윈도우 토큰 Cloud Code Codeex performance.trace evaluateScript headless 모드 웹 자동화

하이라이트

  • ⚡️ 공식 Chrome DevTools MCP는 별도 확장 없이 26개의 내장 도구를 제공해 Playwright MCP를 능가한다.
  • 🔑 설치 준비는 VS Code나 Cloud Code에서 MCP.json 파일에 GitHub의 JSON 설정만 붙여넣으면 끝난다.
  • 🚀 단일 MCP 서버만 적용해도 컨텍스트 윈도우 사용량이 14%에 불과해 오버헤드를 크게 줄인다.
  • 🌟 동일 작업 기준으로 Playwright MCP는 약 13,000 토큰의 대규모 응답을 발생시키지만, Chrome MCP는 더 적은 토큰으로 처리한다.
  • 📌 YouTube에서 “Jared Blue” 검색, 최신 영상 클릭 자동화를 통해 안정적이고 정확한 제어를 입증했다.
  • 🔧 JSON을 TOML로 변환해 Codeex에서도 손쉽게 사용 가능하며 headless 옵션 등 추가 인자 설정도 간단하다.
  • 📈 performance.startTrace/stopTrace와 evaluateScript 같은 고급 도구로 세밀한 성능 분석과 개선 인사이트를 제공한다.
  • 🛠️ Cloud Code는 서브 에이전트와 슬래시 커맨드 인자 전달 등 풍부한 기능을, Codeex는 빠른 응답과 낮은 토큰 사용량을 강점으로 지닌다.

용어 설명

Chrome DevTools MCP 서버

Google이 공식으로 제공하는 MCP 서버로, 추가 확장 없이 Chrome 브라우저를 제어하는 도구 모음이다.

Playwright MCP 서버

Playwright(웹 애플리케이션 테스트 라이브러리)용 MCP 서버 확장으로, 브라우저 확장 설치 후 UI·네트워크 모니터링, 디버깅 기능을 지원한다.

컨텍스트 윈도우

AI 모델이 한 번에 읽고 처리할 수 있는 입력(토큰) 범위를 의미한다.

토큰

AI 모델이 텍스트를 분할해 처리하는 최소 단위로, 토큰 수가 많아지면 컨텍스트 윈도우를 더 많이 차지한다.

Cloud Code

Google Cloud의 통합 개발 환경으로, MCP 서버 설정과 웹 자동화를 매끄럽게 지원한다.

Codeex

경량 AI 코딩 도구로, 빠른 반응 속도와 낮은 토큰 사용량을 지향하며 TOML 설정을 사용한다.

Headless 모드

브라우저 GUI 없이 백그라운드에서 실행하는 모드로, 자동화 환경에서 자주 활용된다.

[00:00:00] MCP 서버 데모 소개

영상 시작에서 MCP 서버를 이용해 Chrome을 열고 YouTube에서 검색 후 영상을 클릭하는 과정을 시연한다. 이 실습을 통해 자동화 에이전트가 UI 요소를 인식하고 조작하는 기능을 직관적으로 확인한다. 이어서 해당 작업이 컨텍스트 윈도우를 얼마나 차지하는지 측정할 것을 예고한다.

MCP 서버가 Chrome을 자동으로 열고 YouTube에서 동영상 검색 및 클릭하는 성공적인 시연을 보여주며, 컨텍스트 창 사용량을 확인합니다.
[00:00:15] 공식 Chrome DevTools MCP 출시

Google이 Playwright MCP 서버를 대체할 공식 Chrome DevTools MCP 서버를 공개했다고 소개한다. Playwright와 비교해 '더 많은 도구, 적은 오버헤드'를 제공하며 드래그&드롭처럼 손쉽게 교체할 수 있음을 강조한다. 추가 설정 없이 JSON 구성만으로 즉시 활용 가능하다.

Google에서 공식 출시한 Chrome DevTools MCP 서버를 소개하며, 이것이 Playwright MCP의 거의 완전한 대체제라고 설명합니다. 더 적은 컨텍스트로 더 많은 기능을 제공한다고 강조합니다.
Chrome DevTools GitHub 페이지를 보여주며 Playwright MCP와의 차이점을 설명합니다. Playwright는 브라우저 확장이 필요했지만 Chrome DevTools MCP는 Chrome에서 만들었기 때문에 확장이 불필요하다고 합니다.
[00:00:45] 설치 및 설정 방법

VS Code 프로젝트 또는 Cloud Code에서 MCP.json 파일을 생성해 GitHub의 기본 JSON 설정을 붙여넣으면 준비가 완료된다. Cloud Code에서 새로운 MCP 서버 추가 여부를 묻는 프롬프트에 '예'를 선택해 활성화한다. 설치 후 26개의 도구가 등록된 것을 확인할 수 있다.

타임라인 정보가 없습니다.

[00:01:19] 컨텍스트 윈도우 사용량 분석

빈 프로젝트의 공식 Chrome MCP 서버만 적용했을 때 /context 명령으로 확인한 결과, MCP 도구가 컨텍스트의 6%를 차지한다. 전체 대화 컨텍스트에서는 약 14%의 사용률을 보이며, 토큰 절감 여력이 충분함을 보여준다. 이 데이터를 토대로 Playwright MCP와 비교할 기준을 마련한다.

새 VS Code 프로젝트에서 MCP.json 파일을 생성하고 Chrome DevTools MCP 설정을 복사해서 붙여넣는 간단한 설치 과정을 시연합니다.
Claude Code에서 MCP 서버를 추가하는 과정을 보여주며, Chrome DevTools MCP에 26개의 도구가 있음을 확인합니다.
[00:02:00] Playwright MCP와 도구·컨텍스트 비교

Playwright MCP 서버를 별도 확장만 추가해 테스트한 결과, 21개의 도구와 함께 컨텍스트 윈도우 사용률이 26%에 달했다. 공식 Chrome MCP는 26개 도구를 제공하면서도 비슷하거나 더 낮은 리소스를 소모해 효율성이 높다는 결론을 이끈다. 주요 차별점으로 성능 측정 및 스크립트 평가 도구를 꼽는다.

빈 프로젝트와 빈 채팅에서 MCP 도구들이 컨텍스트 창의 6%를 차지하며, 단일 MCP 서버로 이미 전체의 14%를 사용하고 있다고 분석합니다.
Chrome DevTools MCP 서버와 Playwright MCP 서버의 컨텍스트 사용량과 도구 수를 비교합니다. DevTools는 26개 도구를, Playwright는 21개 도구를 제공하며 비슷한 컨텍스트를 차지합니다.
Chrome DevTools MCP 서버의 특별한 기능들을 살펴봅니다. 성능 추적 시작/중지, 스크립트 평가, 성능 분석 인사이트 등의 고유한 도구들이 있습니다.
[00:03:22] 실제 작업 자동화 데모

Chrome DevTools MCP로 YouTube 검색→영상 클릭 자동화를 진행해 안정성을 재확인한다. Playwright MCP는 확장 연결 오류와 사용자 프로필별 설정 이슈가 있었으나, Chrome MCP는 권한 허용만으로 원활히 실행됐다. 두 서버의 토큰 사용량 차이를 비교하며 Chrome MCP의 토큰 절감 효과를 입증한다.

Chrome DevTools MCP를 사용해 YouTube 자동화 테스트를 시작합니다. youtube.com에 접속하여 'Jared Blue'를 검색하고 최신 비디오를 클릭하는 과정을 자동으로 수행합니다.
Chrome DevTools MCP가 성공적으로 YouTube 탐색을 완료합니다. 스크린샷을 찍어 페이지 위치를 파악하고, 검색어를 입력하여 채널을 찾고 최신 비디오로 이동했습니다. 컨텍스트 사용량이 13%에서 21%로 증가했습니다.
Playwright MCP 서버로 동일한 테스트를 시도합니다. 그러나 Chrome 브라우저에 Playwright 확장 프로그램이 필요하다는 문제점이 발생했습니다. 각 사용자 프로필마다 서로 다른 확장 프로그램 설정이 있어 추가 설정이 필요합니다.
Playwright와 Chrome DevTools MCP 서버의 성능 비교를 통해 Chrome DevTools가 더 적은 토큰(21% vs 26%)으로 동일한 작업을 완료할 수 있음을 보여줍니다.
[00:04:50] Codeex(TOML) 통합 및 팁

JSON 설정을 TOML로 변환해 Codeex 환경에 적용하는 방법을 소개한다. d-headless 같은 추가 인자를 쉼표로 구분해 쉽게 설정할 수 있으며, headless 모드 외에도 다양한 커맨드 옵션을 활용 가능하다. localhost 감시, 콘솔 로그 검사 등 실전 팁도 공유한다.

Chrome의 공식 MCP 서버 설치 방법과 Codeex에서의 TOML 설정을 안내하며, headless 모드와 같은 옵션 설정 방법을 설명합니다.
[00:06:00] 결론 및 추천

Chrome DevTools MCP 서버는 Playwright MCP 대비 간편 설치, 더 많은 도구, 낮은 토큰 사용량이라는 장점을 갖춘 최적의 솔루션이다. Cloud Code와 Codeex 중 자신에게 맞는 개발 환경을 선택해 활용 가능하며, 특히 컨텍스트 사용량 표시 기능이 효율성 인식에 큰 도움이 된다. 사용 후 질문이나 피드백은 댓글로 남기길 권장하며 구독을 요청한다.

Chrome DevTools MCP 서버의 실제 사용 예시를 보여주며, contextlop.com 접속을 통해 빠른 실행 속도를 확인합니다.
로컬 개발 환경에서 Chrome DevTools MCP의 활용 팁을 제공합니다. 웹사이트 감사, 콘솔 분석, 헤더 정보 확인 등을 통한 디버깅 방법을 설명합니다.
Chrome에 깊게 통합된 MCP 서버의 장점을 설명하며, 웹 앱 개발 시 병목 현상 발견과 구조적 개선사항 제안에 활용할 수 있음을 강조합니다.
Claude Code와 Codeex 비교를 통해 Claude Code의 성숙도와 서브 에이전트, 슬래시 명령 등의 기능을 언급하며, 컨텍스트 사용량 시각화의 유용성을 강조합니다.
정말 멋지네요. 여기서 MCP
서버가 우리가 원했던 작업을
정확히 수행했습니다. 크롬을 열고,
유튜브로 이동했으며, 유튜브의
스냅샷을 촬영했습니다. 검색창을 찾아서
제 이름을 입력하고, 최신 동영상을 찾아
클릭했습니다. 이제
컨텍스트를 살펴보고 이 작업이
컨텍스트 창의 얼마나 많은 부분을
차지했는지 확인해보겠습니다. 이 동영상에서는
구글에서 공식적으로 출시한 MCP 서버인
크롬 개발자 도구 MCP에 대해
이야기하겠습니다. 이 MCP 서버는 거의
완전한 드래그 앤 드롭 대체제로
Playwright MCP 서버를 대체할 수 있습니다. Playwright가
하는 거의 모든 일을 수행하지만,
더 적은 컨텍스트와 더 많은 기능으로
더 적은 오버헤드로 더 잘 수행합니다. 이 동영상에서는
설정 방법과 사용법을 보여드리고
Playwright MCP 서버와 비교해보겠습니다.
여기가 크롬 개발자 도구 GitHub 페이지입니다.
Playwright나 Playwright MCP를 모르는 분들을 위해
설명하자면, Playwright는 본질적으로
제가 MCP 서버로 사용해온
접근성 도구로, 이런
전체 피드백 루프를 만들기 위해 사용했습니다. 예를 들어 웹앱을
만들 때, 에이전트가 UI나 UX가
제가 사양에서 계획한 대로 되었는지
확인하도록 하고, 속도 모니터링을 위해
네트워크 호출을 확인하고,
콘솔을 보고 디버깅도 도와주어
크롬 콘솔과 제가 사용하는
에이전트 사이에서 복사 붙여넣기를
하지 않아도 되게 했습니다.
아마 Claude Code나 Cursor, 또는
Gemini CLI를 사용했겠죠. Playwright MCP를 사용할 때는
크롬 브라우저와 함께 작동시키려면
브라우저 확장을 추가해야 했습니다. 그래야 MCP 서버가
크롬 브라우저와 통신하고
무슨 일이 일어나고 있는지
이해할 수 있었습니다.
하지만 크롬 개발자 도구 MCP는
크롬에서 만들었기 때문에
확장을 추가할 필요가 없습니다.
너무 많은 설정을 할 필요도 없고,
MCP 설정에 JSON을 넣기만 하면
모든 것이 준비됩니다. 새로운 VS
Code 프로젝트를 열고
MCP.json 파일을 생성한 다음
크롬 개발자 도구의 MCP 설정을
넣었습니다. GitHub에서
찾을 수 있고, 관련 블로그 포스트도
보여드릴게요. 매우 간단합니다.
여기서 가장 기본적인 설정
설치를 복사해서 VS Code에
붙여넣으면 됩니다. 이 경우에는
Claude Code에서 사용하겠습니다.
빈 디렉토리에 MCP.json 파일을
생성했습니다. 이제 Claude Code를 시작하면
이 MCP 서버를 추가할지
묻습니다. 예라고 답하겠습니다.
이제 MCP를 살펴보겠습니다.
뭐가 있는지 확인해보죠.
크롬 개발자 도구 MCP가 보이고
26개의 도구가 있는 것을 볼 수 있습니다.
이제 궁금한 것은 이것이 얼마나 많은 컨텍스트를
차지하는지입니다. 알다시피
MCP 서버를 더 많이 추가할수록
컨텍스트 창을 더 많이 차지합니다.
이것은 빈 프로젝트의 빈 채팅입니다.
/context를 확인해보겠습니다.
여기서 볼 수 있듯이 이 MCP 도구들이
컨텍스트 창의 6%를 차지합니다.
단일 MCP 서버가 있는 빈 채팅에서
이미 우리는 14% 컨텍스트를 사용하고 있습니다.
14% 컨텍스트입니다. 괜찮긴 하죠. 알아두면 좋고요. 이제 하고 싶은 건
Playwright MCP 서버를 보고
도구들을 간단히 비교해보는 거예요.
새 프로젝트를 열었고
Playwright만 사용하고 있어요. MCP 서버도
하나만 추가했습니다. 여기 보시면
이건 Playwright 확장 프로그램입니다.
클릭해보면
21개의 도구가 있다는 걸 볼 수 있어요.
그럼 /context를 해보겠습니다. 네, 왼쪽에는
새로운 Chrome DevTools MCP 서버가 있고
오른쪽에는
Playwright MCP 서버가 있습니다.
Playwright MCP 서버에는
21개의 도구가 있는 반면 Chrome DevTools
MCP 서버에는 26개의 도구가 있고
거의 같은 양의
컨텍스트를 차지하는 것 같습니다. 이제
차이점을 간단히
살펴보겠습니다. 두 서버 간의
차이점을 이해해보려고 해요.
공식 Chrome Dev Tools에서 눈에 띄는 주요한 것은
성능 시작 추적, 성능
중지 추적, 스크립트 평가이고
성능 분석 인사이트 도구도 있어요.
네, 그럼 테스트해보겠습니다.
Chrome DevTools를 사용해서
youtube.com에 가서
Jared Blue를 검색하고 그의
최신 유튜브 비디오를 클릭해달라고 하겠습니다.
이렇게 하면 Chrome 브라우저가 열리고
유튜브로 가서 제 유튜브
채널을 검색하고 그다음
최신 비디오로 클릭할 거예요.
어떻게 작동하는지 보죠.
많은 권한을 요청할 거예요.
허용하겠습니다.
여기에 놓겠습니다. 그냥
계속 예라고 하겠습니다. 거기서 한 건
유튜브 페이지에서 어디에 있는지 이해하기 위해
스크린샷을 찍은 거예요. 이제
Jared Blue라고 입력하고 싶어하네요.
제 채널을 검색했고 그다음
최신 비디오로 클릭했어요.
논AI 비디오였죠. 거의
제 Mac에 밤 모드를 추가하는 방법을 보여줬어요.
배경을 바꾸고 데스크탑의
색조를 빨간색으로 바꿔서 밤늦게
계속 일할 수 있도록
파란 빛이 눈에 들어오지 않도록 하는
방법이었어요. 비디오는
별로 성과가 좋지 않았지만 여기서
MCP 서버가 정확히 우리가
원한 작업을 수행했다는 걸 봤어요. 이제
컨텍스트를 보고 얼마나 많은
컨텍스트 창을 채웠는지 보겠습니다.
약 13%에서 21%로 올라갔네요. 이제
Playwright MCP 서버로
같은 작업을 해보고 얼마나 많은 컨텍스트를
사용하고 어떻게 작동하는지 보겠습니다. 이제
Playwright만 있는 프로젝트에 있어요.
모든 것에 대한 권한을 주겠습니다.
이제 새 브라우저 페이지를 열고 있어요.
기본적으로 Playwright는 바로 실패했어요.
Chrome 브라우저에 Playwright
확장 프로그램이 설치되어 있어야 하거든요.
제가 설치는 했지만
모든 사용자 프로필마다
다른 확장 프로그램들이 있죠. 네, 방금
올바른 사용자 프로필로 갔어요. 그럼
다시 해보겠습니다. 이제 저에게
확장 프로그램에 연결하라고 요청하고 있어요. 다시 말하지만
공식 Chrome MCP 서버로는
이런 과정이 필요 없어요. 그래서 이제
검색 바를 찾고 있습니다.
이제 진행하도록 하겠습니다. Jared Blue를 입력했네요.
좋습니다. Playwright가 결국
제가 요청한 동영상이 있는
제 YouTube 채널로 안내했습니다. 여기서
주목할 점은 Playwright 확장이
우리에게 경고를 주었다는 것입니다. 큰 MCP 응답으로
거의 13,000 토큰이나 됩니다. 이제 만약
/context를 실행하면, 같은 과정에서
몇 가지 문제가 있었지만 결국
우리 컨텍스트 윈도우의 26%를 차지했습니다. 그리고
Chrome DevTools로 이것을 실행했을 때를 보면,
컨텍스트 윈도우의 21%만 차지했습니다.
따라서 Chrome DevTools는
더 많은 MCP 도구를 제공하면서도 오버헤드가 적습니다.
확장 프로그램을 설치할 필요도 없고,
더 적은 토큰을 사용하며
작업을 더 빠르게 완료할 수 있습니다. 그리고
이들의 불공정한 장점은 이것이
Chrome이라는 것입니다. 그들은 자체
브라우저를 제어할 수 있는
자체 MCP 서버를 출시했고 저는 이것을 지지합니다.
우리는 MCP 서버가 최소한의
토큰을 사용하여 컨텍스트를 부풀리지 않기를 원합니다.
정말 훌륭합니다. 저는 얻을 수 있는
모든 최적화를 지지합니다. 만약
이것을 Codeex에 설치하고 싶다면,
매우 간단한 설치입니다. 같은 방법입니다.
JSON을 가져와서 TOML로 변환하기만 하면 됩니다.
이에 대한 몇 개의 비디오를 이미 만들었습니다.
위에 링크를 걸어두겠습니다.
하지만 이것이 이 MCP 서버의
가장 기본적인 인스턴스에 필요한 정확한 TOML입니다.
그리고 원한다면, 예를 들어
다른 인수를 추가하려면, 쉼표만 추가하면 됩니다.
예를 들어 headless를 추가하고 싶다면,
d-headless equals true라고 하면 됩니다.
그러면 headless로 실행할 수 있습니다.
하지만 저는 실제로 headless 실행을 좋아하지 않습니다.
무엇이 진행되고 있는지 볼 수 있는 것을 좋아합니다.
이제 원래 프로젝트로 돌아와서
Codeex ID 확장을 열었습니다.
Chrome DevTools를 사용해서 contextlop.com으로
가라고 하면, 어떤 일이 일어나는지 봅시다.
그리고 이것을 위해 GPT-4o Codeex를 사용하고 있습니다.
보시다시피, Chrome이 열렸습니다. 그리고 이것을
전체 화면으로 만들고, 매우 빠르게 실행되었습니다.
그리고 여기에 localhost를 사용하는
모든 바이브 코더들을 위한 특별한 팁이 있습니다.
감사를 수행하고 웹사이트를 살펴보며
실제로 무엇이 진행되고 있는지 이해할 수 있게 하는 것입니다.
콘솔을 보고, 헤더에서
중요한 정보를 전송하고 있는지 확인하거나
노출되고 있는 것이 있는지 확인할 수 있습니다.
농담을 제쳐두고, 이것이 제가
이 MCP 서버에서 얻은 가장 큰 가치입니다.
Playwright도 할 수 있지만, 이 서버는
Chrome에 매우 깊게 통합되어 있어서
실제로 무엇이 진행되고 있는지
이해할 수 있습니다. 따라서 제가 작업하고 있는
웹 앱과 프로젝트에서, 저는
이와 비슷하지만
어떻게 개선하고 싶은지에 대한
더 자세한 내용을 포함한 프롬프트를 보낼 수 있습니다.
실제로 웹사이트를 보고, 웹 앱을 보고,
무엇이 진행되고 있는지 이해하고,
병목 현상을 찾고, 이를 수정하거나
구조적 수준에서 제가 해야 할
더 큰 개선사항을 제안할 수 있습니다.
하지만 매우 유용했습니다.
그리고 네, 저는 여전히
Claude Code를 사용하고 있습니다. Codeex를
많은 것들에 좋아하고 훨씬 더
효율적이었지만, Claude Code는 여전히
훨씬 더 성숙합니다. 서브 에이전트와 같이
Codeex에는 아직 없는 많은 기능들을 가지고 있습니다.
슬래시 명령에서 인수를 전달하는 능력 등이요.
그리고 여기 우리의 사용 사례에서
저는 얼마나 많은 컨텍스트가
사용되고 있는지 보여주는 방식을 정말 좋아합니다.
이것은 예를 들어 MCP 서버가
어떻게 컨텍스트를 차지하는지 이해하는 데
도움이 되는 정말 훌륭한 설명이라고 생각합니다.
그래서, 이것이 Chrome 공식 팀에서 나온
Chrome DevTools MCP 서버입니다.
정말 좋은 MCP 서버라고 생각합니다.
Playwright MCP보다 사용하기 훨씬 쉽고
토큰 사용량도 적습니다.
확인해보실 것을 권장합니다.
질문이나 피드백이 있으시면
아래 댓글에 남겨주세요.
아직 구독하지 않으셨다면, 채널을 구독해주세요.
정말 제가 성장하는 데 도움이 됩니다.
시청해주셔서 감사하고 좋은 하루 보내세요.