워드프레스 멀티사이트 다국어 리디렉션 설정하기

워드프레스에서는 WPML과 같은 플러그인을 사용하면 비교적 수월하게 다국어 사이트를 구축할 수 있습니다. 다른 방법으로 워드프레스 멀티사이트로 다국어 사이트를 만들 수 있습니다. WPML에는 브라우저 언어를 감지하여 자동으로 이동시켜주는 다국어 리디렉션 기능이 탑재되어 있습니다. 멀티사이트로 다국어 사이트를 구축하는 경우에는 몇 가지 방법을 고려해볼 수 있습니다.

워드프레스 멀티사이트 다국어 리디렉션 설정 방법

최근 한 달 정도 아바다 테마로 만든 사이트를 멀티사이트로 변환하고 각 언어 번역을 입력하는 작업을 맡았습니다.

작업의 일환으로 브라우저 언어를 감지하여 각 언어 사이트로 리디렉션시키는 기능을 함께 설정했습니다. 단순하게 리디렉션시키는 것은 그리 어려운 문제가 아니지만 고객의 요구가 까다로울 경우 자바스크립트 전문가의 도움을 받아야 할 수 있습니다.

먼저는 어떤 식으로 다국어 리디렉션을 설정할 것인지에 대한 정의가 명확해야 할 것입니다.

다국어 사이트 리디렉션 요구 사항

클라이언트께서 처음에는 단순히 브라우저 언어를 감지하여 각 언어로 리디렉션시켜주기만 하면 된다고 했지만, 원하는 대로 자바스크립트 코드를 만들어서 적용할 때마다 요구 사항이 하나씩 늘어갔습니다. 최종적으로 다음과 같이 구현했습니다.

  • 영어 사이트 홈(example.com)으로 유입되는 방문자를 브라우저 언어를 감지하여
    • 한국어, 일본어, 독일어... 등일 경우 각 언어 홈으로 리디렉션(예: 한국어 - example.com/ko, 일본어 - example.com/ja, 독일어 - example.com/de...)
    • 영어를 포함한 나머지 언어는 리디렉션시키지 않음
  • 영어 하위 페이지(예: example.com/about)로 유입될 경우에는 리디렉션이 발생하지 않음
  • 각 언어 사이트로 리디렉션된 후에는 다시 영어 페이지로 이동해도 리디렉션이 발생하지 않음
  • 브라우저를 닫은 후에 다시 접속하면 다시 리디렉션이 이루어져야 함

멀티사이트 구조 계획

처음 사이트를 만들 때 언어 버전을 어떻게 만들지에 대한 계획을 잘 세우면 복잡한 자바스크립트 코드를 만들 필요가 없이 비교적 쉽게 멀티사이트 리디렉션을 구현할 수 있습니다.

워드프레스 멀티사이트 언어 전환기 플러그인에서 소개한 유료 플러그인인 WordPress Multilingual Multisite를 사용하면 자체 리디렉션 설정이 있습니다. 하지만 이 플러그인을 사용할 경우 영어 사이트 홈을 방문할 때마다 리디렉션이 발생했습니다. 이것이 문제가 되지 않으면 이 플러그인을 사용해도 될 것 같습니다.

무료 플러그인인 Multisite Language Switcher는 자체 리디렉션 기능을 제공하지 않지만, 이 플러그인 개발자가 소개하는 멀티사이트 언어 전환기 테마(Multisite Language Switcher Theme)를 사용하면 비슷하게 구현이 가능합니다.

워드프레스 멀티사이트 다국어 리디렉션 설정하기

이 테마를 사용하려면 기본 도메인에는 사이트를 만들지 말고 이 테마를 적용하고, 영어, 한국어, 일본어, 중국어 등 다국어 사이트를 하위 디렉터리로 만들면 됩니다. 즉,

  • 테마 적용
    • 기본 도메인 사이트(예: example.com)에 Multisite Language Switcher Theme 테마 적용
    • 나머지 서브 사이트(예: example.com/en, example.com/ko...)에 본래 테마를 적용하여 사이트를 만듦.
  • 다국어 언어 리디렉션
    • 기본 도메인 주소(example.com)는 랜딩 페이지로 언어 페이지로 분기시키는 역할을 함. 즉, 랜딩 페이지로 유입되는 방문자를 브라우저 언어에 따라 해당 언어 버전으로 이동시킴
    • 한국어 사용자는 example.com/ko와 같은 한국어 사이트로 이동됨, 나머지 언어도 동일한 방식으로 이동됨
    • 영어와 기타 언어는 영어 사이트(예: example.com/en)로 이동됨

