WebMCP와 Google Antigravity를 활용한 에이전트 준비형 운영 데스크 구축

AI 에이전트(AI agents)는 웹 UI를 제어할 수 있지만, DOM만으로 버튼, 레이블, 폼 상태를 추론하도록 요청하는 것은 매우 빠르게 취약해집니다. 특히 증거 검토, 초안 작성, 확정된 쓰기 작업이 포함된 운영 워크플로우(operational workflows)의 경우 더욱 그렇습니다.

WebMCP는 페이지에 구조화된 도구 인터페이스(navigator.modelContext)를 제공하여, 에이전트가 클릭을 추측하는 대신 스키마(schemas)가 포함된 명명된 액션(named actions)을 발견할 수 있게 합니다. Google Antigravity는 인간의 UX(User Experience)를 저해하지 않으면서 데모를 계획, 구현, 테스트 및 문서화하기 위해 병렬 서브 에이전트(parallel subagents)를 사용한 방식입니다.

이 포스트에서는 작은 운영 데스크(operations desk) 데모를 살펴봅니다. 인간을 위한 일반적인 분류(triage) UI와 상태 변경에 대한 명시적인 확인 게이트(confirmation gate)가 포함된 5가지 WebMCP 도구가 포함되어 있습니다.

샘플 코드는 공개 GitHub Gist(아래 링크)에 있습니다. 전체 스프린트 워크스페이스 리포지토리(repo)는 비공개입니다.

문제점

지원 및 운영 데스크(Support and ops desks)는 보통 다음과 같은 요소들이 혼합되어 있습니다:

• 읽기 전용 조회 (케이스 큐, 증거),
• 초안 제안 (다음 단계),
• 지속적인 쓰기 (상태 변경).

마우스 클릭을 모방하는 에이전트는 레이블이 모호하거나, 상태가 여러 패널에 걸쳐 있거나, 되돌릴 수 없는 작업에 인간의 승인이 필요한 경우 어려움을 겪습니다. WebMCP를 사용하면 페이지가 인간용 UI를 일급 객체(first-class)로 유지하면서도, 기능을 도구(tools)로서 **선언(declare)**할 수 있습니다.

데모 개요

인간용 UI: 케이스 큐, 증거, 초안 박스, 보류 중인 업데이트, 확인 버튼.

도구	목적	파괴적 작업 여부?
list_cases	큐 스냅샷	아니요
...

쓰기 작업에는 prepare_status_update로부터의 **확인 토큰(confirmation token)**이 필요합니다. 에이전트는 준비할 수 있지만, 인간(또는 명시적인 확인 호출)이 승인해야 합니다.

출처 격리(Origin isolation)의 중요성

WebMCP는 출처가 격리된(origin-isolated) 문서를 필요로 합니다. COOP/COEP 헤더를 사용해야 하며, 단순한 python -m http.server만으로는 충분하지 않습니다.

self.send_header("Cross-Origin-Opener-Policy", "same-origin")
self.send_header("Cross-Origin-Embedder-Policy", "credentialless")
self.send_header("Permissions-Policy", "tools=*")

chrome://flags/#enable-webmcp-testing를 활성화하고 Chrome 149+ 버전을 다시 시작하세요.

도구 등록 (Registering tools)

Chrome 149에서는 도구가 document.modelContext가 아닌 **navigator.modelContext**에 등록됩니다:

const mc = navigator.modelContext;

mc.registerTool({
...

전체 샘플 (HTML + 서버 + 실행 스크립트):

Antigravity 워크플로우

병렬 서브에이전트 (parallel subagents)로 구축되었습니다:

1. Planner (기획자) — 스프린트 요구사항 → 하나의 운영 데스크(ops-desk) 여정으로 변환
2. Implementation (구현자) — UI + WebMCP 도구 + 확인 게이트 (confirm gate)
3. Verification (검증자) — 전체 도구 체인에 대한 자동화된 CDP 테스트
4. Docs (문서화) — 아티클, gist, 증빙 스크린샷

주제 일치: 동적 서브에이전트 (Dynamic Subagents) & 공유 에이전트 하네스 (Shared Agent Harness).

로컬에서 실행하기

gist 파일을 다운로드한 후 다음을 실행하세요:

python3 webmcp-origin-isolated-server.py
# Chrome에서 http://127.0.0.1:8765/ 접속 (WebMCP 플래그 활성화 상태)

DevTools → Application → WebMCP에서 등록된 도구를 확인하세요.

검증 내용

자동화된 테스트를 통해 다음을 확인했습니다:

• 오리진 격리 (origin isolation)가 true임
• 5개의 도구가 등록됨
• prepare_status_update + confirm_status_update가 CASE-101을 investigating 상태로 변경함

한계점

• 로컬 개발에는 Chrome 플래그를 사용하지만, 프로덕션 오리진(production origins)에는 WebMCP 오리진 트라이얼 (Origin Trial)이 필요합니다.
• WebMCP는 헤드리스(headless) 전용이 아닌, 눈에 보이는 탭이 필요합니다.
• 데모 상태는 인메모리 (in-memory) 방식이며, 프로덕션에서는 서버 측에 영구 저장되어야 합니다.

태그

#AgenticArchitect #GoogleAntigravity

Timothy Olaleke — Google Developer Expert (Google Cloud)