어떤 웹사이트에든 WebMCP 인터페이스 추가하기 (새 탭에서 열림)
Cloudflare는 코드 변경 없이 사이트에 WebMCP를 활성화할 수 있는 개발자 프리뷰를 출시했다. 이를 통해 브라우저 에이전트는 사람이 페이지를 탐색하듯 추측하지 않고, 사이트가 제공하는 MCP 도구를 직접 발견하고 호출할 수 있다. Cloudflare는 HTML 응답에 브리지 스크립트를 엣지에서 주입하며, 도구 실행은 방문자의 브라우저와 기존 세션을 활용해 수행한다. ## 사람 중심 웹과 AI 에이전트의 간극 - 기존 웹은 사람이 페이지를 읽고 버튼을 클릭하며 양식을 작성한다는 전제로 설계됐다. - AI 에이전트의 방문이 늘고 있지만, 일반적으로는 크롤러가 콘텐츠를 복사해 서버로 가져가는 방식이 사용됐다. - 크롤링은 원 사이트에 트래픽과 출처를 충분히 돌려주지 못하는 문제가 있다. - WebMCP는 스크래핑 대신 사이트가 에이전트용 도구를 직접 노출하도록 해 이 문제를 해결하려 한다. - Chrome 146 실험 버전부터 `document.modelContext`를 통해 WebMCP 표면이 제공된다. ## Cloudflare WebMCP 개발자 프리뷰 - Cloudflare 대시보드에서 설정을 켜는 것만으로 WebMCP 도구를 활성화할 수 있다. - 사이트별로 도구를 직접 설계하고 연결하는 별도 구현 작업이 필요 없다. - 도구는 관련 기능을 묶은 “팩(pack)” 단위로 제공된다. - 새로운 팩이 추가되면 재배포 없이 설정에서 켤 수 있도록 확장성을 고려했다. - 이번 프리뷰에는 브라우저에서 동작하는 두 가지 팩이 포함된다. - Content Credentials 팩 - Site MCP Server 팩 ## 엣지 주입 방식과 브리지 동작 - Cloudflare는 원본 서버 앞단에서 두 가지 작업을 수행한다. - HTMLRewriter를 이용해 모든 HTML 응답에 다음과 같은 브리지 스크립트 참조를 삽입한다. ```html <script type="module" src="/.webmcp/bridge.js" data-packs="c2pa,mcp-server-client" data-mcp-url="/mcp"> </script> ``` - 삽입되는 스크립트와 태그는 동일 출처에서 제공되며, 원본 사이트 코드와 나머지 HTML은 변경하지 않는다. - `data-packs`는 활성화할 도구 팩 목록을 지정한다. - `data-mcp-url`은 사이트의 MCP 서버 주소이며, 기본값은 동일 출처의 `/mcp`다. - 브리지 스크립트는 브라우저에 `document.modelContext`가 없으면 아무 작업도 하지 않고 종료한다. - 브리지는 각 팩의 도구를 통합해 `document.modelContext.registerTool()`로 등록한다. - 정적 팩은 도구를 미리 정의하고, 동적 팩은 시작 시 MCP 서버에서 도구 목록을 조회한 뒤 등록한다. ## 브라우저에서 실행되는 MCP 도구 - 프리뷰의 모든 도구는 Cloudflare 서버로 별도 왕복하지 않고 방문자의 브라우저에서 실행된다. - Content Credentials 팩은 브라우저에서 이미지를 가져와 앞부분의 콘텐츠 출처 메타데이터를 분석한다. - Site MCP Server 팩은 방문자의 브라우저에서 사이트 MCP 엔드포인트로 직접 요청한다. - 요청에는 `credentials: "same-origin"`이 사용되므로 방문자의 기존 로그인 세션과 권한을 활용할 수 있다. - 사이트 MCP 서버가 `tools/list`로 제공한 이름, 설명, 입력 스키마를 그대로 브라우저 도구로 등록한다. - 에이전트는 기존 MCP 서버와 동일한 `Tool`, `CallToolResult` 형식을 사용하므로 별도 전용 인터페이스가 필요 없다. - 도구 호출은 JSON-RPC `tools/call` 요청으로 사이트의 `/mcp` 엔드포인트에 전달된다. ## 향후 확장 가능성 - 브리지 코드는 엣지의 Cloudflare Worker에서 제공된다. - 현재 도구는 브라우저에서만 실행되지만, 향후 Worker를 활용하는 팩도 추가될 수 있다. - 예를 들어 Workers AI를 이용한 사이트맵 요약이나 AI Search 인덱스 조회 같은 기능이 가능하다. - 따라서 WebMCP는 단순한 페이지 조작을 넘어 사이트 기능과 Cloudflare 서비스를 에이전트 도구로 연결하는 기반이 될 수 있다. ## 이미지 콘텐츠 자격 증명 확인 - Content Credentials 팩은 C2PA 메타데이터를 읽어 이미지의 출처와 편집 정보를 에이전트에게 제공한다. - `scan_images_c2pa`는 페이지의 모든 이미지를 검사해 다음과 같은 정보를 요약한다. - 전체 이미지 수와 검사 수 - C2PA 포함 여부 - 이미지 형식 - 매니페스트 개수 - 생성 도구 또는 작성자 - 서명 주체 - `inspect_image_c2pa`는 특정 이미지의 전체 매니페스트를 확인한다. - 편집 이력 - 명시된 작성자 - 서명 인증서 - 이 기능은 이미지 전체가 아니라 파일 앞부분의 소량 메타데이터만 읽는 TypeScript 기반 리더로 구현됐다. - 현재는 자격 증명을 읽고 보고하는 기능이며, 암호학적 서명 검증까지 수행하지 않는다. - 따라서 결과에는 `signatureVerified: false`가 표시되어 에이전트가 검증되지 않은 정보를 신뢰하지 않도록 한다. 사이트에 로그인 상태나 민감한 기능이 있다면 MCP 서버가 에이전트에게 어떤 도구와 권한을 노출하는지 신중하게 설계해야 한다. WebMCP는 크롤링을 대체하는 에이전트 친화적 인터페이스를 제공하지만, 현재는 개발자 프리뷰이므로 브라우저 지원과 표준 변화, 서명 검증 범위를 함께 고려해 시험적으로 도입하는 것이 적절하다.