Chrome 내장 Translation API 활용 최신 튜토리얼

1. 개요

Chrome의 내장 AI Translation API는 브라우저에서 직접, 클라우드가 아닌 온디바이스로 텍스트 번역을 수행할 수 있는 혁신적인 기능이다.
이 튜토리얼에서는 최신 Chrome(138 이상)에서 Translator API를 활용해 간단한 번역 웹앱을 만드는 방법을 안내한다.
본 기능은 실험적이므로, 특정 플래그 활성화와 최신 Chrome 버전이 필요하다.

2. 준비물

Chrome 브라우저(버전 138 이상)
(Canary, Dev, Beta 등 최신 버전 권장)
실험적 플래그 활성화 (먼저 코드를 구동해보고 동작하지 않는다면 이 설정을 적용해 다시 시도해 보자!)
1. 주소창에 chrome://flags 입력 후 이동
2. 아래 플래그를 검색 및 활성화
  - Experimental Web Platform features
  - Enable built-in AI (또는 Translator API 관련 플래그)
3. Chrome 재시작
HTTPS 환경
일부 API는 보안을 위해 HTTPS 또는 localhost 환경에서만 동작한다.
(예: Live Server, Python http.server 등으로 실행 권장)

3. Translator API 기본 구조

window.Translator 객체를 통해 API에 접근한다.
Translator.create({ sourceLanguage, targetLanguage })로 번역기 인스턴스를 생성한다.
translator.translate(text)로 번역을 수행한다.
sourceLanguage와 targetLanguage는 반드시 BCP 47 언어 코드로 지정해야 하며, 자동 감지는 지원하지 않는다.

4. 번역 기능 구현 예제

아래 코드를 index.html로 저장한 뒤, 위 준비 과정을 마친 Chrome에서 실행하자.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Chrome Translation API 튜토리얼</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    textarea { width: 100%; height: 100px; margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
    button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
    button:hover { background-color: #0056b3; }
    #output { margin-top: 20px; padding: 15px; border: 1px solid #eee; background-color: #f9f9f9; border-radius: 5px; }
  </style>
</head>
<body>
  <h1>Chrome Translation API 테스트</h1>

  <p>번역할 텍스트:</p>
  <textarea id="inputText">Hello, world!</textarea>
  <p>번역될 언어 (ISO 639-1 코드):</p>
  <input type="text" id="targetLanguage" value="ko" style="width: 50px; margin-bottom: 10px;" />
  <button onclick="translateText()">번역하기</button>

  <div id="output">
    <p>번역 결과:</p>
    <p id="translatedText">[여기에 번역 결과가 표시된다.]</p>
  </div>

  <script>
    async function translateText() {
      const inputText = document.getElementById("inputText").value;
      const targetLanguage = document.getElementById("targetLanguage").value;
      const outputElement = document.getElementById("translatedText");

      if (!window.Translator) {
        outputElement.textContent =
          "오류: Translator API를 사용할 수 없다. Chrome 버전 및 플래그를 확인하라.";
        return;
      }

      outputElement.textContent = "번역 중...";

      try {
        // 입력 텍스트가 영어라고 가정 (다른 언어면 코드 수정)
        const translator = await window.Translator.create({
          sourceLanguage: "en", // 반드시 명확한 언어 코드 지정
          targetLanguage: targetLanguage,
        });
        const result = await translator.translate(inputText);

        if (result) {
          outputElement.textContent = result;
        } else {
          outputElement.textContent = "번역 결과를 받아오지 못했다.";
        }
      } catch (error) {
        console.error("번역 중 오류 발생:", error);
        outputElement.textContent = `번역 중 오류 발생: ${error.message}. 개발자 콘솔을 확인하라.`;
      }
    }
  </script>
</body>
</html>

5. 코드 설명

inputText textarea: 번역할 텍스트 입력
targetLanguage input: 번역될 언어의 ISO 639-1 코드 입력 (예: ko, en, ja)
translateText() 함수: 번역 실행
- window.Translator 존재 여부 확인
- Translator.create({ sourceLanguage, targetLanguage })로 번역기 생성
- translate()로 번역 요청
- 결과 출력 또는 오류 처리

6. 실행 방법 및 주의사항

위 HTML 코드를 index.html로 저장
Chrome에서 chrome://flags 진입, 관련 플래그 활성화 후 재시작
HTTPS 또는 localhost 환경에서 파일 실행 (file:// 경로는 일부 환경에서 제한될 수 있음)
번역할 텍스트와 대상 언어 코드 입력 후 "번역하기" 클릭

sourceLanguage는 반드시 명확한 언어 코드로 지정해야 하며, "auto" 등 자동 감지는 지원하지 않는다.
입력 언어가 동적으로 바뀔 수 있다면, Language Detector API로 먼저 언어를 감지한 뒤, 그 결과를 sourceLanguage로 사용하자.
최초 사용 시 번역 모델이 다운로드되며, 이 과정에서 시간이 다소 소요될 수 있다.
지원 언어는 Chrome 및 Google의 정책에 따라 달라질 수 있다.

7. 참고 자료

728x90

저작자표시 비영리 변경금지 (새창열림)

'AI > AI와 일하기' 카테고리의 다른 글

AI 시대, 개발자의 생존 전략 (3)	2025.08.08
n8n과 Ollama Docker Compose 연동하기 (1)	2025.08.05
[번역] Cline rules (1)	2025.07.06
[LLM] 문서 임베딩, 어떤 형식이 가장 효율적일까? (0)	2025.07.05
[LLM] PDF 문서 파싱, LlamaParse vs. Unstructured.io: 당신의 RAG 시스템을 위한 최적의 선택은? (1)	2025.07.03

다음글이 없습니다.

이전글이 없습니다.

Chrome 내장 Translation API 활용 최신 튜토리얼

1. 개요

2. 준비물

3. Translator API 기본 구조

4. 번역 기능 구현 예제

5. 코드 설명

6. 실행 방법 및 주의사항

7. 참고 자료

'AI > AI와 일하기' 카테고리의 다른 글

티스토리툴바