태그

WebMCP란? AI 에이전트가 웹사이트 기능을 직접 사용한다!

WebMCP란? 웹 문서를 읽는 AI 에이전트를 위한 새로운 웹 표준
본 이미지는 AI로 생성한 이미지입니다.

 

WebMCP란? 웹 문서를 읽는 AI 에이전트를 위한 새로운 웹 표준 

인공지능이 인간을 대신해 웹 서핑을 하고 복잡한 업무를 처리하는 'AI 에이전트(AI Agent)' 시대가 열리면서, 웹 생태계에는 새로운 과제가 주어졌습니다. AI가 웹사이트의 버튼을 잘못 클릭하거나 화면 디자인이 조금만 바뀌어도 오류를 뿜어내는 기존 '스크린 스크래핑(Screen-scraping, 화면의 글자와 그림을 강제로 읽어가는 방식)'의 한계를 극복해야 한다는 점입니다. 이를 근본적으로 해결해보기 위해 등장한 혁신적인 웹 표준이 바로 WebMCP(Web Model Context Protocol)입니다. 

이 글에서는 WebMCP의 원리부터 실제 프론트엔드 환경에서 자바스크립트 코드를 활용해 AI 전용 도구를 구축하는 방법, 그리고 이를 통한 비즈니스 실무 최적화 전략까지 살펴봅니다.



1. WebMCP란 무엇인가? (육하원칙으로 보는 핵심 개념)

최근 AI 에이전트는 단순한 챗봇을 넘어 웹사이트에 직접 접속해 비행기 표를 예매하거나 복잡한 데이터를 사내 시스템에 업로드하는 등 인간의 행동을 적극적으로 대행하고 있습니다. WebMCP는 이러한 AI가 웹사이트와 완벽하게 소통할 수 있도록 돕는 공식 규약입니다.

  • 누가(Who): 구글 크롬(Chrome)을 비롯한 주요 브라우저 개발진과 글로벌 웹 커뮤니티가 주도하며, 최종적으로는 사용자 대신 웹을 탐색하는 AI 에이전트가 활용합니다.

  • 무엇을(What): 웹사이트가 자신이 가진 고유 기능(예: 검색, 결제, 폼 입력 등)을 AI 에이전트에게 명시적으로 알려주고, 서로 데이터를 주고받을 수 있게 해주는 새로운 클라이언트 측 웹 표준 API입니다.

  • 언제(When): 앤스로픽(Anthropic)이 개발한 서버용 MCP(Model Context Protocol)가 큰 주목을 받은 이후, 프론트엔드(화면단)에서의 AI 상호작용 문제를 해결하기 위해 2026년부터 브라우저 생태계의 주요 표준으로 본격 제안되었습니다.

  • 어디서(Where): 백엔드 서버가 아닌, 사용자가 현재 접속하여 띄워놓은 웹 브라우저 탭 내부(클라이언트 사이드)에서 실시간으로 작동합니다.

  • 왜(Why): 기존 AI 에이전트가 웹 화면의 텍스트와 버튼을 강제로 긁어가는 '스크린 스크래핑(Screen-scraping)'의 불안정한 방식을 탈피하기 위해서입니다. 웹사이트가 공식적으로 제공하는 안전하고 구조화된 도구(Tool)만을 AI가 사용하도록 강제하여 시스템 오류와 보안 위협을 원천 차단합니다.

  • 어떻게(How): 개발자가 표준 JavaScript 객체를 호출하거나, 웹페이지의 HTML 코드에 특별한 주석(Annotation)을 달아 AI가 읽을 수 있는 설명서(JSON 스키마)를 제공하는 방식으로 쉽게 구현합니다.



2. 현재 브라우저의 한계와 WebMCP가 해결하려는 문제

1️⃣ 현재 브라우저의 한계

오늘날 AI 브라우저는 사람처럼 웹사이트를 이해하려고 노력합니다. 예를 들어 사용자가 AI에게 다음과 같이 요청했다고 가정해 보겠습니다.

"서울에서 부산까지 KTX를 예매해줘."

현재 브라우저는 다음과 같은 과정을 거칩니다.

  • 검색창 찾기
  • 출발지 입력
  • 도착지 입력
  • 날짜 선택
  • 조회 버튼 클릭
  • 결과 분석

즉, 사람의 행동을 흉내 내는 방식입니다.

