커서와 함께하는 브라우저 MCP: 작업 및 테스트 자동화
All About AI
구독자 189,000명
요약
해당 영상은 브라우저 MCP 서버를 활용하여 Chrome 확장 프로그램 설치부터 서버 설정, 그리고 다양한 자동화 작업을 수행하는 방법을 상세히 설명합니다. 영상에서는 JSON 설정 파일을 Cursor 도구에 등록해 자동으로 웹페이지를 조작하고 스냅샷을 찍거나 API 문서를 수집하는 과정을 시연합니다. 또한 헤드라인 수집과 로컬 테스트 앱을 이용한 자동화 테스트 과정을 통해 MCP의 다양한 기능과 가능성을 소개합니다. 마지막으로 OpenAI 에이전트 SDK와의 통합 테스트 예고로 향후 발전 가능성도 언급됩니다.
주요 키워드
MCP
Cursor
자동화
Chrome 확장 프로그램
네비게이션
스크린샷
API 문서
헤드라인
테스트
OpenAI 에이전트 SDK
하이라이트
- 🔑 Chrome 확장 프로그램을 통해 손쉽게 MCP 서버와의 연결 설정을 완료함.
- 📌 JSON 기반 서버 구성 파일을 Cursor에 복사하여 자동화를 구현하는 방법을 시연함.
- 🚀 웹페이지 네비게이션과 스냅샷 기능을 이용해 빠른 테스트 및 코드 수정 과정을 보여줌.
- 🌟 예제 코드를 작성하여 test.py 파일과 API 문서를 자동으로 생성하는 기능을 확인함.
- 📌 Hacker News에서 헤드라인을 수집하고, 간단한 카운터 앱 테스트를 수행하여 실제 동작을 검증함.
- ⚡️ 자동화 테스트를 통해 코드 변경 후 웹사이트 동작 확인 과정을 자동으로 진행함.
- 🚀 테스트 중 개인정보 유출 방지를 위해 개인 데이터를 사용하지 않도록 주의사항을 언급함.
- 🌟 향후 OpenAI 에이전트 SDK와의 통합을 통한 추가 자동화 테스트 가능성을 예고함.
용어 설명
MCP
브라우저 자동화 및 테스트 도구로, Chrome 확장 프로그램과 서버 설정을 통해 작동하는 시스템입니다.
Cursor
코드 수정 및 자동 테스트 실행을 지원하는 도구로, MCP와 연동하여 사용됩니다.
Chrome 확장 프로그램
브라우저에서 추가 기능을 제공하는 프로그램으로, MCP 서버와의 연결을 용이하게 해줍니다.
API 문서
텍스트 생성 등 특정 기능에 관한 정보를 자동으로 수집, 저장하는 문서 파일입니다.
auto browser MCP
코드 변경 후 웹페이지를 자동으로 제어하고 테스트하는 기능을 제공하는 MCP의 확장 기능입니다.
OpenAI 에이전트 SDK
OpenAI의 에이전트를 활용하여 자동화 작업을 지원하는 개발 도구입니다.
[00:00:00]
Chrome 확장 프로그램과 MCP 서버 설정
Chrome 확장 프로그램을 설치하고 MCP 서버의 JSON 구성 파일을 복사해 붙여넣는 기본 설정 과정을 설명합니다. 연결 및 초기 설정 방법을 쉽게 안내합니다.
[00:00]
브라우저 MCP 서버 소개와 Chrome 확장 프로그램 설치 방법을 설명합니다.
[00:37]
Cursor에서 MCP 설정을 추가하고 Chrome 확장 프로그램과 연결하는 과정을 보여줍니다.
[00:01:11]
브라우저 네비게이션 및 스냅샷 기능
MCP를 통해 웹페이지에 접근해 Google Gemini 문서 페이지를 열고 스냅샷 기능을 시연합니다. 간단한 클릭 명령과 URL 접근으로 기능을 확인합니다.
[01:11]
브라우저 MCP를 통해 Google Gemini 문서에 접근하고 스크린샷을 캡처하는 기능을 시연합니다.
[02:01]
Python 코드 예제를 찾아 test.py 파일로 저장하는 과정을 보여줍니다.
[00:03:03]
코드 작성 및 API 문서 생성
예제 코드를 작성해 test.py 파일로 저장하고, 텍스트 생성 페이지에서 API 문서를 자동으로 수집하는 과정을 보여줍니다. 음성 명령을 통한 작업 지시도 포함됩니다.
[03:03]
음성 명령을 통해 텍스트 생성 문서를 API docs.txt로 저장하는 작업을 수행합니다.
[03:44]
API 문서 자동화 수집과 저장 기능을 시연하며, 이것이 프로젝트 문서화에 시간을 절약해주는 유용한 도구라고 설명합니다.
[00:04:20]
헤드라인 수집과 카운터 앱 테스트
Hacker News의 상위 헤드라인을 수집하여 파일로 저장하는 과정을 시연하며, 간단한 카운터 앱을 로컬 서버에서 테스트합니다. 실제 웹페이지 상호작용을 통한 기능 확인이 이루어집니다.
[04:30]
해커뉴스 웹사이트에서 상위 10개 헤드라인을 자동으로 수집하여 텍스트 파일로 저장하는 과정을 보여줍니다.
[05:10]
간단한 카운터 앱을 만들어 로컬호스트에서 실행하고 자동화된 테스트를 시도하려 했지만, 실행에 어려움이 있었습니다.
[06:47]
앱을 수정하여 텍스트 입력 필드를 추가했으나, 앱이 계속 리셋되는 문제가 발생하여 테스트가 제대로 진행되지 않았습니다.
[00:07:03]
자동화 테스트 및 추가 기능 시연
텍스트 입력 필드를 통한 추가 테스트와 자동화된 버튼 클릭, 스냅샷 테스트를 진행하며, 브라우저 MCP가 코드 변경 후 자동 테스트를 수행하는 모습을 보여줍니다. 마지막에는 OpenAI 에이전트 SDK와의 통합 가능성을 예고합니다.
[07:24]
브라우저 문제로 인한 어려움을 겪고 있지만, 이 아이디어가 매우 흥미롭다고 생각하며 자동화된 테스팅에 활용할 수 있을 것으로 기대합니다.
[08:00]
기본적인 리액트 앱에서 버튼 클릭 시 카운트가 증가하는 기능을 시연하며, 커서에게 2씩 증가하도록 변경을 요청합니다.
[08:25]
자동 브라우저 MCP를 통해 커서가 직접 브라우저를 제어하고 코드 변경사항을 테스트할 수 있음을 설명합니다.
[09:04]
커서가 자동으로 웹사이트에 접속하여 버튼 기능을 테스트하고 카운트가 정상적으로 증가하는지 확인합니다.
[09:51]
브라우저 MCP 사용 시 보안상의 이유로 개인정보가 포함된 작업은 피해야 한다는 주의사항을 전달합니다.
[00:00]
오늘은 제가 사용해본 아주 멋진
[00:02]
MCP 서버를 보여드리려고 합니다.
[00:04]
이것은 브라우저 MCP인데요,
[00:07]
설정 방법을 보여드리겠습니다.
[00:08]
아주 간단합니다. 먼저 여기
[00:11]
Chrome 확장 프로그램을 설치해야 합니다.
[00:13]
Chrome에 추가하는 건 매우 간단하고,
[00:16]
그 다음에는 서버를 설치해야 합니다.
[00:19]
문서 페이지로 가서
[00:21]
시작 가이드를 확인할 수 있습니다.
[00:24]
오늘은 Cursor를 사용할 건데요,
[00:28]
아주 간단합니다.
[00:31]
여기 서버 설정이 있으니
[00:34]
이 설정을 복사하겠습니다.
[00:37]
이제 Cursor로 가서
[00:39]
설정 메뉴에서 MCP를 선택하고
[00:42]
새로운 글로벌 MCP 추가를 클릭하면
[00:46]
JSON 파일이 나타나는데,
[00:48]
여기에 복사한 내용을 붙여넣으면 됩니다.
[00:50]
이게 기본적으로 해야 할 전부입니다.
[00:53]
한 가지 더 해야 할 것이 있는데요,
[00:57]
Chrome 확장 프로그램에서
[01:00]
연결 버튼을 클릭하고
[01:04]
페이지를 새로고침하면
[01:06]
모든 준비가 끝납니다.
[01:08]
이제 시연을 해보겠습니다.
[01:11]
기본적으로 브라우저를 설정하고
[01:14]
Cursor에서 브라우저를 사용할 수 있는데
[01:15]
이를 통해 할 수 있는 멋진 기능들이
[01:18]
몇 가지 있습니다.
[01:20]
여기 제 브라우저 탭이 보이죠.
[01:22]
Cursor가 연결된 것을 확인할 수 있습니다.
[01:24]
이제 제가 할 수 있는 것은
[01:27]
'이동'을 통해 Google Gemini
[01:30]
문서를 확인해보겠습니다.
[01:33]
실행하면 MCP 도구에
[01:34]
연결되고 URL이 표시됩니다.
[01:37]
이제 실행하면 왼쪽에서
[01:40]
얼마나 빠른지 보실 수 있죠.
[01:43]
이걸 조금 옮겨보겠습니다.
[01:46]
이제 스냅샷을 찍을 수 있는데
[01:48]
이는 기본적으로 스크린샷으로
[01:50]
정보를 추출할 수 있습니다.
[01:51]
좋습니다.
[01:56]
이제 클릭을 해보겠습니다.
[02:01]
Python 코드 예제로 변경해보죠.
[02:04]
브라우저에서 이제
[02:07]
Python을 찾아볼 건데
[02:09]
클릭 도구를 실행해보겠습니다. 완벽하네요.
[02:12]
얼마나 멋진지 보이시죠.
[02:17]
이제 예제 코드가 필요한데
[02:22]
test.py로 저장해보겠습니다.
[02:27]
지금 Cursor에서 에이전트 모드를 사용 중입니다.
[02:30]
이제 이 예제 코드를 가져와서
[02:33]
test.py를 만들고
[02:35]
수락해보겠습니다.
[02:39]
코드를 보시면
[02:42]
여기 있는 것과 정확히 일치하는 것을
[02:45]
볼 수 있습니다. 이걸 옮겨보면
[02:48]
여기 있네요. 완벽합니다.
[02:52]
이제 기능들을 확인해볼까요?
[02:55]
다시 불러와서
[02:59]
음성 명령을 사용할 수 있습니다.
[03:03]
음성 명령으로
[03:05]
텍스트 생성에 대한
[03:08]
추가 문서가 필요한데,
[03:11]
해당 페이지로 가서
[03:14]
텍스트 생성 페이지의 정보를
[03:16]
API docs.txt로 저장해주세요.
[03:21]
긴 프롬프트를 시도해보고
[03:24]
모든 도구를 실행해보겠습니다.
[03:28]
텍스트 생성으로 이동했네요.
[03:31]
이제 아마도
[03:32]
스크린샷을 찍을 거예요.
[03:35]
스냅샷을 찍고
[03:38]
이제 API docs.txt를 만들 텐데
[03:41]
정말 멋지죠.
[03:44]
우리가 할 수 있는 다른 것들이 있는데
[03:46]
곧 보여드릴 건데 제가 생각하기에
[03:47]
매우 흥미로운 것들이에요. 이것은 시간을 절약해줄 수 있죠
[03:50]
프로젝트의 문서를 자동으로
[03:51]
수집하고 싶을 때 유용합니다
[03:55]
이제 API 문서를 작성할 건데요
[03:57]
txt 파일로 만들어서 살펴보겠습니다
[04:00]
자, 여기서 볼 수 있죠. 이걸 확대해보면
[04:04]
이렇게 있는데요
[04:05]
텍스트 생성 Gemini API
[04:08]
문서가 있고, 이것은 매우 간단한
[04:10]
방법으로 모든 문서를
[04:12]
가져온 거예요. 꽤 멋진
[04:15]
네비게이션 기능이죠. 이제
[04:17]
다른 페이지로 해볼게요. 이걸 지우고
[04:20]
이걸 삭제하고 열어서
[04:23]
이렇게 하고, 한번 확인해볼까요
[04:30]
해커 뉴스를
[04:34]
뭐 이런 걸로 해보죠
[04:37]
여기로 이동할 거고, 완벽하네요
[04:40]
자 이제
[04:43]
좋아요, 상위 10개의
[04:47]
헤드라인을 가져와서 저장해볼게요
[04:51]
hackernews.txt에 보시면
[04:53]
헤드라인들이
[04:55]
여기 있네요, 좋습니다
[04:58]
스냅샷도 찍었나요? 네, 성공했네요
[05:02]
꽤 빨랐죠. 이제 아시겠죠
[05:05]
브라우저를 어떻게 조작하는지
[05:06]
하지만 다른 멋진 기능을
[05:08]
보여드리고 싶은데요. 이걸 설정하고 나면
[05:10]
할 수 있는 다른 것이 있어요
[05:12]
간단한 카운터 앱이나 뭐 그런 걸
[05:15]
만들어보고 싶은데요, 정말 간단한
[05:17]
앱을 실행하고 로컬호스트로 이동해서
[05:20]
간단한 테스트를 해보고 싶어요
[05:22]
이걸로요
[05:24]
간단한 카운터 앱을 만들어주시겠어요?
[05:28]
위아래로 카운트되는 버튼이 있는
[05:30]
앱을 설치하고 로컬호스트에서
[05:34]
3001 포트로 실행해주세요
[05:37]
그리고 간단한 테스트를 해볼게요
[05:40]
이 앱으로 이동한 다음에요
[05:44]
한번 시도해보고 어떻게 되는지
[05:47]
살펴보죠. 지금은 당연히
[05:50]
cloth를 사용해서 앱을 만들고 있고
[05:52]
hopefully MCP 서버를 사용해서
[05:56]
앱으로 이동해서 잘 작동하는지 볼 수 있을 겁니다
[05:59]
아직 테스트해보진 않았지만
[06:02]
네, 한번 해보죠
[06:05]
꽤 흥미롭다고 생각했는데
[06:07]
앱이 실행되지 않네요. 하지만
[06:10]
자동으로 고칠 수 있는지 봅시다
[06:12]
앱의 스냅샷을 찍어야 할 것 같아요
[06:14]
앱의 스냅샷을 찍어볼게요
[06:16]
실행이 안 되고 있으니
[06:19]
다시 시도해보려고 합니다
[06:22]
좋아요, 성공했네요. 꽤 똑똑하죠
[06:24]
이제 테스트해볼 수 있을까요
[06:27]
좋아요, 카운터로 이동했는데
[06:30]
클릭은 안 되네요
[06:33]
그건 안 되나 보네요. 하지만
[06:37]
버튼 위에 호버는 했어요
[06:39]
이제 클릭을 시도할 텐데
[06:42]
테스트하려고 하진 않네요
[06:45]
그건 안 되는군요
[06:47]
앱을 좀 바꿔볼까요
[06:49]
텍스트 입력 필드를 만들어보죠
[06:52]
텍스트 입력 필드가 있으면
[06:55]
간단한 시를 입력 필드에 써보려고 합니다
[06:59]
입력 필드에요
[07:03]
보시다시피 텍스트 입력 필드가
[07:05]
여기 있고 잘 보이네요
[07:07]
이제 이동을 시도할 건데
[07:10]
클릭하려고 하네요
[07:14]
계속 앱이 리셋되고 있어요
[07:16]
잘 모르겠네요, 좀 이상하지만
[07:19]
다시 계속 재시작되고 있어요
[07:22]
뭔가 문제가 있는 것 같네요
[07:24]
제 브라우저에 문제가 있는 것 같은데
[07:26]
여기서 더 어떻게 해야 할지 모르겠네요. 하지만
[07:29]
아이디어는 정말 멋진 것 같아서
[07:31]
나중에 다시 시도해볼 겁니다. 이를 통해
[07:33]
자동화된 테스팅을 할 수 있거든요. 제가 홈페이지에서
[07:36]
봤던 것처럼 작동하는지
[07:39]
그 영상을 대신 보여드리죠
[07:41]
hackernews.com으로 이동해서 검색해주시겠어요?
[07:49]
MCP를
[07:52]
브라우저로 검색해주세요
[07:56]
좋습니다. 상단의 게시물을 클릭해주세요
[08:00]
제가 아주 기본적인 리액트 앱을 가지고 있는데
[08:03]
버튼을 클릭할 때마다
[08:05]
아주 기본적인 리액트 앱에서 버튼을 클릭할 때마다
[08:07]
카운트가 1씩 증가합니다
[08:09]
그리고 커서에게 새로운 기능을 요청할 수 있어요
[08:12]
2씩 증가하도록 변경해달라고 요청하면
[08:16]
보통은 커서가 코드를 변경하고 나면
[08:19]
제가 다시 앱으로 돌아가서
[08:21]
작동하는지 테스트를 해야 했죠
[08:23]
제대로 동작하는지 확인하기 위해서요
[08:25]
이렇게 커서가 루프에 있었지만
[08:29]
이제 자동 브라우저 MCP를 사용하면
[08:32]
커서가 직접 제 브라우저를
[08:35]
제어할 수 있습니다. 커서에게
[08:37]
변경사항을 만든 후
[08:39]
로컬 서버에서 자동 브라우저로
[08:41]
테스트하라고 지시할 수 있죠
[08:44]
이제 다시 돌아가서 같은 요청을 해보겠습니다
[08:49]
2씩 증가하도록 변경해달라고 하면
[08:52]
커서가 먼저 이전처럼
[08:53]
코드를 변경할 텐데
[08:55]
제가 직접 웹사이트에 가서 테스트할 필요 없이
[08:58]
자동 브라우저 MCP 서버를 호출해서
[09:02]
스스로 테스트할 수 있습니다
[09:04]
웹사이트로 이동해서
[09:06]
버튼을 클릭하고 0에서 2로
[09:08]
증가했는지 확인하고, 다시 한번
[09:10]
버튼이 제대로 작동하는지 확인합니다
[09:12]
카운트가 0에서 2로, 다시 4로
[09:14]
증가했고 커서가 모든 것이
[09:17]
잘 작동한다고 알려줍니다. 커서가 완벽하게
[09:20]
검증할 수 있고, 코드를 작성하고
[09:22]
실제로 웹사이트에 가서
[09:24]
변경사항이 제대로 적용됐는지
[09:26]
테스트할 수 있죠. 꽤 멋지지 않나요?
[09:29]
이건 제가 오랫동안
[09:30]
생각해왔던 컴퓨터 사용에 대한
[09:34]
아이디어입니다. 예를 들어
[09:36]
웹사이트나 어떤 앱을 만들었을 때
[09:38]
컴퓨터를 사용해서
[09:41]
앱의 기능들을 실제로 테스트할 수 있죠
[09:43]
이것도 비슷한 맥락인데
[09:46]
우리가 커서에게
[09:47]
이런 작업을 지시하는 거죠
[09:51]
한 가지 언급하고 싶은 게 있는데
[09:53]
브라우저 MCP를 사용해보실 분들은
[09:55]
제가 빠르게 설명드리겠습니다
[09:57]
MCP 제작자가 말하길 이 확장 프로그램이
[09:59]
분석 데이터를 전송하는 장치를 사용한다고 해서
[10:02]
안전을 위해 개인정보가 포함된
[10:05]
작업은 하지 않는 것이 좋습니다
[10:08]
테스트용으로만 사용하시고
[10:12]
개인적인 정보가 있는 곳에는
[10:14]
들어가지 않는 것이 좋습니다
[10:16]
하지만 정말 멋진 기능이죠
[10:18]
커서에 직접 명령을 전달할 수 있고
[10:22]
브라우저 탐색부터 파일 변환까지
[10:25]
아주 빠르게 처리할 수 있으니까요
[10:27]
하지만 개인정보는 사용하지 마세요
[10:31]
네, 저는 이 브라우저 MCP로
[10:34]
재미있게 실험해봤는데
[10:35]
내일은 OpenAI 에이전트 SDK를
[10:38]
살펴보려고 합니다
[10:40]
MCP를 에이전트 SDK와 함께 어떻게 사용할 수 있는지
[10:44]
아직 해보지 않았거든요
[10:47]
그래서 내일 영상에서
[10:49]
다뤄보도록 하겠습니다