00:00:00Google과 Microsoft가 지원하는 새로운 제안이 나왔는데요, 웹의 미래를
00:00:03바꿀 수도 있을 것 같아 개인적으로 꽤 기대됩니다. 이름은 WebMCP인데, 일반적인
00:00:08MCP 서버와 혼동하지 마세요. WebMCP는 사실 브라우저 API로, 프런트엔드
00:00:13개발자가 자신의 사이트 기능을 AI 에이전트용 도구로 노출할 수 있게 해줍니다. 즉,
00:00:18모든 사이트가 미니 MCP 서버가 되는 셈이죠. 이미 자체 MCP 서버를
00:00:23시작한 사이트들을 보셨을 수도 있지만, 이건 좀 다릅니다. 이 기술의 목표는
00:00:27에이전트가 단순히 API에 접속해 채팅창에 결과를 보여주는 게 아니라, 여러분 대신 웹사이트를 직접 사용하는 것입니다.
00:00:32완전히 프런트엔드 기반으로 작동하죠. 이 차이점이 조금
00:00:37헷갈리신다면, 바로 데모를 보면서 제가 왜 이 기술을 좋아하는지 이야기해 보겠습니다.
00:00:46먼저 인정할 게 하나 있는데, 이 데모가 그리 화려해 보이진 않을 겁니다. 하지만
00:00:49그게 바로 WebMCP의 핵심입니다. 이미 가능한 일을 가져와서
00:00:54훨씬 더 낫게 만드는 것이니까요. 계속 지켜봐 주세요. 여기 제가 준비한 것은
00:00:58이 제안을 테스트 중인 Chrome Canary 버전과, 몇 가지 WebMCP 도구가
00:01:02설정된 사이트입니다. 오른쪽에 WebMCP 도구와 상호작용할 수 있는 확장 프로그램이 보이시죠?
00:01:06미래에는 이게 Gemini나 ChatGPT Atlas, 또는 ARC가 변모한 모습처럼
00:01:10브라우저에 내장된 일반적인 AI가 될 것입니다.
00:01:15제가 이 사이트에서 사용자 프롬프트를 보낸다고 가정해 보죠. “특정 날짜에
00:01:19런던에서 뉴욕으로 가는 성인 2명의 왕복 항공권을 예약하고 싶어”라고 입력하고
00:01:23전송을 누르면, 검색 결과 페이지로 바로 이동합니다. 저 대신 웹사이트를 사용한 거죠.
00:01:28와, 정말 대단하죠? 네, 말씀드린 대로 데모 자체는 매우 기본적으로 보일 겁니다.
00:01:33하지만 WebMCP의 핵심은 사이트를 사용하는 방식에 있습니다. 현재 AI가
00:01:38웹사이트를 사용하는 방식은 Playwright, HTML 파싱을 이용하거나 심지어 사이트 스크린샷을 찍어서
00:01:42사람처럼 이용하려고 시도하는 방식입니다. 하지만 이 모든 방식은 꽤 비효율적이고,
00:01:48특히 토큰 소모가 크며 여전히 오류가 발생하기 쉽습니다. WebMCP는 바로 이 점을 해결하러 나왔습니다.
00:01:53WebMCP를 사용하면 웹사이트 개발자가 클라이언트 측 자바스크립트와 상호작용하는
00:01:58특정 MCP 도구를 노출할 수 있습니다. 그래서 AI가
00:02:03이러한 WebMCP 도구 중 하나를 선택해 사용하는 과정은 간단합니다. 개발자인 여러분이
00:02:07실행되도록 설정해 둔 사이트의 자바스크립트 함수를 실행하는 것뿐이죠.
00:02:12이 데모 항공권 페이지의 예를 보면 'search flights'라는 하나의 WebMCP 도구가 활성화되어 있고,
00:02:16출발지, 목적지, 여행 유형 같은 입력 인자를 받는 것을 볼 수 있습니다. 이는 우리가 보는
00:02:20양식(form)과 일대일로 매칭됩니다. 중요한 점은 이제 AI가 이
00:02:25MCP 도구를 사용할 수 있다는 사실을 알고 있다는 겁니다. 그래서 이런 프롬프트를 보낼 때,
00:02:29Playwright나 HTML 파싱 같은 방식으로 양식을 채우지 않습니다. 사실 AI는 웹사이트가
00:02:34어떻게 생겼는지, HTML 구조가 어떤지도 전혀 알 필요가 없습니다. 그저 해당 WebMCP
00:02:38도구가 있다는 것만 알고 입력 인자와 함께 호출하면 됩니다. 그러면 개발자인 제가
00:02:43해당 인자를 받아 자바스크립트 함수를 실행하도록 설정해 둔 동작이 수행되죠. 여기서는
00:02:47단순히 React 상태를 업데이트하여 항공권 검색 페이지로 이동하게 만듭니다.
00:02:52이 기능의 프런트엔드 코드를 살펴보면, 믿기지 않을 정도로 간단하며
00:02:55훨씬 더 잘 이해가 가실 겁니다. 먼저 해야 할 일은
00:02:59해당 페이지에서 사용 가능한 WebMCP 도구를 등록하는 것인데, `window.navigator.model_context`를 사용하여 수행합니다.
00:03:04이것이 이 제안이 통과될 경우 브라우저에 내장될 API이며,
00:03:09현재 Chrome Canary에서 테스트해 볼 수 있습니다. 일단
00:03:13Model Context API가 확보되면, `registerTool` 함수를 사용하여
00:03:18도구를 등록할 수 있습니다. 여기서는 아까 본 `searchFlights` 도구를 등록하고 있네요.
00:03:22실제 도구의 구성을 확인해 보면 매우 단순한 객체 정의임을 알 수 있습니다.
00:03:26이름과 설명이 있는데, 이는 AI에게 전달되어 언제 이
00:03:30도구를 사용해야 할지 알려주는 역할을 합니다. 또한 인자를 받고 싶다면 입력 스키마도 가질 수 있습니다.
00:03:34제 경우에는 양식과 일치하도록 출발지, 목적지 같은 항목을 넣었습니다.
00:03:38보시다시피 AI가 해당 인자들이 실제로 무엇이어야 하는지 이해할 수 있도록
00:03:42더 많은 컨텍스트를 줄 수도 있습니다. 도구 정의에서 가장 중요한 부분은 `execute` 함수입니다. 이것은
00:03:47해당 MCP 도구가 사용될 때 여러분의 사이트에서 실행될 클라이언트 측 자바스크립트입니다.
00:03:51기본적으로 원하는 것은 무엇이든 할 수 있습니다. 제 코드에서는 `searchFlights` 함수를 사용 중인데,
00:03:55구현 방식을 너무 걱정할 필요는 없습니다. 본질적으로 제가 하는 일은
00:03:59AI가 채워 넣은 입력 인자 파라미터를 받아서 해당 파라미터와 함께
00:04:03`searchFlights`라는 이벤트를 디스패치하는 것뿐입니다. 그다음 React 코드에서는
00:04:08단순히 그 이벤트를 수신하는 이벤트 리스너를 추가하고, 이벤트가 발생하면
00:04:12`handleSearchFlights` 함수를 실행합니다. 여기서 우리는
00:04:15React로 할 수 있는 모든 것을 할 수 있습니다. 제 경우 파라미터를 받아서
00:04:19검색 파라미터로 설정해 페이지 이동을 일으켰죠. 정말 간단하지 않나요? 제가
00:04:24이 방식을 정말 좋아하는 이유는 토큰 효율성이 엄청날 뿐만 아니라,
00:04:29개발자인 제가 사이트 상호작용을 정의하고 AI가 제 가이드라인을 따르게 할 수 있기 때문입니다.
00:04:34사람과 AI 어시스턴트 모두를 염두에 두고 사이트를 구축하는 정말 깔끔한 해결책입니다.
00:04:39현재 방식처럼 사람을 위한 사이트를 만들고, AI를 위해 별도의 MCP 서버를 만든 다음,
00:04:43AI가 웹사이트를 써야 할 때는 어떻게든 알아서 잘 하기를 바라는 것과는 차원이 다르죠.
00:04:48또한 이러한 WebMCP 도구는 페이지 이동이나 양식 채우기 같은
00:04:51이벤트를 발생시키는 데만 유용한 것이 아니라, 페이지의 정보를
00:04:55파싱해야 할 때도 정말 유용합니다. 만약 제가 사용자로서 여기 들어와서
00:05:00가격은 500달러 미만, 출발 시간은 정오 이전으로 필터를 조정하기 시작했다고 해봅시다.
00:05:05여전히 페이지에 항공권이 꽤 많이 남아있어서 AI가
00:05:11가장 좋은 항공권을 추천해 줬으면 합니다. 그래서 “이 페이지에서 어떤 항공권을 추천하니?”라고 물을 수 있죠.
00:05:15현재 방식이라면 Playwright나 HTML 파싱을 통해 페이지 전체를 가져와서
00:05:20정보를 이해하고 이를 정형화된 데이터로 변환하려고 시도할 겁니다.
00:05:24하지만 WebMCP가 있다면 그럴 필요가 없습니다. 대신 개발자인 제가
00:05:29list flights라는 WebMCP 도구를 설정해 두면 됩니다. 이 도구는 현재 React 상태에 접근할 수 있어서
00:05:33사용자에게 표시되는 모든 정보에 접근할 수 있지만, 깔끔한 JSON 포맷으로 가져올 수 있습니다.
00:05:38그래서 실제로 AI에게 질문을 던지면, 보시는 것처럼
00:05:42해당 도구를 호출해 현재 페이지의 모든 항공권을 나열하고,
00:05:4656번 항공권을 추천해 줍니다. 그리고 전 페이지에서 해당 항공권을 바로 찾을 수 있죠.
00:05:51이 과정은 토큰을 훨씬 적게 사용하며 훨씬 더 정확할 것입니다. 이제
00:05:56마지막으로 보여드릴 것은 자바스크립트 없이 WebMCP를 활용하는 방법입니다.
00:06:00지금까지는 제가 개발자로서 도구 호출을 처리하고 특정 도구를 등록하는
00:06:05자바스크립트 코드를 직접 작성하는 '명령형 API' 방식을 사용했습니다.
00:06:10두 번째 방식인 '선언형 API'도 있습니다. 이 방식은
00:06:14HTML 양식을 채우는 간단한 사용 사례를 위한 것으로 훨씬 단순합니다. 여기 아주 간단한
00:06:19예약 양식이 있는데, AI에게 양식을 채우는 데 필요한 정보와 함께 예약을 부탁하면
00:06:23가서 저 대신 양식을 직접 채워줄 겁니다.
00:06:27AI가 `bookTable`이라는 WebMCP 도구에 접근할 수 있기 때문이죠. 하지만
00:06:32여기서 중요한 점은 이 WebMCP 도구를 사용하기 위해 자바스크립트를 한 줄도 쓰지 않았다는 겁니다.
00:06:36WebMCP의 선언형 API가 작동하는 방식은 간단합니다. HTML 양식에
00:06:40`tool-name`과 `tool-description` 속성을 추가하기만 하면 됩니다. 그러면 브라우저가
00:06:44해당 양식을 WebMCP 도구로 자동 변환하려고 시도하며, 각 입력값이
00:06:49MCP 도구의 어떤 인자가 되어야 하는지 파악합니다. 여기서 보면 예약 양식에
00:06:53`tool-name`으로 `bookTable`과 `tool-description`이 설정된 것을 볼 수 있습니다.
00:06:57그래서 AI는 언제 이 도구를 호출해야 할지 알게 되죠. 그 외엔 평범한 HTML 양식입니다. 유일한 차이점은
00:07:02몇몇 입력 항목인데, `tool-param-description` 속성을 사용하여 AI에게
00:07:06해당 정보를 어떻게 채워야 할지에 대한 컨텍스트를 조금 더 제공했습니다. 그 외에는 브라우저가
00:07:10입력값, 입력 타입, 이름을 파악하여 MCP 도구를 생성합니다.
00:07:14인스펙터 창을 다시 보면 이름, 전화번호, 날짜, 시간, 인원수, 좌석, 요청 사항 등
00:07:18입력 인자들이 정확하게 파악된 것을 확인할 수 있습니다. 제가 자바스크립트를
00:07:23전혀 쓰지 않고도 단순한 HTML 양식 로직만으로 이 모든 것이 가능해진 거죠. 이것이
00:07:27현재 WebMCP 제안의 거의 전부입니다. 서두에 말씀드린 것처럼,
00:07:31저는 이 기술을 긍정적으로 봅니다. 웹 앱과 AI 에이전트 사이의 간극을 좁히는 방식이 마음에 들고,
00:07:34에이전트가 사이트를 사용할 때의 추측 과정을 제거하며, 모든 상호작용이
00:07:38웹사이트 개발자에 의해 명시적으로 정의되도록 보장하기 때문입니다. 게다가 전 아직
00:07:43AI에 완전히 매몰되지는 않았습니다. AI 에이전트가 저를 완전히 대체하기보다
00:07:47제 곁에서 저를 도와주는 도구로서 작동하는 게 좋습니다. 저는 항공권이나 식당을
00:07:51ChatGPT 인터페이스 안에서 예약하는 걸 그리 좋아하지 않습니다. 대신 브라우저로
00:07:56실제 웹사이트에 직접 들어가는 걸 선호하죠. 그리고 원한다면
00:08:00그 페이지에서 AI의 도움을 받을 수 있고요. 인간이 주도권을 쥐면서도 웹 개발자가
00:08:05그 경험을 정의할 수 있게 해주는 훨씬 더 나은 시스템입니다. 하지만 이건 현재
00:08:08제안 단계일 뿐이라는 점을 기억해야 합니다. 브라우저에 실제로 적용되기까지는 시간이 걸릴 수 있고,
00:08:12여전히 해결해야 할 한계점들도 있습니다. 보안 문제가 대표적인데,
00:08:16특정 사이트에 오염된 도구나 설명이 있을 수도 있습니다. AI가 사용자 정보에
00:08:21어디까지 접근할 수 있는지, 브라우저 AI가 브라우저 전체에 대해 어느 정도의 제어권을 가질지도 관건입니다.
00:08:25만약 오염된 도구가 통제를 벗어난다면 얼마나 큰 피해를 줄 수 있을까요? 저는 이 제안을
00:08:29긍정적으로 보는 만큼 그들이 해결책을 찾길 바랍니다. 여러분의 생각은 어떤지 댓글로
00:08:33알려주세요. 구독도 잊지 마시고요. 그럼 다음 영상에서 뵙겠습니다.