i18next와 Google API를 활용한 다국어 관리 시스템 구축

현대 웹 애플리케이션에서 다국어 지원은 필수적인 요소로 자리 잡고 있습니다. 특히 글로벌 사용자 기반을 타겟으로 하는 프로젝트라면 효율적인 다국어 관리가 더욱 중요합니다. 이 글에서는 i18next와 Google API를 활용해 구글 스프레드시트를 기반으로 다국어 관리 시스템을 구축하는 방법을 소개합니다.

시스템 개요

이 시스템은 다음과 같은 과정을 통해 다국어 데이터를 관리합니다:

JSON 기반 번역 데이터 관리:
번역 데이터를 translation.json 파일로 관리.
구글 스프레드시트와 동기화:
Google Sheets API를 사용해 JSON 데이터를 스프레드시트로 업로드/다운로드.
자동 번역 및 수동 수정:
구글 스프레드시트에서 Google Translate 함수를 활용한 자동 번역.
React와 i18next 연동:
– React 애플리케이션에서 다국어 데이터를 활용해 UI에 적용.

구축 단계

1. 번역 데이터 파일 구조

*다국어 데이터는 JSON 형식으로 관리됩니다.

2. 폴더 구조

📂src
 ┣📂i18n
 ┃ ┣ 📂locales
 ┃ ┃ ┣ 📂en
 ┃ ┃ ┃ ┗ 📜translation.json
 ┃ ┃ ┗ 📂ko
 ┃ ┃ ┃ ┗ 📜translation.json
 ┃ ┗ 📜i18n.js
 ┣ 📂components
...
📂translate
 ┣ 📂.credentials
 ┃ ┣ 📜index.js
 ┃ ┗ 📜{{사용자 API 키.json파일}} => bizspring-gp-6497d18b5110.json
 ┣ 📜download.js
 ┣ 📜index.js
 ┗ 📜upload.js
...
📜i18next-scanner.config.js
📜package.json
...

3. Google Sheets API 설정

Google Sheets API를 통해 JSON 데이터를 스프레드시트로 업로드하고 다운로드할 수 있습니다.

Google Cloud Platform 설정:
– Google Cloud Console에서 프로젝트 생성.
– Sheets API와 Drive API를 활성화.
– 서비스 계정 생성 후 JSON 키 파일 다운로드.
API 키 파일 저장:
– JSON 키 파일을 프로젝트의 .credentials 디렉토리에 저장.

4. 스프레드시트 동기화 스크립트

upload.js와 download.js 스크립트를 작성하여 스프레드시트와 JSON 데이터를 동기화합니다.

예시: upload.js

const { google } = require('googleapis');
const sheets = google.sheets('v4');

async function uploadTranslations() {
  const auth = new google.auth.GoogleAuth({
    keyFile: './.credentials/your-api-key.json',
    scopes: ['<https://www.googleapis.com/auth/spreadsheets>']
  });

  const client = await auth.getClient();
  const spreadsheetId = 'your-spreadsheet-id';

  const translations = require('./locales/en/translation.json');
  const rows = Object.entries(translations).map(([key, value]) => [key, value]);

  await sheets.spreadsheets.values.update({
    auth: client,
    spreadsheetId,
    range: 'Sheet1!A:B',
    valueInputOption: 'RAW',
    requestBody: {
      values: rows
    }
  });

  console.log('Upload complete');
}

uploadTranslations();

5. 자동 번역 처리

Google 스프레드시트에서 Google Translate 함수를 사용하여 번역을 자동화합니다:

=GOOGLETRANSLATE(A2, "en", "ko")

오번역된 항목은 수동으로 수정.

6. React에서 i18next 연동

React 애플리케이션에서 i18next를 활용해 번역 데이터를 UI에 적용합니다.

i18next 설정 파일 (`i18n.js`)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationEN from './locales/en/translation.json';
import translationKO from './locales/ko/translation.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: translationEN },
    ko: { translation: translationKO }
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false }
});

export default i18n;

컴포넌트에서 사용 예시

import { useTranslation, Trans } from 'react-i18next';

const ExampleComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>
        <Trans i18nKey='네이버 IP 차단 관리는 <a href="<https://growthplatform.ai/front/view/8000/8000001>" target="_blank" rel="noreferrer">[매니저콘솔 > 매체 연결 관리]</a>에서 네이버 계정 연동을 해야 설정이 가능합니다.' components={{
          a: <a href="<https://growthplatform.ai/front/view/8000/8000001>" target="_blank" rel="noreferrer" />
        }}/>
      </p>
    </div>
  );
};

export default ExampleComponent;

구축 결과

이 시스템을 통해

다국어 데이터를 Google Sheets에서 손쉽게 관리.
자동 번역과 수동 수정의 균형을 통해 번역 효율성 향상.
React 애플리케이션에 다국어 데이터를 효율적으로 적용 가능.

결론 및 향후 개선 사항

이 다국어 관리 시스템은 JSON 파일과 Google Sheets를 기반으로 간단하고 확장 가능한 워크플로우를 제공합니다.

향후 개선 사항:

고급 기능 활용
– i18next의 namespace를 사용해 대규모 프로젝트에서 번역 데이터를 더 체계적으로 관리.
– 번역 키 동적 생성 및 컴포넌트 분리.
다국어 관리 도구 비교
– POEditor, PhraseApp 같은 전문 도구를 평가하고 도입 가능성 검토.
번역 품질 개선
– AI 번역 도구(GPT 기반 번역)와의 연계.
– QA 프로세스를 추가하여 번역 품질 향상.

이를 통해 다국어 지원의 효율성과 품질을 한 단계 더 높일 수 있을 것입니다.