다국어 지원 서비스 자동화로 리소스 최소화하기(+구글 스프레드 시트, i18next)

정수현·2023년 10월 30일

다국어 지원이 필요한 서비스를 개발하게 되어 자료를 찾다가 i18next라는 라이브러리를 발견했다.

i18next란?

자바스크립트를 위해 작성된 국제화 프레임워크이다.

i18next 설치

# npm
$ npm install i18next --save

# yarn
$ yarn add i18next

i18next 사용법

나는 예시로 한국어, 영어, 이탈리아어를 지원하는 서비스를 개발해보려고 한다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    resources: {
      en: {
        translation: {
          안녕하세요: 'hello',
          감사합니다: 'thank you',
        },
      },
      ko: {
        translation: {
          안녕하세요: '안녕',
          감사합니다: '감사합니다',
        },
      },
      it: {
        translation: {
          안녕하세요: 'Ciao',
          감사합니다: 'Grazie',
        },
      },
    },
    fallbackLng: 'ko',
  });

export default i18n;

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <select onChange={(e) => changeLanguage(e.target.value)}>
        <option value='ko'>한국어</option>
        <option value='en'>English</option>
        <option value='it'>Italiano</option>
      </select>

      <div>{t('안녕하세요')}</div>
      <div>{t('감사합니다')}</div>
    </div>
  );
}

export default App;

LanguageDetector: 브라우저에서 사용자 언어를 감지하는 데 사용하는 i18next 언어 감지 플러그인
- 설치
```
# npm package
$ npm install i18next-browser-languagedetector
```
- npm-i18next-browser-languagedetector

결과는 다음과 같다.

구글 스프레드 시트의 GOOGLETRANSLATE 함수 사용

단어나 문장 하나하나 번역기를 돌려서 json 파일에 넣기엔 너무 노가다이다.

구글 스프레드 시트의 팡션 GOOGLETRANSLATE 함수를 사용해 리소스를 아껴보자.

구글 번역기이기 때문에 많은 언어들을 지원하며 변환할 단어 한 번만 입력하면 설정한 도착어에 따라 촤라락 번역이 완료된다.

도메인과 밀접한 내용들은 추가적인 수정이 필요하긴 하겠지만 번역가가 따로 없는 환경에서 번역에 대한 시간과 비용을 최소한으로 줄일 수 있는 방법이라고 생각했다.

다음과 같이 간단하게 함수를 사용해었고, 가독성을 위해 페이지 별로 시트를 분리해주었다.

구글 스프레드 시트 API 사용하여 동기화

위에서 작업한 시트를 엑셀이나 csv 파일로 다운로드 받아 파싱하여 json 파일로 생성하여 삽입해도 되지만, 구글 스프레드 시트의 이점을 최대한 살려보려고 한다.

구글 스프레드 시트 api를 사용하여 온라인 상에 존재하는 실시간 데이터를 반영하여 새로운 번역 데이터를 추가하더라도 추가적인 코드 작업이나 수작업 다운로드 공수 없이 반영될 수 있도록 하고 싶었다. 또한 기획이나 디자인에서 번역 관련 워딩에 대한 수정 요청이 들어왔을 때 개발자 외의 직군의 사람들도 이 공통의 스프레드 시트에 접근하여 수정하면 반영할 수 있다는 이점도 있다.

읽기 권한만 필요하므로 서비스 계정을 만들지 않고 API 키만 생성해서 사용할 것이다. 스프레드 시트를 읽고, 쓰기(read, write)하기 위해서는 서비스 계정을 생성해야 한다.

구글 클라우드 콘솔에서 새 프로젝트 생성

사용 가능한 api 및 서비스 사용 설정

api 라이브러리에서 Google Sheets API 검색 후 사용 설정

API 및 서비스 > 사용자 인증정보 > + 사용자 인증정보 만들기 > API 키

(선택)API 키 수정 > API 제한 사항 Google Sheets API 설정
API Key 복사하여 .env 에 저장하여 보호

json 파일 생성하는 코드 작성

이제 구글 스프레드 시트에 있는 번역 내용을 받아와 translation resources가 될 json 파일로 생성하는 스크립트를 작성해보자.

scripts/download.js

import fs from 'fs';
import { GoogleSpreadsheet } from 'google-spreadsheet';
import dotenv from 'dotenv';

dotenv.config(); // 환경변수를 사용하기 위해 설정

(async function makeJson() {
  const doc = new GoogleSpreadsheet(process.env.SHEET_ID, {
    apiKey: process.env.VITE_GOOGLE_API_KEY,
  });

  await doc.loadInfo();

  const sheets = doc.sheetCount; // 순회를 위해 시트의 개수를 저장한다.

  for (let i = 0; i < sheets; i++) {
    const sheet = doc.sheetsByIndex[i];
    await sheet.loadCells();
    const rows = await sheet.getRows();
    const langs = await sheet._headerValues; // header에 있는 번역 도착어 ['ko', 'en', 'it']

    const jsonData = {}; // 빈 객체 생성

    langs.forEach((language, index) => {
      for (let j = 1; j < rows.length; j++) {
        jsonData[sheet.getCell(j, 0).value] = sheet.getCell(j, index).value;
      }

      const jsonString = JSON.stringify(jsonData, null, 2);

      // JSON 파일 생성
      fs.writeFileSync(
        `./src/locales/${language}/${sheet.title}.json`,
        jsonString
      );
    });
  }
})();