이 글에 대하여
Claude Code나 Cursor 같은 코딩 에이전트는 코드를 작성하는 데는 충분히 의존할 수 있습니다. 하지만 '관리 화면에서 설정을 확인하기', 'issue 목록을 필터링하기', '폼 채우기'처럼 브라우저가 필요한 순간에는 작업이 끊어지기 쉽습니다.
본 글에서는 MCP 클라이언트로부터 이미 로그인된 Chrome을 조작할 수 있는 오픈 소스 확장 기능과 MCP 서버 FSB의 세팅, 사용 예시, 작동 원리, 그리고 현재 한계를 정리합니다. 필자는 FSB 개발자입니다.
(작성 시점 0.11.2) - Chrome 확장 (MV3): https://chromewebstore.google.com/detail/badgafnfchcihdfnjneklogedcdkmjfk
대상 독자: MCP 클라이언트(Cursor / Claude Code / Cline / VS Code)를 사용하며, 브라우저 조작도 에이전트에게 맡기고 싶은 사람.
왜 만들었는가
AI에게 브라우저를 조작하게 하는 방법은 크게 두 가지가 있습니다.
- 새로운 Headless Browser를 실행하는 것 (Playwright / Puppeteer 등). 깨끗하지만 아무것도 로그인되어 있지 않습니다. 실제로 만져보고 싶은 사내 관리 화면이나 SaaS 콘솔은 로그인 너머에 있으며, 2단계 인증(2FA)이나 CAPTCHA에서 막힙니다.
- 스크린샷을 보여주고 좌표를 클릭하게 하는 것. 범용적이지만 매 단계마다 이미지를 전송하므로 느리고 토큰도 무겁습니다. 게다가 모델은 픽셀만 보고, 숨겨진 요소나 ARIA 레이블, 폼의 name 속성은 볼 수 없습니다.
필자가 원했던 것은 '자신의 브라우저와 로그인 상태를 사용하기', '픽셀이 아닌 페이지 구조를 이해하기', '조작 후에 정말 기대한 대로 되었는지 확인하기' 이 세 가지였습니다.
세팅
필요한 것: Node.js 18.20 이상, Chrome (Edge / Brave / Chromium도 가능). API 키는 필요 없습니다. 추론은 MCP 클라이언트 측의 모델이 수행합니다.
1. MCP 서버 등록
# Cursor
npx -y fsb-mcp-server@latest install --cursor
# Cline의 경우
...
수동으로 작성할 경우, 각 클라이언트의 MCP 설정에 다음을 추가합니다.
{
"mcpServers": {
"fsb": {
...
2. Chrome 확장 설치
Chrome Web Store에서 FSB를 설치하고, 일반 창을 하나 이상 열어둡니다. 확장 기능은 로컬 브릿지(ws://localhost:7225)에 자동으로 연결됩니다.
3. 확인
npx -y fsb-mcp-server@latest doctor
Ext: yes가 나오면 확장 기능이 연결된 것입니다. 클라이언트 측에서 fsb 서버가 연결되었고, navigate, read_page, click, list_tabs 등 약 70개의 도구가 보이면 OK입니다.
사용 예시
Cursor의 채팅창에서 예를 들어 다음과 같이 요청합니다.
GitHub에서 자신에게 할당된 열린 issue를 열고, 레이블별로 건수를 모아줘.
에이전트는 list_tabs → navigate → read_page와 같이 도구를 호출하며, 로그인된 세션 상태 그대로 페이지를 읽습니다. 로그인 화면에서 멈출 염려가 없습니다. 결과는 DOM에서 가져온 텍스트이므로, 건수나 제목을 오인하기 어렵다는 장점도 있습니다.
작동 원리
DOM 읽기
FSB는 스크린샷이 아닌 실제 DOM(요소, 셀렉터, ARIA 속성, 폼 구조, 변경 차분)을 구조화된 텍스트로 모델에 전달합니다.
- 버튼 이름이나 disabled 상태, input의 label이 확정 정보로 얻어집니다.
- 접힌 메뉴나 화면 밖의 요소도 구조상으로는 보입니다.
- 연속적으로 이미지를 보내는 것보다 토큰 양을 제어하기 쉽습니다.
- 각 작업 후에 '로딩 중인지', 'DOM은 안정적인지', '동일한 작업을 반복하고 있지는 않은지'를 구조 기반으로 검증합니다.
capture_screenshot
있기도 하지만, 시각적 확인 등이 필요한 상황의 보조 수단입니다.
구성
MCP 클라이언트 ⇄ (stdio) ⇄ fsb-mcp-server ⇄ (ws://localhost:7225) ⇄ Chrome 확장 (MV3) ⇄ 로그인된 탭
여러 MCP 클라이언트를 동시에 사용할 수 있습니다. 가장 먼저 시작한 서버가 포트 7225를 가지며, 이후의 클라이언트는 리레이(relay)로 참여합니다.
인증 정보 볼트
비밀번호는 암호화된 볼트에 저장되며, 입력은 확장 프로그램 자체가 수행합니다. 모델에는 비밀번호가 전달되지 않습니다. 에이전트에게 '로그인해라'라고 요청해도, 민감한 정보가 프롬프트나 로그에 남지 않도록 설계되었습니다.
세션 리플레이
에이전트가 무엇을 했는지 나중에 재생하여 확인할 수 있습니다.
솔직한 한계점
- 브릿지에 연결할 수 있는 브라우저 프로필은 동시에 1개만 가능합니다.
- 실제로 로그인된 자신의 브라우저에서 작동하므로, 중요한 사이트에서는 사람이 지켜보는 전제가 필요합니다.
- 연결 직후 첫 호출에서 '확장이 미연결'로 반환되다가 몇 초 후에 성공하는 경우가 있습니다.
doctor는 내장 오토파일럿용 모델이 설정되지 않으면 실패로 간주하지만, MCP 도구 자체는 작동합니다. - 사이트의 종류에 따라 스크립트 실행 계열의 도구가 차단될 수 있습니다.
요약
'로그인된 자신의 브라우저', 'DOM 기반', '작업 후 검증'이라는 세 가지 측면에서 에이전트의 브라우저 작업을 중단 없이 진행하는 것을 목표로 합니다. 버그 보고나 '이 용도에는 적합하지 않다'는 의견은 GitHub 이슈를 통해 환영합니다.
FSB: https://github.com/fullselfbrowsing/FSB (Glama의 MCP 서버 목록에도 게재되어 있습니다)
Discussion