🌳 고급 web
i18n과 l10n이 뭔가요?
쉽게 이해하기
같은 영화를 한국에서는 한글 자막으로, 일본에서는 더빙으로, 미국에서는 원어로 보는 것처럼, 웹사이트도 사용자의 언어와 지역에 맞춰서 내용을 바꿔 보여줄 수 있습니다. 이게 바로 i18n과 l10n입니다.
핵심 정리
다국어 지원(i18n)과 지역화(l10n)로 전세계 사용자에게 서비스를 제공하는 방법입니다.
자세히 알아보기
i18n은 internationalization(국제화)의 약자로, 'i'와 'n' 사이에 18글자가 있어서 i18n으로 줄여 씁니다. 소프트웨어를 여러 언어로 쉽게 번역할 수 있게 구조를 만드는 것을 의미합니다. 예를 들어 코드에 '안녕하세요'를 하드코딩하지 않고 변수로 빼두면, 나중에 영어나 일본어로 바꿀 수 있습니다.
l10n은 localization(지역화)의 약자로, 특정 지역이나 언어에 맞춰서 실제로 번역하고 조정하는 작업입니다. 언어 번역뿐 아니라 날짜 형식(YYYY-MM-DD vs MM/DD/YYYY), 통화 표시(원, 달러, 엔), 숫자 구분자(1,000 vs 1.000) 같은 지역별 차이도 반영합니다. 한국에서는 '김철수'로 보이는 이름이 영어권에서는 'Chulsoo Kim'으로 표시되는 것도 l10n의 일부입니다.
실무에서는 i18n 라이브러리를 사용합니다. React에서는 react-i18next, Vue에서는 vue-i18n, Next.js에서는 next-i18next가 대표적입니다. 번역 파일을 JSON 형태로 관리하고, 사용자의 브라우저 언어 설정이나 URL 경로(/ko/, /en/)로 언어를 자동 감지합니다. 예를 들어 en.json에 "welcome": "Hello"를 넣고, ko.json에 "welcome": "안녕하세요"를 넣으면 언어에 따라 자동으로 바뀝니다.
i18n을 구현할 때는 번역 키를 명확하게 작성하고, 복수형 처리(1 item vs 2 items)나 성별 표현 같은 언어별 특성을 고려해야 합니다. 또한 RTL(Right-to-Left) 언어인 아랍어나 히브리어는 레이아웃 자체가 반대로 되어야 하므로, CSS도 조정이 필요합니다. 글로벌 서비스를 만든다면 처음부터 i18n을 설계하는 것이 나중에 추가하는 것보다 훨씬 쉽습니다.