iris.dew

영문 홈페이지 추가하기

September 07, 2021

다국어 홈페이지를 지원하는 것은 글로벌 서비스라면 필수!

보통 한국어와 영어는 기본!, 다국적 기업의 경우 그 외에 다양한 언어로 홈페이지를 보여준다.

image

image


💁‍♂️ 사용자가 원하는 언어로 홈페이지를 보여주는 방법

  1. 최초 접속 시 브라우저 설정 언어에 따라 사용자 언어 셋팅
  2. 사용자 언어 설정 정보를 쿠키/세션/로컬스토리지에 저장
  3. 이후 접속 시 쿠키/세션/로컬스토리지에 저장된 값 기준으로 언어 셋팅
  4. 사용자가 언어 설정을 변경할 경우 쿠키/세션/로컬스토리지의 저장된 언어 정보도 변경

🤔 왜 사용자의 언어 정보 쿠키/세션/로컬스토리지에 저장하나?
- 홈페이지 재방문시 사용자가 설정한 언어로 보여짐
- 브라우저는 영어로 설정해놓는 한국인 등등 다양한 사용자가 존재

cf. 서버에서 사용자가 접속한 ip주소를 바탕으로 접속한 위치에 따라 언어를 설정해주는 방법도 있다!


🌎 브라우저 설정 언어 가져오기

navigator.language 를 사용하여 가져올 수 있다.
다만, 브라우저에 따라 지원되지 않을 수도 있고 반환 값이 다를 수 있으므로 확인 후 사용하여야한다!

image caniuse.com에서 확인해보았을 때 ie 6-10을 제외하고는 왠만한 브라우저에서는 지원된다.
하지만 ie 6-10 사용자를 포기할 수 없다면…!
navigator.userLanguage나 navigator.systemLanguage로 사용자의 언어를 가져올 수 있다 navigator.userLanguage 관련
IE 사용자의 “브라우저” 설정 언어 가져오는 방법

반환값이 ko-KR, ko 등으로 브라우저마다 다르게 돌아올 수 있으므로 전처리를 거쳐 사용하면 좋다.

lang = lang.toLowerCase(); //받아온 값을 소문자로 변경
lang = lang.substring(0, 2); //소문자로 변경한 갚의 앞 2글자만 받아오기

cf. Chrome에서 브라우저 언어 설정 변경하기
- `설정 > 고급 > 언어` 에서 변경할 수 있다

🍪 쿠키에 값 저장하기

로컬스토리지에 저장하는 경우도 많은 것 같으나, 이미 Google Assistant 관련 등 다른 정보들이 이미 쿠키로 저장되어있었기 때문에 사용자 언어 정보도 쿠키에 추가했다.


⚠️ 쿠키 주의할 점 1 : 인코딩
쿠키의 이름과 값에는 특별한 제약이 없기 때문에 모든 글자가 허용됨.
다만, 형식의 유효성을 일관성 있게 유지하기 위해 이름과 값을 처리해서 사용함!
escape, encodeURIComponent 등으로 공백이나 특수문자, 한국어 등을 인코딩한다.


⚠️ 쿠키 주의할 점 2 : 만료 설정
쿠키 만료시간을 따로 설정하지 않으면 브라우저 종료시 소멸된다.
(cf. 브라우저를 종료할 시점에 쿠키 저장을 설정한다면 or 이미 브라우저에서 쿠키 저장이 설정되어 있다면 클라이언트가 지정한 메모리에 쿠키가 저장된다. *일반적으로 사용자가 브라우저의 쿠키데이터를 비우거나 금지하지 않는다면 쿠키 데이터는 계속해서 유지된다*)
`expires`나 `max-age` 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제되지 않는다
쿠키를 저장할 때 아래와 같이 expires를 붙여서 함께 저장할 수 있다. 
let date = new Date(Date.now() + 86400e3); // 만료기간 하루로 설정
date = date.toUTCString();
document.cookie = "user=John; expires=" + date;

쿠키를 사용할 때는 보통 함수로 만들어 사용한다.
- ex) `getCookie`, `setCookie`
[참고 블로그](https://thereclub.tistory.com/59)



➡️ 언어별 페이지로 이동시키기

ex)

window.location.replace('/en/index.html)

cf. location.href와 location.replace의 차이점



Referenc



Written by@irisdew
Junior Frontend Developer

GitHub