올바른 웹을 만드는 최선의 선택, 웹폰트

상세페이지

  • HOME > 월별 특집 & 기획

올바른 웹을 만드는 최선의 선택, 웹폰트

  올바른 웹을 만드는 최선의 선택  모바일시대에 필수적인 웹폰트

  #1. 모바일시대에 필수적인 웹폰트
#2. 웹 접근성을 향상시키는 웹폰트
#3. 클라우드 웹폰트 서비스의 소개와 적용사례
내용 월간web web@websmedia.co.kr

 
대다수 사용자가 윈도우에서 인터넷 익스플로러(이하 IE), 맥 OS에서 사파리가 당연한 줄 알던 2012년 6월의 어느 날, iOS용 ‘구글 크롬’ 브라우저가 출시됐다. 그 시점을 전후로 세계 브라우저 점유율 1위는 IE에서 크롬으로 바뀐다. 이런 변화는 국내환경에도 영향을 줬다. 현재 국내 크롬의 점유율은 20%에 육박한다. PC와 모바일 환경의 동기화, 빠른 브라우저에 대한 요구 등이 요인이다.

이는 정말 중요한 변화다. 그동안 국내 웹 표준화는 외국에 비해 다소 뒤처진 경향이 있었는데, 그것엔 지나친 IE 중심의 브라우저 환경이 한몫했다. 물론, 국내에서 IE는 여전히 높은 점유율을 차지하고 있지만, 모바일 사용 증가, 액티브X 퇴출과 장애인차별금지법 발효에 따른 웹 표준화는 이제 피할 수 없는 사항이기에 다른 브라우저의 점유율은 더욱 높아질 것이다.



웹폰트 활성화의 중심에도 역시 ‘모바일’

‘웹폰트’의 활성화는 이러한 환경의 변화와 밀접한 관계가 있다. 그리고 그 중심에 ‘모바일’이 있다. 그렇다면 모바일이 웹폰트 활성화에 어떤 영향을 줬는지 살펴보자.  먼저, 폰트에 대한 일관된 경험이 필요했다. 기존에는 웹사이트를 만들 때, PC와 윈도우만을 고려했다. 따라서, 윈도우에 기본 탑재한 돋움, 굴림체를 웹사이트 기본폰트로 지정했다.

시간이 흘러, 다양한 기기를 통한 웹사이트 접속이 늘어나면서 어떤 플랫폼에서도 같은 폰트를 로딩할 수 있는 웹폰트 사용이 증가하기 시작했다. 웹 기술 트렌드에도 모바일을 위한 다양한 시도가 이뤄졌다. 다양한 기기와 해상도 지원을 위한 반응형 웹 구현, 모바일 또는 고해상도 디스플레이를 위한 이미지 포맷 SVG와 아이콘 폰트의 사용, 플래시 감소와 제이쿼리를 활용한 인터랙티브 증가, 크로스 플랫폼을 위한 HTML5 구현 등을 들 수 있다. 이러한 기술을 구현함에 웹폰트 사용은 중요한 요소다.




2012년 5월과 6월경 뒤바뀐 순위는 현재도 크롬이 전 세계 브라우저의 40%를 점유하며 유지하고 있다 출처: 스테이트카운터


다양한 해상도에 따라 유연한 화면을 구현하기 위해서 기존과 같이 ‘이미지화된 텍스트’는 한계가 있다. 고해상도 디스플레이에서 72PDI로 제작한 이미지는 웹폰트와 같은 선명함을 표현하지 못한다. 타이포그래피는 벡터로 제작된 이미지를 렌더링해 동작을 구현할 수 있던 플래시가 사양길에 들어서면서 HTML5, CSS3, 제이쿼리와 결합해 다양한 디자인과 인터랙티브를 구현하기 시작했다. 장차법을 배려해 ‘정보를 텍스트화’함에도 웹폰트는 필수적인 선택이다.



웹폰트 사용절차

