서비스 다국어화: Google Sheets 로 자동화하기

도입 계기

문구 수정

다국어 지원

// ko.json
{
    "key": "텍스트",
		"flamel": "최고의 이미지 생성 서비스"
}


// sample.tsx
<div>
	<p>{i18next.t('flamel')}</p> 
	<p>최고의 이미지 생성 서비스</p>
</div>

1. 프론트엔드 개발자가 스프레드 시트에 번역이 필요한 텍스트들의 key를 기입

2. 번역 담당자가 key에 해당하는 텍스트 및 번역을 기입

3. 프론트엔드 개발자가 스프레드 시트를 다운받아, 언어 별 json 파일로 정제

자바스크립트를 이용한 자동화

패키지 설치

npm install -S i18next                          // 작성 당시 버전 23.4.6
npm install -S i18next-parser                   // 작성 당시 버전 8.12.0
npm install -S google-spreadsheet               // 작성 당시 버전 4.1.1

환경 설정

스크립트 추가

// package.json

"scan:i18n": "i18next 'src/**/*.tsx' 'src/**/*.ts' ",
"upload:i18n": "npm run scan:i18n && node translate/upload.js",
"download:i18n": "node translate/download.js",
"build": "tsc && npm run download:i18n && vite build --logLevel error"

구글 스프레드 시트 설정

// Flamel-IAM.sjon

{
  "type": "service_account",
  "project_id": "...",
  "private_key_id": "...",
  "private_key": "-----BEGIN PRIVATE KEY-----...-----END PRIVATE KEY-----\n",
  "client_email": "...",
  "client_id": "...",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "...",
  "universe_domain": "googleapis.com"
}

// translate/index.js

import { JWT } from "google-auth-library";
import creds from "./credentials/Flamel-IAM.json" with { type: "json" };

const SCOPES = [
  'https://www.googleapis.com/auth/spreadsheets',
  'https://www.googleapis.com/auth/drive.file',
];

const jwt = new JWT({
  email: creds.client_email,
  key: creds.private_key,
  scopes: SCOPES,
});

async function loadSpreadsheet() {
  // eslint-disable-next-line no-console
  console.info(
    "\u001B[32m",
    "=====================================================================================================================\n",
    "# i18next auto-sync using Spreadsheet\n\n",
    "  * Download translation resources from Spreadsheet and make /assets/locales/{{lng}}/{{ns}}.json\n",
    "  * Upload translation resources to Spreadsheet.\n\n",
    `The Spreadsheet for translation is here (\u001B[34mhttps://docs.google.com/spreadsheets/d/${spreadsheetDocId}/#gid=${sheetId}\u001B[0m)\n`,
    "=====================================================================================================================",
    "\u001B[0m"
  );

  // spreadsheet key is the long id in the sheets URL
  const doc = new GoogleSpreadsheet(spreadsheetDocId, jwt);

  await doc.loadInfo(); // loads document properties and worksheets

  return doc;
}

언어 자동 감지

npm install -S i18next-browser-languagedetector        // 작성 당시 버전 7.2.0

i18next 사용하기

export function initializeI18next() {
  return i18next
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
      detection: { order: ["path", "navigator"] },
      debug: process.env.NODE_ENV !== "production",
      fallbackLng: "ko-KR",
      nonExplicitSupportedLngs: true,
      supportedLngs: ["ko", "en"],
      keySeparator: false,
      nsSeparator: false,
      parseMissingKeyHandler(key) {
        /* eslint-disable-next-line no-console */
        // console.warn("parseMissingKeyHandler", `'key': '${key}'`);
        const keySeparator = "~~";
        const value = key.includes(keySeparator)
          ? key.split(keySeparator)[1]
          : key;

        return value;
      },
      resources: getResources(lngs)
    });
}

export const i18n = i18next;

// main.tsx
import { i18n, initializeI18next } from "translate/i18next";

initializeI18next()
  .then(() => {
    console.log("init i18n", i18n.language);
    ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
      <App />
    );
  })
  .catch(console.error);

interpolation

i18next.init({
	...
	interpolation: {
        prefix: "%{",
        suffix: "}"
  },
  ...
})

HTML 지원

i18next.init({
	...
	react: {
    transKeepBasicHtmlNodesFor: [
      "br",
      "strong",
      "i",
      "p",
      "s",
      "b",
      "a",
      "small"
    ]
  },
  ...
})

/** ko-KR.json
	{ 
		...
		StyleClipModalTitle: "<strong>내 스타일</strong>에 저장할까요?" 
		...
	}
*/

<p className="text-balance text-start text-[22px] leading-[160%] [&>strong]:font-bold [&>strong]:text-flamel-purple-700">
  <Trans i18nKey="StyleClipModalTitle" />
</p>

번역 파일 자동 동기화

결론