이 방식을 사용하면 랜딩 페이지로 접속 시에 무조건 리디렉션이 발생하여 적절한 언어 사이트로 전환시켜 줍니다. 그리고 각 언어 사이트로 이동한 후에는 다시 랜딩 페이지로 돌아갈 일이 없습니다. 그러므로 리디렉션 후에 다시 기본 언어 사이트 홈으로 돌아갈 때 리디렉션이 발생하도록 조치를 취할 필요가 없습니다.

이 방법이 깔끔한 것 같습니다만, 사이트를 만드는 초기 단계에서 멀티사이트로 만들고 기본 언어 사이트를 하위 폴더로 만들어 작업해야 합니다.

Multisite Language Switcher Theme 테마를 사용하지 않는 경우

보통은 기본 도메인에 영어 등의 사이트가 설치되어 있을 것입니다. 가령, 다음과 같은 구조일 수 있습니다.

  • example.com: 영어 사이트
  • example.com/ko: 한국어 사이트
  • example.com/ja: 일본어 사이트
  • ...

위와 같은 경우 영어 홈으로 유입되는 방문자를 브라우저 언어에 따라 한국어, 일본어, 독일어 등의 사이트로 이동시키고, 기타 언어와 영어 사용자는 다른 언어 버전으로 이동이 되지 않도록 해야 할 것입니다.

이 경우 Multisite Language Switcher 개발자가 추천하는 jQuery 플러그인을 고려해볼 수 있겠지만, 이 보다는 자바스크립트 코드를 직접 만드는 방법이 더 바람직할 수 있습니다. 저는 Javascript를 잘 아는 분의 도움을 받아서 코드를 만들어 적용했습니다.

이 때 기본 언어 사이트의 홈(랜딩 페이지)에만 해당 자바스크립트 코드를 적용시켜야 원하는 대로 작동할 것입니다.

멀티사이트를 이용한 다국어 사이트 구축

멀티사이트를 이용하여 다국어 사이트를 구축하려는 경우 다음과 같은 프로세스로 진행할 수 있습니다.

1. 멀티사이트 구조 계획하기

먼저 기본 도메인을 랜딩 페이지로 사용할 것인지, 아니면 기본 언어(예: 영) 사이트로 만들 것인지를 결정합니다.

2. 기본 언어 사이트 만들기

기본 언어 사이트를 일반적인 워드프레스 사이트 만들기 방식으로 제작합니다.

3. 각 언어 사이트로 복제하기

멀티사이트로 구성한 다음, 기본 언어 사이트를 각 언어 사이트로 복제합니다.

4. 번역문 대체하기

각 언어 사이트의 텍스트를 해당 언어 번역으로 대체합니다. 텍스트를 복사하여 붙여넣기 하는 방식으로 교체할 수 있습니다. 페이지 빌더로 만든 경우 번역문을 대체하는 작업에 시간이 제법 걸릴 수 있습니다.

5. 멀티사이트 언어 리디렉션 설정(선택)

원하는 경우 사용자의 브라우저 언어를 감지하여 각 언어 사이트로 이동시켜주는 리디렉션을 설정할 수 있습니다.

마치며

이상으로 멀티사이트 언어 리디렉션 방법에 대해 살펴보았습니다. 조금 자세히 설명하려고 노력했지만 글의 의도가 제대로 전달되었는지 모르겠습니다.

플러그인에서 제공하는 기능에 고객이 만족하면 별다른 조치가 필요 없지만, 고객의 요구가 까다로운 경우에는 위에서 설명한 방법을 대안으로 시도해볼 수 있을 것입니다. 처음 사이트를 만들 때 멀티사이트 구조를 적절하게 계획하면 리디렉션 작업이 수월해질 것입니다.

WPML으로 다국어 사이트를 구축하는 경우에는 이런 걱정을 할 필요는 없을 것입니다. 제가 맡은 작업에서는 아바다 테마로 만든 사이트에 WPML을 적용했을 때 커스텀한 부분에 오류가 발생하여 멀티사이트로 전환한 후에 번역을 모두 대체하고 리디렉션 설정을 했습니다.

번역을 복사하여 붙여넣기 하는 작업이 이렇게 어려운 것인지 이번에 실감하게 되었습니다. 특히 사이트 완성 후에 수정되는 사항이 많아서 번역을 교체한 후에 다시 작업하는 일이 반복되어 특히 힘들었습니다.

참고


2개 댓글

  1. 안녕하세요.
    항상 좋은 정보 감사합니다.
    내용중에 플러그인 없이 자바스크립트로만 처리하셨다고 하셨는데 해당 부분에 대해 어떤 스크립트인지 도움 받을 수 있을까요?

댓글 남기기

* 이메일 주소는 공개되지 않습니다.