게시일: 2026년 5월 26일
이 게시물은 토마스 슈타이너가 Google I/O 2026에서 발표한 강연의 요약입니다.
블로그 게시물 편집기가 텍스트를 저장할 뿐만 아니라 글을 쓸 때 적극적으로 지원하는 여행 블로그를 만든다고 가정해 보겠습니다. trAIlblazers의 크리에이터인 마야와 아쇽을 만나보세요. Chrome의 내장 AI를 사용합니다. 개발자는 사용자 기기에서 직접 모델을 실행하여 민감한 정보를 로컬에 보관하면서도 비용이 많이 드는 클라우드 비용과 지연 시간을 우회할 수 있습니다.
Google은 Build Awesome (이전 명칭: Eleventy)과 협력하여 강연에 나열된 모든 AI 기능이 포함된 블로그 템플릿을 출시했습니다.
기본 제공 AI가 중요한 이유
- 비용 효율성: 클라우드 추론 비용이 없으며 모든 계산이 사용자의 지원 기기에서 이루어집니다.
- 개인 정보 보호 우선: 민감한 정보가 브라우저를 벗어나지 않습니다.
- 오프라인 기능: 모델이 다운로드되면 인터넷 연결 없이 AI 기능이 작동합니다.
- 성능: 하드웨어 가속을 통해 온디바이스 모델이 클라우드 속도에 필적 (때로는 능가)할 수 있습니다.
- 하이브리드 추론: 폴리필 및 Firebase AI Logic과 같은 도구를 사용하여 지원되지 않는 기기 (예: 모바일)에서는 클라우드로 대체하고 데스크톱에서는 네이티브로 유지할 수 있습니다.
최신 웹 앱을 위한 AI 기능
Summarizer API
trAIlblazers 편집기는 Summarizer API를 사용하여 헤드라인과 SEO 친화적인 메타 설명을 자동으로 생성합니다.
예: 헤드라인 생성
const blogPost = document.querySelector('.article-body').innerText;
const summarizer = await Summarizer.create({
type: 'headline',
sharedContext: 'Write headlines that make people want to read the blog post',
});
for await (const chunk of summarizer.summarizeStreaming(blogPost)) {
headline.append(chunk);
}
프롬프트 API (구조화된 출력 포함)
특정 데이터가 필요한가요? 프롬프트 API와 함께 JSON 스키마를 사용하면 AI가 예측 가능한 형식을 반환하도록 할 수 있습니다. trAIlblazers 팀은 다음 용도로 이 도구를 사용합니다.
- 태그 생성: 사전 정의된 목록에서 '어드벤처' 또는 '해변'과 같은 카테고리를 제안합니다.
- 댓글 검토: 댓글이 게시되기 전에 '안전' 또는 '유해'로 분류합니다.
미디어 접근성
편집기는 마크다운의 '어려운 부분'을 자동화합니다. 이미지를 드롭하면 프롬프트 API (멀티모달 입력 포함)가 픽셀을 분석하여 접근성 높은 대체 텍스트와 유용한 자막을 생성합니다.
작성 및 재작성
Writer 및 Rewriter API를 사용하면 사용자가 클릭 한 번으로 글머리 기호를 완전한 단락으로 확장하고 단락의 어조를 '더 캐주얼' 또는 '더 짧게'로 변경할 수 있습니다.
원활한 번역
Translator API를 사용하면 크리에이터가 영어로 콘텐츠를 작성하고 스페인어 또는 일본어 독자를 위해 즉시 번역할 수 있으며, 원어민이 이를 수정할 수 있습니다.
실제 성공사례
이미 많은 파트너가 프로덕션에서 이러한 API를 제공하고 있습니다. 주목할 만한 예는 다음과 같습니다.
- Drupal: CKEditor 내에서 검색엔진 최적화 태그를 생성하는 데 Summarizer API를 사용합니다.
- Yahoo! 일본: 커뮤니티 댓글 검토에 프롬프트 API를 사용합니다.
- Trip.com: 쇼핑객이 AI 개요를 통해 복잡한 항공편 예약 옵션을 탐색할 수 있도록 지원합니다.
강연의 리소스
나만의 'trAIlblazers' 환경을 구축할 준비가 되셨나요? 다음 리소스를 살펴봐 주시기 바랍니다.
- 시작 템플릿: Build Awesome starter-extended-blog (강연에서 언급된 모든 AI 기능 포함)
- 문서: Chrome for Developers의 내장 AI
- TypeScript 지원: npm에
@types/dom-chromium-ai을 설치합니다. - Google I/O 2025 강연: Chrome의 Gemini Nano를 사용한 실용적인 기본 제공 AI