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