프로젝트에서 i18n을 사용하여 다국어를 구현하려고 하던 중 문제가 생겼다. 페이지 내 고정된 텍스트(다음, 이전, 닫기… 등) 들은 i18n을 통해서 충분히 다국어를 구현할 수 있었다.
그러나 문제는 동적인 데이터였다. 지금 진행하고 있는 프로젝트는 키오스크를 만드는 프로젝트로, 사장님이 카테고리와 메뉴들을 설정하면 그 메뉴들을 다국어로 보여줘야 하는데 이는 i18n으로는 한계가 명확했다.

생각해본 대안은 다음과 같았다.

1. 메뉴, 카테고리 등록시 다른 언어에 대한 텍스트도 같이 등록

2. 번역 API 이용

1번의 경우 너무 번거롭고, 하나 등록할 때 마다 사장님들이 번역기를 돌려서 등록을 해야하는데.. 과연 얼마나 할까? 라는 생각이 들었다.

그래서 2번 번역 API를 이용한 자동 번역을 선택하기로 했다. 여러 API를 찾아보던 중 DeepL이라는 서비스를 이용하기로 했다. 이미 크롬 플러그인으로 설치해서 애용하고 있었고, 월 50만단어라는 요청을 공짜로 제공한다고 하니 테스트로는 제격인 API였다.

설치 및 설정

설치

자바스크립트에서 사용하기 위해서는 deepl-node 패키지 설치가 필요하다.
https://www.npmjs.com/package/deepl-node

$ yarn add deepl-node

설정

API를 사용하기 위해서는 당연하게도 DeepL에 가입해야 한다.
https://www.deepl.com/

그리고 API키를 발급받는다.

사용 방법

사용 방법은 매우 간단하다. Docs에 더 자세하게 나와있으니 간단한 예제 코드만 적는다.

const AUTH_KEY = process.env.NEXT_PUBLIC_DEEPL_API_KEY as string; // Replace with your key
const TRANSLATOR = new deepl.Translator(AUTH_KEY);

const result = await TRANSLATOR.translateText([...stringArray], 'ko', 'en-US');

문제 발생

요청과 응답도 아주 잘되고, 문제가 없는 듯 보였다. 그러나 번역은 문맥에 따라 뜻이 많이 달라지는데, 카테고리의 경우가 그랬다.
예를 들어, 일식(일본 음식) 혹은 중식(중국 음식) 이라는 카테고리를 등록한 경우 번역 결과가 Eclipse, Lunch로 나왔다.. 물론 잘못 번역된건 아니다. AI가 문맥을 파악 못했을 뿐…

해결

그래서 텍스트를 던져주기 전에 앞에 어떠한 문맥의 단어인지를 알려주는 키워드를 추가했다. 예를 들어 다음과 같다.

// const result = await TRANSLATOR.translateText('일식', 'ko', 'en-US');

const result = await TRANSLATOR.translateText('(음식 메뉴) 일식', 'ko', 'en-US');

이런 식으로 키워드를 같이 던져 줬더니 원하는 단어로 번역이 되어 돌아왔다. 물론 결과에서 괄호안에 있는 문자를 제거해야 하는 추가 작업이 생겼지만..