WebMCP가 뭔데 — AI 에이전트가 웹사이트를 '쓰는' 시대가 시작됐습니다

AI 에이전트한테 “항공권 예약해줘”라고 시켰는데, 왜 맨날 엉뚱한 버튼을 누르는지 궁금하지 않으셨어요?

화면을 긁어다가(스크린 스크래핑) 추측하는 방식이 원래 그렇습니다. AI가 아무리 똑똑해도 웹사이트가 “나한테 뭘 시킬 수 있는지” 안 알려주면 — 눈 감고 버튼 찾는 거나 다름없거든요.

그런데 2026년 3월, 이 문제를 정면으로 해결하려는 표준이 나왔습니다. 이름은 WebMCP. Google과 Microsoft 엔지니어가 함께 만들고, W3C에서 인큐베이팅 중이고, Chrome 146에 이미 프리뷰가 들어갔습니다.

오늘은 비개발자도 이해할 수 있게, WebMCP가 뭔지 / 왜 중요한지 / 우리 일상에 뭐가 달라지는지를 정리합니다.

WebMCP가 뭔데 — AI 에이전트가 웹사이트를 '쓰는' 시대가 시작됐습니다

1. 먼저 MCP를 30초만 복습합시다

WebMCP를 이해하려면 MCP(Model Context Protocol)부터 알아야 합니다.

MCP는 Anthropic이 2024년 11월에 공개한 오픈 프로토콜입니다. AI 모델이 외부 도구(데이터베이스, 파일 시스템, API 등)에 접근할 때 쓰는 공통 규격이에요. 흔히 “AI의 USB-C”라고 불립니다.

비유	의미
USB-C 이전	기기마다 충전기가 달랐음 → AI마다 연결 방식이 달랐음
USB-C 이후	하나로 통일 → MCP 하나로 어떤 AI든 어떤 도구든 연결

얼마나 빠르게 퍼졌냐면:

2024년 11월 출시 → SDK 다운로드 월 10만 회
2025년 3월 OpenAI도 공식 채택
2026년 2월 → 월 9,700만 회 다운로드 (970배 성장)
커뮤니티 빌트 MCP 서버 수만 개

MCP는 이제 “쓸까 말까”가 아니라 “언제 써야 하나”의 영역입니다.

2. 그런데 MCP에 빈 칸이 하나 있었습니다

MCP가 해결한 건 “AI → 백엔드 서비스” 연결입니다.

Claude가 Slack에 메시지 보내고, 데이터베이스에서 데이터 꺼내오는 건 가능해졌어요. 하지만 웹브라우저 안에서 돌아가는 웹사이트와 AI가 소통하는 건? 여전히 뚫려있지 않았습니다.

AI 에이전트가 웹사이트를 쓰려면 지금까지 이런 방법밖에 없었어요:

❌ 스크린 스크래핑: 화면 픽셀을 읽어서 추측
❌ DOM 조작: HTML 구조를 긁어서 버튼 찾기
❌ 셀레니움/Playwright: 브라우저 자동화 스크립트

공통 문제: 웹사이트가 디자인을 바꾸면 전부 깨집니다. 버튼 위치가 바뀌면, AI는 다시 눈 감고 더듬어야 합니다.

3. WebMCP: “웹사이트가 AI한테 메뉴판을 건넨다”

WebMCP의 핵심 아이디어는 심플합니다:

웹사이트가 “나한테 이런 걸 시킬 수 있어요”라고 AI에게 직접 알려준다.

레스토랑에 갔는데 메뉴판 없이 “아무거나 시키세요”라고 하면 당황하잖아요. 지금까지 AI 에이전트가 웹사이트를 쓰는 방식이 그랬습니다. WebMCP는 메뉴판을 만들어주는 표준입니다.

작동 방식 (비개발자 버전)

1. 웹사이트 개발자: "우리 사이트에서 검색, 장바구니 추가, 결제가 가능해요"
   → WebMCP로 이 3가지를 '도구'로 등록

2. AI 에이전트: "오, 이 사이트는 이런 도구를 제공하는구나"
   → 도구 목록을 자동으로 발견

