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

Maud Nalpas
Maud Nalpas
Kenji Baheux
Kenji Baheux

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

설명 확장 프로그램 Chrome 상태 의도
MDN Chrome 138 Chrome 138 View 배송 의도

해외 시장으로 비즈니스를 확장하는 데는 비용이 많이 들 수 있습니다. 시장이 많을수록 지원해야 하는 언어가 많아지고, 언어가 많아지면 판매 후 지원 채팅과 같은 대화형 기능 및 흐름에 문제가 발생할 수 있습니다. 회사에 영어 사용 지원 상담사만 있는 경우, 영어가 모국어가 아닌 사용자는 발생한 문제를 정확하게 설명하기 어려울 수 있습니다.

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

일부 사용자는 브라우저의 내장 페이지 번역 기능이나 서드 파티 도구를 사용하여 언어 장벽을 극복하려고 합니다. 하지만 사후 지원 채팅과 같은 대화형 기능의 사용자 환경은 좋지 않습니다.

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

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

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

하드웨어 요구사항 검토

Chrome에서 이러한 API를 사용하여 기능을 작동하는 개발자와 사용자에게는 다음 요구사항이 적용됩니다. 다른 브라우저에는 다른 운영 요구사항이 있을 수 있습니다.

Language Detector API와 Translator API는 데스크톱의 Chrome에서 작동합니다. 이러한 API는 휴대기기에서 작동하지 않습니다. 다음 조건을 충족하는 경우 Chrome에서 Prompt API, Summarizer API, Writer API, Rewriter API가 작동합니다.

  • 운영체제: Windows 10 또는 11, macOS 13 이상 (Ventura 이상), Linux Android, iOS, ChromeOS용 Chrome은 아직 Gemini Nano를 사용하는 API에서 지원되지 않습니다.
  • 저장소: Chrome 프로필이 포함된 볼륨에 22GB 이상의 여유 공간이 있어야 합니다.
  • GPU: VRAM이 4GB보다 커야 합니다.
  • 네트워크: 무제한 데이터 또는 무제한 연결

브라우저에서 모델을 업데이트하면 Gemini Nano의 정확한 크기가 달라질 수 있습니다. 현재 크기를 확인하려면 chrome://on-device-internals로 이동하여 모델 상태를 확인하세요. 나열된 파일 경로를 열어 모델 크기를 확인합니다.

데모 채팅

Google에서는 사용자가 모국어로 입력하고 지원 상담사가 실시간으로 번역을 받을 수 있는 고객 지원 채팅을 구축했습니다.

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 필드와 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 ?"

다음 단계

여러분이 Translator API로 무엇을 빌드하고 있는지 확인하고 싶습니다. X, YouTube, LinkedIn에서 웹사이트와 웹 애플리케이션을 공유해 주세요.

초기 프리뷰 프로그램에 가입하여 로컬 프로토타입으로 이 API와 기타 API를 테스트할 수 있습니다.