Study in WebFont

Intro

• 한글 웹사이트의 경우 브라우저 및 OS마다 기본폰트도 다르고, 폰트 렌더링 방식도 제각각이다보니 웹사이트 제작시 디자이너-개발자-웹사이트 디자인 의뢰인 간에 폰트를 이미지화 해서 쓸 것인지 등의 이슈 발생.

• WebFont란 방문자의 로컬 컴퓨터에 서비스 제공자가 원하는 서체가 없을 경우, 온라인의 특정 서버에 위치한 서체 파일을 내려받아 화면에 표현할 수 있도록 해주는 웹 전용 서체.

• 원하는 서체를 스타일시트의 @font-face에 등록하고, font-family 속성을 통해 문서 안에서 자유롭게 사용할 수 있다.

장점

• 모든 플랫폼/브라우저 에서 동일한 디자인 경험 제공
• 검색엔진 최적화 (SEO, 이미지 폰트대비)
• 유지보수 관리의 용이성
• 고해상도 디스플레이에서 가독성 향상
• 이미지 텍스트 사용을 줄여 웹접근성 향상

문제점

• 라틴계열의 폰트와는 달리 한국어는 조합 수가 많다. 일반적으로 KS 완성형 2,350자에 숫자, 영문, 특수문자를 포함한다. 따라서 2,350자를 포함하지 않는 일반적인 영문폰트에 비해 그 용량은 몇 배에 달한다. 조합형 11,172자로 만들어진 폰트는 이보다 훨씬 용량이 크다. 따라서 이러한 폰트는 웹폰트로 변환해도 용량이 커, 웹폰트 사용에 걸림돌이 된다.

• 디스플레이 환경에 최적화된 ‘힌팅(Hinting) 폰트’가 부족하다. 힌팅폰트는 크기에 따라 뭉개지거나 가로세로 획의 굵기가 일정하지 않은 문제 등을 해결했기에, 현 디스플레이 환경에서 웹폰트로 적합하다. 대표적인 힌팅폰트로 ‘나눔글꼴’이 있다.

• 한글은 라틴계열보다 폰트 조합이 많고 받침이 있기 때문에 작은 사이즈에서 뭉개질 수 있다. 따라서 폰트 크기 하나하나마다 수작업으로 힌팅을 해야 한다. 힌팅폰트는 모니터 화면에 렌더링되는 문자열에만 의미가 있기 때문에 인쇄용이나 포토샵 같은 그래픽 도구에서는 의미가 없다.

• 고해상도 디스플레이는 힌팅폰트가 아니어도 폰트가 깨끗이 렌더링 된다. 기존 디스플레이 환경에서 힌팅폰트가 필요했던 것은 일반 모니터의 DPI가 현저히 낮았기 때문이다. 하지만 최신 모바일기기나 레티나 같은 고해상도의 디스플레이는 높은 DPI를 가지고 있어 폰트를 더욱 세밀하게 렌더링할 수 있다. 결국 힌팅폰트에 대한 요구도 디스플레이가 고해상도로 옮겨가면 자연스럽게 해결될 문제다.