웹 개발 실무 기술 A to Z # 23 - 웹 애플리케이션 국제화(i18n) 및 지역화(l10n) 전략

웹 개발 실무 기술 A to Z

웹 애플리케이션이 글로벌 시장에서 성공하려면 다양한 언어 및 지역별 요구사항을 반영하는 국제화(i18n) 및 지역화(l10n) 전략이 필요합니다.
✔️ 국제화(i18n, Internationalization) → 애플리케이션을 여러 언어로 쉽게 변환할 수 있도록 설계
✔️ 지역화(l10n, Localization) → 특정 국가 및 문화에 맞춰 UI, 콘텐츠, 날짜/통화 포맷 조정
✔️ 다국어 지원 및 번역 관리 → JSON 기반 다국어 파일, 번역 API 활용

이번 글에서는 웹 애플리케이션에서 효과적인 국제화 및 지역화 전략을 구현하는 방법을 설명하겠습니다.

---

1. 국제화(i18n)와 지역화(l10n)의 차이

개념 설명 예제

국제화 (i18n)	애플리케이션을 다양한 언어와 문화에 맞게 쉽게 확장할 수 있도록 설계하는 과정	다국어 지원을 위한 번역 파일 사용
지역화 (l10n)	특정 국가/문화에 맞게 콘텐츠를 최적화하는 과정	날짜/통화 포맷 변경, 우측 정렬 지원 (아랍어)

✅ i18n이란 다국어 지원이 가능하도록 애플리케이션을 설계하는 것, l10n은 특정 지역에 맞춰 콘텐츠를 조정하는 것!

---

2. 다국어 지원을 위한 기본 구조

2-1. JSON 기반 다국어 데이터 구조

애플리케이션에서 여러 언어를 지원하려면 JSON 파일을 활용한 번역 시스템이 가장 효율적입니다.

(1) 다국어 JSON 파일 예제

📌 locales/en.json

{
  "welcome": "Welcome to our website!",
  "login": "Login",
  "signup": "Sign Up"
}

📌 locales/ko.json

{
  "welcome": "우리 웹사이트에 오신 것을 환영합니다!",
  "login": "로그인",
  "signup": "회원가입"
}

✅ JSON 파일을 활용하면 언어별 번역 데이터를 쉽게 관리 가능!

---

3. React 애플리케이션에서 i18n 적용

3-1. React-i18next 라이브러리 설치

npm install i18next react-i18next

3-2. i18n 설정 파일 (i18n.js)

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

import en from "./locales/en.json";
import ko from "./locales/ko.json";

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
    ko: { translation: ko }
  },
  lng: "en", // 기본 언어 설정
  fallbackLng: "en",
  interpolation: { escapeValue: false }
});

export default i18n;

3-3. 다국어 지원 컴포넌트 (App.js)

import React from "react";
import { useTranslation } from "react-i18next";
import "./i18n";

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

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <button onClick={() => i18n.changeLanguage("ko")}>🇰🇷 한국어</button>
      <button onClick={() => i18n.changeLanguage("en")}>🇺🇸 English</button>
    </div>
  );
}

export default App;

✅ React-i18next를 활용하면 다국어 변경이 실시간으로 가능!

---

4. 날짜, 시간, 통화 형식 지역화(l10n)

4-1. Intl API를 활용한 날짜 포맷 변환

const date = new Date();
console.log(new Intl.DateTimeFormat("en-US").format(date)); // MM/DD/YYYY
console.log(new Intl.DateTimeFormat("ko-KR").format(date)); // YYYY.MM.DD.

4-2. 통화 포맷 변환

const price = 12345.67;
console.log(new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(price)); // $12,345.67
console.log(new Intl.NumberFormat("ko-KR", { style: "currency", currency: "KRW" }).format(price)); // ₩12,346

✅ Intl API를 활용하면 날짜 및 통화 형식을 손쉽게 변환 가능!

---

5. 다국어 번역 자동화 – Google Translate API 활용

5-1. Google Translate API 설정

1. Google Cloud Console에서 "Cloud Translation API" 활성화
2. 서비스 계정 생성 후 API 키 발급
3. 환경 변수(.env)에 API 키 저장

GOOGLE_TRANSLATE_API_KEY=your_google_translate_api_key

5-2. Node.js에서 번역 API 호출

npm install @google-cloud/translate

const { Translate } = require("@google-cloud/translate").v2;
require("dotenv").config();

const translate = new Translate({ key: process.env.GOOGLE_TRANSLATE_API_KEY });

async function translateText(text, targetLang) {
  const [translation] = await translate.translate(text, targetLang);
  console.log(`Translated: ${translation}`);
}

translateText("Hello, world!", "ko");

✅ Google Translate API를 활용하면 번역 자동화 가능!

---

6. 다국어 SEO 최적화

6-1. HTML 메타 태그 설정

6-2. 동적 URL을 활용한 언어 선택

app.get("/:lang/home", (req, res) => {
  const lang = req.params.lang;
  res.sendFile(`./locales/${lang}.json`, { root: __dirname });
});

✅ 다국어 SEO 최적화를 통해 검색엔진에서 올바른 언어 페이지를 노출 가능!

---

7. 다국어 지원 적용 전후 비교

7-1. 적용 전

• 영어만 지원 → 글로벌 사용자 접근 어려움
• 날짜 및 통화 포맷 고정 → 지역별 차이 반영 불가
• SEO 최적화 미흡 → 다국어 검색 결과 노출 어려움

7-2. 적용 후

✔️ JSON 기반 다국어 번역 시스템 구축 → 여러 언어로 콘텐츠 제공 가능
✔️ Intl API 활용한 지역화(l10n) 적용 → 날짜, 통화 포맷 자동 조정
✔️ Google Translate API 활용한 자동 번역 → 다국어 관리 효율성 증가

✅ 국제화(i18n) 및 지역화(l10n)를 적용하면 글로벌 시장에서 경쟁력 확보 가능!

---

8. 마무리 및 다음 글 예고

이번 글에서는 웹 애플리케이션에서 국제화(i18n) 및 지역화(l10n)를 구현하는 방법을 살펴봤습니다.
다음 글에서는 웹 애플리케이션 테스트 및 품질 보증(QA) 전략 – Jest, Cypress, Playwright 활용을 소개하겠습니다.

다음 글 예고: "웹 애플리케이션 테스트 및 QA 전략 – Jest, Cypress, Playwright 활용" 🚀