1. 핵심 요약
- WebMCP는 웹 페이지 내부의 기능을 AI 에이전트·브라우저 에이전트·보조기술(AT)이 호출할 수 있는 도구(tool) 형태로 노출하는 새로운 JavaScript API 제안.
- 웹 페이지 자체가 MCP 서버로 동작하여, 백엔드 없이 프론트엔드 자바스크립트만으로 에이전트 통합이 가능.
- “에이전트 → 웹 UI Actuation(클릭·스크롤 등 실제 사용자 시뮬레이션)” 방식 대신,
도구 호출을 통해 더 빠르고 안전한 작업 수행. - 사람이 보고 있는 동일한 UI에서 인간·AI·웹앱이 협업(cooperative)하는 흐름을 목표로 한다.
- 백엔드 통합(MCP/OpenAPI 등)과 병행 가능하며, 더 낮은 진입비용으로 에이전트 통합 가능.
2. 왜 필요한가: 배경과 동기
기존 문제:
- 에이전트가 브라우저 UI를 해석하고 자동화하는 방식은 불안정·비효율·비신뢰성.
- 대부분의 웹 서비스는 이미 UI·클라이언트 로직에 투자되어 있는데,
AI 통합을 위해 별도의 백엔드 MCP 서버를 만들기엔 부담이 큼. - AT(보조기술)도 현재 DOM 기반 탐색만으로는 고수준 액션을 수행하기 어려움.
WebMCP는 이를 해결:
웹 개발자가 이미 가진 프론트엔드 코드를 재사용하여,
사이트의 기능을 “도구(tool)”로 직접 제공하도록 하자.
3. WebMCP의 개념
웹 페이지 = MCP 서버
웹 페이지는 다음을 JS에서 등록할 수 있음:
webmcp.registerTool({
name: "filterTemplates",
description: "필터 조건에 맞는 템플릿 목록 반환",
inputSchema: {...},
outputSchema: {...},
handler(args, context) { ... }
});이렇게 등록된 “도구”는:
- AI 에이전트가 페이지에 로드되는 순간 자동으로 탐지
- 자연어→도구 매핑을 통해 호출
- UI의 현재 상태/컨텍스트에 직접 접근 가능
기존 방식과의 차이
| 기존(Actuation 중심) | WebMCP(도구 중심) |
|---|---|
| 스크린샷 → DOM 분석 → 클릭, 입력 | JS 함수 호출 형태로 직접 기능 실행 |
| 비정형, 실패율 높음 | 구조화된 스키마 기반, 타입 안정 |
| UI 구조 변화에 민감 | UI 변화와 무관하게 코드 기반 |
| 접근성 도구 한계 | 고수준 도메인 API 제공 가능 |
4. 주요 이점
(1) 인간-에이전트-웹의 협업(Human-in-the-loop)
- 에이전트가 작업을 돕되, 사용자가 UI에서 즉시 검토·수정·되돌리기 가능.
- 고관여 작업(디자인·쇼핑·코드리뷰)에 강력.
(2) 개발자 관점: 백엔드 불필요
- 기존 UI 이벤트 핸들러와 프론트엔드 로직을 그대로 재사용.
- 별도 MCP 서버 구축 없이 JS 함수만 작성하면 됨.
(3) 보안·권한·상태 관리 단순화
- 사용자와 에이전트가 동일 세션에서 작동.
- 페이지가 가지는 인증/권한/상태를 그대로 재사용.
(4) 접근성 향상
- AT가 단순 DOM이 아니라 “실제 기능”에 접근 가능.
5. 대표적 사용 사례
5-1. 디자인툴(예: Canva-like)
도구 예시:
filterTemplates(description)
editDesign(instructions)
orderPrints(copies, page_size, page_finish)에이전트는:
- 템플릿 필터링 수행
- 디자인 자동 수정
- 출력 주문 자동화
→ UI는 변경 내역을 배치로 보여주고, 사용자가 직접 확인 가능
5-2. 쇼핑 사이트
등록된 도구:
getDresses(size, color)
showDresses(product_ids)에이전트:
- 사용자의 사이즈·스타일을 고려해 고급 필터링
- 비정형 이미지 기반 매칭 수행
- UI에 결과 표시
5-3. 코드 리뷰(Gerrit-style)
등록된 도구:
getTryRunStatuses()
getTryRunFailureSnippet(bot_name)
addSuggestedEdit(filename, patch)에이전트:
- 빌드 실패 원인 수집
- 자동 패치 제안
- UI에서 diff 미리보기 제공 → 사용자가 승인
6. 기존 표준과의 관계
| 표준 | WebMCP와의 관계 |
|---|---|
| MCP (Model Context Protocol) | WebMCP는 MCP와 호환 가능. 웹 클라이언트 버전 개념. |
| OpenAPI | 함수 호출 스키마 유사하지만, WebMCP는 UI 기반 협업 중심. |
| Agent2Agent (A2A) | 목적이 다름. A2A는 에이전트끼리(X-X) 협업 프로토콜. |
| 기존 DOM 액세스 | 대체가 아니라 보완. 도구로 안 되면 DOM 자동화 사용 가능. |
7. 오픈 과제
- 보안 모델
→ 악성 에이전트가 민감 기능 호출 시 사용자 승인 필요 - 크로스 오리진
→ 여러 웹앱의 도구가 조합되는 시나리오에서 데이터 이동 관리 - 모델 중독(Model poisoning)
→ 악성 페이지가 모델 입력/학습을 오염시키는 문제 - 권한 관리 UX
→ 어떤 도구가 언제 호출되는지 사용자 인지성 확보
8. 미래 방향
- PWA에서의 오프라인 도구 제공 (앱 설치 시)
- Service Worker 기반 백그라운드 툴 호출
- 탭 간 도구 캐싱·탐색
- 웹 브라우저 자체에 내장된 에이전트와의 통합
9. 종합 결론
WebMCP는 다음을 가능하게 한다:
- 웹 개발자가 기존 프론트엔드 코드만으로 에이전트 통합
- AI·사용자·웹페이지 사이의 실시간 협업 모델 구축
- 자동화 실패율과 접근성 문제를 구조적으로 해결
즉, WebMCP는 “에이전트 친화적 UI”가 아니라
UI와 동일한 기능을 가진 공식 도구 API 계층을 만든다.
앞으로의 웹 서비스는 “사람이 클릭하는 UI”뿐 아니라
“AI가 호출하는 도구”도 함께 설계하는 시대가 될 것이다.
okorion's Tech Study Blog.