[Youtube] Client side Web AI agents to build smarter future user experiences

출처 : Chrome for Developer

notebookLM을 이용해 작성되었습니다.

핵심 요약

본 브리핑은 클라이언트 측 웹 브라우저 내에서 기계 학습 모델을 실행하는 Web AI의 개념과, 이를 통해 구현되는 에이전트적 행동(agentic behaviors)이 미래 웹 애플리케이션 사용자 경험을 어떻게 혁신할 수 있는지에 초점을 맞춥니다.

특히 웹 AI 에이전트가 자율적으로 복잡한 작업을 수행하고, 기존 웹사이트 기능과 상호작용하며, 개인 정보 보호와 비용 절감에 기여할 수 있음을 강조합니다. 이 기술은 스마트폰 등장에 따른 모바일 우선 시대로의 변화와 유사하게 웹의 새로운 시대를 열 것으로 예측됩니다.

Web AI의 정의 및 이점

Web AI는 웹 브라우저 내에서 기계 학습 모델을 클라이언트 측에서 실행하는 기술입니다.
사용자의 기기(CPU, GPU, NPU)에서 모델이 실행되므로 개인 정보 보호 강화와 클라우드 추론 비용 절감이라는 장점이 있습니다.

"Web AI is the art of using machine learning models client side in a web browser, running on your own device's processor, graphics card, or even NPU using JavaScript and surrounding web technologies like WebAssembly, WebGPU, or emerging standards like WebNN for acceleration."

에이전트(Agent) 개념

에이전트는 사용자를 대신하여 복잡한 작업을 자율적으로 수행하는 시스템입니다.
작업을 구조화된 하위 단계로 분해하고 사용자 개입 없이 이를 완료할 수 있습니다.
"At its essence, an agent is a system that can perform advanced tasks autonomously on behalf of the user by breaking them down into structured steps that it can then complete without user intervention."

에이전트의 구성 요소

에이전트 시스템은 일반적으로 다음 요소로 구성됩니다.
- 하나 이상의 언어 모델(LLMs) 또는 멀티모달 모델: 에이전트의 내부 사고 및 논리를 구동합니다.
- 메모리(Memory) 구현: 이전 대화나 작업의 맥락을 기억합니다.
- 하나 이상의 도구(Tools): 외부 세계와 상호작용하거나 추가 정보를 얻거나 행동을 수행하는 데 사용됩니다. 도구의 예로는 함수 호출, API 사용, 벡터 데이터 저장소 검색 등이 있습니다.
에이전트 런타임 또는 오케스트레이션 레이어: 외부 입력 처리, 내부 추론 루프 관리, 도구 호출 조정 등을 담당합니다.
"So bringing this all together, an agentic system is typically comprised of one or more large language models, a memory implementation, and one or more tools it can choose to call."
"Tools allow the language model to bridge the gap between itself and the outside world."

도구의 중요성

언어 모델은 방대한 지식을 가지고 있지만 최신 정보나 외부 행동을 수행하는 데 한계가 있습니다 (예: 실시간 날씨 정보).
도구를 통해 언어 모델은 이러한 한계를 극복하고 외부 데이터와 서비스에 접근할 수 있습니다.
예시: 날씨 정보를 얻기 위해 날씨 API를 호출하는 도구를 언어 모델에 제공할 수 있습니다.

Web AI 에이전트 프로토타입 시연 (가상 항공편 검색 페이지)

Google의 20억 매개변수 Gemma 2 모델을 브라우저 내에서 로컬로 실행하여 시연했습니다. (MediaPipe Web LLM 라이브러리 사용)
기존 웹사이트의 기능(예: 항공편 검색)을 도구로 노출하여 에이전트가 이를 활용하여 사용자의 자연어 요청을 처리하는 과정을 보여주었습니다.
사용자의 불완전한 요청에 대해 추가 질문을 하고, 제공된 정보를 바탕으로 검색 매개변수를 동적으로 조정하며 (예: 승객 수, 목적지, 날짜, 좌석 등급 변경), 최종적으로 검색 도구를 호출하여 결과를 제시하는 모습을 보여주었습니다.
"I'll be using Google's 2 billion parameter Gemma 2 model, entirely locally in the browser, powered by our MediaPipe Web LLM library, to show you how you can upgrade your existing site with agentic workflows by reusing your existing code exposed as tools that the agent can then use in a low friction manner."
시연 과정에서 어떤 데이터도 클라우드로 전송되지 않았습니다. (실제 검색은 클라우드 API를 호출할 수 있음)

Web AI 에이전트 구현 아키텍처

기존 웹 애플리케이션 비즈니스 로직(녹색)에 에이전트 오케스트레이션 로직(노란색)을 연결하는 방식입니다.
페이지 로드 시 Web LLM 라이브러리를 사용하여 언어 모델을 로컬에 다운로드합니다.
기존 비즈니스 로직 내의 함수들을 JSDoc 주석 등을 활용하여 도구로 등록합니다.
사용자 음성 입력 (또는 텍스트)은 에이전트 컨트롤러로 전달되고, 로드된 LLM은 에이전트 페르소나, 사용 가능한 도구, 사용자 입력을 활용하여 처리합니다.
LLM은 구조화된 JSON 형식으로 응답을 생성하고, 오케스트레이션 로직은 이를 해석하여 추가 질문을 하거나 도구를 호출하는 등의 다음 단계를 수행합니다.
충분한 정보가 확보되면 에이전트는 등록된 도구(예: 검색 도구)를 호출하여 작업을 완료하고, 결과는 기존 웹 앱의 UI를 통해 사용자에게 표시됩니다.
에이전트는 이전 대화의 메모리를 유지하여 후속 요청에서 더 효율적으로 응답할 수 있습니다.

Web AI 에이전트의 장점 및 미래 전망

보다 자연스러운 사용자 경험: 사용자는 웹사이트별 고유한 UI를 학습할 필요 없이 자연어로 상호작용할 수 있습니다.
접근성 향상: 음성 인터페이스 등을 통해 시각 장애인 등에게도 웹사이트 사용이 더 용이해집니다.
비용 절감: 로컬 실행을 통해 클라우드 추론 비용을 줄일 수 있습니다. 모델 다운로드 비용은 일회성입니다.
개인 정보 보호 강화: 사용자 데이터가 클라우드로 전송되지 않고 로컬에서 처리됩니다.
하이브리드 접근 방식의 가능성: 로컬 Web AI 모델과 클라우드 AI(예: 전문 지식 벡터 데이터베이스)를 결합하여 더욱 강력한 기능을 구현할 수 있습니다.
하드웨어 발전과 함께 더욱 강력한 모델이 브라우저에서 실행 가능해질 것입니다. (20억 ~ 90억 매개변수 모델)
미래의 웹사이트는 AI 에이전트 호환이 필수적이 될 것이며, 그렇지 않은 사이트는 경쟁력을 잃을 수 있습니다. 이는 과거 모바일 우선 시대의 도래와 유사합니다.
웹사이트가 제공하는 도구에 대한 정보를 에이전트가 이해할 수 있도록 공개 파일을 제공하는 표준이 생길 수도 있습니다.
브라우저는 사용자가 이미 다양한 서비스에 로그인되어 있어 여러 서비스의 도구를 한곳에서 활용하기에 이상적인 환경입니다.

개발자를 위한 조언

지금부터 Web AI 에이전트를 탐구해야 합니다.
기존 웹 애플리케이션 코드를 재사용하여 도구로 노출하는 방법을 고려해야 합니다.
새로운 시대의 시작에 참여하여 자신의 산업 미래를 주도할 기회입니다.