무신사, i18next로 글로벌 서비스의 번역 시스템을 혁신하다!

무신사 글로벌 프론트엔드 팀은 i18next를 다국어 시스템의 핵심 라이브러리로 선택했다. useTranslation 훅(Hook)을 통해 컴포넌트에서 번역을 쉽게 사용할 수 있으며, 네임스페이스(Namespace)를 활용하여 기능별 번역 파일 분리가 가능하다.

이러한 유연성은 모노레포 환경에서 각 앱(App)이 필요한 번역만 로드하도록 하여 번들 사이즈(Bundle Size) 최적화에 기여한다.

무신사는 Lokalise TMS(Translation Management System)를 활용하여 번역 관리 워크플로우를 자동화했다. Lokalise는 개발자와 번역가 간의 협업을 돕는 플랫폼으로, 웹 기반 에디터에서 번역 작업이 이루어진다. GitHub, S3, Slack 등 써드파티 앱과의 연동을 지원하며, 무신사는 슬랙 알림을 통해 번역 변경 사항을 확인한다.

이러한 자동화는 번역 작업의 효율성을 높이고, 개발 생산성(Development Productivity) 향상에 기여한다.

무신사 글로벌 프론트엔드 팀은 모노레포 환경에 적합하도록 i18n 패키지를 여러 번 리팩토링했다. 초기에는 모든 번역을 한꺼번에 로드하는 방식으로 시작했으나, 번들 사이즈(Bundle Size) 증가 문제를 겪었다. 이후 동적 import를 도입하여 앱별 번역을 분리하고, 불필요한 언어 제거, VITE_LANG 환경 변수를 활용한 언어별 빌드 등 다양한 최적화를 시도했다.

결과적으로 총 741KB 절감, 네트워크 로딩 시간 최대 800ms 감소의 효과를 얻었다.

무신사 글로벌 프론트엔드 팀은 번역 키 관리의 효율성을 높이기 위해 정적 분석(Static Analysis) 기반의 번역 키 자동 추출 시스템을 구축했다. i18next의 saveMissing: true 옵션을 사용하면 누락된 키를 감지할 수 있지만, 빌드 단계에서 미리 감지하기 위해 자체적인 스크립트를 개발했다. 이 스크립트는 정규 표현식(Regular Expression)을 사용하여 코드 내에서 사용된 번역 키를 추출하고, 번역 파일과의 일관성을 검사한다.

이러한 시스템은 개발 과정에서 발생할 수 있는 번역 오류를 줄이고, 유지보수성(Maintainability) 향상에 기여한다.

무신사 글로벌 프론트엔드 팀은 i18n 시스템의 지속적인 개선을 위해 다양한 계획을 가지고 있다. 현재는 t('wrong.key')와 같이 잘못된 키를 사용해도 컴파일 에러가 발생하지 않지만, i18next v21+의 i18next.d.ts를 활용하여 타입 안전성을 확보할 예정이다. 또한, S3 기반의 동적 로딩을 통해 번역 업데이트 시 코드 배포 없이 즉시 반영될 수 있도록 개선할 계획이다.

이러한 계획들은 개발 생산성(Development Productivity) 향상과 사용자 경험(User Experience) 개선에 기여할 것이다.