00:00:00이제 AI 에이전트는 우리 삶의 모든 부분에 스며들기 시작했습니다.
00:00:03가장 큰 변화가 일어난 분야 중 하나가 바로 브라우저입니다.
00:00:06모든 주요 AI 기업들은 브라우저야말로 모든 사람이 매일 사용하는
00:00:11단 하나의 도구라는 점을 깨달았습니다.
00:00:12그러니 브라우저에 AI를 넣지 않을 이유가 없죠.
00:00:14하지만 솔직히 말해서, 지금 나온 것들은 전부 형편없습니다.
00:00:15최적화의 문제가 아닙니다.
00:00:17어떠한 최적화로도 해결할 수 없는 근본적인 결함이 있기 때문입니다.
00:00:20그런데 최근 구글이 마이크로소프트와 협력하여 WebMCP라는 것을 발표했습니다.
00:00:24에이전트가 웹사이트를 더 잘 쓰게 만드는 대신, 웹사이트가 에이전트와
00:00:29더 잘 대화할 수 있도록 만드는 방식입니다.
00:00:30이는 완전히 새로운 접근 방식입니다.
00:00:32그리고 이를 통해 우리는 이전에 본 적 없는 가능성을 보게 됩니다.
00:00:35여기 로컬 서버에서 실행 중인 간단한 HTML 페이지가 있습니다.
00:00:38확장 프로그램 탭을 열면 WebMCP 확장 프로그램이 보입니다.
00:00:41실행해 보면, 사이트 이름 아래에 'BookTable'이라는 도구 하나가 있습니다.
00:00:45우리는 이 WebMCP 브릿지를 Claude Code에 연결하고, WebMCP 도구를 사용할 수 있는
00:00:49레스토랑 예약 양식이 열려 있다고 알려주었습니다.
00:00:52그리고 날짜, 이름, 특별 요청 사항을 포함해 2인 테이블을 예약하라는 작업을 주었습니다.
00:00:57양식에는 해당 필드들이 모두 갖춰져 있습니다.
00:00:59에이전트는 날짜를 확인하고 사이트에서 제공한 WebMCP 도구를 사용하여 필드를 채운 뒤
00:01:03성공적으로 예약을 완료했습니다.
00:01:06현재 에이전트가 화면 내용을 파악하는 방법은 두 가지입니다.
00:01:09첫 번째는 시각 기반 방식입니다.
00:01:11에이전트가 전체 페이지를 스크린샷으로 찍어 모든 요소를 주석으로 달고,
00:01:15그 이미지를 모델에 입력해 어디를 클릭할지 판단하게 합니다.
00:01:19두 번째 방법은 DOM 파싱입니다.
00:01:21에이전트가 페이지의 가공되지 않은 HTML 코드를 가져오는 방식이죠.
00:01:24웹사이트에서 '검사' 메뉴를 눌러본 적이 있다면 그게 어떤 모습인지 아실 겁니다.
00:01:28수천 줄의 코드가 쏟아져 나오죠.
00:01:29에이전트는 그 코드를 다 읽고 정확한 버튼을 찾아내려 애씁니다.
00:01:33하지만 이 두 가지 방식 모두 동일한 근본적 문제를 안고 있습니다.
00:01:35바로 비결정론적이라는 점입니다.
00:01:36에이전트는 매 순간 최선의 추측을 하고 있을 뿐입니다.
00:01:39이 모든 것이 일관되게 작동하지 않는 이유는 인터넷 전체가
00:01:43사람의 눈을 위해 만들어졌기 때문입니다.
00:01:45모든 웹사이트는 사람이 보고 있다는 것을 가정합니다.
00:01:47기계를 위한 구조는 존재하지 않습니다.
00:01:48그래서 에이전트는 모델 성능과 관계없이, 기계가 해석하도록 설계되지 않은 것을
00:01:53억지로 해석하느라 애를 먹는 것입니다.
00:01:55반면 WebMCP를 사용하면 에이전트가 사이트를 파악하려 애쓰는 대신, 사이트가
00:02:00수행 가능한 작업들을 '도구'로 직접 등록합니다.
00:02:01에이전트는 페이지에 들어왔을 때 추측할 필요가 없습니다.
00:02:04사용 가능한 도구 목록을 읽고 직접 호출하기만 하면 됩니다.
00:02:07현재 WebMCP는 초기 프리뷰 버전으로만 제공됩니다.
00:02:10에이전트 중심의 웹으로 진화함에 따라 웹사이트도 그에 맞춰 변해야 합니다.
00:02:13방금 보셨듯이, 이러한 도구들을 정의함으로써 에이전트가
00:02:18우리 사이트와 더 원활하게 상호작용하도록 도울 수 있습니다.
00:02:19방금 데모는 단순한 HTML 양식이었기에 잘 작동했습니다.
00:02:21하지만 대부분의 실제 웹사이트는 그렇게 간단하지 않죠.
00:02:23그래서 WebMCP는 상황에 따라 두 가지 다른 접근 방식을 제공합니다.
00:02:28에이전트가 브라우저를 제어할 수 있게 하는 두 가지 방식이 있습니다.
00:02:31선언적 API는 방금 보신 HTML 양식 같은 단순한 워크플로를 위한 것입니다.
00:02:35명령형 API는 여러 페이지로 구성된 본격적인 웹 앱을 위한 것이며,
00:02:40이는 나중에 자세히 다룰 추가적인 구현 과정이 필요합니다.
00:02:43현재 공식 문서는 없지만, 구글 크롬 랩스에 WebMCP 도구 저장소가 있으며
00:02:48두 개의 데모 중 하나만 실제로 호스팅되고 있습니다.
00:02:52간단한 항공권 검색 데모와 공식 'Marvel context tool inspector' 확장 프로그램이 있습니다.
00:02:56이를 설치하면 WebMCP가 구현된 웹사이트에서 확장 프로그램을 통해
00:03:01도구들을 감지하고 다른 멋진 작업들도 수행할 수 있게 됩니다.
00:03:05도구의 입력 스키마가 바로 화면에 나타납니다.
00:03:07현재 이 페이지에는 '항공권 검색' 도구 하나만 있습니다.
00:03:10이를 사용하는 방법은 두 가지가 제시되었습니다.
00:03:12AI 모델이 채울 입력 인자를 직접 주거나, 혹은
00:03:16Gemini API 키를 설정하고 일상적인 영어로 프롬프트를 입력하면
00:03:21그에 따라 페이지가 제어됩니다.
00:03:22지금 기본 입력값이 설정되어 있는데요.
00:03:24이를 바꾸자 실제로 항공권을 검색하여 여러 결과가 나왔습니다.
00:03:28다시 돌아가 보니, 이번엔 WebMCP 여행 사이트에 4개의 도구가 활성화되었고
00:03:32그중 3개는 적용 가능한 필터였습니다.
00:03:35페이지의 입력 인자 또한 변경되었습니다.
00:03:37인자를 하나 더 추가하자 필터 설정이 업데이트되었다는 알림이 떴습니다.
00:03:41조건에 맞는 항공권은 없었지만, 필터는 모두 정상적으로 적용되었습니다.
00:03:44우리는 이 과정에서 Zen 브라우저와 크롬을 번갈아 사용했는데,
00:03:48WebMCP는 모든 브라우저가 쓸 수 있는 오픈 프로토콜로 출시되었지만
00:03:54현재는 크롬 카나리 버전에서만 작동하기 때문입니다.
00:03:55표준이 정식으로 발표되어야 모두가 사용할 수 있게 될 것입니다.
00:03:58이것이 현재 공식 툴링의 현주소입니다.
00:04:01문서도 없고 데모는 두 개뿐이며 크롬 카나리에서만 작동하는 데다,
00:04:05브라우저 에이전트용으로 설계되었기에 Claude Code와는 바로 쓸 수 없습니다.
00:04:09그래서 시스템에 설치하여 MCP와 확장 프로그램을 제공하는
00:04:14커스텀 WebMCP 브릿지를 찾아냈습니다.
00:04:16덕분에 Claude Code가 WebMCP를 사용하여 웹사이트를 탐색하고
00:04:22사이트가 제공하는 도구를 사용할 수 있게 되었습니다.
00:04:23사이트에서 이를 실제로 어떻게 구현하는지, 간단한 방식부터 살펴보겠습니다.
00:04:27HTML 양식에서 보셨던 선언적 API의 경우,
00:04:31HTML 양식 내부에 도구 이름, 도구 설명, 그리고 매개변수 설명을
00:04:36선언하기만 하면 됩니다.
00:04:37복잡하게 파고들 필요는 없습니다.
00:04:39그저 에이전트가 이를 포함하도록 하면 됩니다.
00:04:41우리는 WebMCP 저장소의 데모를 역설계하여 두 가지 가이드를 만들었고
00:04:46Claude Code가 이를 참고할 수 있게 했습니다.
00:04:47그 과정에서 몇 가지 공통적인 문제에 직면했고
00:04:51가이드를 수정해 나가야 했습니다.
00:04:53두 가이드 모두 저희 커뮤니티인 AI Labs Pro에서 확인하실 수 있으며,
00:04:57바로 사용 가능한 템플릿들이 준비되어 있습니다.
00:04:58이번 영상과 이전 영상들의 프로젝트에 바로 적용해 보실 수 있습니다.
00:05:01핵심적인 내용은 영상에 다 담겨 있지만, 실제 파일이 필요하시다면
00:05:05설명란의 링크를 확인해 주세요.
00:05:06에이전트가 이러한 선언문을 추가하면, 나머지는 브라우저가
00:05:10HTML에서 이를 읽어 처리하게 됩니다.
00:05:12두 번째는 더 복잡한 상호작용과 자바스크립트 실행이 필요한 경우를 위한
00:05:17명령형 API입니다.
00:05:18Next.js 앱을 초기화하고 Claude Code에게 Next.js 가이드를 주자
00:05:23구현에 필요한 모든 준비가 끝났습니다.
00:05:24React 앱에서는 라이브러리 폴더에 새 파일을 생성하여
00:05:29사이트에 필요한 모든 도구를 선언합니다.
00:05:30보시는 것들이 모든 함수와 그 정의들입니다.
00:05:33하지만 웹 앱 규모가 커지면 도구가 100개가 넘을 수도 있는데,
00:05:38그러면 Claude Code에서처럼 문맥 과부하가 발생하여
00:05:41시스템이 망가지는 문제가 생깁니다.
00:05:43따라서 사이트의 모든 도구를 한꺼번에 불러오는 대신,
00:05:47현재 페이지에 필요한 도구만 불러오는 것이 좋습니다.
00:05:48이 개념을 '컨텍스트 로딩'이라고 부릅니다.
00:05:50이것이 Claude Code로 만든 Next.js 앱입니다.
00:05:53백엔드까지 구현된 완전히 기능하는 소규모 데모 앱이죠.
00:05:57지금 메인 홈 페이지에는 3개의 도구만 활성화되어 있습니다.
00:06:01장바구니 페이지로 이동하자 도구가 4개로 늘어나고 이름도 바뀌었습니다.
00:06:05사용 가능한 도구가 페이지에 따라 동적으로 변하는 것입니다.
00:06:09여기서 등록 함수들이 제 역할을 합니다.
00:06:11홈페이지 같은 특정 페이지에 진입하면 'register home tools' 함수를 실행하고
00:06:15떠날 때는 'unregister home tools'를 실행합니다.
00:06:18해당 페이지에 속한 도구들에 맞춰 등록과 해제를 반복하는 방식입니다.
00:06:23이 경우에는 브라우저에만 의존하는 것이 아니라
00:06:27코드 레벨에서 통합을 관리하게 됩니다.
00:06:28우리는 지금 구글이 의도하거나 각 브라우저가 직접 구현할 방식인
00:06:32브라우저 에이전트로 WebMCP를 쓰는 것이 아닙니다.
00:06:34대신 Claude Code를 WebMCP에 연결해 주는 브릿지를 사용하여
00:06:39웹사이트를 제어하고 있는 것입니다.
00:06:40Claude Code를 더 잘 활용하고 싶으시다면, 이 도구로 우위를 점하는
00:06:4410가지 최신 방법에 대한 저희 영상을 확인해 보세요.
00:06:46이 브릿지는 커뮤니티 프로젝트이다 보니 명령형 API 사용 시
00:06:51이 MCP 서버와 도구 전환이 잘 안 되는 문제가 있습니다.
00:06:54사이트를 열었을 때 결제 페이지에서 Claude Code 세션을
00:06:58시작했습니다.
00:06:59그런데 다시 홈페이지로 돌아가라고 하자, 홈페이지에서 쓸 수 있는
00:07:03도구들을 인식하지 못했습니다.
00:07:04홈페이지에서 상품 페이지로 들어가자 '장바구니 담기' 버튼이 있었지만,
00:07:08에이전트는 해당 페이지에서 그 버튼을 보지 못했습니다.
00:07:11그래서 데모를 위해 장바구니에 품목을 수동으로 담아야 했습니다.
00:07:14하지만 결제를 완료하라고 하자, 정보를 자동으로 입력하고 주문을 넣어
00:07:18전체 쇼핑 과정을 성공적으로 마무리했습니다.
00:07:21이것이 현재 이 MCP의 한계 중 하나이며, 여기서 한 가지 짚고 넘어갈 점이 있습니다.
00:07:25WebMCP는 주요 브라우저 업체와 테크 기업들이 참여하는 오픈 소스 프로젝트입니다.
00:07:30하지만 현재 이를 지원하는 브라우저는 크롬 카나리가 유일하며,
00:07:34주력 에이전트는 브라우저에 내장된 구글의 Gemini입니다.
00:07:38여러분이 웹사이트 소유자로서 지금 WebMCP를 구현한다면,
00:07:42이를 네이티브로 활용할 수 있는 에이전트는 Gemini뿐입니다.
00:07:44Claude Code는 컨텍스트 로딩 시 오류가 나는 커뮤니티 브릿지가 필요하죠.
00:07:49구글 이외의 모든 에이전트가 불리한 위치에 있는 셈입니다.
00:07:51Claude가 따라잡을 수 있을까요? 물론입니다.
00:07:52그들에게도 자체 브라우저 확장 프로그램이 있으니까요.
00:07:55그것도 브라우저 에이전트이므로 Gemini처럼 이러한 도구들을
00:07:59충분히 찾아낼 수 있을 것입니다.
00:08:00문제는 얼마나 많은 사람이 굳이 Claude 확장 프로그램을 설치해서 쓸 것인가,
00:08:04아니면 이미 크롬에 내장된 Gemini를 그냥 쓸 것인가입니다.
00:08:08크롬 사용자는 수십억 명이며, 그들은 아무것도 설치할 필요가 없습니다.
00:08:11저희 생각에 구글이 다른 이를 차단하려는 것은 아닙니다.
00:08:13그저 자신들이 이미 보유한 아키텍처와 사용자 기반을 활용하는 것뿐이죠.
00:08:17자신들의 브라우저와 에이전트에서 가장 잘 작동하는
00:08:21오픈 표준을 내놓은 것입니다.
00:08:22그렇다고 해서 구현하지 말라는 뜻은 아닙니다.
00:08:23표준 자체는 정말 유용하며, 어떤 에이전트가 먼저 혜택을 보든
00:08:28사이트를 에이전트 친화적으로 만드는 것은 현명한 선택입니다.
00:08:30이를 구현할 때 알아두어야 할 몇 가지 사항이 있습니다.
00:08:33사양에서는 페이지당 도구 수를 50개 이하로 권장합니다.
00:08:36애플리케이션 전체를 노출하라는 뜻이 아닙니다.
00:08:38사용자가 해당 페이지에서 실제로 하고자 하는 핵심적이고
00:08:42구체적인 작업에 집중해야 합니다.
00:08:43또한 도구 설명이 생각보다 훨씬 중요합니다.
00:08:46에이전트는 그 설명을 읽고 어떤 도구를 호출할지 결정하기 때문입니다.
00:08:49설명이 모호하면 에이전트가 엉뚱한 도구를 고르거나 아예 건너뛰게 됩니다.
00:08:53사이트를 처음 보는 사람에게 설명하듯이 자세히 적으세요.
00:08:57아직은 실험적인 단계라는 점도 잊지 마세요.
00:08:58API 인터페이스는 계속 바뀔 것입니다.
00:09:003월에 출시될 크롬 146에서 더 폭넓은 지원이 시작되겠지만,
00:09:03그전까지는 개발자 테스트 단계입니다.
00:09:05아직 서비스 환경에 바로 적용하지는 마세요.
00:09:06저희 채널을 보시는 분들은 아시겠지만, AI의 발전을 따라가려면 탄탄한 기술적 기초가 필수입니다.
00:09:11그렇기에 저는 Brilliant를 강력 추천합니다.
00:09:13MIT, 하버드, 스탠포드의 우수한 교수진이 만든
00:09:17실습 위주의 인터랙티브 학습 플랫폼입니다.
00:09:19특히 군집화와 분류, 그리고 AI의 작동 원리 코스를 꼭 들어보시길 바랍니다.
00:09:23숨겨진 패턴을 찾아내고 거대 언어 모델의 논리를
00:09:27대화형 방식으로 이해할 수 있게 도와줍니다.
00:09:28화면의 카탈로그에서 보시다시피 기초 수학부터
00:09:33심화 데이터 과학, 컴퓨터 공학까지 방대한 강의를 제공합니다.
00:09:37또한 Brilliant에서 저희 시청자분들께 연간 프리미엄 구독료 20% 할인 혜택을 드려
00:09:42플랫폼의 모든 콘텐츠를 무제한으로 이용하실 수 있게 해드립니다.
00:09:4430일간 무료로 체험하시려면 brilliant.org/ailabs를 방문하시거나
00:09:50화면의 QR 코드를 스캔, 또는 설명란의 링크를 클릭해 주세요.
00:09:53오늘부터 Brilliant와 함께 학습 습관을 기르고
00:09:56여러분의 실력을 한 단계 더 높여보세요.
00:09:57오늘 준비한 영상은 여기까지입니다.
00:09:59채널을 후원하고 이러한 영상 제작을 지원하고 싶으시다면
00:10:03아래의 'Super Thanks' 버튼을 이용해 주세요.
00:10:06항상 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.