Chrome의 AI
웹에서 AI 기반 기능 빌드
기본 제공 AI
브라우저에는 AI가 내장되어 있어 파운데이션 모델과 전문가 모델을 제공하고 관리합니다.
기본 제공 AI
웹사이트와 웹 애플리케이션이 브라우저 관리 AI 모델과 API를 사용하여 AI 작업을 실행하는 방법을 알아보세요.
시작하기
내장된 AI로 기능과 애플리케이션을 빌드하기 위한 요구사항을 알아봅니다.
사용 가능한 API
Chrome의 내장 AI와 함께 사용할 API와 사용 가능 상태를 검토합니다.
과정
AI 평가 만들기
평가 (또는 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를 위해 Wasm 최적화
AI 추론에 일반적으로 사용되는 작업을 위한 WebAssembly 개선사항에 대해 알아봅니다.
WebGPU API
Chrome에서 WebGPU를 살펴보고 GPU의 일반 계산에 대한 최고급 지원을 받으세요.
WebNN API
WebNN API를 사용하여 브라우저에서 머신러닝 작업을 실행합니다.
과정
AI 알아보기
회사 지침에 따른 것이든 열정에서 비롯된 것이든 AI를 위한 AI는 유용하지 않습니다. 가장 좋은 기능은 사용자 요구에서 비롯되며 제공하는 가치로 측정됩니다.
이 과정에서는 책임감 있고, 유용하며, 가치 있는 AI 시스템으로 웹 애플리케이션을 빌드하는 방법을 알아봅니다. 이를 통해 애플리케이션이 기술의 약속을 이행할 수 있습니다.
AI 브라우저 도구
DevTools AI 지원
DevTools에서 Gemini와 채팅하세요. 이 패널에서 시작하는 대화에는 검사 중인 페이지의 기술적 세부정보에 관한 컨텍스트가 포함됩니다.
스타일 지정을 위한 AI 지원
AI 지원 패널을 사용하여 웹사이트의 전체 레이아웃, 특정 요소 스타일을 이해하고 AI 생성 CSS 버그 수정을 확인하세요.
AI 어시스턴스 사용
레이아웃 이해부터 비행기 수정까지, 더 쉽게 페이지 스타일을 지정할 수 있는 5가지 방법을 확인해 보세요.
DevTools의 콘솔 통계
콘솔을 사용하여 온디바이스 AI의 결과를 보고 디버그하세요.
AI 및 Gemini Nano 뉴스
I/O에서 선보인 웹 AI
Chrome의 기본 제공 AI API를 사용하여 Gemini Nano의 성능을 활용하세요.
Chrome의 Gemini Nano를 통한 실용적인 기본 제공 AI
Chrome에 제공되는 내장 AI API를 사용하여 웹 앱이 사용자를 위해 콘텐츠를 번역, 요약, 작성, 재작성할 수 있도록 하는 방법을 알아보세요. 하이브리드 워크로드를 빌드하는 방법을 알아보고 브라우저에 내장된 AI의 미래를 살펴봅니다.
Gemini를 사용하는 Chrome 확장 프로그램
클라이언트 측 및 클라우드 AI를 빌드하여 내 필요와 고객의 필요에 맞게 웹과 브라우저를 최적화할 수 있습니다.
실제 웹 AI 사용 사례 및 전략
MediaPipe, LiteRT, Transformers.js와 같은 라이브러리와 WebAssembly, WebGPU와 같은 최신 웹 API를 사용하면 놀라운 AI 기반 환경을 빌드할 수 있습니다.
웹 AI 소개
클라이언트 측 AI 개선
낮은 지연 시간, 감소된 서버 측 비용, 향상된 사용자 개인 정보 보호 등의 이점을 제공하는 클라이언트 측 AI를 사용하는 기법을 알아보세요.