🌍 i18n이란? 프론트엔드 개발에서 국제화를 쉽게 이해하기

 

프론트엔드 개발을 하다 보면 i18n이라는 용어를 자주 보게 된다.
i18n은 국제화(Internationalization)를 의미하며, 글로벌 서비스를 개발할 때 꼭 필요한 기능이다.

이 글에서는 i18n의 의미부터 실무에서 왜 필요한지, 어떤 식으로 적용하는지까지 정리해본다.

 

 

📌 i18n 뜻

i18n은 internationalization의 약자이다.

단어의 첫 글자 i와 마지막 글자 n 사이에 18개의 문자가 있어서
i18n = i + 18글자 + n

비슷한 방식으로 l10n은 **localization(지역화)**의 약자다.

 

 

💡 i18n이 왜 필요할까?

서비스를 한국뿐 아니라 전 세계 사용자에게 제공하려면,
언어, 날짜, 숫자, 화폐, 지역 포맷 등이 그 나라에 맞게 표시돼야 한다.

예를 들어,

항목	한국어	영어(미국)
날짜	2025.05.21	May 21, 2025
화폐	1,000원	$1,000
텍스트	"회원가입"	"Sign Up"

 

🔧 i18n의 주요 기능

기능	설명
다국어 텍스트 지원	버튼, 알림, 메시지 등을 각 언어로 출력
날짜/시간 포맷 변환	나라별 날짜 형식 자동 적용
숫자/화폐 포맷	통화 기호 및 자리수 표현 변경
레이아웃 방향 지원	좌→우, 우→좌 (아랍어 등 RTL 지원)

 

🧰 i18n 적용 예시

하드코딩 방식 (i18n 없음)

<p>Welcome to our site!</p>

i18n 적용 방식 (react-i18next 기준)

const { t } = useTranslation();

<p>{t("home.welcomeMessage")}</p>

 

locales/en.json

{
  "home": {
    "welcomeMessage": "Welcome to our site!"
  }
}

locales/ko.json

{
  "home": {
    "welcomeMessage": "우리 사이트에 오신 걸 환영합니다!"
  }
}

언어 설정만 바꾸면 자동으로 해당 언어로 텍스트가 바뀐다.

 

 

 

---

프론트엔드에서 사용하는 i18n 라이브러리

 

라이브러리	설명
react-i18next	React 프로젝트에서 가장 널리 사용됨
next-intl	Next.js App Router에 최적화된 i18n 도구
react-intl	오래된 프로젝트에서 여전히 사용됨

 

 실무에서는 이렇게 사용한다

 

상황	처리 방식
글로벌 서비스	react-i18next, next-intl 등으로 전체 텍스트 관리
한국 전용 서비스	간단한 상수 또는 문자열 하드코딩
내부 관리자 시스템	하드코딩 or 상수 분리 방식

 

✍️ 마무리

i18n은 글로벌 서비스를 만드는 데 있어 필수적인 기술이다.
텍스트만 번역하는 게 아니라, 날짜, 숫자, 화폐 등 사용자 경험을 각 국가에 맞게 최적화하는 것까지 포함된다.

React, Next.js를 사용하고 있다면 react-i18next 또는 next-intl로 시작해보자.
지금은 필요 없어 보여도, 나중에 분명히 도움이 될 날이 온다.