AI/LLM

WebMCP 완전 가이드 — 브라우저가 MCP 서버가 된다, Chrome 149 오리진 트라이얼 적용법

구글 I/O 2026에서 발표된 WebMCP는 브라우저 안에서 AI 에이전트가 웹 페이지를 타입세이프한 도구 호출로 조작하게 해주는 오픈 표준입니다. 기존 MCP와의 차이, Declarative·Imperative API 구현법, Chrome 149 오리진 트라이얼 참여 방법, Gemini in Chrome 연동 흐름까지 정리합니다.

by Lee발행: 2026-05-22

2026년 5월 19일, 구글 I/O 2026 개발자 기조연설에서 WebMCP가 공식 발표됐습니다. 브라우저 위에 올라오는 MCP 오픈 표준입니다. Chrome 149 오리진 트라이얼이 시작되면서 처음으로 실 트래픽에서 테스트할 수 있게 됐습니다.

MCP(Model Context Protocol)는 AI 에이전트가 외부 도구·데이터에 접근할 때 쓰는 표준 프로토콜입니다. 지금까지는 데스크톱 앱·서버 환경에서만 작동했습니다. WebMCP는 이걸 웹 브라우저 안으로 가져옵니다. 어떤 웹페이지도 AI 에이전트가 직접 조작할 수 있는 MCP 서버가 됩니다.

이 글이 필요한 분

MCP를 웹 앱에 연결하려다 막혔던 개발자
AI 에이전트가 브라우저 위 서비스를 직접 조작하게 만들고 싶은 개발자
Google I/O 2026의 WebMCP 발표가 실제로 무엇을 의미하는지 알고 싶은 분
Chrome 149 오리진 트라이얼을 지금 당장 써보고 싶은 분

WebMCP란 무엇인가 — MCP를 브라우저로 가져온 이유

MCP는 2024년 앤트로픽이 제안하고 현재 표준화가 진행 중인 프로토콜입니다. AI 에이전트가 파일 시스템·데이터베이스·외부 API 같은 컨텍스트에 접근할 때 일관된 인터페이스를 제공합니다. 클로드 코드, 커서, 윈드서프 같은 AI 코딩 도구가 MCP로 외부 도구를 연결합니다.

한계는 명확했습니다. MCP 서버는 서버사이드·데스크톱 환경에서만 동작했습니다. 브라우저 안에 있는 서비스 — 구글 독스, 깃허브 웹, Jira, Notion 같은 SaaS 앱 — 는 MCP 에이전트가 직접 조작할 수 없었습니다. 스크린샷 + 좌표 클릭 같은 우회 방식(컴퓨터 사용 API)을 쓰거나, 별도 API 키를 받아 서버에서 처리해야 했습니다.

WebMCP는 이 갭을 메웁니다. 웹 페이지 개발자가 WebMCP API를 몇 줄 추가하면, 브라우저 안의 AI 에이전트(Gemini in Chrome, Copilot in Edge 등)가 그 페이지를 타입세이프한 도구 호출로 직접 제어할 수 있게 됩니다.

구글과 마이크로소프트가 공동 개발하고 W3C 웹 머신러닝 커뮤니티 그룹에서 표준화를 진행 중입니다. Chrome 149 오리진 트라이얼이 첫 공개 테스트 창구입니다.

Google I/O 2026 WebMCP 발표 슬라이드 — 2026년 5월 19일 구글 I/O 2026 개발자 기조연설에서 WebMCP 오리진 트라이얼이 공식 발표됐습니다. ⓒ Google

MCP와 WebMCP의 차이 — 어디서 돌아가고 무엇이 다른가

기존 MCP와 WebMCP의 가장 큰 차이는 실행 환경입니다.

핵심은 인증입니다. 기존 MCP로 GitHub 웹을 조작하려면 PAT(Personal Access Token)를 별도 발급·관리해야 했습니다. WebMCP는 브라우저에 이미 로그인된 세션을 그대로 씁니다. 개발자가 추가 자격증명을 발급할 필요가 없습니다.

즉, 사용자가 깃허브에 로그인된 Chrome에서 AI 에이전트를 실행하면, 에이전트는 사용자의 권한 그대로 PR을 열고, 이슈를 닫고, 코드 리뷰를 남길 수 있습니다.

Declarative API와 Imperative API — 두 가지 구현 방식

WebMCP는 두 가지 API를 제안합니다. 사용 목적에 따라 선택합니다.

