도입기라고 하기엔 별거 없지만,
다른 블로그 글과 달라진 부분도 있고,
나중에 또 적용해야 할 나를 위해 써보는 도입기!
(1)을 붙인 건 더 업데이트해야 할 부분이 많기도 하고,
한번에 다 쓰려고 하다보니 자꾸 미뤄져서 잘라서 써야겠단 생각이 들었다ㅎㅎ
(메인 업무가 아니여서 틈틈이 조금은 더디게 진행된단 점도 있고ㅎㅎ)
배경 및 문제인식
회사의 서비스가 글로벌 시장 진출을 준비하면서 국제화(internationalization, i18n)를 준비하게 되었다.
국제화에는 여러 지원이 포함되지만, 가장 우선시해야 하는 것 중 하나인 언어 대응을 준비하게 되었는데, 기존 방식이 비효율적이고 생산성이 떨어지는 방식으로 되어있었다. 즉, 아래와 같은 문제점들을 도출하였고 이를 개선할 수 있는 방안을 고안하게 되었다.
Problems (기존 방식의 문제점 도출)
현재 방식: 수작업 및 엑셀/Jenkins 사용한 부분 자동화 방식
- 개발자/기획자/번역가 등 여러 단계를 거치며 휴먼 에러 발생 가능성 높음
- 파일 이력/버전 관리의 어려움
- 비개발자와의 협업의 어려움
- 개발자의 생산성 저하
해결 방안 도출
1. 기존 상태에서 필요한 것들
1) 유지할 것: 기존에 리액트와 i18next를 사용해서 국제화를 적용하고 있었고, i18next는 국제화 적용에서 많이 사용되는 framework였기에 이는 유지하기로 했다.
2) 추가가 필요한 부분
- 소스코드에서 국제화에 사용되는 key 자동 스캔 필요
- 비개발자와 협업하기 좋은 도구 선정 필요 (비개발자도 쉽게 사용할 수 있는 도구)
- 위의 두 항목을 자동으로 연동시켜주는 도구 필요
2. 무엇을 도입할 것인가?
새로 도입할 기술을 무엇으로 해야할지는 역시 구글링을 통해 많은 사람들이 먼저 도입한 방법을 검토해보기로 했고, 그 중 아래의 도구들을 우선 선정해서 초기 도입 테스트를 완료했다.
1) key 스캔
i18next-parser, i18next-scanner 등의 라이브러리가 있다. 심지어 i18next 공식문서에서도 키를 추출하는 다양한 방법을 소개하고 있다. (해당 문서에서는 runtime에 추출하는 방법도 소개하고 있으니 상황에 따라 방법을 선택하면 되겠다.)
- i18next-scanner를 선택했다.
- 이유: 일단 참고했던 글이 scanner를 쓰고 있어서 먼저 써보게 됐다. i18next가 JSON format을 v4을 사용하게 되면서 복수형 표현에 대한 기준이 달라졌으나 i18next-scanner에서 v3만 지원하는 이슈가 있었으나 해당 이슈가 해결 되어서 변경없이 사용하게 되었다.
2) 비개발자와 협업하기 쉬우면서도 자동화가 가능한 도구
- 비개발자와의 협업도구로는 구글 시트를 사용했고, 자동화를 도와주는 라이브러리로 Google-spreadsheet를 사용하게 되었다.
- 이유:
- 구글 시트는 비개발자가 쉽게 접근해서 작성할 수 있으며, 협업이나 이력 관리가 간편해진다는 큰 장점이 있었고, 더불어 구글에서 제공해는 api를 사용하면 쉽게 자동화 할 수 있다는 장점이 있었다.
- google-spreadsheet는 JS/TS 생태계에서 가장 유명한 Google Sheet API wrapper중 하나로써, auth관리, 셀/행 기준 api, 워크시트나 문서 관리 등을 보다 쉽게 할 수 있게 해준다는 장점이 있어서 사용하게 되었다.
3. 적용 방법 요약
- 간략하게 적용방법을 요약한 이후 세세한 내용은 별도로 살펴보도록 하겠다.
1) i18next를 먼저 적용한다.
- 이때, 기본 설정을 관리할 파일을 작성하고, 최상위 진입점에서 해당 파일을 import해서 전역에서 사용할 수 있도록 한다.
- 프로젝트에 맞게 locales 파일/폴더 등을 생성한다.
- 사용할 곳에서 i18next의 useTranslation 훅을 사용해서 key값을 입력한다.
2) i18next-scanner로 key 스캔하기
- config 파일을 작성하고, script를 통해 실행한다.
3) 구글 시트 upload/download 자동화 하기
- 구글 시트 계정 설정하고, upload/download 로직을 작성한다.
- 번역가가 구글 시트에서 key에 맞게 번역 작업을 해주면, 이를 다운로드하여 적용하면 끝!
요약하자면 간단(?)한데, 세세한 방법들은 다음 글에서 이어서 쓰는 것으로 하겠다.
Ref.
'React' 카테고리의 다른 글
| i18next-react와 Google Sheets를 활용한 국제화(i18n) 자동화 도입기(2) - i18next적용하기(namespace 구분하기) (3) | 2024.10.27 |
|---|---|
| [원티드 챌린지] 리액트 테스트와 최적화 (0) | 2023.07.26 |
댓글