일본어 웹사이트 제작하기 – 폰트적용

글로벌 웹서비스를 개발하는데 있어서 어려운 점 중의 하나는 서체입니다. 1955년 font 태그가 등장한 이후, 디자이너들은 웹사이트에서 사용되는 서체를 정의하고 타이포그래피를 통해서 보다 더 유려하고 가독성 있는 디자인을 선보이고자 하였습니다. 하지만 서로 다른 시스템과 브라우저를 사용하는 유저들에게 같은 디자인적인 경험을 주는 것은 어려운 일이었고, 이는 오랫동안 많은 검색, 전송 용량 그리고 콘텐츠의 자유로운 이용이라는 측면에서 많은 한계점을 가지고 있었습니다.

google

[타국어 타이포그래피를 신경써야하는 이유 by google ]

근래에 들어서는 웹폰트 개발 및 임베드 기술이 점점 더 보편화하고 손쉽게 이용할 수 있어서 디자이너가 원하는 타이포그래피를 이미지로 만들어 붙이지 않아도 자연스럽게 페이지 위에 올릴 수 있게 되었습니다. 하지만 알파벳을 사용하는 영미권과 달리, 한자를 사용하는 아시아권 웹사이트들에겐 여전히 어려운 숙제입니다.

Kollus 일본어 버전을 제작하면서도 같은 고민이 있었습니다. 일반적으로 일본어 서체는 8,000 ~ 16,000개의 결합 글꼴을 필요로 합니다. 그래서 적은 수의 글꼴을 사용하는 알파벳이 비해서 일본어 서체는 웹폰트로 사용하기엔 용량이 너무 커서 현실적으로 어려운 일입니다. 그런 이유로 대부분의 일본어 웹사이트는 Windows 또는 Mac에서 제공하는 기본 서체 세트를 사용합니다.

최근 사용되는 일본어 서체의 경향은 メイリオ(Meiryo)와 ヒラギノ角ゴ Pro(Hiragino Kaku Gothic Pro)입니다. 한글로 치면 Windows Vista부터 추가된 ‘맑은고딕’과 같은 클리어 타입의 서체로 깔끔한 타이포그래피를 보여줍니다.

하지만 Windows XP 지원이 올해부터 종료되었다고 해도 아직 Windows XP 사용자들이 있기에 Meiryo와 Hiragino Kaku Gothic Pro이 없을 수 있으니, MS Gothic(혹은 MS Mincho)과 Osaka를 추가해야 합니다. 또한 브라우저에서 서체 인식을 할때 일본어를 인식하지 못하는 경우도 있기에 서체 이름을 일본어명과 영어명을 같이 써야하기도 합니다.

따라서 일본어 서체를 지원하는 CSS 선언은 다음과 같습니다.
일본어만 지원 시:

font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”,Osaka, “メイリオ”, Meiryo, “MS Pゴシック”, “MS PGothic”, sans-serif;
일본어와 한국어 동시 지원 시:

font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”,Osaka, “メイリオ”, Meiryo, “MS Pゴシック”, “MS PGothic”, “맑은고딕”, “malgun gothic”,  “돋움”, dotum, sans-serif;

만약 일본어와 한국어를 동시에 표기한다면 한국어 폰트를 나중에 지정하는 것이 좋습니다. 맑은 고딕에서 한자가 포함되어 있지 않고, 맑은고딕을 우선으로 하면 맑은고딕의 일본어가 표기되어 서체의 밸런스가 맞지 않아 디자인의 디테일이 떨어지게 됩니다.

hiragino

[ヒラギノ角ゴ Pro(Hiragino Kaku Gothic Pro) 사용]

또한 보수적인 유저가 많은 일본 시장의 경우, 도입된지 얼마되지 않은 メイリオ(Meiryo)보다 사용자에게 익숙한 MS Gothic을 더 선호하는 경향도 있습니다. 마치 우리나라에서도 맑은고딕보다  익숙한 굴림 서체를 더 선호하는 사례를 생각하면, 유저층에 따라 メイリオ(Meiryo)와 ヒラギノ角ゴ Pro(Hiragino Kaku Gothic Pro)를 무조건적으로 우선시 선언하는 것보다 MS Gothic을 먼저 선언하는 경우도 있을 수 있습니다.

mspgothic

[MS Gothic 사용]

한자권 국가의 서체를 지원하는 일은 어려운 일입니다. 그래서 얼마 전 어도비와 구글이 협력하여 한국∙일본∙중국 3개국어와 라틴어를 통합 지원하는 무료 서체 ‘본고딕’를 만들었습니다. 세계인구의 1/4이 쓰는 서체를 만드는 것인 만큼 상당히 신경써서 제작하여 각 나라 글꼴의 특색을 살리면서 동시에 사용하여도 통일감을 해치지 않게 보여집니다.
http://blog.typekit.com/alternate/source-han-sans-kor/

한중일 통합 서체 모음인 본고딕(Source Han Sans)을 지원하는 OS가 앞으로 많아진다면 웹에서 사용되는 서체에 대한 고민이 많이 줄어들 것 같습니다.:D

Posted by 송준의@카테노이드 연구소

2 Comments

    1. KOLLUS

      안녕하세요! 김나윤님, 도움이 되셨다니 더 기쁨니다^^
      온라인비디오플랫폼 Kollus(콜러스) Blog는 온라인 동영상 비즈니스에 관련된 다양한 정보를 지속적으로 제고하고 있으니 많은 방문 부탁드려요~ Facebook https://www.facebook.com/catenoid 도 운영 중이니 “좋아요” 클릭, Kollus 에서 제공하는 정보를 지속적으로 받아보세요.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다