i18n 다국어 적용하기

서버가 아닌 프론트에서 다국어를 처리해야 한다면?

유지보수의 어려움

• 어떤 JSON 파일에 해당 문구가 저장되어 있는지 알기 어렵다.

• 유지보수 시 하나하나 검색해가며 수정해야 한다.

• 전체적인 구조가 명확하지 않다.

지원 언어

번역은 GPT를 활용해 초기 세팅하고, 실제 서비스 반영 전에는 반드시 검수하는 프로세스를 거치기로 했습니다 사내에 ㅋㅋ 번역가가 없기에

import login from '@/i18n/language/de/login.json';
import workMapAdd from '@/i18n/language/de/work-map-add.json';
import workArea from '@/i18n/language/de/work-area.json';
import tool from '@/i18n/language/de/tool.json';
import image from '@/i18n/language/de/image.json';
import process from '@/i18n/language/de/process.json';
import product from '@/i18n/language/de/product.json';
import common from '@/i18n/language/de/common.json';

import { mergeModules } from '@/i18n/utils/mergeModules';

const merged = mergeModules([
    login,
    workMapAdd,
    workArea,
    tool,
    image,
    process,
    product,
    common,
]);

export default merged;

// src/i18n/utils/mergeModules.ts
type AnyObject = Record<string, any>;

/**
 * 같은 최상위 키가 있으면 객체를 병합하고,
 * 그렇지 않으면 그냥 덮어쓰도록한다.
 */
export function mergeModules(modules: AnyObject[]): AnyObject {
    return modules.reduce((acc, mod) => {
        Object.entries(mod)
            .forEach(([key, val]) => {
            // val이 객체라면(acc[key]도 객체면) 병합, 아니면 대체
                if (
                    typeof val === 'object'
                    && val !== null
                    && !Array.isArray(val)
                    && typeof acc[key] === 'object'
                    && acc[key] !== null
                ) {
                    acc[key] = { ...acc[key],
                        ...val };
                } else {
                    acc[key] = val;
                }
            });
        return acc;
    }, {} as AnyObject);
}

• 가독성: 기능별로 나누고 키 네이밍을 명확하게 하니, 유지보수가 쉬워졌다. 일단 부사수의 아이디어로 동일하게 생각했던 부분에 table, required등으로 공통으로 사용할 수 있는 부분을 통합하기 위해 함수를짯고 그러면서 균일하게 사용할 수 있도록 하였다.

• 재사용성: 동일한 키("button.addImage", "table.imageName" 등)를 다른 화면에서도 재사용할 수 있도록 common으로 재사용성을 주었다.

• 자동화 용이: 언어 추가 시 기존 구조를 그대로 복사해서 번역만 교체하면 되므로, 로컬라이징 작업이 훨씬 수월하게 되었다.

{
    "title": {
        "workImageList": "Arbeitsbildliste"
    },
    "button": {
        "addImage": "Arbeitsbild hinzufügen"
    },
    "modalTitle": {
        "addImage": "Arbeitsbild hinzufügen",
        "editImage": "Arbeitsbild bearbeiten"
    },
    "confirm": {
        "addImage": "Möchten Sie das Arbeitsbild registrieren?",
        "editImage": "Möchten Sie das Arbeitsbild bearbeiten?"
    },
    "infoText": {
        "addImage": "Arbeitsbild wird hinzugefügt.",
        "editImage": "Arbeitsbild wird bearbeitet."
    },
    "placeholder": {
        "imageName": "Bildnamen eingeben"
    },
    "message": {
        "noWorkImage": "Es wurden keine Arbeitsbilder registriert."
    },
    "table": {
        "imageName": "Bildname",
        "previewImage": "IMG",
        "uploadImage": "Bild hochladen"
    },
    "required": {
        "image": "Arbeitsbild ist ein Pflichtfeld."
    },
    "validation": {
        "remarks": "Bitte geben Sie die Bemerkungen mit maximal 20 Zeichen ein."
    }
}

• 어디서 어떤 키를 쓰고 있는지 확인하기 어렵고,

• 존재하지 않는 키를 실수로 작성해도 즉각적인 피드백이 없으며,

• 새로 추가한 번역 키가 실제 적용되었는지 일일이 확인해야 하는 상황이 반복됐다.

그래서 선택한 도구: i18n Ally

1. 실시간 번역 키 미리보기

👉 유지보수 시 오타나 누락된 키를 빠르게 파악할 수 있는 큰 장점

2. 사용되지 않는 키, 누락된 키 자동 탐지

• 사용하지 않는 키 감지

• 번역 누락 키 하이라이트

• 실시간 번역 파일 간 비교 (예: ko에는 있지만 en에는 없는 키)

3. 다국어 JSON 구조 시각화

기능별로 분리된 다국어 JSON 파일을 트리 구조로 시각적으로 탐색할 수 있어서, 번역 파일을 일일이 열지 않고도 원하는 항목을 쉽게 찾을 수 있었다.

 

4. 새로운 키 생성 시 자동 삽입