다국어 페이지: lang·hreflang과 국제화

두 가지 일: 국제화와 현지화

i18n을 먼저 해 두지 않으면 언어를 하나 늘릴 때마다 화면을 다시 만든다.

언어별 페이지를 내보내는 구조

flowchart TB
  n1["요청<br/>(Accept-Language: ko-KR,ko;q=0.9,en;q=0.8)"] --> n2["서버·프레임워크가 지원 언어 중 가장 맞는 것을 고름<br/>(첫 방문 제안용)"]
  n2 --> n3["언어별 URL로 응답: /ko/…, /en/…"]
  n3 --> n4["템플릿 + 언어별 메시지 파일(JSON·YAML·PO 등)로 HTML 생성"]
  n4 --> n5["#lt;html lang=#quot;ko#quot;#gt; + hreflang으로 다른 언어판 연결"]

Next.js 같은 프레임워크는 로캘별 라우팅을 지원하고, Accept-Language 감지는 proxy.ts(Next.js 16 이전 이름은 middleware)에서 한다. 메시지 관리는 i18next·FormatJS 같은 라이브러리가 맡는다.

HTML로 언어 표시하기

<html lang="ko" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="alternate" hreflang="ko" href="https://example.com/ko/">
  <link rel="alternate" hreflang="en" href="https://example.com/en/">
  <link rel="alternate" hreflang="x-default" href="https://example.com/">
</head>
<body>
  <p>이 문서의 원제는 <span lang="en">Open Web Platform</span>이다.</p>
  <p>제품명 <span translate="no">riverlog</span></p>

hreflang의 규칙:

• <link>, HTTP Link 헤더, XML 사이트맵 중 하나로 넣는다. 셋은 효과가 같다.
• 양방향이어야 한다. 각 언어판이 자기 자신과 다른 모든 판을 나열한다. 한쪽만 가리키면 무시된다.
• 값은 ISO 639-1 언어 코드에 선택적으로 지역 코드를 붙인다(en, en-GB). 지역 코드만 쓸 수는 없다.
• x-default는 맞는 언어가 없을 때 보낼 페이지다. 언어 선택 페이지나 자동 분기하는 첫 화면에 쓴다.
• Google은 페이지 언어를 lang이나 hreflang이 아니라 보이는 본문으로 판단한다. 번역은 본문까지 실제로 옮겨야 한다.

CSS에서는 :lang(fr)이나 [lang|="fr"]로 언어별 스타일을 준다. :lang()은 조상에게서 물려받은 언어까지 맞춘다. 검색 쪽 다른 메타 태그와 canonical은 SEO 기초에, head의 <link rel="alternate">는 문서 head와 메타데이터에 있다.

설계·개발할 때 주의할 것

시스템 쪽 국제화: 텍스트 밖의 것들

해외 시장에 서비스를 내면 화면 번역만으로 끝나지 않는다. 백엔드와 사업 구조도 나라별 차이를 받아야 한다.

정리

• 언어마다 다른 URL을 주고, <html lang>과 hreflang으로 표시한다.
• Accept-Language는 제안에만 쓰고, 언어 선택은 사용자가 언제든 바꿀 수 있게 둔다.
• 번역 단위는 문장 전체다. 문자열을 조각내 이어 붙이지 않는다.
• 날짜·숫자는 Intl, 방향은 dir과 논리적 속성, 길이는 늘어날 여백으로 대비한다.

관련 노트: SEO 기초, 문서 head와 메타데이터, 텍스트 의미 요소와 문자 참조, HTML 기초와 HTML5, 쓰기 모드와 논리적 속성, 반응형 디자인과 다국어 타이포그래피, 날짜 라이브러리: date-fns와 Day.js