i18n 다국어를 적용하며 VSCode i18n-ally로 관리 쉽게 하기

다국어(i18n) 지원이 필요한 프로젝트를 진행하다 보면, 키 값만으로 번역을 관리하는 것이 점점 불편해집니다.

예를 들어, 아래 코드에서
welcome_message가 실제로 어떤 한국어 문장인지 바로 알기 어렵습니다.

이 글에서는 VSCode i18n-ally 플러그인을 이용해 번역 키를 직관적으로 관리하는 방법을 소개합니다.

i18n-ally란?

i18n-ally는 Visual Studio Code에서 i18n 번역 관리 기능을 제공하는 확장 프로그램입니다.

주요 기능은 다음과 같습니다.

• 번역 키 실시간 툴팁
• 키 자동 완성
• 미사용 번역 키 탐지
• JSON, YAML, JS/TS, PO 등 다양한 번역 파일 형식 지원

이 플러그인을 사용하면, 번역 파일을 열지 않아도 키에 해당하는 실제 번역 문장을 바로 확인할 수 있습니다.

.vscode/settings.json을 활용한 간단 설정

모노레포 환경에서 번역 파일이 여러 경로에 흩어져 있다면,
.vscode/settings.json에 다음과 같이 설정하여 모든 번역 파일을 한 번에 인식하도록 할 수 있습니다.

{
    "i18n-ally.enabled": true,
    "i18n-ally.enabledFrameworks": ["react", "next", "nest"], // 현재 사용하는 프레임워크 추가
    "i18n-ally.localesPaths": ["apps/frontend/locales", "apps/backend/locales", "packages/shared/locales"], // 다국어 파일의 경로
    "i18n-ally.sourceLanguage": "en",
    "i18n-ally.displayLanguage": "ko",
    "i18n-ally.keystyle": "nested",
    "i18n-ally.sortKeys": true
}

팁

• .vscode/settings.json은 프로젝트 루트 폴더에 위치해야 합니다.
• Git에 포함시키면 팀원 모두 동일한 설정을 공유할 수 있습니다.
• VSCode에서 반드시 루트 디렉토리를 열어야 플러그인이 정상 동작합니다.

적용 후 모습

설정을 마치면, 아래처럼 코드에 마우스를 올렸을 때 번역 키의 실제 문장을 툴팁으로 바로 확인할 수 있습니다.

또한 코드 작성 중에도 키 자동 완성과 번역 미리보기 기능을 이용해
오타를 줄이고 생산성을 높일 수 있습니다.

정리

• i18n-ally를 사용하면 번역 키와 실제 문장을 바로 매칭해 볼 수 있어 번역 관리가 훨씬 쉬워집니다.
• .vscode/settings.json에 경로를 지정하면 모노레포 구조에서도 문제없이 사용할 수 있습니다.
• 협업 시에도 동일 설정을 공유할 수 있어, 팀 전체 번역 작업 효율이 높아집니다.