홈

Chrome

Chrome 내장 AI로 새로운 기능 구축하기

원문: Build new features using built-in AI in Chrome
 — Chrome Developers
원문은 CC-BY-4.0
 라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.
블로그 게시물 편집기가 단순히 텍스트를 저장하는 데 그치지 않고, 글 작성을 적극적으로 도와주는 여행 블로그를 상상해 보세요. trAIlblazers의 창립자인 Maya와 Ashok을 만나보겠습니다. 이들은 Chrome 내장 AI
를 사용합니다. 모델을 사용자 기기에서 직접 실행함으로써, 개발자는 민감한 데이터를 로컬에 유지하면서 비용이 많이 드는 클라우드 비용과 지연 시간을 줄일 수 있습니다.
우리는 Build Awesome(이전에는 Eleventy로 알려진)과 협력하여 강연에서 언급된 모든 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);
}

Prompt API (구조화된 출력 포함)

특정 데이터가 필요하신가요? Prompt API와 함께 JSON Schema
를 사용하면 AI가 예측 가능한 형식으로 응답을 반환하도록 할 수 있습니다. trAIlblazers 팀은 다음 용도로 이를 활용합니다:
  • 태그 생성: "Adventure" 또는 "Beach"와 같은 카테고리를 사전 정의된 목록에서 제안합니다.
  • 댓글 모더레이션: 게시 전 댓글을 "안전" 또는 "유해"로 분류합니다.

미디어 접근성

편집기는 마크다운의 "어려운 부분"을 자동화합니다. 이미지를 드롭하면 Prompt API(멀티모달 입력 포함)
가 픽셀을 분석하여 접근성 높은 대체 텍스트와 유익한 캡션을 생성합니다.

글쓰기 및 재작성

Writer
 및 Rewriter API
를 통해, 사용자는 클릭 한 번으로 글머리 기호를 완전한 단락으로 확장하거나 단락의 어조를 "더 캐주얼하게" 또는 "더 간결하게" 변경할 수 있습니다.

매끄러운 번역

Translator API
를 사용하면 창작자가 영어로 콘텐츠 초안을 작성하고 스페인어나 일본어 독자를 위해 즉시 번역할 수 있으며, 이후 원어민이 내용을 다듬을 수 있습니다.
Translator API 작동 예시.
Translator API로 영어로 콘텐츠 초안을 작성하고 스페인어와 일본어로 즉시 번역합니다.

실제 도입 사례

많은 파트너사들이 이미 이 API들을 프로덕션에서 사용하고 있습니다. 주목할 만한 사례는 다음과 같습니다:
  • Drupal: CKEditor 내에서 SEO 태그 생성을 위해 Summarizer API를 사용합니다.
  • Yahoo! Japan: 커뮤니티 댓글 모더레이션을 위해 Prompt API를 사용합니다.
  • Trip.com: AI 개요를 통해 쇼핑객이 복잡한 항공권 예약 옵션을 탐색하는 데 도움을 줍니다.

강연 리소스

나만의 "trAIlblazers" 경험을 구축할 준비가 되셨나요? 다음 리소스를 확인해 보세요:

목차

목록으로