구글에서 크롬을 위한 WebMCP라는 개념을 발표했습니다.00:00

정말 흥미로운 내용입니다. 그리고 이것이 정확히 무엇이고 왜 멋있는지 빠르게 설명드리고 싶습니다.00:03

그리고 오늘 바로 사용해 볼 수 있는 방법도 알려드릴게요.00:08

WebMCP의 핵심은 에이전트가 결정적인 방식으로 작동할 수 있도록 이 문제를 해결하는 것입니다.00:10

모든 웹사이트에서 찾아볼 수 있습니다.00:17

예를 들어, 고객님께서 전자상거래 웹사이트를 운영하고 계시다면, 어떤 에이전트든 고객님의 웹사이트를 사용하도록 하고 싶다는 목표를 가지고 계실 것입니다.00:19

향후 수백만 개의 다양한 에이전트들이 웹을 운영하며, 인간을 대신하여 실제 행동을 취할 것으로 예상됩니다.00:26

그리고 그것을 달성하기 위해, 오늘, 웹엠씨피 없이.00:32

선택하실 수 있는 방법은 두 가지입니다. 하나는 직접 MCP 서버를 구축하시고 에이전트가 잘 작동할 것이라고 기대하시는 것입니다.00:35

이 MCP를 갖추게 될 가능성은 낮을 것 같습니다. 왜냐하면 고객님의 웹사이트가 그러한 기능을 제공하지 않을 것 같기 때문입니다.00:41

모든 에이전트가 매일 사용하는 것과 같습니다. 그리고 에이전트에 MCP를 계속 로드하는 것은 효과를 나타내지 않았습니다.00:46

이해했습니다. 따라서 이 방법은 일반적인 웹사이트에서는 잘 작동하지 않았습니다.00:51

또 다른 선택지는 그것이 있다는 것입니다.00:55

에이전트가 브라우저 사용 능력이 매우 뛰어나고, 점점 더 많은 에이전트가 이러한 기능을 갖추고 있습니다.00:57

그런 기능들을 활용해서, 예를 들어 위협적인 상황에서 브라우저를 열고 특정 작업을 수행할 수 있다는 점은 좋지만, 문제는...01:02

브라우저 사용 능력과 관련해서 말씀드리자면, 일반적으로 비결정적인 경향이 있습니다. 브라우저를 사용하시는 경우, 이러한 점을 고려해 주시면 감사하겠습니다.01:07

에이전트가 엄청나게 큰 raw HTML을 추출하고, 정리해서 더 큰 모델에 넣어주고 있습니다.01:13

그리고 때로는 UI 요소에 주석이 달린 스크린샷을 찍어서 사용하기도 합니다.01:18

화면은 기본적으로 이 번역 레이어를 통해 HTML이나 스크린샷을 보고 해석하려고 시도합니다.01:23

에이전트가 어떤 핵심 작업을 수행해야 하는지 파악하는 것이죠. 그리고 대부분의 웹사이트가 잘 만들어지지 않았다는 것을 우리는 알고 있습니다.01:28

사람이 소비하도록 설계된 것인데, 에이전트보다는 사람이 소비하기 쉽도록 되어 있어서 엄청난 노이즈가 많아요.01:34

그 노이즈가 큰 언어 모델로 전달되면, 비결정적인 행동으로 이어질 수 있습니다.01:39

이러한 경우, 사용자가 귀사 웹사이트를 통해 작업을 완료하는 데 어려움을 겪을 가능성이 높으며, 이는 경쟁 시대에 불리하게 작용할 수 있습니다.01:45

인공지능 에이전트가 웹 콘텐츠나 다양한 작업의 주요 소비자가 될 것으로 예상됩니다.01:50

웹사이트에서 담당자가 작업을 완료하기가 더 쉬울수록, 담당자는 더 자주 작업을 수행할 것이고, 더 많은 사람들이 이를 채택할 가능성이 높습니다.01:53

그래서 이 웹 MCP 개념이 상당히 흥미롭다고 생각합니다.02:01

