로컬라이징 (지역화) 구글 스프레드 시트로 자동화하기

개요

로컬라이징(이하 "지역화")에 드는 소요는 작업의 복잡도와는 별개로 상당히 번거롭고, 소통이 어려운 부분이라 느껴 이글을 작성하게 됐습니다.

다른 프로젝트 혹은 후에 있을 개발상에 비용과 시간을 단축시키기위해 더 나은방법이 있을지 고민해본 점에 관한 글입니다.

개념적으로도 그리 복잡하지 않은 방법이고 구현도 그렇게 어렵지 않기에 프론트엔드 개발자가 아니시더라도 번역과정을 이해하기위해 한번씩 읽어보셨으면 좋겠습니다.

그동안 사용했던 일반적인 방법

현재 진행하고있는 프로젝트에서 이루어지는 지역화는

useTranslate()라는 hook(함수)에 한글 텍스트를 넣어 사용자의 언어 설정에 따라 번역된 텍스트를 리턴하는 함수를 사용합니다.

위의 과정에서 필수적으로 필요한 요소들은 입력받는 텍스트와 매칭되는 각 언어별 텍스트 인데,

이것을 각각의 json (혹은 js에서의 object) 에서 불러오는 방식을 이용하고 있습니다.

en.json

{
    "원본 텍스트" : "번역될 텍스트",
    "커뮤니티" : "Communiy",
    "스토어" : "Store"
}

위의 예시처럼 en.json(영어), jp.json(일본어) 등등이 존재해야 하기 때문에 각각의 json 객체를 생성하는데

(번역해야할 텍스트 * 지원해야할 언어의 갯수) 회 반복해서 Copy-Paste 해야하는 상당한 시간이 들었었습니다.

또한 자동완성의 지원을 받을 수도 없어 실수가 나올 수도 있다는 점이 개발시간을 늘어지게 했습니다.

( 키값을 변수화 시켜 한곳에 저장시키고 변수를 import 받는 방식을 이용했지만 다른 문제점도 있어 이 글에서는 다루지 않겠습니다. )

구상

위에서 언급한 각각의 언어를 담고있는 json을 만들기 위해 제가 참고했던것은 구글 스프레드 시트였는데

이전에 데이터 테이블을 excel로 저장하는 기능을 만들어 봤었던게 기억나

스프레드 시트로부터 한글 문구를 추출해 영, 일, 중 의 json을 만드는건 어렵지 않겠다 싶어 해당 방법을 이용해보기로 했습니다.

준비

먼저 이용중인 스프레드시트에 접근할 수 있는 bot을 만들기 위해 클라우드 콘솔에 접속해야 합니다.

Google Cloud Platform

프로젝트를 생성한뒤 사이드바의 API 및 서비스를 클릭하면 아래와 같은 화면이 나오는데

사용자 인증 정보 만들기에서 서비스 계정을 만드시면 됩니다.

또한 해당 봇의 계정정보를 API 이용시마다 인증받아야 하기 때문에

생성한 서비스 계정의 디테일에 들어가 키추가 - 새 키 만들기 로 저장된 json 파일을 보관해놓도록 합시다.

이후 스프레드시트에서 해당 서비스 계정을 추가하시면 API 이용시 해당 봇으로 접근해 데이터를 가져오는 방식입니다.

spreadsheet-sync.js

const fs = require('fs');
const path = require('path');
const { GoogleSpreadsheet } = require('google-spreadsheet');
const creds = require(서비스 계정 인증정보 json);

const doc = new GoogleSpreadsheet(스프레드 시트의 아이디값);

(async () => {
  await doc.useServiceAccountAuth(creds);
  await doc.loadInfo();
  const sheet = doc.sheetsByTitle[이용할 시트의 이름];
  // 참조할 시트의 제목 ( sheetsByIndex 등으로도 가능합니다 )
  const rows = await sheet.getRows();
  console.log(rows);
  const en = {};
  const jp = {};
  const cn = {};
  const tw = {};
  for (const row of rows) {
    en[row['한']] = row['영'];
        // 선택한 시트의 컬럼 이름을 이용
    jp[row['한']] = row['일'];
    cn[row['한']] = row['중(간)'];
    tw[row['한']] = row['중(번)'];
  }
  // fs.writeFileSync('../en.json', JSON.stringify(en, null, 4));
})();

위의 샘플 예제를 참고해 모듈을 작성을 완료하셨으면

이후 배포가 이루어지는 빌드 스크립트에 해당 스크립트를 먼저 실행 시킨후 빌드 스크립트를 실행시키면 완성입니다.

develop 할점

• 빌드가 이루어질때마다 해당 json을 생성하기 때문에 하루에도 몇번씩 해당 스크립트가 실행될겁니다.
  • 이를 방지 하기위해 dev 버전에서 테스트할때 한번 실행시킨 후, 테스트 버전으로 push, merge 할때는 .gitignore 파일을 조정하여 테스트 버전에서는 실행되지 않도록, release 시점에서 다시 한번만 실행시켜도 될듯하네여
• 번역될 텍스트가 없을 경우 for문을 아래처럼 optional chainning 으로 파파고 API 혹은 구글 API 로 번역 텍스트를 가져올 수 있도록 하면 될듯 하네여 (이 경우에는 한번 더 검증하기위해 로깅이 필요하겠네요)

for (const row of rows) {
    en[row['한']] = row['영'] || fetchFromPapago(row['한'], 'en');
        // 선택한 시트의 컬럼 이름을 이용
    jp[row['한']] = row['일'] || fetchFromPapago(row['한'], 'jp');
    cn[row['한']] = row['중(간)'] || fetchFromPapago(row['한'], 'cn');
    tw[row['한']] = row['중(번)'] || fetchFromPapago(row['한'], 'tw');
  }