[RN] Google Spread Sheet를 이용한 다국어 처리 설계

React Native 앱에 다국어 지원 추가하기

Google Sheets와 i18next 연동

최근 프로젝트에서 React Native 앱에 다국어 지원을 추가했다.
처음에는 JSON 파일로 번역을 관리하면 충분하겠다고 생각했지만, 실제로 작업을 진행하면서 번역 관리 방식과 개발 워크플로우를 함께 고려해야 한다는 점을 느꼈다.

이번 글에서는 Google Sheets를 번역 관리 도구로 사용하고,
자동화 스크립트를 통해 JSON 파일을 생성한 뒤 i18next와 연동한 과정을 정리했다.

---

Google Sheets를 선택한 이유

프로젝트 초기에는 번역 파일을 JSON으로 직접 관리하는 방식을 고려했다.
하지만 다음과 같은 문제점이 있었다.

• 비개발자 접근성 부족
  디자이너나 PM이 번역을 수정하려면 개발자에게 요청해야 했다.
• Git 충돌 발생
  여러 사람이 동시에 수정할 경우 충돌이 자주 발생했다.
• 번역 검토 과정의 번거로움
  단순 문구 수정에도 PR을 열고 리뷰하는 과정이 필요했다.

이러한 문제를 해결하기 위해 Google Sheets를 번역 관리 도구로 선택했다.
Sheets를 사용하면서 다음과 같은 장점을 얻을 수 있었다.

• 누구나 익숙한 인터페이스
• 실시간 협업 가능
• 변경 이력 자동 관리
• 댓글을 통한 번역 피드백 가능

---

아키텍처 설계

전체 구조는 다음과 같이 구성했다.

Google Sheets (번역 관리)
↓ CSV Export
Pull Script (자동화)
↓ JSON 생성
i18next
↓
React Native 앱

번역 소스와 코드의 역할을 분리하고,
빌드 타임에 번역 데이터를 동기화하는 구조로 설계했다.

---

구현 과정

1. i18next 기본 설정

i18next와 react-i18next를 설치한 후 기본 설정을 구성했다.

[ i18n 설정 코드 ]

 

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const ko = require("./locales/ko.json");
const en = require("./locales/en.json");

i18n.use(initReactI18next).init({
  resources: {
    ko: { translation: ko },
    en: { translation: en },
  },
  lng: getSystemLanguage(),
  fallbackLng: "ko",
  interpolation: { escapeValue: false },
  keySeparator: false,
});

 

---

2. Google Sheets → JSON 변환 스크립트

Google Sheets는 CSV 형식으로 export를 지원한다.
이를 활용해 Node.js 기반의 변환 스크립트를 작성했다.

[ pull-from-sheets 스크립트 예시 ]

 

const csvUrl = `https://docs.google.com/spreadsheets/d/${sheetId}/export?format=csv&gid=${gid}`;

const res = await fetch(csvUrl);
const csv = await res.text();

const ko = {};
const en = {};

for (let r = 1; r < rows.length; r++) {
  const key = rows[r][keyIndex]?.trim();
  if (!key) continue;

  ko[key] = rows[r][koIndex] || key;
  en[key] = rows[r][enIndex] || ko[key];
}

스크립트에는 다음 기능을 포함했다.

• CSV 파싱
• 중복 키 검증
• 빈 값 처리
• 키 정렬을 통한 Git diff 최소화

---

3. npm 스크립트 등록

번역 동기화를 쉽게 하기 위해 npm 스크립트로 등록했다.

 

"scripts": {
  "i18n:pull": "node scripts/i18n/pull-from-sheets.mjs"
}

이제 npm run i18n:pull 명령어 한 번으로
최신 번역 데이터를 가져올 수 있다.

---

4. 언어 설정 저장

사용자가 선택한 언어는 expo-secure-store에 저장해
앱 재시작 이후에도 유지되도록 처리했다.

 

const LANGUAGE_KEY = "prize.language";

export async function saveLanguage(language) {
  await SecureStore.setItemAsync(LANGUAGE_KEY, language);
}

---

실제 사용 예시

컴포넌트에서는 다음과 같이 번역을 사용했다.

 

const { t } = useTranslation(); <Text>{t("contest_detail_1")}</Text>

변수가 필요한 경우에도 동일한 방식으로 처리했다.

 

t("contest_payment_62", { name: "홍길동" })

---

마주한 문제와 해결

날짜 포맷

i18n 언어 변경 시 dayjs.locale()을 함께 변경하도록 처리했다.

통화 단위

Intl.NumberFormat 대신 통화 단위를 번역 키로 관리했다.

서수 표현

한국어와 영어에 따라 다른 서수 표현을 유틸 함수로 분리해 처리했다.

---

워크플로우 정리

실제 작업 흐름은 다음과 같다.

1. Google Sheets에서 번역 수정
2. npm run i18n:pull 실행
3. 코드에서 t("key") 형태로 사용
4. 앱에서 언어 변경 테스트

---

마무리

다국어 지원은 단순히 라이브러리를 추가하는 작업이 아니라,
번역 관리와 개발 흐름을 함께 설계하는 문제라고 느꼈다.

Google Sheets와 자동화 스크립트를 활용한 방식은
작은 팀이나 빠른 개발 환경에서 특히 잘 맞는 선택이었다.

같은 고민을 하고 있는 분들에게 이 글이 도움이 되기를 바란다!