에이전트가 진짜 브라우저를 운전합니다.
가짜가 아닙니다.
AgentsRoom은 모든 프로젝트에 진짜 Chromium 브라우저를 임베드하고, AI 에이전트가 그것을 제어할 수 있게 하는 AgentsRoom Browser MCP 서버를 함께 제공합니다. QA 에이전트가 localhost 사이트를 열고, 버튼을 클릭하고, 폼을 채우고, 스크린샷을 찍고, 콘솔을 읽고, done이라고 말하기 전에 기능이 실제로 작동하는지 검증합니다. Claude Code, Codex, OpenCode, Gemini CLI, Aider를 위한 엔드투엔드 브라우저 자동화, Playwright 설정은 0.
Agent Teams와 페어로: Dev 에이전트가 기능을 출시하고, QA 에이전트가 임베디드 브라우저에서 localhost 사이트를 로드하고, 검증 시나리오를 실행하고, 결과를 스크린샷하고, 사인오프합니다. 네이티브 브라우저 자동화도 로드맵에 있으며, 에이전트가 모바일과 데스크톱 앱도 테스트할 수 있도록 React Native와 Electron 앱을 위한 미래 MCP 서버도 계획되어 있습니다.
AgentsRoom Browser MCP 데모: 임베디드 Chromium 브라우저를 통해 Claude Code QA 에이전트가 주도하는 엔드투엔드 웹 앱 테스팅.
AgentsRoom의 Browser Automation은 두 가지를 하나로 결합합니다. 첫째, 모든 프로젝트 룸에 임베디드된 진짜 Chromium 브라우저, URL 바, back/forward, 새로고침, 히스토리, 클립보드로 스크린샷, 기본 브라우저로 열기, 프로젝트별 영속 쿠키와 localStorage. 둘째, Model Context Protocol을 통해 그 브라우저를 AI 에이전트에 노출하는 AgentsRoom Browser MCP 서버(agentsroom-browser). 에이전트는 깨끗하고 스크립팅 가능한 인터페이스를 얻습니다: navigate, click, type, screenshot, JavaScript 평가, 요소 대기, 페이지 상태 가져오기, 콘솔 로그 가져오기, 뒤로, 앞으로, 새로고침.
왜 이것이 중요한가요? AI 코딩 에이전트의 모든 약속은 에이전트가 '기능 출시'라고 말하지만 페이지를 열어 확인하지 않을 때 무너지기 때문입니다. 오늘날 대부분의 에이전트는 유닛 테스트 실행에 의존하고, 그다음 희망합니다. 진짜 browser MCP가 있으면, 에이전트가 localhost 서버를 로드하고, 사용자 플로우를 실행하고, 인간 사용자가 보는 것을 보고, 그제서야 사인오프합니다. QA Engineer 에이전트 역할이 마침내 정적 분석이 아닌 진짜 QA를 할 도구를 갖게 됐습니다.
기술적 설정은 당신에게 보이지 않습니다. 에이전트의 'Browser access'를 체크하면, AgentsRoom이 프로젝트의 .mcp.json에 agentsroom-browser 항목을 머지하고, 에이전트가 브라우저 도구를 사용 가능한 상태로 부팅합니다. 루프백 포트(127.0.0.1, OS 할당, 매 부팅마다 재생성, 32 바이트 hex 토큰으로 인증)에서 실행되는 WebSocket 브리지가 MCP 서브프로세스를 Electron 앱의 Chromium WebContentsView에 연결합니다. 각 클릭, 각 입력, 각 스크린샷은 JSON-RPC 호출입니다. 에이전트는 스텁이 아닌 진짜 브라우저를 봅니다.
AgentsRoom Browser 패널: URL 바, 히스토리, 스크린샷, AI 에이전트가 navigate, 클릭, 입력, 검증할 수 있는 완전한 MCP 제어 표면.
Playwright 스텁이 아닌, 진짜 브라우저
브라우저 자동화에 대해 이야기하는 대부분의 AI 에이전트 데모는 각 도구 호출에서 스폰되는 헤드리스 Playwright 인스턴스를 사용합니다. 벤치마크에는 작동하지만 실생활에서는 고통스럽습니다: 에이전트가 무엇을 하고 있는지 볼 수 없고, 모든 navigation이 Chromium을 다시 스폰하고, 쿠키가 사라지고, localStorage가 비어 있고, dev 서버는 모든 방문이 새 세션이라고 생각합니다. AgentsRoom은 다른 각도를 취합니다. 브라우저는 이미 프로젝트 룸에 열려 있고(평범한 브라우저처럼 직접 사용), 에이전트가 그 브라우저를 운전합니다. 세션, 쿠키, localStorage, 로그인 상태, 모두 보존됩니다.
에이전트의 각 클릭과 입력은 Electron의 WebContentsView를 통해 적절한 키 이벤트, 마우스 이벤트, DOM 변형과 함께 진짜 네이티브 디스패치를 트리거합니다. 스크린샷은 실제 렌더링된 페이지에서 캡처된 진짜 PNG입니다(DOM-to-image 해킹이 아님). 콘솔 로그는 버퍼링되고 쿼리 가능하며 경고와 에러를 포함합니다. 에이전트는 DevTools를 열었을 때 보이는 것과 같은 것을 봅니다: 진짜 성능, 진짜 네트워크 동작, 진짜 CORS, 진짜 인증.
룸 간 격리가 강제됩니다. AgentsRoom은 프로젝트당 하나의 Chromium WebContentsView를 자신의 세션 파티션(persist:agentsroom-browser-<projectId>)과 함께 만듭니다. 프로젝트 A의 쿠키는 절대 프로젝트 B로 새지 않습니다. 프로젝트를 전환하면, 이전 브라우저는 숨겨지고 새 브라우저가 자신의 상태로 온라인이 됩니다. 에이전트는 항상 올바른 자격 증명과 함께 올바른 프로젝트에 도착합니다.
MCP 레이어는 의도적으로 작고 의존성이 없습니다. browser-mcp-server.cjs 서브프로세스는 stdio를 통해 MCP 2024-11-05 프로토콜(initialize, tools/list, tools/call)을 말하고 그것을 루프백 WebSocket 브리지를 통한 JSON-RPC 호출로 번역합니다. 무거운 SDK 기반 서버에 비해, 이것은 빠르고(첫 도구 호출은 100ms 미만) 디버깅하기 쉽습니다. 페이지를 변경하는 모든 액션(클릭, 입력, navigate, 새로고침, 뒤로, 앞으로) 후, 응답에는 1.6 MB로 캡된 base64 PNG 스크린샷이 포함되므로 에이전트가 항상 방금 한 일의 결과를 봅니다. 이는 가장 큰 신뢰성 승리 중 하나로 밝혀졌습니다: 화면을 보는 에이전트가 희망하는 에이전트보다 훨씬 더 자주 옳은 일을 합니다.
에이전트가 받는 Browser MCP 툴킷
브라우저 액세스를 가진 모든 AI 에이전트는 이 도구들이 사용 가능한 상태로 부팅됩니다. 표준 MCP를 통해 노출되므로 호환 가능한 모든 CLI(Claude Code, Codex CLI, OpenCode, Gemini CLI, Aider)가 봅니다.
browser_navigate
임베디드 브라우저에서 URL을 엽니다. 스마트 URL 처리: localhost:3000은 '애플리케이션을 열 수 없습니다' 다이얼로그를 트리거하는 대신 http://localhost:3000이 됩니다. 최종 URL과 로드 후 페이지 스크린샷을 반환합니다.
browser_click
셀렉터나 보이는 텍스트로 요소를 클릭합니다. JavaScript 디스패치가 아닌 진짜 네이티브 클릭 이벤트. 에이전트가 액션의 결과를 보도록 클릭 후 스크린샷을 반환합니다.
browser_type
input이나 textarea에 텍스트를 입력합니다. 키보드 단축키와 submit을 지원. 진짜 키 이벤트, 페이지의 onChange 핸들러가 발화. 입력 후 스크린샷을 반환합니다.
browser_screenshot
현재 viewport를 PNG로 캡처합니다. 비주얼 리그레션 검사, 디자인 QA, 비포애프터 비교, 또는 버그 상태를 팀의 나머지와 공유하는 데 유용.
browser_evaluate
페이지의 메인 월드에서 JavaScript 표현식을 실행합니다. 직렬화된 결과를 받습니다. 페이지 상태 읽기, DOM 쿼리, Redux 스토어 검사, 또는 보이는 버튼이 없는 액션을 트리거하는 데 에이전트가 사용.
browser_wait_for
요소가 나타나기, URL 변경, 네트워크 요청 완료, 또는 임의 JavaScript가 true를 반환하기를 기다립니다. 고전적 '에이전트가 너무 빨리 클릭' 레이스를 회피.
browser_get_state
현재 URL, 제목, viewport, 스크롤 위치, 그리고 페이지의 접근 가능한 요소들의 구조화된 스냅샷을 읽습니다. 다음 액션을 계획할 때 에이전트의 주요 입력.
browser_get_logs
콘솔 버퍼를 풀합니다(log, warn, error). 에이전트는 DevTools에서 보이는 것과 같은 React 경고, hydration 에러, 네트워크 실패, 런타임 예외를 볼 수 있습니다. 버그 리포트가 '여기 콘솔의 에러가 있다'가 됩니다.
browser_go_back / forward / reload
표준 브라우저 navigation, 스크립팅 가능. 플로우가 잘못됐을 때 백트랙하거나 Vite, Next.js, Expo Metro의 핫 리로드 후 페이지를 다시 테스트하는 데 에이전트가 사용.
에이전트가 브라우저로 실제로 하는 것
QA Engineer 역할과 Agent Teams로 오늘 만들 수 있는 진짜 워크플로우.
모든 핸드오프에서 엔드투엔드 스모크 테스트
Dev to QA 팀을 연결하세요. QA 에이전트가 localhost dev 서버에 navigate하고, 중요한 경로(signup, checkout, dashboard)를 클릭하고, 결과를 스크린샷하고, 아무것도 던지지 않을 때만 사인오프합니다. 인간이 페이지를 열기 전에 리그레션을 잡습니다.
비주얼 리그레션 QA
UI 변경에 대한 비포애프터 스크린샷. 에이전트가 이전 커밋에서 페이지를 로드하고, 스크린샷, 브랜치 전환, 스크린샷, Claude에게 비교를 요청. Percy나 Chromatic을 루프에 두지 않는 저렴한 비주얼 diff QA.
콘솔 에러 사냥
에이전트가 앱을 navigate하고, browser_get_logs를 호출하고, React hydration 경고, useEffect 경고, 네트워크 404, CORS 에러, deprecation 알림을 찾습니다. 팀 핸드오프 페이로드에서 리스크 목록으로 보고하고, 다음 Dev 에이전트가 고칩니다.
폼 검증 테스트
에이전트가 유효한 데이터, 빈 필드, 엣지 케이스(XSS 문자열, 매우 긴 입력, 비ASCII)로 폼을 채웁니다. 검증 메시지, 네트워크 요청, 리다이렉트를 검증. 진짜 폼 QA, 유닛 테스트가 아님.
접근성 감사
에이전트가 페이지를 걷고, browser_get_state와 browser_evaluate를 통해 접근성 트리를 쿼리하고, alt 텍스트, ARIA 속성, 포커스 관리, 키보드 navigation을 검사합니다. 스크린샷과 함께 이슈를 보고.
Figma에 대한 디자인 QA
Figma to AI 에이전트 기능과 결합. 에이전트가 Figma 프레임을 로드하고, 스크린샷, localhost 페이지 로드, 스크린샷, 간격, 폰트, 색, 정렬을 비교. 불일치 목록을 제출.
라이브 프리뷰 터널 검증
AgentsRoom localhost 터널과 페어링. 에이전트가 공개 HTTPS 프리뷰 URL(localhost가 아님)에 navigate하고, 사이트가 외부 세계에서 접근 가능한지 검증, 스크린샷, 이해관계자가 실제로 링크를 열 수 있는지 확인.
공개 백로그 티켓에서 고객 버그 재현
URL과 재현 단계와 함께 공개 백로그 티켓이 들어옵니다. QA 에이전트가 URL을 열고, 단계를 따르고, 콘솔 에러를 캡처하고, 스크린샷을 첨부하고, 깨끗한 재현과 함께 Dev로 핸드오프합니다. 더 이상 '재현할 수 없음' 루프 없음.
에이전트가 브라우저를 얻는 방법
룸의 Browser 탭 열기
프로젝트 룸에서, 오른쪽 패널이 세 탭을 노출합니다: Files, Changes, Browser. Browser를 클릭. 패널이 넓어지고, 사이드바가 접히고, 진짜 Chromium 뷰가 나타납니다. URL을 입력하거나 프로젝트 히스토리에서 선택.
에이전트의 'Browser access' 체크
Edit Agent 모달을 열고, Capabilities를 확장하고, Browser access를 체크. AgentsRoom이 프로젝트의 .mcp.json에 agentsroom-browser 항목을 머지하고, 에이전트는 다음 시작에 브라우저 도구를 보게 됩니다.
<project>/.mcp.json에이전트가 browser MCP와 함께 부팅
에이전트 스폰 시, Claude(또는 Codex, Gemini 등)가 agentsroom-browser MCP 서버를 초기화하고, 그 도구들(browser_navigate, browser_click, browser_type, browser_screenshot, browser_evaluate, browser_wait_for, browser_get_state, browser_get_logs, browser_go_back, browser_go_forward, browser_reload)을 나열하고, 이제부터 브라우저를 운전할 수 있습니다.
에이전트가 브라우저를 사용
에이전트가 navigate, 클릭, 입력, 스크린샷, 콘솔 읽기. 각 액션은 루프백 WebSocket 브리지(127.0.0.1, OS 할당 포트, 32 바이트 hex 토큰, 데스크톱 앱 매 부팅마다 재생성)를 통과합니다. 페이지를 변경하는 모든 액션 후, 스크린샷이 인라인으로 반환되어 에이전트가 자신의 동작을 시각적으로 검증합니다.
localhost나 터널을 자동 타겟
localhost 터널이 실행 중이면, 첫 navigation이 터널 URL에 도착합니다. 그렇지 않으면, 처음 감지된 dev 서버. 그렇지 않으면, https://localhost:3000. Dev Terminals와 결합하면, 에이전트가 말 그대로 dev 서버를 시작하고, 브라우저에서 열고, 테스트합니다.
검증, 스크린샷, 핸드오프
Agent Teams에 연결되면, QA 노드가 자신의 시나리오를 실행하고, 스크린샷을 캡처하고, 핸드오프 페이로드에 flags.qaPassed를 설정합니다. 다음 에이전트가 평결을 상속합니다. 통과는 PM으로, 실패는 테스트 힌트와 함께 Dev로 루프백.
내부 동작
궁금한 분을 위해. 브라우저 자동화 스택은 의도적으로 작습니다.
각 프로젝트는 하나의 Chromium WebContentsView(deprecated된 BrowserView가 아닌 모던 Electron API)를 가지고 있으며, React 렌더러에서 스트리밍되는 경계로 메인 윈도우에 오버레이됩니다. 프로젝트별 세션 파티션이 프로젝트 간 쿠키, localStorage, 인증을 격리합니다. 기본 오프스크린 경계가 인간이 Browser 탭을 열기 전에도 에이전트가 브라우저 도구를 호출할 수 있게 하며, 행을 피하기 위해 스크린샷에 5초 타임아웃이 있습니다.
경량 WebSocket 서버(browser-bridge.ts)가 OS가 선택한 루프백 포트에서 실행되고, 127.0.0.1에만 바인드됩니다. 인증은 매 데스크톱 부팅마다 재생성되는 32 바이트 hex 토큰을 사용합니다. 브리지 파일 ~/.agentsroom/browser-bridge.json이 현재 포트, 토큰, PID를 보유하고, 매 부팅마다 atomic하게 재작성되므로, MCP 서브프로세스가 자동 재시도와 함께 항상 신선한 자격 증명을 가져옵니다.
MCP 서버 자체는 browser-mcp-server.cjs, stdio를 통해 MCP 2024-11-05 프로토콜(initialize, tools/list, tools/call)을 구현하는 의존성 없는 Node 스크립트입니다. 손으로 만든 WebSocket 클라이언트(ws 없음, @modelcontextprotocol/sdk 없음)를 통해 WebSocket 브리지에 JSON-RPC를 말합니다. 작고, 빠르고, 감사하기 쉽습니다. 데스크톱 앱에 extraResources 파일로 번들되어 모든 설치가 즉시 사용 가능한 상태로 출하됩니다.
네이티브 브라우저 지원(MCP를 넘어선 일급 브라우저 기능)이 AgentsRoom 로드맵에 있습니다. 그 너머로, 장기 계획에는 에이전트가 비웹 타겟도 운전할 수 있도록 추가 MCP가 포함됩니다: 모바일 앱을 위한 React Native MCP와 데스크톱 앱을 위한 Electron MCP. 같은 아이디어, 같은 UX: 에이전트가 단지 코드를 쓰는 게 아니라 실행 중인 앱을 실제로 실행합니다.
FAQ
Playwright MCP나 Puppeteer 기반 브라우저 도구와 어떻게 다른가요?
Playwright와 Puppeteer 기반 MCP는 매 세션마다 신선한 헤드리스 브라우저를 스폰합니다. 무상태 작업에는 괜찮지만, 호출 간에 쿠키, localStorage, 인증을 잃고, 인간은 에이전트가 무엇을 하는지 볼 수 없습니다. AgentsRoom Browser는 인간이 앱 안에서 사용하는 같은 브라우저이며, 프로젝트별 영속 세션이 있고, 사용자에게 실시간으로 보입니다. 에이전트는 사용자가 언제든 보고 오버라이드할 수 있는 윈도우를 운전합니다. 더 정직하고, 더 디버깅 가능한 브라우저 자동화입니다.
이게 모든 AI 프로바이더에서 작동하나요, Claude Code에서만 작동하나요?
AgentsRoom이 지원하는 모든 프로바이더(Claude Code, Codex CLI, OpenCode, Gemini CLI, Aider)에서 작동합니다. 브라우저 도구는 이 모든 CLI가 .mcp.json에서 읽는 표준 Model Context Protocol을 통해 노출됩니다. 에이전트는 자신이 AgentsRoom에 있다는 것을 결코 알지 못하고, 단지 MCP 도구 세트를 보고 다른 도구처럼 사용합니다.
에이전트가 원격 사이트를 운전할 수 있나요, localhost만 가능한가요?
둘 다. 어떤 URL이든 입력하고 가세요. Localhost(와 host:port 형식)는 스마트 감지되고, http://로 prefix되고, 직접 열립니다. 공개 사이트는 평범한 브라우저처럼 작동하며, 프로젝트별로 쿠키와 로그인 상태가 보존됩니다. AgentsRoom localhost 터널과 결합하면, 에이전트가 공개 HTTPS URL을 통해 로컬 dev 서버를 운전할 수 있고, 이는 크로스 네트워크와 모바일 QA에 유용합니다.
browser MCP는 안전한가요? 남용을 막는 것은 무엇인가요?
브리지는 127.0.0.1에만 바인드되고, 절대 0.0.0.0에는 바인드되지 않습니다. 포트는 OS 할당입니다(충돌하기 쉬운 스캔을 위한 고정 포트 없음). 매 연결마다 32 바이트 hex 토큰이 필요하며, 매 데스크톱 부팅마다 재생성됩니다. MCP 서브프로세스는 자격 증명을 env var를 통해서만 받으며, 절대 커밋된 파일에 들어가지 않습니다. 브라우저 액세스는 Edit Agent 모달에서 에이전트별 opt-in입니다. 제거하면, .mcp.json 항목이 제거되고 에이전트는 더 이상 도구를 사용할 수 없습니다.
에이전트가 브라우저 콘솔(에러, 경고, 네트워크)을 보나요?
네, browser_get_logs를 통해. 버퍼는 페이지의 메인 월드에서의 console.log, console.warn, console.error 메시지를 보유합니다. 많은 진짜 버그(React hydration 에러, useEffect 경고, CORS 실패)는 콘솔에만 표면화되고, 유닛 테스트에는 절대 나타나지 않으므로, 이는 QA 에이전트에게 가장 신호가 높은 도구 중 하나로 밝혀졌습니다.
에이전트에게 반환되는 스크린샷은 어떻게 되나요? 토큰을 많이 쓰나요?
페이지를 변경하는 모든 액션 후, base64 PNG 스크린샷이 도구 응답에 추가되며, 1.6 MB로 캡됩니다. 그 위로는, 텍스트 마커가 대신 보내집니다. 스크린샷은 신뢰성에 중요합니다(화면을 보는 에이전트가 훨씬 적은 실수를 함), 그래서 트레이드오프는 가치가 있습니다. 예산 이유로 스크린샷을 비활성화하고 싶다면, 일반 browser_evaluate 호출은 텍스트만 반환합니다.
에이전트가 로그인 폼을 채울 수 있나요? 자신의 세션을 영속화할 수 있나요?
네. 쿠키와 localStorage는 persist:agentsroom-browser-<projectId> 세션 파티션 아래 프로젝트별로 영속화됩니다. 에이전트가 browser_type과 browser_click으로 한 번 로그인하면, 런의 나머지 동안 로그인된 상태로 머무를 수 있습니다. 프로젝트를 전환하면 세션이 변경되므로 자격 증명이 프로젝트 간에 새지 않습니다.
dev 서버가 실행 중이지 않으면 에이전트가 깨질까요?
URL로 navigate하고 Chromium 에러 페이지를 봅니다. browser_get_state와 browser_get_logs를 통해 그 에러를 읽고 적절히 반응할 수 있습니다: 서버를 시작해 달라고 요청하거나 Dev Terminals 명령으로 시작합니다. Agent Teams와 Dev Terminals로, 서버를 시작하고, 기다리고, 그다음 브라우저를 여는 워크플로우를 인간 개입 없이 연결할 수 있습니다.
모바일 앱과 데스크톱 앱도 지원되나요?
웹은 임베디드 Chromium과 AgentsRoom Browser MCP를 통해 오늘 출시되고 있습니다. 로드맵은 일급 브라우저 기능으로서의 네이티브 AgentsRoom Browser를 포함합니다. 그 너머로, 추가 MCP 서버가 계획되어 있습니다: 에이전트가 iOS와 Android Expo 번들을 운전할 수 있는 React Native MCP, 그리고 에이전트가 웹이 아닌 데스크톱 앱을 운전할 수 있는 Electron MCP. 같은 에이전트 로직, 비웹 타겟에 적용.
인간이 에이전트를 일시정지하고 브라우저를 인계받을 수 있나요?
네. 브라우저는 인간이 사용하는 같은 Chromium 뷰입니다. 어느 순간이든, Browser 패널에서 클릭하면 통제권을 가집니다. 인터랙션을 멈추면, 에이전트가 도구 호출을 재개할 수 있습니다. '에이전트 잠긴 브라우저' 개념은 없으며, 페어 프로그래밍 세션처럼 공유 표면입니다.
에이전트에게 진짜 브라우저 눈을 주세요
AgentsRoom의 어떤 에이전트에서든 Browser access를 체크하세요. Browser MCP가 자동으로 부팅합니다. QA 에이전트가 마침내 출시하는 것을 테스트합니다.
컴패니언 앱: 이동 중에도 에이전트를 모니터링
Claude, Codex, OpenCode, Gemini CLI, Aider와 호환
버그와 요청을 공개 백로그로 바로 보내세요.