Tridge에서는 react-i18next 라는 라이브러리를 활용하여 한국어와 영어를 서비스에서 지원하고 있습니다. 다국어를 지원하기 위해서는 화면에 노출될 text를 입력할 때 항상 번역 코드와 함께 입력해야하는데요, 기존 워크플로우 상에서 이 번역 코드를 입력하는 개발 과정이 Translation Dictionary를 읽고 매칭되는 텍스트에 일일이 매핑해주는 반복 업무입니다. 이러한 반복 업무를 TS Compiler API를 활용하여 자동화한 경험을 이번 글에서 소개합니다.

Workflow 소개

다국어를 지원하기 위해서는 개발 인원들과의 협업뿐만 아니라, 번역가와 디자이너분들과의 협업이 필요합니다. 현재는 아래와 같은 과정을 통해 다국어를 지원하고 있습니다. Lokalise는 Translation Dictionary의 관리를 도와주는 툴입니다.

1. 디자이너가 UI를 설계한 후 UI에 배치되는 text들을 카피라이터와 함께 협업하여 하나의 언어로 UI에 배치함.
2. 디자이너가 1번 과정에서 생성된 텍스트들에 unique한 code를 생성한 후 code ↔ text쌍의 모음을 Lokalise branch에 등록.
3. 번역가는 Lokalise에서 각 text들을 지원하는 언어들로 번역함.
4. FE 개발자는 Lokalise의 branch에서 Translation Dictionary를 추출하여 코드에 반영.

디자이너가 1번 작업을 마치게 되면 UI가 확정되어 FE 개발자가 구현에 들어갈 수 있게 됩니다. 2번 과정에서 각 text에 translation code를 붙이는 작업은 얼마 걸리지 않기 때문에, 사실상 FE 개발자의 구현과 번역가의 번역이 병렬 작업으로 수행하게 됩니다. 하지만, FE 개발자가 전달받은 UI에는 Translation key가 그려져있는 것이 아니라, raw text가 그려져있기 때문에 Lokalise에 등록된 text를 읽고 Dictionary를 통해 번역 코드를 찾아내어 코드에 적용시켜야 합니다.

구현 과정에서 텍스트를 입력할 때마다 Lokalise를 뒤적거리며 찾기에는 너무나도 비효율적이기 때문에, 아래와 같이 번역 코드를 임시로 입력해두고 UI에 그려져있는 raw text만 입력해놓은채로 구현한 후, 구현을 모두 마치고 임시로 입력해둔 번역 코드들을 Lokalise를 탐색하며 한 번에 적용했습니다.

아래 예시의 왼쪽과 같이 _trans.todo로 임시 번역 코드를 작성해둔 뒤 구현을 모두 마치고 오른쪽과 같이 실제 Dictionary에 존재하는 code들로 매칭해주는 과정입니다.

/* Case 1 */
<Trans code="_trans.todo">
  Hello World
</Trans>

/* Case 2 */
['_trans.todo', 'Hello World']

/* Case 3 */
t('_trans.todo', 'Hello World')

/* Case 1 */
<Trans code="_trans.hello.27">
  Hello World
</Trans>

/* Case 2 */
['_trans.hello.27', 'Hello World']

/* Case 3 */
t('_trans.hello.27', 'Hello World')

현재 Tridge는 새로운 서비스를 꽤나 출시하고 있다보니, 서비스를 소개하는 페이지 혹은 이용약관을 명시하는 페이지들을 꽤나 구현해야했었는데요, 파일 하나당 매핑해야하는 text가 적게는 30개 많게는 80개까지도 존재했습니다. 파일도 하나가 아니었기 때문에, 모든 파일의 key mapping 과정을 수행하려면 수 시간이 소요되었죠.

저는 이 과정이 단순 반복 업무라는 생각이 들었고, esbuild plugin으로 레거시 코드 정리하기 에서 사용했던 TS Compiler API를 활용하여 이 과정을 자동화할 수 있겠다는 생각이 들어 바로 진행했습니다.

자동화 시 고려해야할 점

위 번역 코드를 적용하는 프로세스를 자동화하려면 몇 가지 고려해야하는 케이스들이 있습니다.