태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

웹폰트 적용 블로그, 부드럽고 가독성 좋아

분류: Design Information/Design Fonts 작성일: 2008.10.08 20:17 Editor: 마루[maru]

562돌 한글날 맞아 '폰트' 활용 가능성을 실험하다.

폰트(web fonts)는 활용하기에 따라 좋은 점도 많지만, IE 브라우저만 지원하는 관계로 다양한 브라우저를 통해 독자들이 접속하는 블로그사이트에 폰트(web fonts)를 적용하는 것이 선뜻 내키지 않는다는 사실에 공감한다.

더군다나 블로그는 텍스트 중심의 콘텐츠가 많은 탓에 가독성 확보가 가장 우선 시 되기 때문에 IE사용자만 고려한다면 별 문제가 없겠지만, 타 브라우저 사용자에게는 폰트 크기의 변화로 오히려 가독성을 해치는 결과를 불러 올 수 있다는 여지도 안고 있다.

하지만, 언제까지 돋움이나, 굴림에 얽매여 정형화된 틀에만 머무를 수 없다는 생각에 타이포그래피 속성을 최대한 활용하여, 폰트가 블로그에 얼마만큼 잘 어울릴 수 있는지 실험적인 적용을 진행해 보기로 했다.

블로그폰트 적용 사례 -디자인로그

이번 폰트(web fonts) 활용을 위한 작은 실험은 다양한 폰트(web fonts)를 제작. 배포하고 있는 렉시테크의 도움을 받아 별 어려움 없이 진행할 수 있었고, 지난 1주일간 블로그에 다양한 폰트를 적용시켜 보며, 독자들과 방문자의 반응을 들어보는 시간을 가져 보았다.

블로그폰트 적용은 이미 작년에 있었던 561돌 한글날에 지원받은 우리바탕체를 통해 경험해 보았지만 블로그에서 전체적인 조화를 이끌어 내는 것은 다소 어려운 점이 있어 다시 돋움과 굴림으로 돌려 놓았던 기억이 있다. 하지만 이후 폰트(web fonts) '우리새봄120'이 발표되었고, 제목용 및 시니어 세대를 위한 본문용 서체로 명조와 고딕의 절충형태로 세련된 균형미를 갖춰 감성적인 폰트 '우리새봄'체는 마음을 설레이게 하기도 했었다.

이번에 진행한 실험적인 폰트의 블로그 적용에 즈음하여 폰트 '우리새봄120'을 기준으로 적용했는데, 볼드타입이라 콘텐츠의 제목용으로는 좋았지만 본문서체로는 다소 눈의 피로감을 느껴졌고, 독자들의 의견들의 의견 또한 세련되고, 가독성은 있지만 눈의 피로감을 느낀다고 답했다.

이후 본문체를 우리바탕체로 전환하여 우리새봄체에서 느낄 수 있었던 눈의 피로감은 줄였지만, 우리바탕체 또한 자평이 세로가 긴 편이라 가독성은 있어도 다소 심리적인 안정감은 부족한 느낌이 들었고, 타 브라우저와 안정적인 호환을 고려한 폰트 크기 조정이 기대만큼 쉽지 않아 아쉬운 점이 있었다.

이러한 몇 가지 문제를 해결하기 위해 렉시테크에 우리신문체 사용을 동의받아 다시 가독성과 블로그 전체 콘텐츠와의 조화를 위한 최적화 과정을 진행해 볼 수 있었다. 블로그 콘텐츠를 구성하는 CSS파일에 담긴 폰트 속성을 편집하여 제목은 '우리새봄120'을 적용시키고, 본문 및 서브 타이틀, 사이드 바의 콘텐츠는 '우리신문' 폰트를 적용시킴으로써 최대한 편안하고 가독성이 확보될 수 있도록 했다.

