앱이나 웹사이트에 다국어를 추가하는 방법

앱을 여러 언어로 제공하려면 인터페이스의 모든 텍스트를 언어별 번역 파일로 옮기고, i18n 라이브러리로 불러오며, 선택한 언어를 기억하는 언어 전환기를 추가하세요. 검색에 노출하고 싶은 공개 페이지는 /fr/처럼 언어별로 고유한 URL을 주고, hreflang 태그로 각 버전을 연결하세요. 그다음 사람들이 자주 놓치는 부분을 챙기세요. 날짜, 숫자, 통화 형식, 일부 언어에서 더 길어지는 텍스트, 오른쪽에서 왼쪽으로 쓰는 문자, 데이터베이스에 저장된 콘텐츠가 여기에 해당합니다.

자주 나오는 용어

• 국제화(i18n): 어떤 언어든 지원할 수 있도록 코드를 준비하는 것입니다. 하드코딩된 문자열이 없고, 로케일에 맞는 형식을 쓰며, 유연한 레이아웃을 갖춥니다. "18"은 i와 n 사이의 글자 수입니다.
• 현지화(l10n): 특정 언어나 시장에 맞게 앱을 조정하는 것입니다. 주로 번역이지만, 때로는 통화, 이미지, 법률 문구도 포함됩니다.
• 로케일: 언어와 (선택적으로) 지역을 합친 것입니다. 예: en-GB, pt-BR.

국제화는 한 번만 해 두면, 새 언어를 추가할 때 대부분 번역 작업만 남습니다.

방식별 선택지와 장단점

대부분의 앱에는 번역 파일을 쓰는 표준 i18n 라이브러리가 좋은 기반입니다. 원하면 기계 번역이나 AI 번역으로 초안을 만들고, 고객이 가장 많이 보는 부분은 원어민이 검토하세요.

다국어 앱의 구성 요소

번역 파일

<h1>Welcome back</h1>처럼 쓰는 대신, 코드에는 t('dashboard.welcome')처럼 쓰고, 각 로케일 파일에 실제 텍스트를 넣습니다.

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

변수는 문장 조각을 이어 붙이지 말고 자리표시자로 넣으세요. 언어마다 어순이 다르기 때문입니다. 그리고 라이브러리의 복수형 규칙을 사용하세요. 영어는 복수형이 두 가지(1 item, 2 items)지만, 어떤 언어는 세 가지, 네 가지 이상입니다.

날짜, 숫자, 금액 형식

손으로 형식을 만들지 마세요. 브라우저에 내장된 Intl API가 어떤 로케일에든 맞춰 형식을 만들어 줍니다. 영어의 1,234.5는 독일어에서 1.234,5가 되고, 날짜는 일-월 순서와 월-일 순서가 서로 다르며, 통화 기호의 위치도 달라집니다. 날짜는 UTC로 저장하고, 금액은 통화 코드와 함께 숫자로 저장한 뒤, 표시할 때만 형식을 적용하세요.

늘어나는 레이아웃

번역된 텍스트는 영어보다 길어지는 경우가 많습니다. 특히 독일어와 핀란드어 단어는 더 깁니다. 고정 너비 버튼과 잘린 라벨을 피하고, 가장 긴 언어로 테스트하세요.

오른쪽에서 왼쪽으로 쓰는 언어

아랍어, 히브리어, 페르시아어, 우르두어는 오른쪽에서 왼쪽으로 읽습니다. 이 로케일에서는 페이지에 dir="rtl"을 설정하고, CSS 논리 속성을 쓰세요. 예를 들어 margin-left 대신 margin-inline-start를 쓰고, Tailwind에서는 ml-4 대신 ms-4를 씁니다. 그러면 레이아웃이 스스로 뒤집힙니다. 화살표처럼 방향을 나타내는 아이콘도 뒤집어야 합니다.

언어 전환기와 자동 감지