문제는 웹사이트 디자인이 조금만 변경되어도 AI가 버튼을 찾지 못하거나 잘못된 요소를 클릭할 수 있다는 점입니다. 또한 화면 분석, DOM 탐색, 클릭 시뮬레이션 등의 과정 때문에 속도와 비용이 증가합니다.


2️⃣ WebMCP가 해결하려는 문제

WebMCP는 AI가 화면을 추측하지 않도록 만들어진 기술입니다. 웹사이트가 AI에게 직접 다음과 같이 알려주는 방식입니다.

"나는 열차 검색 기능이 있다."
"나는 예약 기능이 있다."
"나는 상품 검색 기능이 있다."

구글이 공개한 WebMCP 구조에서는 웹사이트가 도구(Tool)의 이름, 설명, 입력값 구조(JSON Schema)를 등록하면 브라우저가 이를 AI 에이전트에게 전달합니다.

예를 들어 쇼핑몰이라면 다음과 같은 기능을 등록할 수 있습니다.

JSON Example 
{
  "tool": "search_products",
  "arguments": {
    "keyword": "무선 이어폰",
    "max_price": 100000
  }
}

AI는 더 이상 검색창을 찾을 필요가 없습니다. 단순히 기능을 호출하면 됩니다.



3. 코드 기반 WebMCP 실무 구현 예제 (자바스크립트 가이드)

거창한 서버 인프라를 새로 구축할 필요가 없습니다. 기존 웹사이트의 프론트엔드 소스 코드에 자바스크립트(JavaScript) 스크립트 몇 줄을 추가하는 것만으로, 웹페이지를 AI 에이전트가 자유롭게 뛰어놀 수 있는 전용 놀이터로 바꿀 수 있습니다. 가장 대표적인 '명령형 API(Imperative API)' 방식을 통해 쇼핑몰의 상품 검색 도구를 AI에게 노출하는 구체적인 코드 스니펫(Code Snippet)을 살펴보겠습니다.

AI 에이전트에게 도구를 제공하려면 도구의 이름, 설명, 입력받을 데이터 형식(JSON Schema), 그리고 실제 동작할 함수(execute)를 브라우저의 window.webmcp 객체에 등록해야 합니다. 

JavaScript · WebMCP 
// WebMCP 도구 등록 예제: 쇼핑몰 상품 검색 기능
// 브라우저가 WebMCP API를 지원하는지 확인합니다.
if ('webmcp' in window) {
  
  window.webmcp.registerTool({
    // 1. 도구 이름 (AI가 내부적으로 호출할 명칭)
    name: "search_shopping_products",
    
    // 2. 도구 설명 (AI가 이 도구를 언제 써야 할지 판단하는 기준이 됨)
    description: "사용자가 입력한 키워드와 예산을 바탕으로 쇼핑몰 내 상품 목록을 검색합니다.",
    
    // 3. 입력 데이터 형식 (JSON Schema 정의)
    schema: {
      type: "object",
      properties: {
        keyword: { 
          type: "string", 
          description: "검색할 상품의 핵심 키워드 (예: 무선 이어폰, 봄 자켓)" 
        },
        max_price: { 
          type: "number", 
          description: "사용자가 원하는 최대 예산 (단위: 원). 설정하지 않으면 무제한." 
        }
      },
      
      // 키워드는 필수 입력값으로 지정
      required: ["keyword"]
    },
    
    // 4. AI가 도구를 호출했을 때 실행될 실제 비즈니스 로직
    execute: async (args) => {
      console.log(`[WebMCP] AI 에이전트가 검색을 요청함: ${args.keyword}, 예산: ${args.max_price}`);
      
      try {
        // 기존 웹사이트의 백엔드 검색 API를 그대로 재사용
        const queryParams = new URLSearchParams({ q: args.keyword });
        
        if (args.max_price) 
          queryParams.append("price", args.max_price);
        
        const response = await fetch(`/api/v1/products/search?${queryParams.toString()}`);
        const data = await response.json();
        
        // 검색 결과를 AI 에이전트가 읽기 편한 텍스트 또는 JSON 형태로 반환
        return {
          status: "success",
          results_found: data.items.length,
          items: data.items.map(item => ({
            id: item.id,
            name: item.name,
            price: item.price,
            link: item.url
          }))
        };
        
      } catch (error) {
        // 오류 발생 시 AI에게 명확한 에러 메시지 전달
        return { 
          status: "error", 
          message: "검색 서버에 연결할 수 없습니다." 
        };
      }
    }
  });

  console.log("WebMCP 도구가 성공적으로 등록되었습니다.");
}
위의 코드를 웹사이트에 적용하면, 사용자가 AI 에이전트에게 "10만 원 이하의 가성비 무선 이어폰 좀 찾아줘"라고 말했을 때, AI는 화면의 검색창을 마우스로 찾으려 애쓰는 대신 등록된 search_shopping_products 도구를 즉각 호출합니다. 결과를 전달받은 AI는 화면에 그 내용을 예쁘게 요약해 주거나 바로 장바구니에 담는 다음 행동을 이어갈 수 있습니다.