지금 보고있는 디자인로그 블로그폰트 '우리새봄120'과 '우리신문'을 적용해 나름대로 최대한 파이어폭스3과 구글크롬 등 타 인터넷 브라우저의 폰트크기 조화를 감안해 최적화 시킨 모습이다. 타 브라우저로 보면 폰트를 지원하지 않기 때문에 폰트가 적용된 모습은 볼 수 없지만 폰트크기의 변화는 그대로 유지되어 불편함이 없도록 되어있다.

폰트 우리새봄과 우리신문을 이용, 약간의 폰트 속성을 조정해 꾸민 블로그의 모습은 제목과 본문이 확연하게 구분되어 콘텐츠를 한 눈에 살펴볼 수 있고, 본문에 적용된 우리신문체는 가로 자평이 넓은 폰트라 앞서 적용되었던 우리바탕에 비해 훨씬 편안하고 가독성이 확보된 느낌이 든다는 게 개인적인 평가다. 아울러 명조의 고딕이 절충된 우리새봄체의 부드러움과 우리신문체의 안정적인 모습이 콘텐츠의 신뢰감을 높이며, 블로그 전체의 분위기를 한결 부드럽게 만들어 내고 있다.

청와대 브리핑도 우리신문 명조체 적용

아쉽게도 작년 11월 21부터 청와대 브리핑에 적용되었던 우리신문 명조체정확한 이유는 알 수 없지만 새 정권으로 바뀌면서 더 이상 적용되지 않고 있어 안타까운 마음이 앞서기도 한다. 그러나 이에 반해 10월 9일 10시에는 iMBC와 동아닷컴 그리고 국내 인터넷 언론사들이 제안한 '한글 르네상스 캠페인'을 통하여 ‘우리폰트’를 무료 배포하는 행사를 통해 우리 한글이 가진 과학성과 아름다움을 재발견하고, 양질의 타이포그래피를 대중으로 하여금 편히 사용하게 만들자는 바람이 불고 있기도 하다.
 
아쉽게도 ie에서만 볼 수 있는 폰트의 특성 때문에 많은 사용자들이 꺼려하고 있기도 하지만 최근 들어 곳곳에서 아름다운 한글을 살리기 위한 다양한 움직임이 일어나고 있고, 또한 렉시테크에서는 전 국민의 컴퓨터에서 한글을 편하게 쓸 수 있게 되는 것을 목표로 다양한 폰트를 만들어 보급에 나서고 있는 상황이다. 아울러 다행스럽게도 개인PC에 폰트 TTF파일을 설치하면 블로그사이트에 적용한 해당 폰트를 ie에서 보는 것과 같이 타 브라우저에서도 볼 수 있다는 사실도 알게 되었다.

사용자 삽입 이미지

폰트TTF 설치후 파이어폭스3 에서 본 폰트 적용 블로그 모습

이렇듯 폰트(web fonts)를 제작. 배포하는 노력에 대중이 동참하여 힘을 실어 주면 아름다운 우리한글을 돋보이게 하는 다양한 폰트의 개발이 활성활 될 것이며, 인터넷 공간에서 미려한 아름다움과 우수성을 가진 한글을 파도치는 모습을 쉽게 볼 수 있는 날이 머지않아 열리게 될거란 기대를 가지며, 내일이면 562돌을 맞이하는 한글날을 계기로 누리꾼들이 한번쯤 폰트(web fonts)의 활용에 많은 관심을 가져 주었으면 하는 마음이다.

