다국어 사이트란 2개 이상의 언어를 지원하는 웹 사이트를 말한다. 이 글에서는 다국어 사이트를 제작하기 위해서 주의해야 할 점과 다국어 사이트를 지원하는 방법은 어떻게 되는 지 알아본다.
🔎 lang 속성
HTML에는 lang이라는 속성이 있는데 <html lang=’ko’>와 같은 방식으로 사용할 수 있다. 이는 해당 웹 사이트의 언어가 한국어로 이루어져 있다는 것을 의미한다. 그러나 <html lang='en'>으로 설정해도 렌더링되는 웹 사이트는 별반 다를 것 없어보인다. 사실 lang 속성은 웹 접근성을 위한 것이다. lang 속성을 정확하게 명시해야 스크린 리더가 웹 페이지의 텍스트를 음성으로 정확하게 변환할 수 있다. lang 속성의 값으로는 전 세계 언어의 명칭에 고유한 부호를 부여한 표준인 ISO language code를 사용한다.
🚧 문제 상황 & 주의 사항
웹 사이트에서 하나의 언어를 지원하는 경우에는 lang 속성 값만 제대로 명시하면 되지만 다국어를 지원해야 할 경우에는 조금 까다로워진다. 언어마다 폰트, 크기, 길이 등이 다르기 때문에 언어마다 CSS스타일링에서 오버플로우가 발생할 수 있다. 또한 국가마다 통화, 날짜, 시간 등이 다르기 때문에 국가에 맞게 적절하게 데이터를 표시할 수 있어야 한다. 비슷한 문제로 어떤 색상, 아이콘, 이미지들은 국가의 문화에 따라 다른 의미를 가지기 때문에 문화적 의미를 충분히 조사한 후에 적절히 선택해 사용해야 한다.
🔑 다국어 사이트 지원 방법
-
Accept-Language
Accept-Language는 사용자가 사용할 수 있는 언어를 나타내는 것인데 기본적으로 HTTP요청을 보내면Accept-Language도 함께 서버로 전달된다. 서버는 이를 확인하여 적절하게 문서를 제공한다.Accept-Language는 기본값으로 시스템 언어 설정을 가져온다. -
i18n라이브러리
사용자가 사이트에게 사용할 언어를 알려주는 수동적인 방식을 사용하는 경우에 유용한 방법이다. 각 언어별로 json파일을 만들어 관리할 수 있으며 언어에 따라 UI를 적절히 변경할 수 있기 때문에 좋은 방법이다.
