전에 회사에 있었을 때는 번역이 바뀔 때마다 직접 문구들을 Slack으로 받아서 프로젝트에 있는 언어 파일에 직접 수정을 해주었다. 만약 복붙이라도 잘못하면 개발자의 잘못이 되었었다. 그런데 현재 회사는 crowdin에 CI/CD까지 적용해서 번역 자동화 프로세스가 구축이 된 상태라서 얼마나 편했는지 모른다. 개발팀은 이미 번역이 되어 있는 파일들을 배포하기 전에 통합 branch에 합쳐주기만 하면 된다.
이런 자동화 프로세스가 어떻게 구축한 걸까? 하고 궁금해하고 있는 상황에서 마침 원래 사용하고 있던 crowdin이라는 클라우드 기반 현지화 관리 플랫폼 서비스를 사용하다가 localazy라는 서비스를 대체해서 사용하겠다는 결정이 났다. 그래서 이번에 내가 localazy를 우리 앱에 연동하고 CI/CD를 구축하는 작업을 하게 되어 일련의 과정을 글로 남겨보려 한다.
AS-IS
현재 우리 앱의 번역 프로세스를 보면 기획팀에서 우선 한국어로 문구 작업을 한 다음에 이를 바탕으로 번역가들이 번역해서 번역된 문구를 모두 crowdin에 업로드한다. 그리고 crowdin에서 자체적으로 제공하는 github integration을 사용해서 업로드된 번역 파일들을 지정한 github branch에 push 되는 방식으로 알고 있다. 앱에서는 crowdin에 있는 언어 json파일을 react-intl 라이브러리를 사용하여 각 언어에 맞는 문구를 화면에 보여주는 식으로 작업이 되어 있었다.
TO-BE
앱에 연동하는 부분은 이미 react-intl를 사용해서 구현되어 있기 때문에 localazy에서 다운로드한 파일들을 crowdin에서 받은 파일들과 동일한 path에 위치하게끔 하기만 하면 된다.
우선 Crowdin에 있는 번역된 파일들을 export 해서 localazy에 import 하면 마이그레이션 완료. 그리고 localazy의 번역 파일들을 CI/CD를 사용해서 정해진 시간마다 자동으로 다운로드하고 지정된 github branch에 Pull Request를 생성하도록 한다.
이렇게 하면 localazy 자체만으로도 번역 파일들을 CLI 명령어 하나만으로 쉽게 다운로드할 수 있지만 CI/CD까지 사용해서 자동 병합해 줌으로써 개발자가 신경 쓰는 부분들을 현저하게 줄일 수 있다.
Localazy
Localazy는 모바일 앱과 웹 사이트의 번역 관리 플랫폼이다. 개발자들이 제품의 localization 프로세스를 관리하기 쉽도록 도와주는데 번역에 관련된 수많은 수동적인 작업들을 자동화시켜준다. 예를 들면 소스 코드에서 텍스트 문자열을 추출하는 것, 번역 파일을 생성 및 업데이트하는 것, 번역을 제품에 통합하는 것 등이 있다.
Localazy Setting
localazy.json 파일을 다음과 같이 생성해서 configuration을 정의해 준다.
{
"readKey": "read-key",
"writeKey": "write-key",
"upload": {
"type": "json",
"files": "locales/en.json"
},
"download": {
"files": "locales/${lang}.json"
}
}나는 다운로드만 하면 되기 때문에 테스트할 때는 readyKey와 download만 넣었었고 이마저도 나중에는 readyKey를 github actions에 변수로 지정하기 때문에 download로만 구성하였다.
localazy CLI
// MAC OS
> brew tap localazy/tools
> brew install localazy해당 명령어로 CLI를 다운로드하고
localazy download명령어를 실행하면 localazy.json에 명시되어 있는 path로 번역 파일들이 다운로드된다.
너무 쉽다.
CI/CD
Continuous Integration/Continuous Deployment의 약자로 소프트웨어 개발 프로세스에서 각 단계를 자동화하여 개발 속도와 품질을 향상하는 기술이다.
CI (Continuous Integration)는 개발자가 소스 코드를 병합할 때마다 자동적으로 빌드와 테스트를 수행해 주는데 개발자가 소스 코드를 병합할 때마다 프로젝트의 현재 상태가 정상적인지 확인해 준다.
CD (Continuous Deployment)는 CI 과정에서 테스트가 성공적으로 수행되면 자동적으로 배포를 수행하는 것을 말한다.
CI/CD를 적용함으로써 빠른 속도로 새로운 기능을 개발 및 개선하고, 앱의 품질을 높일 수 있다. 무엇보다도, 이를 통해 귀찮고 손도 많이 가고 시간도 오래 걸리는 수동적인 배포 과정의 오류를 방지할 수 있다.
Localazy 다운로드
localazy에서 제공해 주는 자동 다운로드 CI/CD 코드는 다음과 같다.
name: Download from Localazy
on:
push:
tags:
- 'v*'
jobs:
localazy-download-test:
name: Download strings from Localazy
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: localazy/download@v1
with:
read_key: ${{ secrets.LOCALAZY_READ_KEY }}해당 코드를 분석해 보면 v로 시작되는 태그가 push 될 때마다 최신 버전의 localazy 번역 파일들을 다운로드한다. 이렇게 구성한 workflow를 테스트하면 로컬에서 CLI로 다운로드 명령어를 실행한 결과와 같은 결과를 받을 수 있다.
완성된 yml
위의 yml에 workflow가 실행되는 조건을 월~금 하루 두 번 실행되는 조건으로 변경하고 pull request를 생성해 주는 부분을 추가하면 구현하고자 하는 CI/CD가 완성된다.
name: Download from Localazy
on:
schedule:
- cron: '0 23 * * 0-5'
- cron: '0 7 * * 0-5'
jobs:
localazy-download-test:
name: Download strings from Localazy
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: localazy/download@v1
with:
read_key: ${{ secrets.LOCALAZY_READ_KEY }}
- uses: peter-evans/create-pull-request@v4
with:
token: ${{ token }}
commit-message: 'localazy 번역 업데이트'
branch: localazy
title: 'localazy 번역 업데이트'
labels: labels
author: author
committer: committerConclusion
사실 이번 작업을 수행하면서 주어진 시간이 길지 않았다. 이번 스크럼에 개발이 완료되자마자 회고기간 동안 작업을 완료해야 했기 때문에 시간이 촉박했다. 그래서 시간을 가지고 CI/CD에 깊게 공부하고 이해하는 시간이 없었다. 그렇기 때문에 주어진 작업을 완료하는데에 초점을 가지고 개발을 했다.
번역 파일을 자동으로 다운로드해주는 부분은 localazy에서 잘 제공을 해주었고 pull request를 생성하는 부분도 기존에 작성되었던 코드들을 보면서 작업을 했기 때문에 다행히 큰 어려움 없이 주어진 시간에 작업을 완료할 수 있었다. 중간에 이런저런 삽질이 잠깐 있었지만 내가 만든 CI/CD가 실행돼서 PR이 생성되니 너무 신기하고 재밌었다.
삽질을 통해서 workflow_dispatch를 추가하면 깃헙 actions 탭에서 수동으로 테스트할 수 있는 방법도 알게 되었고 전반적으로 CI/CD가 어떻게 작동하는지 이해할 수 있던 귀한 시간이었다. 부족한 CI/CD 공부는 따로 시간을 내어 CI/CD 툴 부터해서 명령어까지 공부해서 CI/CD 단독 주제로 글을 써보아야겠다.
참조:
