웹 접근성을 향상시키는 웹폰트

상세페이지

  • HOME > 월별 특집 & 기획

웹 접근성을 향상시키는 웹폰트

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







올바른 웹을 만드는 최선의 선택  
[웹 접근성을 향상시키는 웹폰트]  
2013년 4월, 장애인차별금지법(이하 장차법)이 발효되면서, ‘웹 접근성 프로젝트’가 활발하게 이뤄지고 있다. 하지만 여기에서 ‘장차법’에 대해 논하지는 않겠다. ‘웹 접근성’은 장애 유무와 상관없이 ‘누구나 쉽게 웹에 접근할 수 있도록 플랫폼을 구축하는 것이 목적’이기에 ‘웹 접근성을 위한 웹폰트의 사용방법’에 대해 이야기하고 싶다.




이미지화한 텍스트를 대체하는 웹 타이포그래피



Grid UI 적용 디자인. 선명한 색감와 감각적인 면 분할로 이미지와 텍스트를 분리했다. 출처: palace.co 








단조롭지 않은 구성, GIF 애니메이션과 웹폰트를 잘 활용해 아름다운 디자인을 전달한다. 출처: snask.com







‘이미지화한 텍스트’는 웹 접근성을 위한 올바른 선택이 아니다. 그동안 웹은 ‘영상’과 ‘플래시’ 기반의 화려한 디자인을 선호했다. 임팩트를 전달하기 위해 사용했던 이러한 방식은 멀티 플랫폼을 위한 ‘보편성’을 지녀야 하는 현시점에서 ‘호환성’을 떠나 ‘플랫폼의 퍼포먼스와 네트워크 환경’을 고려했을 때도 최소화하고 배제해야 한다.

이미지화한 텍스트를 선호했던 것도 결국은 아름다움을 위해서였지만(혹은 HTML 코딩을 쉽게 하려고?), 이제 아름다운 웹폰트의 사용과 다양해진 CSS 기법으로 많은 것을 해결할 수 있다.웹 접근성을 위해 이미지에 ‘Alt 정보’를 제공하는 것은 기본적인 가이드이고 꼭 지켜야 할 준수사항이다. 하지만 실제로 많은 텍스트 정보를 담은 이미지를 Alt로 제공하고, 관리하는 것이 효율적이라고 볼 수는 없다.

사이트를 운영하고 이미지를 변경하면서 바뀐 텍스트에 대한 ‘Alt 정보’는 제대로 업데이트하지 않는 경우가 비일비재하기 때문이다. 이를 해결하기 위해서는 기본적으로 ‘이미지’와 ‘텍스트’를 분리해서 디자인해야 한다. 실제로 그리드 형식의 UI에서 그러한 방식을 선호하고 있다. 물론, 현실적인 어려움은 있다. 예를 들어 ‘배너’는 한정된 공간에 ‘이미지’와 ‘텍스트’를 제공해야 한다.

운영하는 입장에서도 자주 교체해야 하는 배너를 이미지로 제작해 업데이트하는 것이 편리할 수 있다. 하지만 설계와 디자인 단계에서 충분히 고려해 서식화하면 웹 접근성과 디자인, 운영의 효율 모두를 포기하지 않아도 근사한 사이트가 탄생할 수 있다. 그리고 이미지화한 텍스트는 고해상도의 디스플레이에서는 가독성이 떨어진다는 것도 다시 한번 염두에 두자.

플래시 사용을 배제하면서 최근 ‘GIF 애니메이션’이 다시 유행하고 있다. 포토샵 CS6에서 제공하는 진보된 타임라인을 사용하면 예전보다 자연스럽고 최적화된 GIF 애니메이션을 제작할 수 있다. 이러한 이미지를 활용해 임팩트를 살리고 아름다운 웹폰트를 최대한 활용해 보는 것은 어떨까? 물론 디자이너에게는 큰 숙제가 될 수 있겠지만 말이다. 





플랙서블 UI와 모바일을 위한 아이콘 폰트의 활용


아이콘 폰트는 소셜 아이콘 세트로 많이 사용하고 있다. 출처: www.entypo.com





(좌)CSS와 결합해 다양한 형태로 활용이 가능하다. 출처: pictonic.co
(우)HTML5, CSS3와 결합하면 더욱 아름다운 스타일을 적용할 수 있다. 출처: pfefferle.github.io/openwebicons  활용



‘아이콘 폰트(Icon Font)’는 최근 SVG와 함께 웹에서 활발하게 사용되고 있다. 웹 접근성을 위한 플랙서블한 UI 적용에 최상의 이미지 사용방법은 ‘벡터’라고 할 수 있다. 아이콘 폰트와 SVG 모두 벡터 기반이기에 플랙서블한 적용이 가능하고 모바일, 레티나 디스플레이와 같이 고해상도의 dpi(ppi)를 가진 디스플레이에서 선명하게 렌더링되기에 기존의 웹 표준 이미지 포맷으로 사용되던 gif, jpg, png를 대부분 대체할 수 있다. SVG가 다양한 색상을 가진 다소 복잡한 백터 이미지 제작에 적합하다면, 아이콘 폰트는 단색의(기본적으로 모노 색상) 단순한 아이콘이나 로고 형태에 적합하다.

SVG와 비교해 아이콘 폰트의 장점은 ‘가벼운 용량’과 ‘높은 호환성’이다. SVG도 기존의 이미지 포맷과 비교하면 상당히 가벼운 이미지이지만, 아이콘 폰트는 이보다 훨씬 가볍다. 그 이유는 SVG는 ‘XML’ 기반의 파일이고, 아이콘 폰트는 ‘Binary’ 기반 파일이기 때문이다. 또한 SV G는 IE 8 이하와 안드로이드 2.X버전에서 호환성 문제로, 현재는 ‘SVG ’와 ‘PNG’ 두 가지 타입으로 이미지를 제작해 분기작업을 통해 제공하는 것이 일반적이다.

하지만 아이콘 폰트는 IE 7 이하 지원을 위한 스크립트를 적용하면 다른 이미지 포맷 없이도 사용 가능하다. ‘딩벳 폰트(Dingbat Font)’가 유행한 적이 있었다. 알파벳 대신 주제별로 여러 가지 조형 폰트를 만든 것인데, 십수 년 전부터 인쇄물, 웹 등에 종종 사용된 폰트다. 반면 아이콘 폰트는 ‘웹폰트’로 사용하기 위해 제작된 폰트라고 할 수 있다(아이콘 폰트는 생성이나 적용방법에도 차이가 있다).  
참고사이트

fontello.com 원하는 아이콘을 웹폰트로 내려받아 사용 가능해 유용하다.
Pictonic 아이콘을 웹폰트로 제공하는 서비스. 수백 개의 무료 아이콘도 제공 중이다.
IcoMoon 자신이 갖고 있는 벡터 파일을 올려 아이콘 폰트로 생성할 수 있다. 생성한 아이콘 폰트를 클라우드 웹폰트 방식으로 이용할 수 있는 유료 서비스도 제공 중이다.

 

플랫·미니멀, 더욱 중요해지는 타이포그래피




iOS7의 날씨앱, 간결한 디자인 안에 타이포그래픽이 돋보인다. 출처: www.apple.com/ios/ios7 
정갈하고 현대적인 ‘THE정고딕’은 Neue Helvitica와 조화로운 폰트다. 출처: 타이포링크



현재의 웹과 모바일의 디자인 트렌드는 ‘플랫(Flat)’과 ‘미니멀(Minimal)’로 정의된다. UI 측면에서 큼직한 아이콘, 간결한 색상과 타이포그래피는 더욱 중요해졌다. 얼마 전에 발표한 iOS7의 스타일 역시 현 트렌드를 그대로 반영했다고 볼 수 있다. iOS7에서 눈에 띄는 또 다른 변화는 폰트다. 그들이 선택한 것은 바로 ‘Neue Helvetica Ultra Light’이다.

따라서 이제 모바일에서는 극도의 단순함과 가는 굵기, 유연한 아름다움을 지닌 이 폰트의 선택이 늘어날 것이고, 국내에서는 이 폰트와 조화로운 한글 폰트 선택이 많아질 것으로 보인다. 웹 접근성을 말하면서 ‘장차법’과 관련된 내용을 언급하지 않은 것은, 개인적으로 ‘장차법’의 의도는 환영하지만, 지금의 ‘웹 접근성 인증마크’ 평가 방식은 진정한 웹 접근성 평가라고 보기 어렵기 때문이다.
 
이는 멀티 브라우저와 멀티 플랫폼 환경에 대한 평가와 함께 이뤄지지 않고 있다. ‘웹 접근성 인증마크’를 획득한 많은 사이트가 모바일에서는 아직 구동되고 있으니 말이다. 개인적으로 큰 아쉬움과 조금의 불만이 남는 부분이다. 다음 호에는 마지막으로 클라우드 웹폰트 서비스와 적용사례를 소개하겠다.
 
타이포링크
클라우드 웹폰트 서비스 ‘타이포링크’에서는 빠르게 변하는 웹 환경과 기술에 필요한 서비스를 제공하기 위해 다양한 연구를 하고 있으며, 현재 1,000개 이상의 한글 웹폰트를 제공하고 있다.




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

tags 타이포링크 , 리플렉션 , 웹 폰트 , 폰트 서비스

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

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

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

관련기사

최신뉴스
기업탐방
한글을 위한 클라우드 웹 폰트 서비스 타이포링크(typolink)
월별 특집 & 기획
웹 접근성을 향상시키는 웹폰트
월별 특집 & 기획
공병각 토크쇼 ‘감성 손잡기’ 갖고 싶다, 공병각
월별 특집 & 기획
클라우드 웹폰트 서비스의 소개와 적용사례

정기구독신청