출처: AgentDesk.ai
AI 코딩 어시스턴트가 코드를 작성하고 읽는 것 외에도 더 많은 일을 할 수 있다면 어떨까요? 브라우저와 상호작용하며 실시간으로 디버깅하고 웹 애플리케이션을 최적화하는 데 도움을 준다면 어떨까요? 이 글에서는 Model Context Protocol(MCP)과 BrowserTools에 대해 알아보고, 이들을 활용하여 AI 개발 환경을 한 단계 업그레이드하는 방법을 알아보겠습니다.
목차
BrowserTools MCP란?
BrowserTools MCP는 AI 코딩 도구(예: Cursor, Claude Desktop, Cline, Zed 등)가 브라우저와 직접 상호작용할 수 있게 해주는 강력한 도구입니다. Anthropic의 Model Context Protocol(MCP)을 활용하여 개발되었으며, Chrome 확장 프로그램을 통해 브라우저 데이터를 캡처하고 분석할 수 있습니다.
Model Context Protocol(MCP) 이해하기
MCP(Model Context Protocol)는 Anthropic에서 오픈 소스로 공개한 프로토콜로, 애플리케이션이 대규모 언어 모델(LLM)에 컨텍스트와 도구를 제공하는 방식을 표준화합니다. 플러그인 시스템과 유사하게 작동하며, AI 모델이 다양한 외부 도구와 통합할 수 있는 방법을 제공합니다.
주요 기능
BrowserTools MCP는 다음과 같은 주요 기능을 제공합니다:
브라우저 모니터링 및 로깅
- 콘솔 로그 모니터링: 브라우저 콘솔의 출력을 실시간으로 모니터링
- 네트워크 트래픽 캡처: XHR 요청/응답 정보 캡처
- 선택한 DOM 요소 분석: 브라우저에서 선택한 요소의 정보 확인
스크린샷 및 상호작용
- 스크린샷 촬영: 현재 브라우저 탭의 스크린샷 캡처
- 자동 붙여넣기: Cursor에 스크린샷 자동 붙여넣기 기능(v1.2.0 이상)
웹사이트 감사 및 분석
- 접근성 감사: WCAG 표준 준수 여부 확인
- 성능 감사: 페이지 로딩 속도 등 성능 이슈 분석
- SEO 감사: 검색 엔진 최적화 요소 평가
- 모범 사례 감사: 웹 개발 모범 사례 준수 여부 확인
특별 모드
- 디버거 모드: 모든 디버깅 도구를 순차적으로 실행
- 감사 모드: 모든 감사 도구를 순차적으로 실행
- NextJS 감사: NextJS 애플리케이션에 대한 특화된 SEO 개선 제안
설치 가이드
BrowserTools MCP를 설치하고 설정하려면 세 가지 주요 구성 요소가 필요합니다:
1. Chrome 확장 프로그램 설치
- BrowserToolsMCP Chrome 확장 프로그램을 다운로드합니다.
- 압축을 풀고 Chrome의 확장 프로그램 관리 페이지(
chrome://extensions/)로 이동합니다. - ‘개발자 모드’를 활성화하고 ‘압축해제된 확장 프로그램 로드’ 버튼을 클릭합니다.
- 압축을 푼 폴더를 선택합니다.
2. MCP 서버 설치
IDE(Cursor, Cline 등)에서 다음 명령어를 실행합니다:
npx @agentdeskai/browser-tools-mcp@latest
Windows 사용자를 위한 팁: Cursor에서 MCP 서버를 설정하는 경우, mcp.json 파일에 다음 내용을 추가합니다:
{
"mcpServers": {
"browser-tools": {
"command": "cmd /c npx -y @agentdeskai/[email protected]",
"args": [],
"enabled": true
}
}
}
3. 브라우저 도구 서버 실행
새 터미널 창에서 다음 명령어를 실행합니다:
npx @agentdeskai/browser-tools-server@latest
중요 사항
- 브라우저 도구 서버(미들웨어)와 MCP 서버, 두 개의 서버를 모두 설치/실행해야 합니다.
- Chrome 개발자 도구를 열고 BrowserToolsMCP 패널을 활성화해야 합니다.
- 문제가 발생하면 Chrome을 완전히 종료하고 브라우저 도구 서버를 재시작해 보세요.
사용 방법
BrowserTools MCP를 설치한 후에는 다음과 같은 방법으로 사용할 수 있습니다:
디버깅 및 로그 분석
AI 코딩 도구에 다음과 같은 명령을 입력할 수 있습니다:
- “브라우저 콘솔 로그를 확인해줘”
- “최근 네트워크 오류를 확인해줘”
- “로그를 모두 삭제해줘”
UI 컴포넌트 업데이트 및 디버깅
- “현재 웹 페이지의 스크린샷을 찍어줘”
- “현재 선택된 요소를 확인하고 수정해줘”
웹 사이트 감사 실행
- “이 페이지의 접근성 문제를 검사해줘”
- “이 페이지가 왜 느리게 로드되는지 확인해줘”
- “SEO 감사를 실행해줘”
- “모범 사례 감사를 실행해줘”
특별 모드 활용
- “디버거 모드로 전환해줘”
- “감사 모드를 실행해줘”
- “NextJS 감사를 실행해줘, 앱 라우터를 사용하고 있어”
실제 활용 사례
사례 1: 실시간 디버깅
웹 개발 중 오류가 발생했을 때, BrowserTools MCP를 사용하면 AI 어시스턴트가 브라우저 콘솔 로그와 네트워크 요청을 직접 분석할 수 있습니다. 개발자는 로그를 수동으로 복사하여 붙여넣을 필요 없이 곧바로 AI에게 “현재 페이지의 콘솔 오류를 확인하고 수정 방법을 알려줘”라고 요청할 수 있습니다.
예시 대화:
개발자: 이 버튼을 클릭하면 오류가 발생해. 무슨 문제인지 확인해줄래?
AI: 콘솔 로그를 확인해볼게요.
(AI가 BrowserTools MCP를 통해 콘솔 로그 확인)
AI: "Uncaught TypeError: Cannot read properties of null" 오류가 발생했네요.
'document.getElementById('submit-button')' 호출에서 null을 반환하고 있어요.
아마도 'submit-button' ID를 가진 요소가 없거나 스크립트가 DOM이 로드되기 전에 실행되는 것 같습니다.
사례 2: UI 개선 작업
웹 애플리케이션의 UI를 개선할 때, 스크린샷 기능을 활용하여 AI에게 현재 UI 상태를 보여주고 개선 방안을 요청할 수 있습니다.
예시 대화:
개발자: 현재 네비게이션 바가 모바일에서 잘 작동하지 않아. 스크린샷을 찍고 개선 방법을 제안해줘.
AI: 현재 페이지의 스크린샷을 찍겠습니다.
(AI가 BrowserTools MCP를 통해 스크린샷 캡처)
AI: 스크린샷을 분석해보니, 모바일 화면에서 네비게이션 메뉴 아이템이 겹쳐 보이네요.
다음과 같은 CSS 수정을 제안합니다...
사례 3: 성능 최적화
웹사이트 성능을 최적화하기 위해 성능 감사 도구를 활용할 수 있습니다.
예시 대화:
개발자: 이 페이지가 로딩이 느린데, 성능을 개선할 방법이 있을까?
AI: 성능 감사를 실행해보겠습니다.
(AI가 BrowserTools MCP를 통해 성능 감사 실행)
AI: 성능 분석 결과, 몇 가지 최적화 포인트를 발견했습니다:
1. 이미지 최적화가 필요합니다 - 현재 이미지가 압축되지 않은 상태로 제공되고 있습니다.
2. 렌더 블로킹 리소스가 3개 있습니다.
3. 사용하지 않는 JavaScript 코드가 많습니다.
다음과 같은 개선 방안을 제안합니다...
자주 묻는 질문
Q: BrowserTools MCP는 어떤 AI 코딩 도구와 호환되나요?
A: Cursor, Claude Desktop, Cline, Zed 등 MCP를 지원하는 모든 클라이언트와 호환됩니다.
Q: 내 데이터의 보안은 어떻게 되나요?
A: 모든 로그는 로컬 머신에 저장되며, 제3자 서비스나 API로 전송되지 않습니다.
Q: 스크린샷은 어디에 저장되나요?
A: 기본적으로 스크린샷은 Downloads/mcp-screenshots 폴더에 저장되지만, Chrome 개발자 도구의 BrowserTools 패널에서 경로를 변경할 수 있습니다.
Q: Windows에서 설치할 때 자주 발생하는 문제는 무엇인가요?
A: Windows에서는 포트 충돌, 경로 이슈, 또는 환경 변수 문제가 발생할 수 있습니다. 이런 경우 다음 명령어로 사용 중인 포트를 확인하고 해당 프로세스를 종료해 볼 수 있습니다:
netstat -ano | findstr :3025
taskkill /F /PID {발견된_PID}
Q: 스크린샷을 자동으로 Cursor에 붙여넣을 수 있나요?
A: 네, v1.2.0부터 DevTools 패널에서 “Allow Auto-Paste into Cursor” 옵션을 활성화하면 스크린샷이 자동으로 Cursor에 붙여넣어집니다. 단, 이 기능을 사용하려면 Cursor의 에이전트 입력 필드에 포커스가 있어야 합니다.
결론 및 개인적인 소견
BrowserTools MCP는 AI 코딩 어시스턴트의 능력을 한 단계 끌어올리는 강력한 도구입니다. 브라우저와의 직접적인 상호작용을 통해 AI가 웹 개발 과정에서 더 많은 컨텍스트를 이해하고 더 정확한 도움을 제공할 수 있게 됩니다.
특히 디버깅과 성능 최적화 과정에서 그 효용성이 돋보입니다. 개발자가 수동으로 로그를 복사하거나 스크린샷을 캡처하여 AI에게 제공할 필요 없이, AI가 직접 브라우저 상태를 관찰하고 분석할 수 있기 때문입니다.
물론 설치 과정이 다소 복잡하고 Windows와 같은 특정 환경에서는 추가적인 문제가 발생할 수 있습니다. 그러나 한 번 설정을 마치면 개발 생산성을 크게 향상시킬 수 있는 도구임은 분명합니다.
AI 개발 도구를 적극적으로 활용하고 있는 개발자라면, BrowserTools MCP를 통해 한 단계 더 발전된 개발 경험을 시도해 보는 것을 권장합니다.
Comments