번역 기능 소개

Google의 강력한 번역 API를 활용하여 실시간 채팅에서 다국어 지원을 쉽게 구현할 수 있습니다. 이 라이브러리를 통해 사용자는 자신이 선호하는 언어로 메시지를 읽고 소통할 수 있습니다.

주요 기능

• 실시간 메시지 번역
• 다양한 언어 지원 (90개 이상)
• 컨텍스트 메뉴를 통한 간편한 번역 UI
• 자동 언어 감지 및 번역

번역 이용하기

번역 기능은 Google의 Cloud Translation 기능을 활용하여 제공되며 해당 기능은 부분 무료이나, 번역 기능을 사용하기 위해서는 먼저 구글 번역을 사용하기 위한 API KEY를 발급받아야 합니다.

해당 기능을 사용하기 위해서 Google의 번역 API KEY가 필요하니 발급받으신 적이 없으시다면 아래 가이드 문서를 따라 진행하시기 바랍니다.
만약 이미 API KEY를 발급 받았고, 알고 있는 상태라면 VChatCloud CMS에 API KEY 등록하기부터 진행하시면 됩니다.

계정 정보 등록하기

먼저 Google에 로그인 하시고 API를 발급해주는 곳로 이동합니다.
그 후 Translation 무료로 사용해 보기를 클릭하시면 페이지가 이동됩니다.

Step 1-1

• 위에 Translation 무료로 사용해 보기버튼을 클릭해 진입합니다.

Step 1-2

• 위와 같이 필요한 정보를 입력하고 다음을 눌러 이동합니다.

Step 1-3

• 위와 같이 필요한 정보를 입력하고 마지막에 무료 평가판 사용하기를 누릅니다.

Step 1-4

• 계정 정보 등록이 완료되었습니다.

TIP

카드 등록 시 자동 청구되지 않으며, 처음 등록 시 1달러가 청구될 수 있으나 다시 환불 처리됩니다.
직접 자동 청구를 신청하지 않으면 API 할당량을 모두 사용해도 추가 청구되지 않습니다.

API 키 발급받기

Step 2-1

1. 좌측에 메뉴버튼을 누르면 사이드 바가 나오는데, 여기서 표시된 Marketplace를 눌러 이동합니다.
2. 그 후 검색창에 translation을 입력하여 검색합니다.

Step 2-2

3. 검색 결과에 있는 Cloud Translation API를 클릭하여 이동합니다.

Step 2-3

4. 이동된 페이지에서 표시된 사용 버튼을 누른 후 이동합니다.

Step 2-4

5. 이동 된 후 사용자 인증 정보를 클릭합니다.

Step 2-5

6. 우측 중단에 표시된 + 사용자 인증 정보 만들기를 누른 후 나타난 API 키를 버튼을 눌러 API KEY를 발급받습니다.

VChatCloud CMS에 API KEY 등록하기

1. CMS의 대시보드나 채팅방 관리-채팅방 목록에서 번역 API를 사용하고 싶은 방에 들어갑니다.
2. 구글번역을 사용으로 변경하고, 아래에 나타난 Google API KEY의 우측에 입력칸에 아까 발급받은 API 키를 입력한 후 우측의 인증버튼을 클릭합니다.

3. 정상적으로 입력하였다면 위의 이미지와 같은 인증되었습니다.라는 알림을 받을 수 있습니다.
4. 우측의 수정버튼을 클릭하여 저장합니다.

라이브러리 이용 방법

기본 설정하기

1. Overview의 내용에 따라 기본 설정을 완료합니다.
2. script.js 파일 최상단에 다음 코드를 추가합니다.

// 번역 객체 가져오기 (원하는 방식 선택)
const { Trans } = e7lib;
// 또는
// const Trans = e7lib.Trans;

// 번역 인스턴스 생성
const translation = new Trans({
  targetTag: ".comment", // 번역 대상 요소의 선택자
  trans: [
    "ko", // 한국어
    "en", // 영어
    "de", // 독일어
    "vi", // 베트남어
    "es", // 스페인어
    "fr", // 프랑스어
    "pt", // 포르투갈어
    "tr", // 터키어
    "ar", // 아랍어
    "it", // 이탈리아어
    "id", // 인도네시아어
    "ru", // 러시아어
  ],
  roomId: channelKey, // 채널 식별자
});

TIP

Google 공식 문서에서 지원되는 전체 언어 목록을 확인할 수 있습니다.

3. 설정 후, 지정한 요소(.comment)에서 마우스 우클릭 시 번역 메뉴가 나타나는지 확인합니다.

설정 매개변수

매개변수	타입	설명
targetTag	String	번역 대상 요소의 CSS 선택자 (예: .comment, #message-area)
trans	Array<String>	지원할 언어 코드 배열 언어 코드 목록
roomId	String	채팅방 식별을 위한 고유 채널 키

메서드

translate(message, lang, roomId)

매개변수	타입	설명
message	String	번역할 원본 메시지 텍스트
lang	String	번역 대상 언어 코드 (예: "en", "ko", "ja")
roomId	String	채팅방 식별을 위한 고유 채널 키

사용 예시

자동 번역 구현하기

다음은 사용자 언어 설정에 따라 자동으로 메시지를 번역하는 예시 코드입니다.

// 채팅 이벤트 핸들러에 자동 번역 기능 추가
channel.onNotifyMessage = async function (event) {
  // 사용자가 선택한 언어가 있고 'none'이 아닌 경우에만 번역 실행
  if (
    getUserInfo(event.clientKey)?.lang &&
    getUserInfo(event.clientKey).lang !== "none"
  ) {
    // 메시지 번역 요청
    const result = await trans.translate(
      event.message,
      getUserInfo(event.clientKey).lang,
      channel.roomId
    );

    // 번역 결과가 있으면 원본 메시지 대체
    event.message = result.data || event.message;
  }

  // 메시지 표시
  write(event);
};