웹에서 AI 기반 기능 빌드

기본 제공 AI

브라우저에는 AI가 내장되어 있어 파운데이션 모델과 전문가 모델을 제공하고 관리합니다.
웹사이트와 웹 애플리케이션이 브라우저 관리 AI 모델과 API를 사용하여 AI 작업을 실행하는 방법을 알아보세요.
내장된 AI로 기능과 애플리케이션을 빌드하기 위한 요구사항을 알아봅니다.
Chrome의 내장 AI와 함께 사용할 API와 사용 가능 상태를 검토합니다.
과정

평가 (또는 evals)는 AI 기능에 대한 테스트입니다. 견고한 평가 파이프라인을 만들면 LLM 기반 기능이 사용자에게 잘 작동합니다. 그러면 확신을 가지고 기능을 출시할 수 있습니다.

WebMCP를 사용한 안정적인 에이전트 호출

WebMCP는 AI 에이전트가 사이트에서 속도, 안정성, 정확성을 높여 작업을 실행할 수 있도록 구조화된 도구를 노출하는 표준 방법을 제공하는 것을 목표로 합니다.
1단계

사이트는 에이전트가 WebMCP 도구로 취할 수 있는 작업을 선언합니다. 각 도구에는 이름, 설명, JSON 스키마가 있습니다.

// Imperative API
document.modelContext.registerTool({
  name: "bookSlot",
  title: "Book a consultation slot",
  description: "Reserve a 30-minute consultation.",
  inputSchema: {
    type: "object",
    properties: {
      date:  { type: "string", format: "date" },
      time:  { type: "string" },
      name:  { type: "string" },
      email: { type: "string", format: "email" }
    },
    required: ["date", "time", "name", "email"]
  },
  annotations: { readOnlyHint: false },
  execute: async (input, client) => {
    return await api.book(input);
  }
});
2단계

브라우저는 페이지의 URL, 제목, 출처 권한 범위와 함께 이러한 도구를 사용자의 WebMCP 인식 에이전트에 수집하여 표시합니다.

사이트가 브라우저에 말하면 브라우저가 에이전트를 위해 번역합니다.
3단계

에이전트가 계약을 확인하고 구조화된 인수를 제공하면 코드가 나머지 작업을 실행합니다. 사용자는 권한 및 확인을 위해 계속 참여합니다. 추측은 이제 그만

// the agent's view
{
  "tool": "bookSlot",
  "arguments": {
    "date": "2026-07-31",
    "time": "14:00",
    "name": "Jerry Jones",
    "email": "jerry.jones@example.com"
  }
}

웹에서 AI 가속화

Wasm, WebGPU, WebNN으로 컴퓨팅 및 모델 성능을 개선합니다.

AI 추론에 일반적으로 사용되는 작업을 위한 WebAssembly 개선사항에 대해 알아봅니다.

Chrome에서 WebGPU를 살펴보고 GPU의 일반 계산에 대한 최고급 지원을 받으세요.

WebNN API를 사용하여 브라우저에서 머신러닝 작업을 실행합니다.

과정

회사 지침에 따른 것이든 열정에서 비롯된 것이든 AI를 위한 AI는 유용하지 않습니다. 가장 좋은 기능은 사용자 요구에서 비롯되며 제공하는 가치로 측정됩니다.

이 과정에서는 책임감 있고, 유용하며, 가치 있는 AI 시스템으로 웹 애플리케이션을 빌드하는 방법을 알아봅니다. 이를 통해 애플리케이션이 기술의 약속을 이행할 수 있습니다.

AI 브라우저 도구

DevTools에서 Gemini와 채팅하세요. 이 패널에서 시작하는 대화에는 검사 중인 페이지의 기술적 세부정보에 관한 컨텍스트가 포함됩니다.
AI 지원 패널을 사용하여 웹사이트의 전체 레이아웃, 특정 요소 스타일을 이해하고 AI 생성 CSS 버그 수정을 확인하세요.
레이아웃 이해부터 비행기 수정까지, 더 쉽게 페이지 스타일을 지정할 수 있는 5가지 방법을 확인해 보세요.
콘솔을 사용하여 온디바이스 AI의 결과를 보고 디버그하세요.

AI 및 Gemini Nano 뉴스

Chrome의 기본 제공 AI API를 사용하여 Gemini Nano의 성능을 활용하세요.
Chrome에 제공되는 내장 AI API를 사용하여 웹 앱이 사용자를 위해 콘텐츠를 번역, 요약, 작성, 재작성할 수 있도록 하는 방법을 알아보세요. 하이브리드 워크로드를 빌드하는 방법을 알아보고 브라우저에 내장된 AI의 미래를 살펴봅니다.
클라이언트 측 및 클라우드 AI를 빌드하여 내 필요와 고객의 필요에 맞게 웹과 브라우저를 최적화할 수 있습니다.
MediaPipe, LiteRT, Transformers.js와 같은 라이브러리와 WebAssembly, WebGPU와 같은 최신 웹 API를 사용하면 놀라운 AI 기반 환경을 빌드할 수 있습니다.

웹 AI 소개

AI라고도 하는 다양한 신기술의 기본사항과 정의를 이해합니다.
웹 실무자로서 우리는 새로운 기술을 신중하고 책임감 있게 구축하는 것이 중요합니다.
낮은 지연 시간, 감소된 서버 측 비용, 향상된 사용자 개인 정보 보호 등의 이점을 제공하는 클라이언트 측 AI를 사용하는 기법을 알아보세요.