저작자 표시 비영리 변경 금지
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://mirai.tistory.com BlogIcon 泉みらい 2008.10.08 20:45 신고  댓글주소  수정/삭제  댓글 남기기

    제가 알기로는 웹폰트는 웹에서만 사용가능한 폰트로 알고 있어요.

    그런데 내용 중에 '다행스럽게도 개인PC에 웹폰트 TTF파일을 설치하면 블로그나 웹사이트에 적용한 해당 웹폰트를 ie에서 보는 것과 같이 타 브라우저에서도 볼 수 있다는 사실도 알게 되었다.'라는 문구를 보면 그건 웹폰트가 아니라 일반 트루타입(http://ko.wikipedia.org/wiki/%ED%8A%B8%EB%A3%A8%ED%83%80%EC%9E%85) 폰트를 설치해서 사용하게 되는 것이 아닌가 싶은데요.


    개인적으로는 IE에만 적용되는 웹폰트는 본문 내용대로 IE에만 적용되는 게 문제인 게 사실이라 저도 쓰기는 싫네요. 적용해봤자 당장 저부터 쓸 수 없으니까요.

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.08 21:04 신고  댓글주소  수정/삭제

      ^^맞습니다. 일반적으로 사용되는 웹폰트의 트루타입폰트를 개인PC설치하면 파이어폭스와 같은 다른 브라우저로 같은 웹폰트를 적용한 블로그나 웹페이지를 만나도 웹폰트가 적용된 페이지를 그대로 볼 수 있다는 이야기입니다.
      혹시 이해하시는데 도움이 되실까봐 첨부 이미지를 업데이트 해 놓았습니다.
      웹폰트를 적용하시고 싶은 마음이 생기시면 다음에라도 한번 시도해 보시길 바랍니다.^^

    • Favicon of http://www.lesmin.com/blog BlogIcon lesmin 2008.10.08 21:22 신고  댓글주소  수정/삭제

      저도 웹폰트의 활용도에 대해서는 긍정적으로 생각하고 있으나, 불여우 등에는 차후버전에나 웹폰트가 포함될것 같습니다.
      일반적인 윈도우즈용 TTF폰트를 이용하는 방법은, 웹폰트처럼 특정 도메인으로 사용을 제한시키는 장치가 없고 용량이 상대적으로 크기 때문에, 웹폰트의 장점을 하나도 살리지 못하게 됩니다.
      하루빨리 웹폰트가 모든 브라우저에서 지원되었으면 하는 바램입니다.

    • Favicon of http://mirai.tistory.com BlogIcon 泉みらい 2008.10.08 22:20 신고  댓글주소  수정/삭제

      좀 까칠하게(?) 말했지만 저도 예쁜 폰트 쓰는 게 좋으니까 lesmin 님 말씀대로 IE전용만 아니면 좋겠습니다.

  2. Favicon of http://gongple.ip.or.kr BlogIcon 공상플러스 2008.10.08 21:23 신고  댓글주소  수정/삭제  댓글 남기기

    전뭐.... 웹폰트가 앤티앨리어싱이 되지 않아 고민을 하고 있습니다.
    곧 새로 블로그를 리녈할려구요

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.09 10:36 신고  댓글주소  수정/삭제

      IE6은 안티앨리어싱 처리가 안되는데... 파폭3과 ie7에서는 자동적으로 안티앨리어싱처리가 되어 보이는 것 같습니다.
      리뉴얼에 한번 적용해 보시길 바랍니다.

  3. Favicon of http://genchicken.kr BlogIcon 닭장군 2008.10.09 02:09 신고  댓글주소  수정/삭제  댓글 남기기

    저도 웹폰트를 써보려고 했다가... 브라우저 문제때문에 말았지요. 음흐흐.. 제로보드 스킨을 만들때 할 수 있다면 웹폰트를 같이 만들면 스킨분위기를 한층 더 돋보이게 할 수 있을걸로 생각합니다.

  4. Favicon of http://poem23.com BlogIcon 학주니 2008.10.09 07:58 신고  댓글주소  수정/삭제  댓글 남기기

    FF3에서도 볼 수 있는 웹폰트가 필요~~~ ^^;

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.09 10:33 신고  댓글주소  수정/삭제

      브라우저 자체에서 웹폰트를 지원하면 좋겠지만 아직은 안되는 것이 아쉽고, 그러나 웹폰트TTF를 개인PC에 설치하면 파폭에서도 웹폰트가 설치된 페이지를 제대로 볼 수 있네요.

  5. Favicon of http://sesamz.tistory.com BlogIcon sesamz 2008.10.09 10:27 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 글 잘 읽고 갑니다.
    웹폰트라는게 본인 만족도 있지만 전체적인 분위기를 맞추거나 보는 사람을 위해서도 필요하다고 생각되더라구요.ㅎ
    웹폰트 관련 제 글을 트랙백 좀 해도 되겠죠?ㅎㅎ

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.09 10:38 신고  댓글주소  수정/삭제

      감사합니다.
      말씀하신 것처럼 개인의 만족도에 국한될 수도 있지만 보는 사람들도 각기 감성을 가진터라 명확하게 좋고 나쁨을 구분하기는 어렵다는 생각입니다.
      엮인글 보내주시도 됩니다.^^

  6. Favicon of http://blog.nemesys.co.kr/tt BlogIcon Nes 2008.10.09 13:28 신고  댓글주소  수정/삭제  댓글 남기기

    가독성 문제에 있어서 웹폰트도 웹폰트 나름인 듯 합니다. 영어보다 획이 많은 우리 한글상에서 세리프가 많이 들어간 웹폰트는 특히나 LCD상에서 인식이 힘들더군요. 개인적으로는 블로그에 적용하고 계신 폰트도 기존의 굴림, 돋움에 비해 가독성이 높다는 부분은 찬성하지 않습니다. 또한 가독성이 높다는 것과 눈이 피로하다라는 속성은 서로 모순 되는 듯 하구요.

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.09 23:42 신고  댓글주소  수정/삭제

      좋은 말씀 너무 감사합니다.
      개인적으로는 텍스트 중심의 블로그 콘텐츠나 신문기사의 경우 웹폰트 또는 기존 폰트이던 가독성은 글꼴이 가지는 기본 자간과 자평 그리고 형태에 의해서 달라진다고 보고 있습니다. 굵은 볼드타입은 적은 폰트크기로 적용하면 뭉쳐서 글자를 판별하기 힘들고, 때로는 자간 간격이 일정하지 않고, 양쪽 정렬을 적용한 경우 단어별 간격이 심하게 벌어지는 현상을 보여, 콘텐츠의 전체적인 조화를 이루기가 조금 불편하기도 했습니다. 그런 면에서는 웹폰트가 조금은 완성도가 높게 나와 만족하고 있습니다. 브라우저 지원문제를 제외하고는...^^

      아울러 Nes님의 의견을 다시 한 번 곱씹어 살펴 보도록 하겠습니다.^^

  7. Favicon of http://brainchaos.kr BlogIcon brainchaos 2008.10.09 14:31 신고  댓글주소  수정/삭제  댓글 남기기

    전 그냥 강제적으로 블라우져 폰트 변경해서 보고 있습니다.
    다음에서 나온 다움폰트도 bold 같이 보여서 눈에 거슬리더군요.
    정보 감사합니다.

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.09 23:34 신고  댓글주소  수정/삭제

      웹이나 블로그에 웹폰트를 적용을 강요하는 것은 바람직하지 않다는 생각입니다만 그래도 실험적이고 여러가지 측면에서 활용도가 있는지, 아니면 기능적인 면이 있다면 관심을 가져보는 것도 나쁘지 않다고 생각됩니다.

  8. 루테늄 2008.10.16 14:22 신고  댓글주소  수정/삭제  댓글 남기기

    와! 다른웹폰트랑 달리 이 폰트는.. "절대치" 라면 모를까 여타 다른웹폰트에 비해 가독성도 좋고 화면분위기도 깔끔하군요!
    개인적으론 맑은고딕이나, ms사에서 사용하는 폰트가 너무 많이 흐려져서 읽기 힘들기에 브라우저 설정에서 폰트설정 무시 를 켜두는 저였으나, 이번에 작업하면서 잠시 폰트무시 설정을꺼두다가 본 페이지에 왔는데..!

    어쩜 이리.. 확 눈에 들어왔습니다!
    솔찍히 브라우저 지원을 안하더라도 크기등이 기존폰트랑 같이 나온다 하니, 애초에 돋음기준으로 디자인을 짠뒤 옵션격으로 쓰는것도 좋겠네요.!!
    여튼! 본 페이지에 있는 웹폰트는 개인적으론 상당히 만족스럽다고 생각합니다!

    물론 가독성"만" 따진다면 안티따위 안먹힌 돋움이 훨 낫다는 생각엔 변함은 없지만요..^^a;;;;

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.16 16:04 신고  댓글주소  수정/삭제

      좋게 평가를 해주셔서 감사합니다.
      이번에 웹폰트를 적용하면서 좀 더 편하게 글을 읽을 수 있도록 타이틀은 우리새봄체를, 본문은 자평이 넓은 우리신문체를 적용했는데 개인적으로는 만족하고 있습니다.
      또한 파폭이나 구글크롬에서도 기존의 텍스트 사이즈를 유지해 큰 변화를 느끼지 않도록 조정한 상태라 찾아주시는 분들이 불편함은 없으리라 생각되는데 어떨지 모르겠습니다.

  9. Favicon of http://gkack.tistory.com BlogIcon 함차 2008.10.24 12:02 신고  댓글주소  수정/삭제  댓글 남기기

    네..글읽기가 편하네요. 웹폰트 적용하는 방법을 조금더 알고싶어요..자주 들러겠습니다.

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.10.24 14:18 신고  댓글주소  수정/삭제

      ^^블로그의 글을 읽기가 편하시다니 다행입니다.
      내심 불편함을 느끼시는 분들이 많을까봐 걱정이 많았습니다.
      여유가 되면 웹폰트를 쉽게 적용하는 방법도 소개하도록 하겠습니다.

  10. 2008.11.01 20:04  댓글주소  수정/삭제  댓글 남기기

    비밀댓글입니다

  11. Favicon of http://ipad.pe.kr BlogIcon 장대군 2008.11.19 16:29 신고  댓글주소  수정/삭제  댓글 남기기

    몇 번 실패를 맛봐서 이제는 포기할 지경에 이르렀습니다. ㅜ.ㅜ

    깔끔하고 보기도 좋네요. 부러워요. ^^;

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.08.02 16:20 신고  댓글주소  수정/삭제

      답변이 많이 늦었습니다.
      웹폰트의 적용은 어려운 게 아닌데 너무 힘들어 하시는 군요. 이럴 상황을 미리 알았더라면 쉽게 적용하는 방법을 알려 드릴 걸 그랬습니다.
      다음 가이드라인 올릴 때 참고하도록 하겠습니다.

  12. Favicon of http://brainer1.tistory.com BlogIcon Brainer 2009.01.23 17:54 신고  댓글주소  수정/삭제  댓글 남기기

    웹폰트적용은 파폭에 안되는걸로 알고 있었는데;;
    그나저나 제발 제발 이번해에도 한글날 이벤트를 하기를...

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.08.02 16:22 신고  댓글주소  수정/삭제

      네 파폭에서는 웹폰트 적용이 안됩니다.
      그러나 유저가 웹폰트와 같은 TTF폰트를 PC에 설치했다면 파폭에서도 그대로 보여지게 됩니다.
      올해 한글날에도 꼭 이벤트를 하길 저도 기원하겠습니다.

  13. Favicon of http://kwangjae.com BlogIcon 아름다운시끼 2009.06.18 09:46 신고  댓글주소  수정/삭제  댓글 남기기

    저는 우리돋음90c1을 사용하고있는데 파폭에서 보면 폰트들이 너무 크게 보여서 그게 문제인데 어떻게 대처할수있는 방법이 있나요? 알려주시면 감사하겠습니다.

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.08.02 16:26 신고  댓글주소  수정/삭제

      그건 파폭의 폰트 설정의 문제일 수 있습니다. 그리고 CSS에서 파폭과 IE에서 적절한 폰트가 대응되도록 정의할 수 있는데 그것으로 문제해결을 할 수 있습니다.

  14. Favicon of http://blogple.tistory.com BlogIcon goMan 2009.08.02 12:42 신고  댓글주소  수정/삭제  댓글 남기기

    티스토리에서도 웹 폰트 적용시켜 바꿀 수 있나요//??


우드스