번역 이용하기

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

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

계정 정보 등록하기

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

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

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

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

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

TIP

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

---

API 키 발급받기

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

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

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

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;
// or
// 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

사용 가능한 언어 목록 (opens new window)을 참조하세요

3. 입력한 엘리먼트에서 우클릭 시 번역창이 잘 나오는지 확인합니다.

---

• 파라미터 값 (*표시는 필수)

값	식별자	설명
targetSelector*	String	엘리먼트의 셀렉터(클래스 명/ID)를 입력한다. (ex: .class_name, #element_id)
trans*	Array<String>	번역 기능을 설정할 언어 목록 (opens new window)을 입력한다.
roomId*	String	방을 개설할 때 사용하는 채널 키 값을 입력한다.

Methods

※. 자동 번역

• translate(message, lang, roomId)

값	식별자	설명
message*	String	사용자가 입력한 메시지
lang*	String	번역기능을 수행할 언어를 입력한다. 언어 목록 (opens new window)
roomId*	String	방을 개설할 때 사용하는 채널 키 값을 입력한다.

// 자동으로 번역을 위한 코드
channel.onNotifyMessage = async function (event) {
  // >> 추가된 코드 selectLang 은 직접 입력이 가능
  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);
};