Declarative API (선언형) — HTML 폼에 어노테이션을 추가하는 방식입니다. 기존 폼 기반 UI가 있다면 거의 코드 변경 없이 적용할 수 있습니다.

Declarative API — HTML 폼 어노테이션 예시 (출처: developer.chrome.com/docs/ai/webmcp)
<!-- 기존 HTML 폼에 mcp-* 어노테이션 추가 -->
<form mcp-tool="create_issue"
      mcp-description="Create a new GitHub issue">
  <input type="text"
         name="title"
         mcp-param-description="Issue title" />
  <textarea name="body"
            mcp-param-description="Issue body in Markdown"></textarea>
  <button type="submit">Submit</button>
</form>

Imperative API (명령형) — JavaScript로 도구를 직접 등록합니다. 복잡한 멀티스텝 작업이나 동적 인터랙션이 필요할 때 씁니다.

Imperative API — JS 함수 등록 예시 (출처: developer.chrome.com/docs/ai/webmcp)
// navigator.mcp를 통해 도구 등록
if ('mcp' in navigator) {
  navigator.mcp.registerTool({
    name: 'search_docs',
    description: 'Search documentation articles',
    parameters: {
      query: { type: 'string', description: 'Search term' },
      maxResults: { type: 'number', description: 'Max results (1-20)', default: 5 }
    },
    execute: async ({ query, maxResults }) => {
      const results = await fetchDocs(query, maxResults)
      return { results }
    }
  })
}

⚠️ 주의: Chrome 149 오리진 트라이얼 기간에는 아직 API 형태가 바뀔 수 있습니다. 프로덕션 배포보다는 테스트·프로토타입 용도로 먼저 써보고 W3C 사양 확정을 기다리는 것을 권장합니다.

Chrome 149 오리진 트라이얼 참여 방법 — 지금 바로 테스트하기

오리진 트라이얼(Origin Trial)은 구글이 실험적 Chrome 기능을 선택된 도메인에서 먼저 공개 테스트하는 제도입니다. Chrome 149부터 WebMCP 오리진 트라이얼이 시작됐습니다.

참여 절차는 다음과 같습니다.

오리진 트라이얼 토큰 발급 — developer.chrome.com/origintrials 에서 WebMCP 트라이얼을 찾아 도메인을 등록하고 토큰을 발급받습니다.
토큰을 HTML head에 삽입 — <meta http-equiv="origin-trial" content="토큰값">
Chrome 149+ 에서 테스트 — navigator.mcp 객체가 존재하는지 먼저 확인합니다. (기능 감지 필수)

기능 감지 패턴 — WebMCP 지원 여부 확인
// 브라우저가 WebMCP를 지원하는지 먼저 확인
if ('mcp' in navigator) {
  console.log('WebMCP 지원됨')
  // WebMCP 도구 등록
} else {
  console.log('WebMCP 미지원 — 기존 방식으로 폴백')
}

오리진 트라이얼 기간 동안 Gemini in Chrome이 연결된 상태에서 페이지의 WebMCP 도구를 호출하는 흐름을 테스트할 수 있습니다. 현재(2026년 5월 기준) Gemini in Chrome이 Chrome Canary에 실험적으로 탑재되어 있습니다.

참고 문서: developer.chrome.com/docs/ai/webmcp

Chrome 149 WebMCP 오리진 트라이얼 개발자 적용 흐름 — 오리진 트라이얼 토큰 발급 → HTML 삽입 → navigator.mcp 기능 감지 → 도구 등록의 순서로 진행합니다. ⓒ Google Chrome Developers

AI 에이전트와의 연동 — Gemini in Chrome, Edge Copilot

WebMCP의 실제 가치는 브라우저 안에서 동작하는 AI 에이전트와 연결될 때 나옵니다.

Gemini in Chrome — 구글 I/O 2026 발표에서 Gemini in Chrome이 WebMCP 도구를 직접 호출하는 데모가 공개됐습니다. 사용자가 "이 페이지의 폼 양식을 채워서 제출해줘" 라고 말하면, Gemini가 WebMCP Declarative API를 통해 폼 파라미터를 채우고 제출합니다.

Edge Copilot — 마이크로소프트가 공동 개발 파트너로 참여했습니다. Edge의 Copilot 사이드패널이 WebMCP를 지원하는 페이지에서 동일한 방식으로 도구를 호출할 수 있게 됩니다.

