562돌 한글날 맞아 '웹폰트' 활용 가능성을 실험하다.
웹폰트(web fonts)는 활용하기에 따라 좋은 점도 많지만, IE 웹브라우저만 지원하는 관계로 다양한 브라우저를 통해 독자들이 접속하는 블로그나 웹사이트에 웹폰트(web fonts)를 적용하는 것이 선뜻 내키지 않는다는 사실에 공감한다.
더군다나 블로그는 텍스트 중심의 콘텐츠가 많은 탓에 가독성 확보가 가장 우선 시 되기 때문에 IE사용자만 고려한다면 별 문제가 없겠지만, 타 브라우저 사용자에게는 폰트 크기의 변화로 오히려 가독성을 해치는 결과를 불러 올 수 있다는 여지도 안고 있다.
하지만, 언제까지 돋움이나, 굴림에 얽매여 정형화된 틀에만 머무를 수 없다는 생각에 타이포그래피 속성을 최대한 활용하여, 웹폰트가 블로그에 얼마만큼 잘 어울릴 수 있는지 실험적인 적용을 진행해 보기로 했다.
블로그의 웹폰트 적용 사례 -디자인로그
블로그의 웹폰트 적용은 이미 작년에 있었던 561돌 한글날에 지원받은 우리바탕체를 통해 경험해 보았지만 블로그에서 전체적인 조화를 이끌어 내는 것은 다소 어려운 점이 있어 다시 돋움과 굴림으로 돌려 놓았던 기억이 있다. 하지만 이후 웹폰트(web fonts) '우리새봄120'이 발표되었고, 제목용 및 시니어 세대를 위한 본문용 서체로 명조와 고딕의 절충형태로 세련된 균형미를 갖춰 감성적인 웹폰트 '우리새봄'체는 마음을 설레이게 하기도 했었다.
이번에 진행한 실험적인 웹폰트의 블로그 적용에 즈음하여 웹폰트 '우리새봄120'을 기준으로 적용했는데, 볼드타입이라 콘텐츠의 제목용으로는 좋았지만 본문서체로는 다소 눈의 피로감을 느껴졌고, 독자들의 의견들의 의견 또한 세련되고, 가독성은 있지만 눈의 피로감을 느낀다고 답했다.
이후 본문체를 우리바탕체로 전환하여 우리새봄체에서 느낄 수 있었던 눈의 피로감은 줄였지만, 우리바탕체 또한 자평이 세로가 긴 편이라 가독성은 있어도 다소 심리적인 안정감은 부족한 느낌이 들었고, 타 브라우저와 안정적인 호환을 고려한 폰트 크기 조정이 기대만큼 쉽지 않아 아쉬운 점이 있었다.
이러한 몇 가지 문제를 해결하기 위해 렉시테크에 우리신문체 사용을 동의받아 다시 가독성과 블로그 전체 콘텐츠와의 조화를 위한 최적화 과정을 진행해 볼 수 있었다. 블로그 콘텐츠를 구성하는 CSS파일에 담긴 폰트 속성을 편집하여 제목은 '우리새봄120'을 적용시키고, 본문 및 서브 타이틀, 사이드 바의 콘텐츠는 '우리신문' 웹폰트를 적용시킴으로써 최대한 편안하고 가독성이 확보될 수 있도록 했다.
지금 보고있는 디자인로그 블로그는 웹폰트 '우리새봄120'과 '우리신문'을 적용해 나름대로 최대한 파이어폭스3과 구글크롬 등 타 인터넷 브라우저의 폰트크기 조화를 감안해 최적화 시킨 모습이다. 타 브라우저로 보면 웹폰트를 지원하지 않기 때문에 웹폰트가 적용된 모습은 볼 수 없지만 폰트크기의 변화는 그대로 유지되어 불편함이 없도록 되어있다.
웹폰트 우리새봄과 우리신문을 이용, 약간의 폰트 속성을 조정해 꾸민 블로그의 모습은 제목과 본문이 확연하게 구분되어 콘텐츠를 한 눈에 살펴볼 수 있고, 본문에 적용된 우리신문체는 가로 자평이 넓은 웹폰트라 앞서 적용되었던 우리바탕에 비해 훨씬 편안하고 가독성이 확보된 느낌이 든다는 게 개인적인 평가다. 아울러 명조의 고딕이 절충된 우리새봄체의 부드러움과 우리신문체의 안정적인 모습이 콘텐츠의 신뢰감을 높이며, 블로그 전체의 분위기를 한결 부드럽게 만들어 내고 있다.
청와대 브리핑도 우리신문 명조체 적용
웹폰트TTF 설치후 파이어폭스3 에서 본 웹폰트 적용 블로그 모습
댓글 영역