AI 기반 브라우저 자동화를 워크플로우에 어떻게 도입할 수 있을지 궁금해 본 적이 있으신가요? 저는 Cursor IDE에서 작업하던 중 Browser tools mcp를 우연히 발견했고, 정말 놀라웠습니다! 이 멋진 도구를 사용하면 Cursor IDE를 브라우저에 연결하여 양식 작성, 데이터 스크래핑, 프론트엔드 웹 개발과 같은 작업을 쉽게 자동화할 수 있습니다. 이 튜토리얼에서는 Browser tools mcp를 Cursor IDE와 함께 설정하는 과정을 안내하고, 웹 자동화를 위해 이 도구의 기능을 활용하는 방법을 살펴보겠습니다. 디버깅 중이든 빌드 중이든, 실력을 향상시킬 기회입니다. 이 흥미로운 설정을 함께 시작해 봅시다!
Browser tools mcp란 무엇인가요?
Browser tools mcp는 AI 모델과 웹 브라우저를 연결하여 원활한 자동화를 가능하게 하는 Model Context Protocol (MCP) 서버입니다. AgentDeskAI에서 개발한 이 도구를 사용하면 Cursor IDE(Windsurf, RooCode, Cline, Claude Desktop 등 몇 가지를 포함하여)와 같은 도구가 브라우저 작업을 제어할 수 있습니다. 예를 들어 스크린샷 촬영, 페이지 탐색, 양식 작성, 데이터 스크래핑 등이 가능합니다. Anthropic이 2024년 11월에 MCP 생태계의 일부로 도입한 이 도구는 외부 도구와의 안전하고 표준화된 상호 작용을 위해 설계되었습니다.
Browser tools mcp를 사용하면 Cursor IDE가 반복적인 브라우저 작업을 자동화하거나 실시간 웹 데이터를 가져와 코딩 생활을 더 쉽게 만들 수 있습니다. Cursor IDE에게 "헤드라인 스크래핑" 또는 "양식 작성"을 요청하는 것을 상상해 보세요. 이 모든 것이 가능합니다! 설정하고 마법이 펼쳐지는 것을 지켜봅시다.
Browser tools mcp를 위한 환경 설정
Browser tools mcp를 Cursor IDE와 함께 사용할 수 있도록 시스템을 준비해 봅시다. 아주 간단하니 바로 시작해 봅시다!
1. 필수 조건 확인:
- Node.js: Node.js (버전 16 이상)가 설치되어 있는지 확인하세요. 터미널에서
node --version으로 확인하거나 nodejs.org에서 다운로드하세요. - Google Chrome 또는 Chromium: 확장을 위해 Chromium 기반 브라우저가 설치되어 있어야 합니다.
- Cursor IDE: Cursor IDE가 준비되어 있어야 합니다 (cursor.com에서 필요시 다운로드 - 버전 0.45 이상 권장).
- 기본 기술: 터미널 명령 및 Chrome 확장에 대한 약간의 지식이 도움이 됩니다.
- 하드웨어: 4+ 코어 CPU, 16GB+ RAM, 10GB+ 여유 저장 공간이 있으면 모든 것이 원활하게 실행됩니다.
2. 프로젝트 폴더 생성:
- 터미널을 열고 작업 공간을 설정합니다:
mkdir browser-tools-mcp
cd browser-tools-mcp
- 이곳이 Browser tools mcp의 홈 베이스가 될 것입니다.
이제 Browser tools mcp를 설치할 준비가 모두 끝났습니다. 계속 진행해 봅시다!
Cursor IDE와 함께 Browser tools mcp 설치하기
이제 Browser tools mcp를 설치하고 Cursor IDE에 연결해 봅시다. 단계별 방법은 다음과 같습니다.
1단계: BrowserTools Chrome 확장 프로그램 설치
Browser tools mcp는 콘솔 로그, 네트워크 요청, DOM 요소와 같은 브라우저 데이터를 캡처하기 위해 Chrome 확장 프로그램에 의존합니다.
1. 확장 프로그램 다운로드:
- Chrome 웹 스토어 승인이 대기 중이므로 GitHub에서 소스 코드를 가져오거나 여기를 클릭하여 확장 프로그램을 다운로드하세요:
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git
2. 압축 해제된 확장 프로그램 로드:
- Chrome을 열고
chrome://extensions/로 이동합니다.
- 개발자 모드를 활성화합니다 (오른쪽 상단 토글).
- "압축 해제된 확장 프로그램 로드"를 클릭하고 클론된 저장소 내의
chrome-extension폴더 또는 이전에 다운로드한 폴더를 선택합니다.
- 확장 프로그램 목록에 "BrowserToolsMCP"가 나타나는지 확인하고, 쉽게 접근할 수 있도록 고정해 두세요!
2단계: Cursor에서 BrowserTools MCP 서버 설정
이제 브라우저 통신을 위해 MCP 서버를 Cursor IDE에 연결해 봅시다.
- Cursor IDE 설정(Windows: Ctrl+, 또는 Mac: Cmd+,)을 엽니다.
- Features → MCP Servers로 이동합니다.
- "Add new MCP server"를 클릭합니다.
- 세부 정보를 입력합니다:
- Name:
browser-tools(또는 원하는 고유 이름). - Select:
command. - Paste the Command:
npx @agentdeskai/browser-tools-mcp@1.2.0
- 참고: Windows에서
npx가 인식되지 않으면 터미널에서where npx를 실행하여 경로를 찾고(예:C:\Users\YourName\AppData\Roaming\npm\npx) 명시적으로 사용합니다. - 구성을 저장합니다. "browser-tools" 옆에 녹색 표시기와 함께 도구 목록이 표시되어야 합니다. 표시되지 않으면 Cursor IDE를 새로고침하거나 몇 초 기다립니다.
3단계: BrowserTools 서버 실행 (선택 사항이지만 권장)
스크린샷 캡처 및 집계된 로그와 같은 추가 기능을 사용하려면 BrowserTools 서버를 별도로 실행합니다.
- 터미널에서 다음을 실행합니다:
npx @agentdeskai/browser-tools-server@1.2.0
- 이 서버는 기본적으로 포트 3025에서 수신 대기합니다. 다른 프로세스가 이 포트를 사용하고 있지 않은지 확인합니다 (Windows:
netstat -a -n | find "3025"또는 Mac/Linux:lsof -i :3025). - 이 단계는 스크린샷 및 감사 모드를 위한 웹소켓 통신을 향상시켜 매우 유용합니다!
4단계: BrowserTools MCP와 함께 Chrome 개발자 도구 사용
이제 Browser tools mcp를 Chrome 개발자 도구와 통합해 봅시다.
- Chrome에서 아무 웹페이지나 엽니다 (예:
https://example.com). - 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택하여 Chrome 개발자 도구를 엽니다.
- "BrowserTools" 패널로 이동합니다 (확장 프로그램에 의해 추가됨).
여기서 다음을 수행할 수 있습니다:
- 수동으로 스크린샷 캡처 (Cursor IDE로 자동 붙여넣기는 선택 사항).
- 스크린샷 저장 경로 설정 (기본값:
Downloads/mcp-screenshots). - 저장된 로그 지우기.
- 로깅 제한 및 잘라내기 설정 조정.
중요: 페이지를 새로고침하거나 MCP 서버를 다시 시작할 때마다 로그가 지워집니다.
5단계: 모든 것이 작동하는지 확인
Cursor IDE에서 설정을 테스트합니다.
- Cursor IDE에서 채팅("Ctrl" 또는 "Cmd" + L)을 사용하고 "현재 페이지의 콘솔 로그 캡처" 또는 "https://example.com의 스크린샷 촬영"과 같은 명령을 시도합니다.
- 채팅 또는 터미널에 로그가 나타나는지 확인하고, 지정된 폴더에 스크린샷이 저장되는지 확인합니다.
- 아무것도 표시되지 않으면 MCP 서버가 실행 중이고 Chrome 확장 프로그램이 연결되어 있는지 확인합니다.
방금 Cursor IDE와 함께 Browser tools mcp를 설정했습니다. 잘 하셨습니다!
Browser tools mcp를 사용한 브라우저 자동화
Browser tools mcp가 연결되었으니 Cursor IDE에서 몇 가지 브라우저 작업을 자동화해 봅시다.
1. 기본 탐색 테스트:
- Cursor IDE의 채팅에서 "Chrome에서 'https://example.com' 웹사이트를 엽니다."라고 입력합니다.
- Browser tools mcp는 Chrome을 실행하고(열려 있지 않으면) 해당 사이트로 이동합니다. Cursor IDE는 "https://example.com을 Chrome에서 열었습니다."라고 확인합니다.
- 실패하면 Chrome 확장 프로그램 및 MCP 서버 상태를 확인합니다.
2. 양식 작성 자동화:
- 시도: "'https://example.com/contact'로 이동하여 이름 'Alex Smith', 이메일 'alex@example.com', 메시지 'Hello!'로 문의 양식을 작성합니다."
- Browser tools mcp는 페이지로 이동하여 양식을 찾아 작성합니다. Cursor IDE는 "제공된 정보로 문의 양식을 작성했습니다."라고 응답할 수 있습니다. Chrome이 작동하는 것을 지켜보세요. 정말 멋집니다!
3. 웹 데이터 스크래핑:
- 요청: "'https://news.example.com'에서 헤드라인을 스크래핑합니다."
- Browser tools mcp는 페이지를 방문하여 헤드라인을 추출하고(DOM 데이터 사용), Cursor IDE에 다음과 같이 반환합니다: "최신 헤드라인은 다음과 같습니다: '속보 1', '속보 2'."
- 복잡한 사이트의 경우 대상을 지정합니다 (예: "클래스 'news-title'에서 헤드라인 추출").
Browser tools mcp는 Cursor IDE에서 자동화 가능성의 세계를 열어줍니다!
Browser tools mcp를 최대한 활용하기 위한 팁
Cursor IDE와 함께 Browser tools mcp 경험을 향상시키려면:
- 구체적으로 작성: 정확한 자동화를 위해 정확한 명령을 사용합니다 (예: "ID가 'submit-btn'인 버튼 클릭").
- 권한 확인: Chrome 확장 프로그램이 활성 탭 및 화면 캡처에 액세스할 수 있는지 확인합니다.
- 서버 실행 유지: MCP 서버가 있는 터미널을 닫지 마세요. 필요하면 다시 시작하세요.
- 기능 탐색: 디버깅을 위해 스크린샷 캡처 또는 로그 분석을 시도해 보세요. 자세한 내용은 GitHub 저장소를 확인하세요!
Browser tools mcp 사용 경험
Cursor IDE에서 Browser tools mcp를 사용하는 것은 즐거웠습니다! 설정은 순조로웠고 브라우저 작업 자동화는 원활하게 느껴졌습니다. Cursor IDE의 스크린샷과 로그는 디버깅에 큰 도움이 되었습니다. 문제가 발생하면 포트(3025)와 확장 프로그램 연결을 확인하세요.
마무리 생각: Browser tools mcp 모험
Cursor IDE와 함께 Browser tools mcp를 설정하고 브라우저 자동화 마법을 해제했습니다! 사이트 탐색부터 데이터 스크래핑까지, 웹 작업을 쉽게 처리할 준비가 되었습니다. 가격 추적이나 프론트엔드 웹 개발 작업과 같은 더 많은 자동화 아이디어를 실험해 보세요! 더 자세한 내용은 browser-tools-mcp github 저장소를 확인하세요. 더 나은 Postman 대안을 찾고 있다면 Apidog도 확인해 보세요. 그리고 Browser tools mcp 여정을 계속 멋지게 이어가세요!