그래서 작동 방식은, 여전히 MCP를 구축하지만, 코드나 HTML에서 선언하게 됩니다.02:04

그래서 브라우저를 운영하는 에이전트는 번역 레이어를 직접 구축할 필요는 없습니다.02:09

대신, 그분들은 각 페이지에 등록하시는 작업과 MCP 도구에만 시선을 두시는 것 같습니다.02:13

이커머스 예시에서처럼, 홈페이지의 경우 상품 검색, 카테고리 가져오기, 필터 적용과 같은 액션을 등록할 수 있습니다.02:19

제품 상세 페이지에서는 상품을 장바구니에 추가하거나 유사한 상품을 찾는 등의 기능을 제공할 수 있습니다.02:25

에이전트는 일반적인 MCP 도구들을 호출하는 것처럼, 그러한 작업을 실행할 수 있습니다.02:32

하지만, 이 MCP 도구들은 특정 페이지에 접속하는 순간 로드됩니다.02:36

그래서 여전히 정말 확실한 동작의 이점을 얻을 수 있습니다.02:41

요원이 할 수 있는 일에 대해 말씀드리겠습니다. 그리고 그 내용을 간단히 설명드리자면, 작동 방식은 다음과 같습니다.02:45

웹엠씨에서 두 가지 방법을 제시했습니다. 하나는 선언적인 방식으로, 특정 HTML 속성을 추가할 수 있습니다.02:50

간단한 예시를 들어보겠습니다. Chrome 팀에서 준비한 기본적인 예약 페이지 예시입니다.02:57

간단한 HTML입니다. 이 HTML에서는 form과 같은 요소에 도구 이름이나 도구 설명과 같은 속성을 추가할 수 있습니다.03:04

에이전트가 사용자 정의할 수 있는 각 입력에 대해 이 도구 매개변수 설명을 추가하실 수도 있습니다.03:11

최신 크롬 버전으로 해당 속성을 설정하시면, 그 이후에는...03:17

에이전트가 페이지를 방문하면 이 북 테이블 툴과 설명을 그리고 입력 스키마를 보게 될 거예요.03:21

그것은 여러분이 추가한 속성에서 자동으로 변환된 형태가 될 거예요. 그래서 지원하는 에이전트라면 어떤 에이전트든 상관없이요.03:27

웹엠씨피 형식은 이엠씨피 도구가 자동으로 장착되어, 에이전트가 호출할 수 있습니다. 제가 이 요청을 보내면,03:32

에이전트가 자동으로 폼에 내용을 채워 넣고, 에이전트가 호출하면03:37

MCP 도구를 사용하시면 웹사이트에서 이러한 특수한 UI 요소들이 나타나는 것을 확인하실 수 있습니다.03:43

플로팅 툴팁을 검토하고 확인해 주십시오. 이것은 웹 MCP 업그레이드의 일부이기도 합니다.03:49

에이전트가 특정 폼 요소를 채울 때 활성화될 특수한 CSS 클래스들을 지원합니다.03:54

폼을 제출하기 전에, 또는 제출 직전에 이렇게 간단하게 정적 웹사이트를 만들 수 있습니다.03:59

에이전트 준비는 되었지만, 실제 시스템을 구축하신다면 좀 더 가능성이 높은 접근 방식을 취하실 가능성이 높습니다.04:05

애플리케이션에서 중요한 기능은 JavaScript나 MCP에 특정 도구를 등록할 수 있도록 해주는 방식입니다.04:08

특정 React 컴포넌트가 렌더링될 때, 주로 최신 버전의 Chrome 브라우저와 관련이 있습니다.04:14

내비게이터의 register 도구와 unregister 도구를 사용하여 mcps를 로드할 수 있습니다.04:19

또 다른 예시로, 크롬 데모에서 보여주는 것과 같습니다. 만약 항공권 예약 React 앱을 가지고 계시다면, 이와 같은 방식으로 적용해 보실 수 있습니다.04:26

사용자가 이 검색 페이지에 있을 때, 항공편 검색을 위한 노출된 MCP 도구가 있을 수 있습니다. 제가 보내면...04:31

