웹사이트에서 다양한 언어를 지원하는 방법???

궁금한 이유

프로젝트를 만드는데 이용자가 한국인이 아닐 수도 있잖아?라는 생각이 들었다.

다크모드를 지원하는 것처럼 다양한 언어를 지원하는 방법에 대해 궁금해져서 알아보게 되었다.

 

 

다양한 언어를 지원하는 웹 사이트

우선. 텍스트에는 다양한 종류가 있는데 글 제목, 컨텐츠 내용, 나무위키나 신문 같은 긴 아티클, 예나 아니오 또는 특정 선택 버튼 등등이 있겠다.

 

번역할 텍스트에는 종류를 가리지 않으니 이건 넘어가고 이미지도 결국엔 이미지 경로만 바꾸면 되는 것이니 크게 어렵지 않다 생각이 들었다.

 

다만, 이미지 때문에 다양한 언어를 지원할수록 크기가 배로 늘 수밖에 없어서 여기에 대한 해결책은 없을까 생각해 봤는데.. 이미지가 늘어나는 건 어쩔 수 없고 최대한 이미지를 줄이거나 대표 격인 영어로 통일하는 방법이 최적인듯하다.

 

 

서브도메인?

찾다보니 react.dev 나 javascript.info 사이트를 보면 서브도메인으로 ko.react.dev, es.javascript.info 같이 사이트를 구분해 놓은 것을 볼 수 있었다.

 

– 한국어 : example.com
– 영어 : en.example.com
– 일본어 : jp.example.com
– 중국어 : cn.example.com

서브도메인을 이용하는 사이트가 전부는 아니다!

 

네이버와 구글 같은 검색포털은 개인설정을 통해 언어를 바꾸고

카카오는 https://www.kakaocorp.com/page/?lang=ENG&tab=all 다음과 같이 쿼리를 이용해 영어와 한국어로만 바꿀 수 있게 되어있었다. (다크모드와 비슷함)

 

사이트의 성격에 따라 어떤 기능을 이용할지 선택할 수 있는데 아래와 같은 내용은 유의할 필요가 있다.

 

검색 엔진 최적화(SEO)는 서브도메인과 메인도메인을 구분하기 때문에 따로 관리할 필요가 있다. 즉, 도메인 점수가 개별로 책정되기 때문에 서브도메인의 단점이라고 할 수 있다. - 링크

 

이 점 때문에 `서브도메인` 을 이용할 경우 검색에 크게 좌우되지 않거나 다국적을 타깃으로 삼는 사이트가 좋다!

 

 

언어를 바꾸는 방법?

변수를 언어로 둬서 동적으로 바꾸는 방법이 있겠는데 디렉터리 구조를 생각하려니 머리가 아파졌다.

 

 

// constant/introducePage.ts

export const TITLE = {
	ko: "메가 커피",
	en: "Mega Coffee"
}

export const CONTENT = {
	ko: "더 크고 더 맛있다!",
	en: "Bigger, better, tastier!"
}

let lang = "ko"

const localization_title = TITLE[lang] 

제일 먼저 떠오른 방법은 하드코딩(태그에 직접 삽입된 텍스트)을 빼어
따로 디렉터리를 구분해 constant 한 값들을 쭈르륵 나열하는 것이다.

 

 

// localization.json
{
  "ko": {
    "TITLE": "메가 커피",
    "CONTENT": "더 크고 더 맛있다!"
  },
  "en": {
    "TITLE": "Mega Coffee",
    "CONTENT": "Bigger, better, tastier!"
  }
}

// localization.js
import localization from './localization.json';

export const TITLE = localization[language].TITLE;
export const CONTENT = localization[language].CONTENT;

JSON 파일로 구분해 추출하는 방법도 있다. 

JSON 확장자는 특히 개발자가 아니더라도 접근하기 좋아 contribute 받을 때 생각해 보면 더 좋을지도?

 

i18next ??

실제 환경에서는 `i18 next`라는 국제화 프레임워크를 이용하고 있는 곳이 많다고 한다.

다양한 언어 및 플랫폼에 구애받지 않고 다양한 기능과 커뮤니티가 잘 활성화되어있다고 한다.

언어를 변경하는 작업도 프레임워크가 잘 되어있어 구조 생각하느라 머리 짜낼 필요도 없을 것 같다.

 

https://velog.io/@favorcho/i18next-다국어-지원-기능-구현하기

 

 

 

 

 

 

---

 

🧩 참고

https://velog.io/@hyounglee/TIL-80