내장된 AI를 사용한 번역

Thomas Steiner

Alexandra Klepper

게시: 2024년 11월 13일, 최종 업데이트: 2025년 5월 20일

Chrome에서 Translator API를 사용하여 브라우저에 제공된 AI 모델로 텍스트를 번역합니다.

웹사이트에서 이미 여러 언어로 웹사이트 콘텐츠를 제공하고 있을 수 있습니다. Translator API를 사용하면 사용자가 모국어로 작성할 수 있습니다. 예를 들어 사용자는 모국어로 지원 채팅에 참여할 수 있으며, 사용자의 기기에서 메시지가 전송되기 전에 사이트에서 메시지를 지원 상담원의 모국어로 번역할 수 있습니다. 이렇게 하면 모든 사용자에게 원활하고 빠르며 포용적인 환경이 제공됩니다.

웹 콘텐츠를 번역하려면 일반적으로 클라우드 서비스를 사용해야 합니다. 먼저 소스 콘텐츠가 서버에 업로드되고, 서버에서 도착어로 번역을 실행한 다음, 결과 텍스트가 다운로드되어 사용자에게 반환됩니다. 콘텐츠가 일시적이고 데이터베이스에 저장할 필요가 없는 경우 클라이언트 측 번역은 호스팅된 번역 서비스보다 시간과 비용을 절약해 줍니다.

시작하기

기능 감지를 실행하여 브라우저에서 Translator API를 지원하는지 확인합니다.

if ('Translator' in self) {
  // The Translator API is supported.
}

번역의 도착어는 항상 알 수 있지만 출발어를 항상 알 수 있는 것은 아닙니다. 이러한 경우에는 Language Detector API를 사용하면 됩니다.

모델 다운로드

Translator API는 고품질 번역을 생성하도록 학습된 전문가 모델을 사용합니다. API는 Chrome에 기본 제공되며, 웹사이트에서 이 API를 처음 사용할 때 모델이 다운로드됩니다.

모델을 사용할 준비가 되었는지 확인하려면 비동기 Translator.availability() 함수를 호출하세요. availability()에 대한 응답이 downloadable이면 시간이 걸릴 수 있으므로 다운로드 진행률을 수신 대기하여 사용자에게 진행률을 알립니다.

언어 쌍 지원 확인

번역은 요청 시 다운로드되는 언어 팩으로 관리됩니다. 언어 팩은 특정 언어의 사전과 같습니다.

• sourceLanguage: 텍스트의 현재 언어입니다.
• targetLanguage: 텍스트가 번역될 최종 언어입니다.

BCP 47 언어 약어를 문자열로 사용합니다. 예를 들어 스페인어의 경우 'es', 프랑스어의 경우 'fr'입니다.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

downloadprogress 이벤트로 모델 다운로드 진행률을 수신 대기합니다.

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

다운로드에 실패하면 downloadprogress 이벤트가 중지되고 ready 프로미스가 거부됩니다.

번역기 만들기 및 실행

번역기를 만들려면 사용자 활성화 를 확인하고 비동기 create() 함수를 호출하세요. Translator create() 함수에는 두 개의 필드가 있는 옵션 매개변수가 필요합니다. 하나는 sourceLanguage용이고 다른 하나는 targetLanguage용입니다.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

번역기가 있으면 비동기 translate()를 호출합니다.

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

또는 긴 텍스트를 처리해야 하는 경우 API의 스트리밍 버전을 사용하고 translateStreaming()을 호출할 수도 있습니다.

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

순차 번역

번역은 순차적으로 처리됩니다. 번역할 텍스트를 대량으로 전송하면 이전 번역이 완료될 때까지 후속 번역이 차단됩니다.

요청에 대한 최상의 응답을 얻으려면 요청을 함께 청크하고 로드 인터페이스, 스피너와 같은 로드 인터페이스를 추가하여 번역이 진행 중임을 전달하세요.

지원 언어

다음 언어는 Translator API의 Chrome 구현에서 지원됩니다.

데모

Translator 및 Language Detector API Playground에서 Language Detector API와 함께 사용되는 Translator API를 확인할 수 있습니다.

권한 정책, iframe, 웹 워커

기본적으로 Translator API는 최상위 창과 동일한 출처 iframe에서만 사용할 수 있습니다. 권한 정책 Permissions Policy allow="" 속성을 사용하여 교차 출처 iframe 에 API 액세스 권한을 위임할 수 있습니다.

<!--
  The host site https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

권한 정책 상태를 확인하기 위해 각 워커에 대한 책임 있는 문서를 설정하는 것이 복잡하기 때문에 Translator API는 웹 워커에서 사용할 수 없습니다.

의견 공유

어떤 앱을 개발하셨는지 기대됩니다. X, YouTube, and LinkedIn에서 웹사이트와 웹 애플리케이션을 공유해 주세요.

Chrome의 구현에 관한 의견이 있으면 버그 신고 또는 기능 요청을 제출하세요.