007Vstro2023.09 – 2023.10

k2gbs 다국어 홈페이지

처음 해 본 국제화, 그리고 끝내지 못한 프로젝트

기간: 2023.09 – 2023.10
분류: 웹사이트
역할: 기획·디자인·개발 단독
구성: 단독 진행

01개요

워드프레스로 만들어진 기업 사이트를 Next.js로 리뉴얼하면서 다국어를 지원해야 했습니다. 국제화 작업은 처음이었고, 참고할 사내 선례도 없었습니다.

공식 문서와 해외 영상 자료를 보며 next-intl을 단기간에 익혀 적용했습니다. 라우트에 로케일을 넣고, 메시지 파일을 분리하고, 서버 컴포넌트에서 번역을 읽는 구조까지 세웠습니다.

다만 개발 도중 다른 프로젝트에 투입되면서 배포까지 마치지 못했습니다. 이후 회사 경영 사정으로 퇴사하게 되면서 끝내 마무리하지 못한 작업이 됐습니다. 내세울 결과물은 아니지만, 국제화 구조를 처음부터 세워 본 경험은 이후 작업에도 도움이 됐습니다.

02기술 결정

문제, 선택, 결과 순서로 적었습니다.

결정 01
번역 키는 화면이 아니라 도메인 기준으로 나눈다
문제
처음에는 페이지별로 메시지 파일을 나눴는데, 같은 문구가 여러 페이지에 등장하면서 번역이 갈라졌습니다. 한쪽만 고치면 다른 쪽이 그대로 남습니다.
선택
공통 용어를 도메인 단위 네임스페이스로 묶고, 페이지 전용 문구만 페이지 파일에 남겼습니다.
결과
같은 개념은 항상 같은 단어로 번역됩니다. 번역 담당자에게 넘길 파일 구조도 더 설명하기 쉬워졌습니다.
결정 02
로케일을 URL 경로에 둔다
문제
언어를 쿠키나 클라이언트 상태로만 관리하면 특정 언어 페이지를 링크로 공유할 수 없고, 검색 엔진도 언어별 페이지를 따로 색인하지 못합니다.
선택
`/[locale]/...` 형태로 로케일을 경로 세그먼트에 두고 hreflang을 함께 선언했습니다.
결과
언어별 URL이 생겨 공유와 색인이 가능해졌습니다. 언어 전환은 경로 치환만으로 처리됩니다.

03주요 기능

다국어 라우팅
로케일을 경로에 두고 언어별 URL과 hreflang을 제공.
메시지 네임스페이스 구조
공통 용어와 페이지 전용 문구를 분리해 번역 일관성을 유지.
워드프레스 콘텐츠 이관
기존 페이지 구조를 정리해 Next.js 라우트로 재구성.

04화면

Desktop

01
02
03
04
05

Mobile · 반응형

01
02
03
04
05

05회고

완성하지 못한 프로젝트를 기록에 남기는 것이 맞는지 고민했지만, 남기기로 했습니다. 실제 일에서는 끝까지 가지 못하는 작업도 있고, 거기서 배운 것도 남습니다.

국제화는 라이브러리를 어떻게 쓰느냐보다 번역 키를 어떻게 나누느냐가 더 중요했습니다. 처음에 잘못 나눠 보고 나서야 그걸 알았습니다.

실무에서는 짧은 기간에 낯선 도구를 익혀서 써야 하는 일이 자주 있습니다. 이때부터 공식 문서를 먼저 끝까지 읽고 시작합니다.