다국어 블로그 만들기 — 한국어/영어 동시 지원하는 법

왜 다국어를 지원할까?

블로그를 만들면서 "영어 버전도 제공하면 어떨까?"라는 생각이 들었습니다. 한국어로만 쓰면 한국 독자만 볼 수 있지만, 영어를 추가하면 전 세계 독자에게 다가갈 수 있으니까요.

물론 글을 두 번 쓰는 건 쉽지 않지만, DeepL 같은 AI 번역 도구를 활용하면 부담이 크게 줄어듭니다.

next-intl 라이브러리 소개

Next.js에서 다국어(i18n)를 구현하는 방법은 여러 가지가 있지만, 저는 next-intl을 선택했습니다.

선택 이유:

• Next.js App Router와 완벽하게 호환됩니다
• 서버 컴포넌트에서도 번역 함수를 사용할 수 있습니다
• TypeScript 지원이 우수합니다
• 공식 문서가 잘 되어 있습니다

구현 과정

1. 폴더 구조 설계

Next.js App Router에서 다국어를 지원하려면 URL에 언어 코드를 포함시킵니다. 예를 들어 /ko/blog, /en/blog 형태입니다. 이를 위해 app/[locale]/ 동적 경로를 사용합니다.

2. 번역 파일 관리

각 언어별 번역 메시지를 JSON 파일로 관리합니다. messages/ko.json과 messages/en.json에 UI 텍스트를 정의합니다. 네비게이션, 버튼, 안내 메시지 등 고정 텍스트는 이 파일에서 관리합니다.

3. 서버 컴포넌트에서 번역 사용

next-intl의 getTranslations 함수를 사용하면 서버 컴포넌트에서도 번역된 텍스트를 불러올 수 있습니다. 클라이언트 컴포넌트에서는 useTranslations 훅을 사용합니다.

4. 블로그 글 다국어 처리

블로그 글은 번역 파일이 아니라 데이터베이스에서 관리합니다. posts 테이블에 locale 칼럼을 추가해서 같은 slug라도 한국어 버전과 영어 버전을 별도로 저장합니다.

5. 언어 전환 기능

헤더에 언어 전환 버튼을 추가했습니다. 한국어 페이지에서 영어로 전환하면 같은 페이지의 영어 버전으로 이동합니다. 현재 URL의 locale 부분만 교체하는 간단한 로직입니다.

어려웠던 점

• 날짜 포맷 — 한국어는 "2026년 9월 1일", 영어는 "September 1, 2026" 형태로 다르게 표시해야 합니다. Intl.DateTimeFormat API를 활용했습니다.
• SEO 최적화 — 각 언어별로 별도의 메타태그, hreflang 태그를 설정해야 합니다.
• 번역 품질 — DeepL로 번역한 후 직접 교정하는 과정이 필요합니다. 기술 용어는 특히 주의해야 합니다.

마치며

다국어 지원은 처음 설정할 때는 복잡하지만, 한 번 구조를 잡아놓으면 이후에는 번역 파일만 추가하면 됩니다. 글로벌 독자를 목표로 한다면 충분히 투자할 가치가 있는 기능입니다.

이것으로 블로그 만들기 시리즈의 주요 과정을 모두 다루었습니다. 다음에는 전체 과정의 총정리와 솔직한 후기를 공유할 예정입니다!