웹폰트는 웹사이트에 접속한 사람의 디바이스에 웹사이트에서 지정한 폰트가 설치돼 있지 않아도 폰트를 로딩해 화면에 렌더링하며, 기존 PC에서 사용하던 TTF 또는 OTF 폰트를 멀티 브라우저에 호환 가능한 웹폰트 포맷으로 변환한다. 변환한 폰트를 온라인에 올려 폰트 경로를 생성하면, 웹사이트 소스에 해당 폰트의 경로를 설정해, 접속자의 브라우저에서 해당 폰트를 렌더링한다.

웹폰트를 사용할 때는 몇 가지 해결할 사항이 있다. 우선, 사용하려는 폰트가 완전한 무료 폰트가 아니라면 웹폰트 라이선스를 획득해야 한다.일반적으로 온라인이나 패키지로 구매하는 폰트의 라이선스는 웹폰트 라이선스와 별개로 해당 폰트사에 별도 문의가 필요하다.웹폰트 라이선스를 획득했다면 웹폰트 라이선스를 구매해도 일반적으로 폰트사에서 웹폰트가 아닌 TTF 폰트로 제공하기 때문에 별도의 변환이 필요하다.

현재 일반적으로 사용하는 웹폰트 포맷은 EOT, WOFF, TTF다. 최신 브라우저 대부분 WOFF를 지원하나 이전 브라우저 버전과 모바일 지원을 위해 위와 같은 다양한 웹폰트 포맷으로 변환해야 한다. 웹폰트 변환을 완료하면, 웹사이트 접속자의 환경을 분석해 적합한 폰트를 전송할 수 있도록 ‘분기화 작업’을 한다. 이러한 작업을 완수하면, 웹폰트는 웹 사이트에서 올바르게 보일 것이다.



한글 웹폰트의 문제점 1. 용량

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



한글 웹폰트의 문제점 2. ‘힌팅폰트’의 공급부족

또 한가지 문제점은 바로 디스플레이 환경에 최적화하도록 제작된 ‘힌팅(Hinting) 폰트’가 부족하다는 것이다. 힌팅된 폰트는 크기에 따라 뭉개지거나 가로세로 획의 굵기가 일정하지 않은 문제 등을 해결했기에, 현 디스플레이 환경에서 웹폰트로 적합하다. 대표적인 폰트로 ‘나눔글꼴’이 있다. 문제는 이러한 힌팅폰트 제작에는 상당한 노력과 비용이 들어간다는 사실이다.

위에서 언급했듯, 한글은 라틴계열보다 폰트 조합이 많고 받침이 있기 때문에 작은 사이즈에서 뭉개질 수 있다. 따라서 폰트 크기 하나하나마다 수작업으로 설명서 힌팅을 해야 한다. 이렇게 많은 노력과 비용을 들여야 힌팅폰트를 완성하지만, 지금까지 그에 대한 수요가 거의 없었다. 힌팅폰트는 사실 인쇄용이나 포토샵 같은 그래픽 도구에서 전혀 의미가 없다. 모니터 화면에 렌더링되는 문자열에만 의미가 있기 때문이다.



모바일에서 폭넓은 선택이 가능

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





1. 힌팅이 적용된 폰트(우)는 그렇지 않은 폰트(좌)와 다르게 안티 앨리어싱을 적용하지 않아도 획의 굵기가 일정하다 출처: cooper.com


2. 릭스스마트고딕 - 디자이너들이 선호하는 릭스고딕을 힌팅폰트로 새롭게 제작했다. 출처: 타이포링크


3. 릭스스마트고딕을 적용한 두산 웹 사이트



 


글 김지원 리플렉션/타이포링크 팀장

tags 폰트 , 유료 폰트 , 무료 폰트

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
기업탐방
한글을 위한 클라우드 웹 폰트 서비스 타이포링크(typolink)
인물 인터뷰
도전하는 캘리그래퍼 공병각
월별 특집 & 기획
올바른 웹을 만드는 최선의 선택, 웹폰트
월별 특집 & 기획
웹 접근성을 향상시키는 웹폰트
월별 특집 & 기획
공병각 토크쇼 ‘감성 손잡기’ 갖고 싶다, 공병각

정기구독신청