AI를 사용한 클라이언트 측 번역

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Maud Nalpas

Kenji Baheux

Alexandra Klepper

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

설명 동영상	웹	확장 프로그램	Chrome 상태	인텐트
GitHub	Origin 무료 체험	Origin 무료 체험	View	실험 의도

해외 시장으로 비즈니스를 확장하는 데는 비용이 많이 들 수 있습니다. 시장이 많을수록 지원해야 할 언어가 많아질 수 있으며, 언어가 많을수록 애프터서비스 지원 채팅과 같은 양방향 기능 및 흐름에 문제가 발생할 수 있습니다. 회사에 영어를 사용하는 지원 담당자만 있다면 영어가 모국어가 아닌 사용자는 어떤 문제가 발생했는지 정확하게 설명하기 어려울 수 있습니다.

AI를 사용하여 여러 언어를 사용하는 사용자의 환경을 개선하는 동시에 위험을 최소화하고 추가 언어를 사용하는 고객 지원 담당자에게 투자할 가치가 있는지 확인하려면 어떻게 해야 하나요?

일부 사용자는 브라우저의 기본 제공 페이지 번역 기능이나 서드 파티 도구를 사용하여 언어 장벽을 극복하려고 합니다. 하지만 애프터서비스 지원 채팅과 같은 양방향 기능의 사용자 환경은 미흡합니다.

번역이 통합된 채팅 도구의 경우 지연을 최소화하는 것이 중요합니다. 기기에서 언어를 처리하면 사용자가 메시지를 제출하기 전에 실시간으로 번역할 수 있습니다.

하지만 자동화 도구로 언어 장벽을 해소할 때는 투명성이 중요합니다. 대화가 시작되기 전에 이 번역을 지원하는 AI 도구를 구현했음을 명확히 밝혀야 합니다. 이렇게 하면 기대치를 설정하고 번역이 완벽하지 않은 경우 난처한 상황을 피할 수 있습니다. 자세한 내용이 포함된 정책 링크를 제공합니다.

Chrome에 내장된 모델을 사용하는 클라이언트 측 Translator API를 개발하고 있습니다.

데모 채팅

사용자가 모국어로 입력하고 지원 담당자를 위한 실시간 번역을 받을 수 있는 고객 지원 채팅을 구축했습니다.

Translator API 사용

Translator API가 지원되는지 확인하려면 다음 기능 감지 스니펫을 실행합니다.

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

언어 쌍 지원 확인

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

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

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

모델 사용 가능 여부를 확인하고 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() 함수를 호출합니다. sourceLanguage용 필드 1개와 targetLanguage용 필드 1개 등 두 필드가 있는 옵션 매개변수가 필요합니다.

// 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 ?"

다음 단계

Translator API로 빌드하는 내용을 확인하고 싶습니다. X, YouTube, LinkedIn에서 웹사이트와 웹 애플리케이션을 공유하세요.

사전 체험판 프로그램에 가입하여 이 API와 기타 API를 로컬 프로토타입으로 테스트할 수 있습니다.