4. WebMCP가 비즈니스 실무에 미치는 파급력

WebMCP의 도입은 단순한 프론트엔드 기술의 업데이트를 넘어, 기업의 고객 서비스(CS)와 비즈니스 워크플로우에 혁명적인 자동화를 가져옵니다.

  • 초개인화된 맞춤형 쇼핑 비서: 이커머스 쇼핑몰에 WebMCP를 적용하면, 고객이 "내 예산 10만 원에 맞는 봄옷 찾아주고 장바구니에 담아줘"라고 AI에게 지시했을 때, AI가 사이트의 검색, 필터링, 장바구니 담기 기능을 WebMCP 도구를 통해 직접 실행하여 단 몇 초 만에 쇼핑을 완료합니다.

  • 사내 인트라넷 및 B2B 솔루션의 혁신: 복잡한 ERP(전사적 자원 관리) 시스템이나 사내 그룹웨어에 적용해 보십시오. 신규 입사자도 "이번 달 영업 실적 엑셀로 다운로드해 줘"라는 말 한마디로 복잡한 메뉴 학습 없이 원하는 데이터를 얻을 수 있습니다. 화면을 강제로 긁는 스크래핑 방식이 아니기 때문에, 인트라넷 UI 디자인이 대대적으로 개편되어도 AI 에이전트는 절대 고장 나지 않습니다.

  • SEO를 넘어선 AEO(AI Engine Optimization)로의 진화: 앞으로는 검색 엔진 최적화(SEO) 못지않게 AI 에이전트가 우리 웹사이트를 얼마나 빠르고 정확하게 활용할 수 있느냐(AEO)가 트래픽과 매출을 좌우합니다. WebMCP는 웹사이트의 핵심 기능을 AI에게 가장 적극적으로 홍보하고 내어주는 궁극의 B2B/B2C 마케팅 인프라가 될 것입니다.



AI 웹 표준 도입을 위한 실전 의사결정 프레임워크

사람이 마우스를 쥐고 직접 클릭하며 탐색하던 시대는 저물고, AI 에이전트가 사용자를 대신하여 웹을 항해하고 행동하는 시대로 빠르게 전환하고 있습니다. WebMCP는 이 거대한 대전환기에서 웹사이트와 인공지능을 잇는 가장 안전하고 표준화된 핵심 교량 역할을 수행할 것입니다.

독자 여러분이 실무 환경에서 WebMCP 도입을 검토 중이시라면, 다음의 세 가지 기준(프레임워크)을 반드시 조직 내에서 점검해 보시기 바랍니다.

  1. AI 노출(AEO)의 비즈니스 가치 평가: 우리 웹사이트의 수익 모델이 사용자의 직접적인 화면 체류 시간에 있는지, 아니면 빠르고 정확한 '목표 달성(쇼핑, 예약, 데이터 다운로드 등)'에 있는지 평가하십시오. 후자에 해당한다면 경쟁사보다 먼저 WebMCP 테스트를 시작하여 AI 에이전트의 방문을 적극적으로 유도해야 합니다.

  2. 클라이언트 보안 및 권한 제어 점검: WebMCP를 통해 AI에게 열어줄 도구가 실제 결제나 개인정보 변경과 같은 민감한 작업을 포함하는지 분류하십시오. 단순 검색이나 정보 조회는 자동화하되, 민감한 작업은 반드시 인간 사용자의 최종 승인 버튼(Human-in-the-loop)을 거치도록 UI/UX를 보수적으로 설계해야 합니다.

  3. 점진적 도입과 파일럿 테스트: 처음부터 대규모 백엔드 서버 연동을 고민할 필요가 없습니다. 개발 환경에서 WebMCP 기능을 활성화하고, 메인 화면의 '통합 검색 기능' 단 하나만 선언적 API로 노출해보는 가벼운 파일럿 프로젝트부터 시작하여 AI 에이전트와의 호환성을 검증하시기 바랍니다.


[원문 출처 및 참고문헌]

Labels:

댓글

댓글 쓰기

인기 글