들어가며
플러스티브이도 해외 시장을 진출하기 위해서 디지털 사이니지 관리 도구의 영문 버전이 필요하다는 요구 사항이 들어왔습니다. 리액트 앱에서 다국어를 지원하기 위해 어떤 라이브러리가 있는지 찾아도 보고 앱에서 표시되는 문자열을 어떻게 번역해야 할 지 고민도 했습니다. 🤔
결과적으로 다국어 지원 작업을 잘 마무리 할 수 있었고, 이 글을 통해서 다국어 지원을 고려하고 계신 분들을 위해 플러스티브이의 경험담(삽질)을 공유하고자 합니다 :)
라이브러리 선택
우선 다국어 지원을 위한 라이브러리가 어떤게 있는지 조사했습니다. 검색 결과, react-intl, react-i18next 그리고 LinguiJS라는 라이브러리들을 찾을 수 있었습니다.
라이브러리를 선택을 해야 할 때 참고하기 좋은 지표로 npm trends가 있습니다. 라이브러리(패키지)끼리 비교를 해서 어떤게 요즘 더 잘나가고 핫🔥 한지 한 눈에 확인할 수 있습니다.
다국어 작업이 어느정도 진행 된 상태에서는 라이브러리를 변경하는 것이 쉽지 않습니다. 다국어 작업을 진행하게 되면, 코드의 일정 부분이 선택한 다국어 라이브러리와 높은 결합을 보여주기 때문에 신중하게 선택해야 합니다.
이 글의 제목이 알려주는 것처럼, 제가 선택한 라이브러리는 LinguiJS 입니다. 상대적으로 전체적인 사용자 수와 GitHub Star 갯수가 낮고 열려있는 이슈도 많은데 왜 LinguiJS를 선택했을까요?
LinguiJS의 장점
첫번째, LinguiJS의 CLI의 기능 중, 전체 소스 코드에서 번역 할 문자열을 자동으로 추출 해 주는extract 라는 기능이 있습니다. 다른 라이브러리를 사용하면 이 작업을 수행하기 위해 별도로 구성해야 하지만 LinguiJS를 사용하면 바로 사용할 수 있습니다.
두번째, 자동으로 추출되어 나온 문자열들은 Gettext 파일(.po)로 생성됩니다. JSON 파일보다 읽고 쓰기 쉬워서, 플러스티브이의 영잘알 기획자(👍) 님과의 협업이 쉬웠습니다.
세번째, 대부분의 문자열의 경우 Trans 컴포넌트로 감싸주면 됩니다. 이 컴포넌트는 입력한 내용을 메세지 카탈로그 내에서 사용하는 키(key, msgid)로 변경 해 주는 바벨 매크로라서 실제로는 유효한 id 값을 사용하는 방식으로 변환됩니다.
번역 할 때 힘들었던 점
소스 코드 내에 존재하는 모든 문자열을 Trans로 감싸고 난 뒤, 본격적으로 번역을 진행하였고, 번역하는 작업이 라이브러리를 선택하고 소스 코드 내에 적용하는 작업보다 몇 배는 더 힘든 작업이었습니다. 😢
번역할 때 힘들었던 점 몇가지를 공유 해 드리자면:
- 번역을 어디서부터 시작해야 할 지 감이 잘 안잡혔습니다. 추출된 문자열을 위에서부터 아래로 순서대로 번역을 할지 아니면 사용자 흐름(User Flow)대로 진행할지… 저는 전자를 택한 다음, 사용자 흐름대로 진행하면서 어색한 문장을 수정하는 방향으로 진행했습니다.
- 복수형(Plural)을 고려해야 합니다. 특히 한국어로 문장을 쓸 때는 복수형을 고려해서 작성하지 않다보니 일반 문자열처럼 번역하는 일도 있었습니다. 라이브러리 차원에서 Plural 관련 기능이 있기 때문에 번역해야 하는 문장에 따라서 적극적으로 활용하세요.
- 컴포넌트와 달리, 자주 사용되는 단어가 있다고 해서 재활용이 되지는 않더라구요. 여기에 위에서 말한 복수형 이슈가 결합하면… 🤦♂💥 가급적 번역은 문장 단위로 진행되어야 합니다.
- 사용자가 어떤 컨텍스트를 갖고 이 문장을 읽을 지 고려해야 합니다. 추출된 문자열만 생각하면 완전한 형태의 문장으로 번역 할 가능성이 있습니다. 예를 들어, “방금 스크린을 추가하려고 입력하신 코드는 누군가 사용중인 코드 입니다.” 처럼 컨텍스트까지 포함된 완전한 문장 보다는 “이미 사용중인 코드입니다.” 라고 표현하는게 더 자연스러운 것 처럼요.
그 외 힘들었던 점은 역시 압도적으로 많은 번역량이 아닐까 싶습니다. 😫
만약 다국어를 지원 할 계획이 잠깐이라도 떠오르셨다면, 아무래도 코드 규모가 작을 때 미리 진행하는게 나중에도 쉽게 관리할 수 있도록 설계를 진행할 수 있을 것 같습니다. 앞으로 신규 프로젝트를 진행하게 된다면 당장 한국어만 표시하더라도 다국어 작업을 미리 해 둘 것 같습니다.
번역할 때 도움이 되었던 앱
마지막으로, 이번 작업을 할 때 도움이 되었던 앱들을 소개합니다.
POEdit
POEdit은 Gettext 파일(.po)를 열어서 원본 문자열과 번역할 문자열 쌍을 한 눈에 보고 편집할 수 있는 애플리케이션입니다. Pro 버전에서는 원본 문자열에 대해 번역을 제안해 주는 기능이 있습니다. 무료 버전에서 제한적으로 사용해 볼 수 있습니다.
POEditor
POEditor는 번역을 협업해서 할 수 있는 (웹)앱입니다. 기존에 있는 .po 파일을 업로드해서 관리할 수 있습니다. 번역을 진행 할 때 두 명 이상 인원이 같이 한다면 사용 해 보는것도 좋을 것 같습니다. 참고로 최대 1,000개 문장까지 무료로 기계 번역을 해 주는 기능이 있습니다 👍
마치며
다국어 기능을 작업하면서 느낀 점은 하나의 기능을 두고 한국어로 읽을 때와 영어로 읽을 때 느낌이 다르다는 사실과, 올바른 문장과 단어를 전달하는 것도 사용자 경험에 직접적인 관련이 있다는 것을 알게 되었습니다. 부디 이 작업이 플러스티브이의 해외 시장 진출에 좋은 결과를 가져다 주었으면 좋겠습니다. 읽어주셔서 감사합니다!
아, 그리고 현재 플러스티브이는 채용중입니다! 많은 관심 부탁드립니다.