3. 사용자: "이 사이트에서 에어팟 프로 찾아서 장바구니에 넣어줘"
   → AI가 '검색' 도구로 찾고, '장바구니 추가' 도구로 넣음
   → 버튼 위치 몰라도, 디자인 바뀌어도 동작함

작동 방식 (개발자 버전)

WebMCP는 navigator.modelContext API를 통해 브라우저에서 동작합니다.

Declarative API (선언형) — HTML 폼에 메타데이터 태깅:

<!-- 기존 HTML 폼에 어노테이션만 추가하면 AI가 쓸 수 있게 됨 -->
<form mcp-tool="search" mcp-description="상품 검색">
  <input name="query" mcp-param="검색어" />
  <button type="submit">검색</button>
</form>

Imperative API (명령형) — JavaScript로 복잡한 도구 등록:

navigator.modelContext.registerTool({
  name: "addToCart",
  description: "상품을 장바구니에 추가합니다",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string", description: "상품 ID" },
      quantity: { type: "number", description: "수량" }
    }
  },
  handler: async ({ productId, quantity }) => {
    return await cartService.add(productId, quantity);
  }
});

핵심 포인트:

🔒 HTTPS 필수 (보안)
🖥️ 클라이언트 사이드에서만 동작 (별도 백엔드 서버 불요)
👤 사용자의 세션/권한을 그대로 상속
🧑‍💻 Human-in-the-loop: 사람이 최종 확인 가능

4. 지금 어디까지 왔나 — Chrome 146 프리뷰

Google은 Chrome 146 Canary에 WebMCP 얼리 프리뷰를 이미 넣었습니다 (실험 플래그 뒤에 숨겨진 상태).

항목	현황
표준화	W3C Web Machine Learning Community Group 인큐베이팅
주도	Google + Microsoft 엔지니어 공동 편집
브라우저 지원	Chrome 146 Canary (실험 플래그)
정식 출시	Chrome 146 Stable: 2026-03-09
참조 구현	MCP-B (Model Context Protocol for Browser)
상태	Draft Community Group Report

여기서 중요한 타임라인:

2026-03-06: Gemini 3.1 Pro의 -latest 별칭이 변경
2026-03-09: Chrome 146 Stable 릴리스
→ WebMCP가 실제 사용자에게 너그러워지는 시점

5. 이게 왜 나한테 중요한가 — 직업별 영향

🧑‍💻 개발자

지금까지: API 없는 서비스 → 스크래핑 코드 작성 → 디자인 바뀌면 깨짐 → 유지보수 지옥 WebMCP 이후: 웹사이트가 도구를 노출 → AI가 안정적으로 호출 → 유지보수 최소화

실전 예시: 사내 관리자 페이지에 WebMCP 도구 5개만 등록하면, AI 에이전트가 리포트 생성/승인 처리/상태 변경을 자동화합니다.

📊 PM/기획자

지금까지: “이 기능을 자동화하려면 API 개발이 필요합니다” → 3주 대기 WebMCP 이후: 기존 웹 페이지에 어노테이션 추가 → 하루 만에 AI 연동

🛒 이커머스/마케팅

지금까지: 챗봇이 “상품 추천”만 하고 실제 구매는 수동 WebMCP 이후: AI가 검색 → 비교 → 장바구니 → 결제 직전까지 자동 (사람이 마지막 확인)

6. MCP 생태계 전체 지도 (2026년 3월 기준)

WebMCP는 혼자 등장한 게 아닙니다. MCP 생태계 전체가 동시에 확장 중입니다.