모든 페이지에 언어 전환기를 두고, 국기 대신 각 언어의 이름("Deutsch", "Français", "العربية")으로 표시하세요. 국기는 언어가 아니라 국가를 나타내기 때문입니다. 처음 방문했을 때 브라우저의 선호 언어를 감지해 버전을 제안하는 것은 좋지만, 방문자가 직접 고른 언어를 우선하고 그 선택을 기억하세요.

URL과 SEO

검색 결과에 노출하고 싶은 페이지라면 언어마다 고유한 URL이 필요합니다. 2026년 9월 기준 Google의 다국어 사이트 안내는 다음과 같습니다.

• 언어별로 별도 URL 사용: 하위 디렉터리(example.com/fr/)가 가장 단순하며, 하위 도메인과 국가별 도메인도 가능합니다. URL 매개변수(?lang=fr)는 권장하지 않습니다.
• 쿠키나 브라우저 설정만으로 언어를 바꾸지 마세요. Google의 크롤러가 다른 버전을 전혀 보지 못할 수 있습니다.
• 언어에 따라 자동 리디렉션하지 마세요. 대신 버전 사이를 링크로 연결하세요.
• hreflang을 사용해 어떤 페이지가 서로의 번역본인지 Google에 알려 주세요. 각 버전은 자기 자신과 다른 모든 버전을 나열해야 합니다. 그렇지 않으면 해당 표시가 무시될 수 있습니다. 대체 페이지에는 x-default를 추가하세요.
• Google은 lang 속성이나 hreflang이 아니라 페이지에 보이는 콘텐츠로 페이지 언어를 판단합니다. 따라서 메뉴만이 아니라 페이지 전체를 번역하세요.

그래도 각 버전의 <html lang="fr">은 설정하세요. 스크린 리더가 올바른 발음을 고르는 데 쓰며, 이는 접근성 요구사항입니다.

로그인 후 쓰는 앱 화면은 색인할 필요가 없으므로, 그런 화면에서는 사용자 프로필에 언어를 저장해도 괜찮습니다. 공개 페이지가 크롤링되도록 하는 방법은 AI로 만든 웹사이트의 SEO를 참고하세요.

데이터베이스의 콘텐츠

인터페이스 텍스트는 파일에 있고, 제품명, 블로그 글, 카테고리 같은 콘텐츠는 데이터베이스에 있습니다. 흔히 쓰는 패턴은 두 가지입니다.

• 번역 테이블: product_translations (product_id, locale, name, description). 깔끔하고 많은 언어로 확장하기 좋습니다.
• 필드마다 JSON 열: name: {"en": "...", "fr": "..."}. 언어가 몇 개뿐이라면 더 간단합니다.

번역이 없을 때 어떻게 할지도 정하세요. 보통은 빈 공간을 보여 주기보다 기본 언어로 대체합니다.

이메일과 알림

각 사용자의 언어를 저장해 두고, 이메일, 알림, PDF에도 그 언어를 사용하세요. 앱은 번역했는데 가입 환영 이메일은 여전히 영어로 가는 실수가 흔합니다.

효과가 있는 프롬프트

react-i18next로 국제화를 추가해 주세요. 사용자에게 보이는 모든 문자열을 네임스페이스가 있는 키로 locales/en.json에 옮기고, 문자열 이어 붙이기 대신 보간과 복수형 규칙을 사용하세요. 날짜, 숫자, 가격은 현재 로케일에 맞춰 Intl로 형식을 만들어 주세요. 아직 문구는 바꾸지 마세요.

프랑스어와 독일어를 추가해 주세요. 공개 마케팅 페이지는 /fr/, /de/ URL 접두사를 쓰고, 영어는 루트에 둡니다. 모든 페이지에 hreflang 링크를 넣되 자기 자신과 x-default도 포함하고, 페이지마다 html lang을 설정해 주세요. 각 언어를 그 언어의 원래 이름으로 보여 주는 언어 전환기를 추가해 주세요. 로그인 후 페이지에서는 언어를 사용자 프로필에 저장해 주세요.

