AI가 웹 서핑을 여러분처럼 할 수 있기를 바라본 적이 있으신가요? 자, 이제 준비하세요. 오늘 우리는 Claude, GPT, Gemini와 같은 AI 모델이 웹 브라우저를 제어할 수 있게 해주는 혁신적인 도구인 Browserbase MCP 서버의 세계로 뛰어들 것입니다. AI가 스스로 웹사이트를 탐색하고, 버튼을 클릭하고, 양식을 채우고, 심지어 스크린샷까지 찍는 것을 상상해 보세요. 미래 지향적으로 들리나요? 지금 현실이 되고 있으며, 특히 Browserbase MCP 서버를 사용하면 설정하기가 생각보다 쉽습니다.
이 가이드에서는 Browserbase MCP 서버가 무엇인지, AI 기반 워크플로우에 왜 필수적인지, 그리고 Chrome 브라우저를 제어하기 위해 어떻게 설정하고 실행하는지 단계별로 안내해 드릴 것입니다. 개발자이든, 데이터 과학자이든, 아니면 단순히 AI에 호기심이 많은 사람이든, 이 단계별 튜토리얼은 여러분을 전문가처럼 느끼게 해줄 것입니다. 시작해 봅시다!
개발팀이 최대 생산성으로 함께 작업할 수 있는 통합된 올인원 플랫폼을 원하십니까?
Apidog는 여러분의 모든 요구 사항을 충족하며, 훨씬 더 저렴한 가격으로 Postman을 대체합니다!
Browserbase MCP 서버란 무엇인가요?
Browserbase MCP 서버는 MCP(Model Context Protocol)를 사용하여 대규모 언어 모델(LLM)을 웹 브라우저와 연결하는 오픈 소스 도구입니다. AI가 웹사이트와 실시간으로 상호 작용할 수 있도록 하는 다리라고 생각하시면 됩니다. 이 서버를 통해 AI는 다음을 수행할 수 있습니다:
- 모든 URL로 이동
- 버튼 클릭 및 양식 작성
- 웹 페이지에서 데이터 추출
- 스크린샷 촬영
- 웹사이트에서 JavaScript 실행
- 여러 브라우저 세션 동시 처리
마치 AI에게 웹을 탐색할 수 있는 자체 손을 주는 것과 같습니다. 그리고 가장 좋은 점은 무엇일까요? OpenAI의 GPT, Anthropic의 Claude, Google의 Gemini와 같은 인기 있는 AI 모델과 함께 작동합니다.
Browserbase MCP 서버를 사용하는 이유는 무엇인가요?
사용 방법에 뛰어들기 전에, Browserbase MCP 서버가 왜 혁신적인지 이야기해 봅시다:
- 클라우드 기반 자동화: 로컬 설정의 번거로움 없이 클라우드에서 브라우저 작업을 실행합니다.
- 다중 모델 지원: 다양한 AI 모델과 함께 작동하므로 원하는 모델을 선택할 수 있습니다.
- 병렬 세션: 효율성을 위해 여러 브라우저 작업을 동시에 처리합니다.
- 시각 기능: 스크린샷을 찍고 웹 페이지를 시각적으로 분석합니다.
- 쉬운 통합: Claude Desktop 또는 Cursor와 같은 AI 클라이언트와 원활하게 연결됩니다.
AI 기반 앱을 구축하든, 워크플로우를 자동화하든, 단순히 실험을 하든, Browserbase MCP 서버는 시간을 절약하고 새로운 가능성을 열어줍니다.
Browserbase MCP 서버 설치 및 설정 방법
시작하는 방법은 세 가지가 있습니다: 호스팅된 원격 서버 사용, npm으로 실행 또는 로컬로 실행. 여러분에게 가장 적합한 방법을 선택할 수 있도록 세 가지 모두 다룰 것입니다.
사전 요구 사항
AI로 Chrome 브라우저를 제어하기 위해 Browserbase MCP 서버를 사용하기 전에 다음 사항을 확인하십시오:
- MCP 호환 AI 클라이언트: MCP(Model Context Protocol)를 지원하는 Claude Desktop 또는 Cursor와 같은 클라이언트를 설치하십시오.
- Browserbase API 키: AI를 브라우저 자동화에 연결하려면 Browserbase에서 얻으십시오.
로컬 설정용 (선택 사항)
서버를 로컬로 실행할 계획이라면 다음도 필요합니다:
- Git: GitHub에서 저장소를 복제하기 위해.
- pnpm: 종속성을 처리하기 위해 pnpm.io에서 이 패키지 관리자를 설치하십시오.
- Node.js: 서버를 실행하기 위해 nodejs.org에서 다운로드하십시오.
- AI 모델 API 키: 선택한 모델(예: Gemini)에 대한 키를 얻으십시오.
옵션 1: BrowserBase MCP 서버의 호스팅된 원격 서버 사용 (가장 쉬운 방법)
설정의 번거로움을 피하고 싶다면, 호스팅된 옵션이 여러분의 친구입니다. 방법은 다음과 같습니다:
Smithery 방문: API 키와 원격 MCP URL을 얻으려면 smithery.ai로 이동하십시오.
AI 클라이언트 구성: 제공된 URL을 AI 클라이언트의 MCP 설정에 추가하십시오. 예를 들어, Claude Desktop에서는 claude_desktop_config.json에 다음을 추가합니다:
{
"mcpServers": {
"browserbase": {
"url": "https://your-smithery-url.com"
}
}
}
또는 mcp-remote CLI를 사용하는 경우:
{
"mcpServers": {
"browserbase": {
"command": "npx",
"args": ["mcp-remote", "https://your-smithery-url.com"]
}
}
}
클라이언트 재시작: 변경 사항을 적용하려면 AI 클라이언트를 닫고 다시 엽니다.
그게 다입니다! 이제 AI는 Browserbase MCP 서버를 통해 Chrome 브라우저를 제어할 수 있습니다.
옵션 2: NPM에서 BrowserBase MCP 서버 실행 (권장)
이 방법은 대부분의 MCP 클라이언트와의 호환성 때문에 권장됩니다. MCP 구성 JSON 파일로 이동하여 Browserbase 서버 구성을 붙여넣으십시오:
{
"mcpServers": {
"browserbase": {
"command": "npx",
"args": ["@browserbasehq/mcp"],
"env": {
"BROWSERBASE_API_KEY": "",
"BROWSERBASE_PROJECT_ID": "",
"GEMINI_API_KEY": ""
}
}
}
}옵션 3: BrowserBase MCP 서버 로컬 설치 및 실행 (완전한 제어용)
내부에서 조작하고 싶으신가요? 서버를 로컬로 실행하면 더 많은 유연성을 얻을 수 있습니다. 방법은 다음과 같습니다:
저장소 복제:
- 터미널을 열고 다음을 실행하십시오:
git clone https://github.com/browserbase/mcp-server-browserbase.git
cd mcp-server-browserbase
종속성 설치:
- pnpm이 설치되어 있는지 확인하십시오. 그런 다음 다음을 실행하십시오:
pnpm install && pnpm build
서버 시작:
- STDIO 또는 HTTP 전송을 사용하여 서버를 실행할 수 있습니다.
- STDIO(로컬 프로세스)의 경우:
- MCP 클라이언트 구성에 다음을 추가하십시오:
{
"mcpServers": {
"browserbase": {
"command": "node",
"args": ["path/to/mcp-server-browserbase/cli.js"],
"env": {
"BROWSERBASE_API_KEY": "your_api_key",
"BROWSERBASE_PROJECT_ID": "your_project_id",
"GEMINI_API_KEY": "your_gemini_key"
}
}
}
}
- HTTP 전송의 경우:
- 다음으로 서버를 시작하십시오:
node cli.js --port 3000
- 클라이언트를
http://localhost:3000에 연결하도록 구성하십시오.
API 키 추가: 구성의 플레이스홀더를 실제 Browserbase 및 모델 API 키로 바꾸십시오.
클라이언트 재시작: 이전과 마찬가지로 서버를 활성화하려면 AI 클라이언트를 재시작하십시오.
서버 사용자 정의
Browserbase MCP 서버는 동작을 조정할 수 있는 플래그를 제공합니다. 몇 가지 유용한 플래그는 다음과 같습니다:
--proxies: 더 나은 개인 정보 보호를 위해 Browserbase 프록시를 활성화합니다.--advancedStealth: 감지를 피하기 위해 스텔스 모드를 사용합니다 (Scale Plan 필요).--browserWidth및--browserHeight: 브라우저 창 크기를 설정합니다.--modelName: Stagehand에 다른 AI 모델을 선택합니다.
이러한 플래그를 MCP 구성의 args 배열에 추가할 수 있습니다. 예를 들어:
"args": ["path/to/cli.js", "--proxies", "--browserWidth=1920"]
Browserbase MCP 서버를 사용하여 Chrome을 제어하는 방법
이제 서버가 설정되었으니, 작동시켜 봅시다! Browserbase MCP 서버를 사용하여 Chrome 브라우저를 제어하는 방법은 다음과 같습니다.
단계 1: AI 클라이언트 연결
AI 클라이언트(예: Claude Desktop 또는 Cursor)가 위의 세 가지 방법 중 하나를 사용하여 Browserbase MCP 서버에 연결되어 있는지 확인하십시오.
단계 2: 명령 내리기
AI 클라이언트에서 이제 자연어 명령을 발행하여 브라우저를 제어할 수 있습니다. 몇 가지 예는 다음과 같습니다:
URL로 이동:
https://example.com
버튼 클릭:
"'가입' 버튼 클릭"
양식 작성:
user@example.com
스크린샷 촬영:
"홈페이지 스크린샷 촬영"
데이터 추출:
"이 페이지에서 모든 제품 제목 추출"
AI는 Browserbase MCP 서버를 사용하여 이러한 프롬프트를 브라우저 동작으로 번역합니다.
단계 3: 결과 보기
명령에 따라 AI는 다음과 같은 결과를 반환합니다:
- 동작 확인 (예: "https://example.com으로 이동했습니다")
- 추출된 데이터 (예: 제품 제목 목록)
- 스크린샷 (설정에 따라 저장되거나 표시됨)
예를 들어, 스크린샷을 요청하면 AI는 다음과 같이 응답할 수 있습니다:
"스크린샷이 캡처되어 'homepage.png'로 저장되었습니다"
Browserbase MCP 서버 테스트
실제 예제를 사용하여 테스트해 봅시다. 웹사이트에서 검색을 자동화하고 싶다고 가정해 봅시다.
- AI 클라이언트 열기: 이 예에서는 Claude Desktop을 사용합시다.
- 명령 발행:
https://google.com
3. 브라우저 관찰: HTTP 전송으로 로컬에서 실행하는 경우 브라우저가 열리고 동작을 수행하는 것을 볼 수 있습니다.
4. 응답 확인: Claude는 동작을 확인하고 페이지 제목이나 내용을 추출할 수 있습니다.
이 간단한 테스트는 Browserbase MCP 서버가 AI가 Chrome을 제어하여 웹 작업을 수행하도록 어떻게 하는지 보여줍니다.
문제 해결 팁
서버가 시작되지 않습니까?올바른 API 키가 있고pnpm build가 성공적으로 완료되었는지 확인하십시오.클라이언트가 연결되지 않습니까?MCP 구성을 다시 확인하고 AI 클라이언트를 재시작하십시오.동작이 작동하지 않습니까?웹사이트의 구조를 확인하십시오. 일부 사이트는 고급 스텔스 또는 프록시를 요구할 수 있습니다.모델 문제입니까?모델 API 키가 유효하고 모델이 필요한 기능을 지원하는지 확인하십시오.
결론
자, 이제 다 되었습니다! Browserbase MCP 서버를 사용하여 AI로 Chrome 브라우저를 제어하는 방법을 배웠습니다. 단순함을 위해 호스팅된 경로를 선택했든, 제어를 위해 npm 또는 로컬 설정을 선택했든, 이제 전문가처럼 웹 작업을 자동화할 수 있는 준비가 되었습니다. Browserbase MCP 서버는 AI와 웹 자동화를 결합하여 혁신을 위한 무한한 가능성을 열어주는 강력한 도구입니다.
더 많은 것을 탐색할 준비가 되셨나요? 일상적인 웹 작업을 자동화하거나 다음 AI 프로젝트에 통합해 보세요.
💡아름다운 API 문서를 생성하는 훌륭한 API 테스트 도구를 원하십니까?
개발팀이 최대 생산성으로 함께 작업할 수 있는 통합된 올인원 플랫폼을 원하십니까?
Apidog는 여러분의 모든 요구 사항을 충족하며, 훨씬 더 저렴한 가격으로 Postman을 대체합니다!