여기 요청 사항이 있는데, 에드리아님이 양식을 작성하시고 조치를 취하시면 저를 연결해주실 수 있을까요?04:37

검색 결과 페이지입니다. 정말 멋있는 점은 바로 여기에서 노출된 MCP 도구를 확인할 수 있다는 것입니다.04:43

페이지를 이동하는 동안 변경되었습니다. 이 검색 결과 페이지에는 설정과 같은 다양한 도구가 무작위로 있습니다.04:48

필터, 항공편 검색, 필터 재설정, 그리고 항공편 목록을 표시합니다.04:54

웹 MCP를 사용해 본 것 중에 이게 제일 멋진 부분인 것 같아요.04:57

각 웹 페이지마다 노출된 MCP 도구의 특별한 목록을 가지고 있다고 생각하시면 됩니다.05:01

상황에 맞게 로드됩니다. 기본적으로 이 새로운 navigator.register와 .unregister 기능을 사용하고, 나머지는 MCP2를 구축하는 방식과 동일합니다. 툴 스키마를 정의하게 됩니다.05:06

나머지는 MCP2를 구축하는 방식과 동일합니다. 툴 스키마를 정의하게 됩니다.05:12

이름, 설명, 입력 스키마, 출력 스키마, 그리고 각 컴포넌트에 대한 함수를 사용할 수 있습니다.05:17

등록 및 해제 도구를 준비하여 관련 UI 구성 요소가 표시될 때마다 MCP 도구가 나타나도록 하겠습니다.05:24

웹 MCP 도구는 그렇게 로드해 주고, 설정하는 방법이 두 가지 있습니다. 이 부분이 웹 MCP 도구의 작동 방식입니다.05:30

설정하는 방법을 좀 더 자세히 설명해 드릴게요. 개발자들이 빠르게 설정할 수 있도록 도와주는 개발 도구도 있습니다. 하지만 다음 내용으로 넘어가기 전에...05:35

제가 보기엔 가장 흥미로운 부분이 바로 이 WebMCP 개념인 것 같아요.05:42

방금 맥컨텍스트(MCP) 방법론을 소개했는데, 제가 생각하기에 정말 훌륭하다고 생각합니다. 왜냐하면 저희가 변화 과정을 살펴보니, 처음에는 이런 맥컨텍스트(MCP) 방식이 있었거든요.05:45

컨셉이 정말 좋다고 생각해요. 에이전트가 기능을 확장할 수 있도록 해 주거든요.05:52

그리고 에이전트가 툴을 실행할 때, 툴을 실행하는 데 필요한 올바른 스키마가 전달된다는 보장도 있어요.05:56

문제는 아무리 관련이 있든 없든 너무 많은 맥락을 필요로 한다는 점입니다.06:01

그래서 장기적인 시나리오에는 좋은 해결책이 아니라고 생각합니다. 그리고 최근에는 많은 분들이 기술 기반 개념으로 이동하는 추세입니다.06:05

기술 개념의 장점은 토큰을 너무 많이 사용하지 않는다는 것입니다. 제목과 설명을 로드하는 것만으로 충분합니다.06:11

이 텍스트는 이 도구를 어떻게 사용하는지, 또는 어떤 기술을 어떻게 활용하는지에 대한 실제 정보가 담긴 내용입니다.06:17

필요할 때 문맥 정보를 로드하기 때문에, 에이전트 기능을 확장하는 데 훨씬 더 편리합니다.06:22

장기적인 활용 사례에 대한 가능성은 있지만, 이러한 종류의 기능은 아직 갖추고 있지 않습니다.06:27

요청하신 엄격한 스키마 보장 기능은 에이전트가 텍스트 프롬프트를 받은 직후에 웹엠씨피 도구를 통해 제공됩니다.06:32

상황에 따라 다르게 적용될 수 있는 아주 흥미로운 패턴을 만들었습니다. 저희의 경우에 말이죠.06:38

웹 페이지 에이전트가 있는 상황에 따라, 다양한 MCP 도구가 로드될 거예요.06:43