아랍어를 오른쪽에서 왼쪽으로 쓰는 방식으로 지원해 주세요. 아랍어에는 dir="rtl"을 설정하고, 왼쪽/오른쪽 여백과 패딩은 논리 속성으로 바꾸고, 방향성 아이콘은 뒤집고, 폼과 표가 여전히 자연스럽게 읽히는지 확인해 주세요.

단계별 진행

1. 첫 번째 추가 언어를 정하세요. 방문자나 고객이 어디에 있는지, 실제 수요를 기준으로 고르세요.
2. 코드를 국제화하세요. 문자열을 파일로 옮기고, 복수형과 Intl 형식을 추가합니다. 영어만 있는 상태로 배포하고 아무것도 바뀌지 않았는지 확인하세요.
3. 공개 페이지의 URL 구조를 정하고 hreflang을 추가하세요.
4. 번역하세요. 기계 번역이나 AI 번역으로 초안을 만든 뒤 원어민과 검토하세요. 번역가에게 맥락을 주세요. "Book"은 한 화면에서는 명사이고 다른 화면에서는 동사일 수 있습니다.
5. 데이터베이스 콘텐츠를 번역하고 대체 규칙을 정하세요.
6. 나머지도 현지화하세요. 이메일, 오류 메시지, 법률 페이지, 텍스트가 들어 있는 이미지까지 포함합니다.
7. 휴대폰 너비에서 각 언어를 테스트하세요. 필요하다면 오른쪽에서 왼쪽으로 쓰는 방식도 확인하세요.
8. 프로세스를 만드세요. 새 기능이 몇 달 뒤가 아니라 번역과 함께 출시되도록 하세요.

흔한 실수

• 문장을 이어 붙이기("You have " + n + " messages"). 다른 언어에서 깨집니다.
• 컴포넌트, 오류 메시지, 유효성 검사 문자열에 하드코딩된 텍스트가 남아 있음.
• 날짜와 가격을 손으로 형식화하기.
• 언어를 국기로 표시하기, 그리고 잘못된 버전에 사용자를 가두는 자동 리디렉션.
• 색인하고 싶은 페이지가 모든 언어에서 같은 URL 사용.
• hreflang 역방향 링크 누락. 그러면 Google이 그 표시를 무시합니다.
• 인터페이스만 번역하고 콘텐츠는 번역하지 않음, 또는 그 반대.
• 가격, 법률, 결제 페이지를 검토하지 않은 기계 번역으로 내보내기.

다국어 체크리스트

• 사용자에게 보이는 하드코딩 문자열이 없고, 복수형 규칙과 자리표시자를 쓴다
• 날짜, 숫자, 통화는 Intl로 형식을 만든다
• 모든 페이지에 원래 이름이 표시된 언어 전환기가 있고, 선택이 기억된다
• 공개 페이지는 언어별로 별도 URL을 쓰고, 강제 리디렉션이 없다
• 자기 자신과 x-default를 포함해 모든 버전에 hreflang이 있다
• 페이지마다 html lang(필요하면 dir="rtl")이 설정된다
• 데이터베이스 콘텐츠가 번역되어 있고, 적절한 대체 규칙이 있다
• 이메일과 알림이 사용자의 언어로 발송된다
• 고객에게 보이는 텍스트를 원어민이 검토했다

Mythex에서 다국어 추가하기

Mythex에서는 채팅으로 언어를 추가합니다. 별도의 번역 패널은 없으므로 위의 프롬프트를 그대로 사용하면 됩니다. 먼저 국제화 단계를 하고, 언어를 추가하기 전에 미리보기에서 확인하세요. 규모가 큰 리팩터링이므로, 문제가 생겼을 때 되돌릴 수 있는 채팅 체크포인트를 활용하는 것이 좋습니다(채팅과 체크포인트). AI나 번역 API로 콘텐츠를 자동 번역하려면, 프로젝트 설정의 환경 변수와 시크릿(환경 변수와 시크릿)에 저장한 자신의 API 키를 사용합니다. 비용은 LLM API 사용 방법에서 설명합니다. 새 언어가 준비되면 다시 게시하세요.

자주 묻는 질문