개발자 입장에서 실질적인 변화는 이렇습니다.

자사 웹앱에 WebMCP를 적용하면, AI 에이전트가 해당 앱을 스크린샷·DOM 파싱 없이 타입세이프한 함수 호출로 조작 가능
API 키 관리·OAuth 추가 구현 없이 브라우저 세션으로 인증 해결
AI 에이전트가 실수할 여지가 줄어듦 — 자유 텍스트 좌표 클릭 대신 명시된 파라미터 스키마로 호출

WebMCP 에이전트 연동 흐름 — 브라우저 AI가 웹페이지 도구를 호출 — 기존 컴퓨터 사용(스크린샷 + 좌표 클릭) 방식 대비 WebMCP는 타입세이프 함수 호출로 에이전트 신뢰도가 올라갑니다. ⓒ Google

개발자 관점 — 지금 당장 할 일과 기다릴 일

WebMCP는 분명 방향이 맞는 표준입니다. 그러나 오리진 트라이얼 단계이고 API가 확정되지 않았습니다. 지금 단계에서 할 일과 기다릴 일을 구분해야 합니다.

지금 해볼 만한 것

Chrome 149+에서 오리진 트라이얼 토큰을 발급해 개인 프로젝트·사이드 프로젝트에서 프로토타입 테스트
웹앱의 핵심 액션(폼 제출, 검색, 콘텐츠 생성)을 WebMCP 도구로 정의하는 설계 검토
navigator.mcp 기능 감지를 사용한 점진적 향상 패턴 연습

프로덕션 배포는 기다릴 것

W3C 사양 확정 전까지 API 형태가 변경될 수 있습니다
파이어폭스·사파리 지원이 아직 확정되지 않았습니다 — 크로스 브라우저 대응이 필요한 서비스는 표준화 이후로 미루는 것이 합리적
보안 모델(권한 범위, 사용자 동의 UI)이 아직 설계 중입니다

공식 문서는 developer.chrome.com/docs/ai/webmcp에서 업데이트를 추적할 수 있습니다.

📌 W3C 표준화 현황: WebMCP는 W3C Web Machine Learning 커뮤니티 그룹에서 논의 중입니다. 구글·마이크로소프트 외 다른 브라우저 벤더의 참여 여부가 표준 확산 속도를 결정합니다. 현재(2026년 5월) 모질라·애플의 공식 입장은 발표되지 않았습니다.

자주 묻는 질문

WebMCP와 기존 MCP는 함께 쓸 수 있나요?

네. 서버사이드 MCP와 WebMCP는 독립적입니다. 클로드 코드처럼 데스크톱 MCP 클라이언트는 기존 방식 그대로, 브라우저 AI 에이전트는 WebMCP로 분리해 운영할 수 있습니다. 동일한 도구를 두 방식으로 노출하는 것도 가능합니다.

Chrome 149 이전 버전은 어떻게 되나요?

navigator.mcp 객체가 없으니 기능 감지 후 폴백 처리가 필요합니다. WebMCP를 지원하지 않는 브라우저에서는 기존 UI를 그대로 쓰면 됩니다. 점진적 향상(Progressive Enhancement) 방식으로 구현해야 합니다.

브라우저 세션 인증이 보안 위험이 되지 않나요?

오리진 트라이얼 단계에서 주된 관심사 중 하나입니다. 제안된 모델에서는 WebMCP 도구 실행 전 브라우저가 사용자에게 명시적 동의를 요청합니다. 구체적인 권한 UI·범위 제한 방식은 W3C 논의에서 계속 설계 중입니다.

React·Vue 같은 SPA에서 Declarative API를 쓸 수 있나요?

현재 Declarative API는 HTML 폼 어노테이션 기반입니다. React처럼 동적으로 DOM을 생성하는 SPA에서는 Imperative API(navigator.mcp.registerTool)를 사용하는 것이 더 자연스럽습니다. 컴포넌트 마운트 시점에 도구를 등록하고 언마운트 시 해제하는 패턴으로 구현할 수 있습니다.

지금 어디서 구체적인 예제 코드를 볼 수 있나요?

구글 Chrome 개발자 블로그(developer.chrome.com/blog/webmcp-epp)와 DataCamp 튜토리얼(datacamp.com/tutorial/webmcp-tutorial)에 초기 예제가 있습니다. 공식 문서가 지속적으로 업데이트되고 있습니다.

WebMCPMCPChrome149구글IO2026AI에이전트