expo-localization으로 기기 언어 따라가는 다국어 앱 만들기 — i18n-js 붙이기

앱을 영어권 사용자에게도 열어주기로 하면서 다국어 처리가 필요해졌다. 처음엔 그냥 텍스트마다 if (lang === 'ko') ... 식으로 분기할 뻔했는데, 화면이 몇 개만 늘어나도 금방 지옥이 된다. 게다가 기기 언어를 직접 읽는 것도 iOS랑 Android가 제각각이라 손이 간다. Expo라면 expo-localization이 그 부분을 깔끔하게 덮어준다.

설치

번역 사전을 들고 다닐 i18n-js도 같이 깐다.

npx expo install expo-localization
npm install i18n-js

기기 언어 읽기

getLocales()가 사용자가 기기에 설정해둔 언어 목록을 우선순위대로 돌려준다. 첫 번째 항목이 주 언어다.

import { getLocales } from 'expo-localization';

const [{ languageCode, regionCode }] = getLocales();
// languageCode: 'ko', regionCode: 'KR'

languageCode는 ko·en처럼 언어만, regionCode는 KR·US처럼 국가다. 날짜나 통화 포맷까지 맞추고 싶으면 getLocales()의 currencyCode, measurementSystem 같은 필드도 같이 들어온다.

i18n-js와 연결

번역 사전을 만들고, 기기 언어를 i18n 인스턴스의 locale로 넘긴다. 사전에 없는 언어가 들어와도 깨지지 않게 defaultLocale을 꼭 지정한다.

import { I18n } from 'i18n-js';
import { getLocales } from 'expo-localization';

const i18n = new I18n({
  ko: { greeting: '안녕하세요', cart: '장바구니' },
  en: { greeting: 'Hello', cart: 'Cart' },
});

i18n.locale = getLocales()[0].languageCode ?? 'en';
i18n.defaultLocale = 'en';
i18n.enableFallback = true; // 번역 누락 시 defaultLocale로

export default i18n;

화면에서는 t()로 꺼내 쓴다.

import i18n from '../lib/i18n';

// <Text>{i18n.t('greeting')}</Text>

enableFallback을 켜두면 ko 사전에 특정 키가 빠져 있어도 영어로 메워준다. 번역을 점진적으로 채워 넣을 때 화면에 키 이름이 그대로 노출되는 사고를 막아준다.

사용자가 언어를 직접 바꾸게 하기

기기 언어만 따라가면 충분한 앱도 많지만, 설정 화면에서 언어를 고르게 하려면 선택값을 저장해두고 다음에 그 값을 먼저 읽으면 된다. 저장은 expo-secure-store까지 갈 것 없이 AsyncStorage나 MMKV 정도면 된다.

i18n.locale = savedLocale ?? getLocales()[0].languageCode ?? 'en';

저장값이 있으면 그걸 쓰고, 없으면 기기 언어로 떨어진다.

핵심은 두 가지다. getLocales()로 기기 언어를 읽어 초기값을 잡고, enableFallback으로 번역 누락을 영어가 메우게 해두는 것. 이 둘만 걸어두면 사전에 언어를 하나 더 추가하는 것만으로 새 언어권이 열린다. 하드코딩한 분기문을 걷어내고 나니 문구 수정도 사전 파일 한 곳에서만 하면 돼서 훨씬 편해졌다.