그리고 저는 이것이 확실히 미래라고 생각해요. 이상적으로는 항상 이러한 맥락 기반 MCP 설정을 추구해야 한다고 생각해요.06:46

에이전트가 수행하는 작업에 따라 관련 MCP 도구가 로드됩니다.06:52

그 기반으로 어떤 새로운 시스템이 발전해 나갈지 정말 기대됩니다.06:56

웹 MCP 자체에서 너무 멀리 벗어나지 않고, 직접 어떻게 할 수 있는지 보여드리겠습니다.06:59

이 웹 MCP를 사용하려면 최신 버전의 크롬 브라우저가 필요합니다. 접근하기 위해서는 이 크롬 베타 버전을 설치해 주셔야 합니다.07:04

설치하신 후에는 크롬 플렉스로 이동하셔서 웹 MCP를 검색하신 후 활성화만 해주시면 됩니다.07:11

웹 MCP 플래그를 확인하신 후, 모델 컨텍스트라고 하는 크롬 확장 프로그램을 설치해 주시면 됩니다.07:17

크롬 확장 프로그램에서 직접 다운로드하실 수 있는 도구 검사기입니다.07:22

웹 MCP 도구 프로토콜과, 귀하의 환경에서 웹 MCP를 상세하게 구현하는 방법에 대해 문의드립니다.07:27

애플리케이션에 대한 자세한 단계별 튜토리얼을 AI 빌더 클럽에 게시했습니다.07:31

단계별로 차근차근 따라 하시면 되고, 다른 유용한 팁들도 많이 준비되어 있습니다.07:36

에이전트 기술과 클라우드 코드 훅에 대해 말씀드리고, 매주 진행되는 워크숍에서 더 자세히 알아보는 시간을 갖겠습니다.07:40

최신 기술을 좀 더 자세히 다루기 전에, MCP를 설정하는 두 가지 방법에 대한 간략한 설명을 드리겠습니다.07:45

우선 선언적 메서드를 사용해 보겠습니다. 예를 들어, 제가 페이지라는 컨텍스트를 가지고 있다고 가정해 보겠습니다.07:49

현재 웹 MCP 도구를 열었을 때, 해당 웹페이지에 등록된 도구가 없습니다.07:54

그리고 웹 MCP를 이용해서 이 폼을 에이전트가 사용할 수 있도록 어떻게 만들 수 있는지 보여드리겠습니다. 그래서 이 페이지는 단 하나의 HTML로, 이렇게 생겼습니다.08:00

가장 먼저 하고 싶은 일은 이 폼 요소에 도구 이름과 도구 설명 속성을 추가하는 것입니다.08:07

그러면 WebMCP가 이 도구를 자동으로 인식할 수 있을 것입니다.08:13

그런 다음, 에이전트가 채워야 할 모든 입력 항목에 대한 도구 매개변수 설명을 추가하겠습니다.08:16

입력하신 내용과 같이, 이름, 이메일, 제목, 요소, 텍스트 영역 등의 도구 파라미터 설명을 추가할 예정입니다.08:21

이렇게 해두고 페이지로 돌아가서 새로 고침을 하면, 이 WebMCP 도구가 인식된 것을 확인할 수 있습니다.08:27

에이전트, 이 페이지가 열리면 지금 에이전트를 실행하면 양식을 자동으로 채울 수 있습니다.08:33

전환을 완전히 완료하려면, 적절한 두 개의 응답이 에이전트로 다시 반환되도록 확실히 해야 합니다.08:39

그래서 담당자가 실제로 양식이 제대로 제출되었는지 알 수 있습니다. 양식 제출 동작에 대한 이벤트 리스너를 맞춤 설정할 수 있습니다.08:44

만약 폼 유효성 검사에 실패하고, 이 에이전트의 evokedEvents와 함께 온다면...08:50

이를 통해 에이전트가 이러한 동작들을 실행하고 있는지 확인할 수 있습니다.08:55

네, 가능하다면 에러 메시지를 에이전트에게 다시 보내드릴 수 있으며, 정확한 결과값을 함께 반환할 수 있습니다.08:59

