글로벌 번역키 자동화(v1.0.0)

Donghoon Nam
원티드랩 기술 블로그
6 min readJun 1, 2021

안녕하세요. 프론트엔드 팀 남동훈 입니다.
이번에 글로벌을 타겟으로 한 신규 프로젝트 (RoundUp)진행 시 번역키 자동화를 어떻게 진행하였는지에 대해서 공유 드리려고 합니다.

why?

현재 원티드의 글로벌 번역키는 Lokalise라는 툴을 통해 관리를 하고 있습니다.

번역키를 관리하는 프로세스를 단순화해서 표현하면 다음과 같습니다.

  1. 스쿼드(PO, Designer)+글로벌 팀에서 번역키를 lokalise에 등록/수정/삭제
  2. 개발 완료 상황에 따라 해당 서버에 적용한다.

위의 내용을 자동화하기 위해 아래와 같이 정리를 하였습니다.

a. 1번을 진행하고 나면 JSON파일을 만든다.
b. JSON파일을 AWS S3에 업데이트한다.
c. cloudfront통해 cache delivery하고 있는 것을 invalidation시켜 준다.
d. 자동으로 동기화된 파일을 해당 서버 스테이지에 맞게 수동으로 동기화 시켜줄 수 있는 기능을 구현한다.

우선 a를 진행하기 위해서는 Lokalise에서 번역키 등록/수정/삭제 할 때 동기화 할 수 있는 기능을 아래와 같이 알아보았습니다.

Lokalise 동기화 방법

Lokalise에서 번역키 변경 시 trigger하는 방식은 두 가지 정도를 검토를 해보았습니다.

  1. Lokalise에서 제공하는 download시 S3에 파일을 업로드하는 방식
  2. 번역키를 추가/변경/삭제하면 webhook을 실행시키는 방식

1번 방식은 번역키 작업자가 번역키 수정 후 download를 진행해줘야 하는 방식인데 작업하시는 분들이 개발자분들이 아니다 보니 download를 하지 않는 이슈가 빈번하게발생할 가능성이 높다고 판단되어 2번 방식을 선택하게 되었습니다.

2번의 webhook trigger event는 아래와 같이 지정하였습니다.

trigger event
- Translation updated
- Key added, removed, modified

번역키를 수정하는 것과 key를 추가/삭제/수정을 하는 이벤트는 따로 동작되어 다 선택해주셔야 합니다.

webhook URL
프론트 팀 어드민 서버에 만들었고 url이 호출되면 Lambda를 호출하도록 만들었습니다.

Lambda에서 Download File S3로 전송, CloudFront Invalidation

위의 내용과 더불어 구조도는 다음과 같습니다.

Lokalise 자동화 구조도

Lambda는 컨테이너 이미지로 구축/구현을 하였습니다.

도커로 Lambda를 구축한 이유는 다음과 같습니다.
AWS의 서비스들을 사용하는 방법은 AWS cli, AWS SDK 두 가지 방법이 있습니다.

S3에 PutObject를 통하여 업로드 시 SDK로 구현하려면 디렉토리/파일 별로 순회를 하면서 업로드를 하는 것을 구축해야하는 번거로움이 있습니다만 cli를 쓰게 되면 명령어 한줄로 해결이 됩니다.

Lambda Nodejs는 aws cli, shell script를 지원하지 않다보니 불편함이 많아 docker를 이용하게 되었습니다.

Docker코드는 아래와 같습니다.

빌드하여 lambda와 연결되는 구조는 다음과 같습니다.

Docker Image build 및 ECR push, Lambda와 연동

lambda 구현 코드

index.js

extraction_file.js

s3.js

cf_invalidation.js

배포 스크립트

전체 코드는 다음과 같습니다.

서버 타입별 번역키 관리

위의 Lokalise 자동화 프로세스를 통해 s3에 저장되는 경로는 /origin/{lang}/{lang}.json 으로 저장 됩니다.

origin 디렉토리에 저장되어 번역키를 필요에 따라 서버에 적용할 수 있도록 프론트 팀에서 관리하고 있는 어드민툴에 의해서 할 수 있도록 해놓았습니다.

번역키 동기화 방법

글로벌 서비스 시 번역키 관리를 어떻게 하는 것이 개발자에게 부담이 되지 않게 할 수 있을지 고민을 해보다가 이번 프로젝트를 통해 조그마하게 자동화를 생각하고 구현해보았습니다.

프론트 팀에서는 업무의 효율화를 위해 자동화 부분에도 관심이 많습니다.

처음 해본지라 추후에 더 나은 방식을 찾게 된다면 구현해보고 글을 업데이트 해보도록 하겠습니다.

참고

원티드에서 현재 다양한 포지션을 채용하고 있습니다.

원티드 채용공고 확인하기

--

--