게시일: 2024년 11월 13일, 최종 업데이트: 2025년 5월 20일
| 설명 | 웹 | 확장 프로그램 | Chrome 상태 | 의도 |
|---|---|---|---|---|
| MDN |  Chrome 138 |
Chrome 138 |
View | 배송 의도 |
Chrome에서 Translator API를 사용하여 브라우저에 제공된 AI 모델로 텍스트를 번역합니다.
전 세계 잠재고객이 액세스할 수 있도록 웹사이트에서 이미 여러 언어로 웹사이트 콘텐츠를 제공하고 있을 수도 있습니다. Translator API를 사용하면 사용자가 모국어로 참여할 수 있습니다. 예를 들어 사용자는 모국어로 지원 채팅에 참여할 수 있으며, 사이트에서는 사용자의 기기를 떠나기 전에 지원 상담사가 사용하는 언어로 번역할 수 있습니다. 이렇게 하면 모든 사용자에게 원활하고 빠르며 포용적인 환경을 제공할 수 있습니다.
일반적으로 웹 콘텐츠를 번역하려면 클라우드 서비스를 사용해야 했습니다. 먼저 소스 콘텐츠가 서버에 업로드되고, 서버에서 대상 언어로 번역을 실행한 다음 결과 텍스트가 다운로드되어 사용자에게 반환됩니다. 클라이언트에서 번역을 실행하면 서버 트립에 필요한 시간과 번역 서비스 호스팅 비용을 절약할 수 있습니다.
시작하기
Translator API는 Chrome 138 안정화 버전부터 사용할 수 있습니다. 먼저 기능 감지를 실행하여 브라우저가 Translator API를 지원하는지 확인합니다.
if ('Translator' in self) {
// The Translator API is supported.
}
번역의 대상 언어는 항상 알 수 있지만 소스 언어는 알 수 없는 경우가 있습니다. 이러한 경우 언어 감지기 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로 이동하여 모델 상태를 확인하세요.
나열된 파일 경로를 열어 모델 크기를 확인합니다.
언어 쌍 지원 확인
번역은 요청 시 다운로드되는 언어 팩으로 관리됩니다. 언어 팩은 특정 언어의 사전과 같습니다.
sourceLanguage: 텍스트의 현재 언어입니다.targetLanguage: 텍스트가 번역될 최종 언어입니다.
BCP 47 언어 짧은 코드를 문자열로 사용합니다. 예를 들어 스페인어의 경우 'es', 프랑스어의 경우 'fr'입니다.
const translatorCapabilities = await Translator.availability({
sourceLanguage: 'es',
targetLanguage: 'fr',
});
// 'available'
availability() 함수는 다음 값이 포함된 프라미스를 반환합니다.
"unavailable": 구현에서 지정된 언어의 번역 또는 언어 감지를 지원하지 않습니다."downloadable": 구현에서 지정된 언어의 번역 또는 언어 감지를 지원하지만 계속하려면 다운로드가 필요합니다. 다운로드는 브라우저 모델일 수 있습니다."downloading": 구현이 지정된 언어의 번역 또는 언어 감지를 지원합니다. 브라우저가 연결된 객체를 만드는 과정에서 진행 중인 다운로드를 완료하고 있습니다."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() 함수를 호출합니다. 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);
}
순차 번역
번역은 순차적으로 처리됩니다. 번역할 텍스트를 대량으로 전송하면 이전 번역이 완료될 때까지 후속 번역이 차단됩니다.
요청에 대한 최상의 응답을 얻으려면 요청을 함께 청크로 묶고 스피너와 같은 로딩 인터페이스를 추가하여 번역이 진행 중임을 전달하세요.
데모
Language Detector API와 함께 사용되는 Translator API는 Translator 및 Language Detector API playground에서 확인할 수 있습니다.
표준화 노력
Google에서는 브라우저 간 호환성을 보장하기 위해 Translator API를 표준화하고 있습니다.
Google의 API 제안은 커뮤니티의 지원을 받았으며 추가 논의를 위해 W3C Web Incubator Community Group으로 이동했습니다. Chrome팀은 W3C 기술 아키텍처 그룹에 의견을 요청하고 Mozilla와 WebKit에 표준 입장을 문의했습니다.
Web Incubator Community Group에 가입하여 표준화 작업에 참여할 수 있습니다.
의견 공유
Language Detector API로 무엇을 빌드하고 있는지 확인하고 싶습니다. X, YouTube, LinkedIn에서 웹사이트와 웹 애플리케이션을 공유해 주세요.