알겠습니다. 다시 페이지로 돌아가서 에이전트가 양식을 작성한 후, '요청 보내기'를 클릭하겠습니다.09:04

여기서 AI가 이 도구를 호출하고, 도구 응답과 결과가 반환되는 새 로그를 확인할 수 있습니다.09:11

그래서 에이전트가 다음에 무엇을 해야 할지 결정할 수 있습니다. 마지막으로, 도구 폼에 대한 특별한 클래스를 정의하여 더 추가적으로 사용자 정의할 수도 있습니다.09:17

활성 상태이고 도구 제출도 활성 상태입니다.09:23

에이전트가 양식을 작성하고 사람이 검토할 준비가 되면 특별한 스타일을 제어할 수 있도록 할 수 있습니다.09:25

보내신 후, 잠시 후 특별한 UI가 나타나면서 사람이 기다리는 것을 확인할 수 있습니다.09:31

확인해 보시기 바랍니다. 이렇게 하면 선언 방식으로 WebMCP를 설정할 수 있습니다.09:36

하지만 앞서 말씀드린 것처럼, 가장 일반적인 방법은 아마도 이 명령형 정의일 것입니다.09:40

자, 그럼 다음으로 React나 Next.js 프로젝트에서 WebMCP를 설정하는 방법을 예시를 통해 살펴보겠습니다.09:44

여기 칸반 보드를 가지고 있습니다.09:49

기능적으로 잘 작동하는 앱을 만들었다고 가정하고, 여기에 웹 MCP 지원을 추가하고 싶다고 말씀드리겠습니다.09:51

여기서부터 웹 앱에 대한 툴 등록이 없는 것을 볼 수 있습니다. navigator.register 툴과 navigator.unregister 툴을 사용하여 리액트 컴포넌트에 MCP 툴을 바인딩할 수 있습니다. 먼저, 만들고 싶습니다.09:56

만들고 싶습니다.10:02

웹 MCP 파일들을 모두 담기 위해 webmcp.ts 파일을 추가했습니다. 이 파일에서 레지스터를 선언하겠습니다.10:07

도구 등록 해제하고, 이 패치와 대기 기능도 요청 ID 생성을 위해 클라이언트 쪽에서 필요하겠습니다.10:14

그 사건들을 경청하고 추적해 보겠습니다. 그런 다음 다양한 실제 MCP 도구를 정의하기 시작할 것입니다.10:19

열을 나열하고, 카드 추가, 카드 이동, 카드 삭제, 열 삭제 기능을 제공합니다.10:24

각 함수는 MCP 도구 스키마 아래에 포함되도록 처리합니다.10:29

그런 다음, 이 웹 MCP 도구들을 실제 UI 컴포넌트에 연결하면 거의 다 된 것 같습니다.10:32

페이지를 새로 고침하면, 이 웹 앱을 열었을 때 웹 MCP 도구들이 이렇게 바로 나타나는 것을 보실 수 있습니다.10:38

그럼 기존에 있는 모든 작업을 삭제할 수 있습니다. 그리고, 진행해 보도록 하겠습니다.10:44

음, 세 명을 위한 저녁 식사 준비를 위한 모든 작업을 계획해 주세요. 각 열은 작업 범주별로.10:46

그리고 실시간으로 다양한 열이 생성되기 시작하는 것을 볼 수 있습니다.10:51

그리고 각 작업 범주에 대해 작업을 자율적으로 추가하기 시작합니다.10:55

이제 제가 만들고 있는 웹 앱과 관련된 모든 일반 에이전트가 갑자기 매우 능숙해집니다.10:59

그리고 아무런 화살도 맞지 않을 것 같습니다.11:05

모든 작업은 MCP 도구를 통해 결정적인 방식으로 진행됩니다.11:08

관심 있으시면, AI 빌더 클럽 강좌에서 단계별 튜토리얼을 찾아보실 수 있습니다. 웹 MCP에서 확인하실 수 있습니다.11:12

네, 웹엠씨피 소개는 여기까지입니다. 영상 즐겁게 보셨기를 바랍니다. 감사합니다, 다음번에 또 만나요.11:18