MCP 생태계 2026-03
├── 🔌 MCP (원본) — AI ↔ 백엔드 서비스 연결
│   ├── Anthropic (창시자)
│   ├── OpenAI (2025-03 채택)
│   ├── Google (Developer Knowledge API)
│   └── 커뮤니티 서버 수만 개
│
├── 🌐 WebMCP — AI ↔ 웹브라우저 내 웹사이트 연결 [NEW]
│   ├── W3C 인큐베이팅
│   ├── Chrome 146 프리뷰
│   └── MCP-B 참조 구현
│
├── 🏗️ AAIF (Agentic AI Foundation)
│   ├── Linux Foundation 산하
│   ├── 97개 신규 회원 (2026-02-24)
│   └── MCP를 개방형 표준으로 거버넌스
│
├── 🔐 보안 레이어
│   ├── OAuth 2.1 통합 (인증)
│   ├── Tool Permission 모델
│   └── 감춰진 위험: 프롬프트 인젝션, 룩어라이크 도구
│
└── 📊 숫자로 보는 성장
    ├── SDK 다운로드: 10만 → 9,700만/월
    ├── MCP 시장 규모: $18억 (2025년 추정)
    └── Hmem v2: AI 에이전트 영속 메모리 (2026-03-01)

7. 주의할 점 — 장밋빛만은 아닙니다

보안 리스크

WebMCP가 웹사이트에 “도구”를 노출하면, 악의적인 웹사이트가 가짜 도구를 등록할 수도 있습니다.

실제로 2025년 이미 발생한 사례:

GitHub MCP 취약점: 악성 이슈가 프라이빗 레포 데이터 유출 유도
수천 개 공개 MCP 서버에서 보안 약점 발견 (대부분 설정 미비)

체크리스트:

✅ HTTPS 컨텍스트에서만 동작 (기본 보안)
✅ Human-in-the-loop 설계 (사람 확인 가능)
⚠️ 도구 설명(description)을 신뢰하면 안 됨 — 프롬프트 인젝션 가능
⚠️ 초기 단계라 브라우저별 지원 차이 클 수 있음

아직 초기 단계

Chrome만 프리뷰 (Safari, Firefox는 미정)
채택하는 웹사이트 아직 소수
실무 사례 부족 → “써봤더니 이러더라” 콘텐츠가 곧 폭발할 예정

8. 내가 실제로 해볼 수 있는 3가지

① MCP 서버 먼저 만들어보기 (15분)

WebMCP 이전에 MCP 자체를 경험해보는 게 순서입니다.

npx @anthropic-ai/create-mcp-server my-first-mcp

이렇게 하면 로컬에 MCP 서버 템플릿이 생깁니다. Claude Code나 Cursor에서 바로 연결해서 써볼 수 있어요.

② Chrome 146 Canary에서 WebMCP 플래그 켜보기

Chrome Canary 설치
chrome://flags에서 “WebMCP” 또는 “Model Context” 검색
Enabled로 변경 → 재시작
개발자 도구 Console에서 navigator.modelContext 확인

③ 내 사이드 프로젝트에 WebMCP 붙여보기

npm install @mcp-b/global

import '@mcp-b/global';

navigator.modelContext.registerTool({
  name: "greet",
  description: "사용자에게 인사합니다",
  inputSchema: { type: "object", properties: { name: { type: "string" } } },
  handler: async ({ name }) => `안녕하세요, ${name}님!`
});

마무리: 웹이 AI를 위해 문을 열기 시작했다

정리하면 이렇습니다:

시기	상태
2024.11	MCP 출시 — AI가 백엔드와 대화하기 시작
2025.03	OpenAI/Google 채택 — 업계 표준화
2026.03	WebMCP 프리뷰 — AI가 웹사이트와 직접 대화
2026 하반기~	주요 웹사이트 WebMCP 도입 → AI 에이전트가 웹을 ‘쓰는’ 시대

MCP가 “AI의 USB-C”라면, WebMCP는 **”USB-C 포트가 모든 웹사이트에 달리는 것”**입니다.

아직 초기고, Chrome만 프리뷰고, 채택 웹사이트도 적습니다. 하지만 Google과 Microsoft가 W3C에서 함께 밀고 있다는 건 — 이게 실험이 아니라 인프라라는 뜻입니다.

개발자라면 지금 MCP 서버 하나 만들어보세요. 비개발자라면 “내가 쓰는 서비스에 WebMCP가 붙으면 뭐가 달라질지” 상상해보세요. 그 상상이 곧 현실이 되는 속도를, MCP 생태계가 증명하고 있습니다.