태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

디자인&가독성을 높히는 블로그 폰트 적용법

분류: Digitial News/Blogging Guide 작성일: 2007.09.24 07:50 Editor: 마루[maru]

블로그 디자인에 있어 절반 이상의 영향력을 차지하는 것은 외형적인 디자인 요소도 중요하겠지만, 블로그의 폰트(Font)가 더 큰 비중을 차지한다고 해도 과언은 아닐 것입니다.

이미지나 그래픽 요소들을 사용해서 블로그 디자인을 돋보이게 할 수도 있겠지만, 그래픽 요소가 전혀없는 백지모드의 블로그 스킨에 폰트(Font)를 이용한 타이포그래피를 강조한 스타일시트 적용으로 블로그를 돋보이게 할 수도 있다는 것입니다.

블로그 디자인은 그 성격이나 주제에 따라 여러 형태로 표현될 수 있으나 가장 중요한 것은 블로그가 비주얼(Visual)을 중시하는 포토폴리오나 브로슈어가 아니라 정보나 로그(기록 또는 글)를 발행하고 독자층을 형성하는 1인 미디어의 하나인 뉴스페이퍼(Newspaper)의 성향이 짙다는 점입니다. 그러므로, 가장 중시되어야 하는 부분이 '가독성'이고 그것을 뒤받침하는 블로그 디자인과 전체적인 조화를 이루는 '폰트(Font)의 적용' 이라고 할 수 있겠습니다.

그러므로 블로그에 광고프로그램이나 이미지가 있고 없고를 떠나 폰트의 크기와 컬러가 적절한 조화를 이루지 못하고 따로 놀게되면 충분한 가독성을 제공하지 못해서 발행하는 글의 퀄리티나 전달력에도 많은 영향을 끼치게 됩니다. 하지만, 적절한 컬러의 배합이나 광고프로그램과 일치되어 조화를 이루는 글꼴의 적용은 충분한 가독성을 살리는것은 물론 광고 프로그램의 삽입 마져도 부담감을 줄여주게 되며, 블로그 디자인에도 깔끔함과 세련됨을 보여주게 됩니다.

뉴스페이퍼

애드센스와 폰트 조화를 반영한 뉴스페이퍼2.0

위의 참고 이미지에서 보는것과 같이 타이틀 는 본문과 명확한 구분을 지어주기 위해서 본문과 다른느낌의 바탕체를 적용했고, 큰 폰트가 적용됨을 감안하여 스타일 적용을 통해 가독성을 높여 주었습니다.

본문 는 기존 폰트인 돋움체를 버리고 Arial서체를 대체 함으로써 삽입된 애드센스 문단광고의 폰트와 일치를 시켜, 폰트차이를 통한 가독성 저해와 애드센스와의 폰트 조화를 통한 시각적 부담을 최대한 줄일 수 있도록 스타일을 적용시킨 사례라고 볼 수 있습니다.

그리고 애드센스의 URL링크의 컬러와 본문에 사용되는 링크나 강조문장의 컬러를 통일시켜 이질감이 들지않도록 배려를 했습니다. 이 결과 포스트 본문에 문단광고가 들어있지만 한결 가독성이 확보 되고 자연스런 조화로 애드센스 클릭율(CTR)이 점진적으로 증가되는 결과를 볼 수 있었습니다.

아래는 위의 이미지처럼 디자인로그뉴스페이퍼2.0의 style.css 수정내용 입니다.

※ 티스토리 style.css의 수정 내용

-. 가독성을 높이는 포스트 타이틀 폰트를 위한 CSS 영역 수정
.entry h2 { font:26px/0.8em Batang, arial, Verdana, AppleGothic, Sans-serif; line-height:14pt; padding-left:2px; padding-top:8px; padding-bottom:4px; letter-spacing:-4px; word-spacing:-2px;}

-. 애드센스 폰트와 조화를 이루는 본문 폰트를 위한 CSS 영역 수정
body{  font:12px/1.5 arial, 돋움, Dotum, Verdana, AppleGothic, Sans-serif;

-. 본문 문단정렬 양쪽정렬을 위한 CSS 영역 수정
.article  { width:520px; margin:5px 5px 5px 10px; overflow:hidden; text-align:justify;}

아울러 그동안 나름대로 여러가지 실험을 통해서 얻은 정보를 바탕으로 아래와 같이 블로그 디자인과 가독성을 위한 효율적인 폰트의 적용방법을 함께 공유하고자 합니다.

1. 블로그와 포스트 폰트에 너무 많은 컬러를 적용하지 마십시요.
2 .포스트 폰트 종류와 크기를 다양하게 적용하지 마십시요.
3. 타이틀 폰트와 본문 폰트의 종류를 구분시켜 가독성을 높히세요.
4. 광고프로그램의 폰트컬러를 본문의 폰트컬러와 일치 시키세요.
5. 본문의 폰트를 광고프로그램 폰트와 일치시키세요.


끝으로, 최근들어 블로그 수익창출의 일환으로 애드센스, 애드클릭스, 링크프라이스 등 여러가지 광고 프로그램이 포스트나 블로그의 부분 영역에 삽입되면서 블로그 전체 디자인을 저해하거나 포스트의 가독성을 해치다는 불만의 목소리가 많이 높았던 적이 있고 이 문제는 계속해서 거론되어지고 있습니다만, 일단 여기서는 광고프로그램 삽입에 대한 옳고 그름에 대해서는 개별적인 선택사항으로 미루고 조금이나마 깔금하고 가독성이 높은 블로그 폰트적용의 관한 이야기를 풀어 보았습니다.

신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://luv4.us BlogIcon luv4 2007.09.24 09:35 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 글 잘 읽었습니다. 폰트의 종류와 색상 선택이 그만큼 중요하다는 것을 다시 일깨워 주셨네요.
    하지만 광고와 관련하여 폰트와 색상을 일치하는 부분에 있어서는 전혀 공감할 수 없습니다. 일치할 경우 디자인적으로는 훌륭할지 모르나 가독성에 있어서는 오히려 방해가 됩니다. 특히나 본문 속에 들어가서 글과 어우러지는 정사각형 광고는 그 자체만으로도 글을 읽는데 방해가 되는데 폰트, 링크 색상까지 같다면 본문과 광고의 구분이 더 힘들어집니다. (한 줄에 몇 글자를 적는게 가독성아 가장 좋은지 모르겠지만 정사각형 광고 옆의 20자도 채 안되는 줄바꿈은 읽기가 상당히 불편합니다)
    그럼에도 불구하고 테두리를 넣거나 글과의 간격을 넓히는 분은 많지 않더군요..^^;;

  2. Favicon of http://nyangkun.tistory.com BlogIcon Nyangkun 2007.09.24 12:45 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 팁 감사합니다 :)

  3. Favicon of http://wis1674.tistory.com BlogIcon 인생은한방 2007.09.24 13:15 신고  댓글주소  수정/삭제  댓글 남기기

    디자인에 있어서 폰트의 영향과 기능을 알고 계신 분을 만나게 되어 기쁘게 생각합니다. 하지만 그 점을 저와는 다른 방향으로 활용하시는 것 같습니다. ^^; 제가 워낙 블로그에 광고나는 것을 싫어해서요... 개인차이이겠지만... 어쨌든 앞으로도 좋은 글 부탁드립니다!

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

      ^^반갑습니다. 본문내의 광고삽입으로 불편함을 드렸다면 죄송합니다. 글에서도 말씀 드렸지만, 광고프로그램 활용에 대해서는 개인적인 선택부분으로 가름하시어 이해를 부탁 드립니다. ^^
      앞으로 좋은 글을 쓸 수 있도록 노력 하겠습니다.

  4. Favicon of http://brownred.tistory.com BlogIcon 강자이너 2007.09.24 13:54 신고  댓글주소  수정/삭제  댓글 남기기

    마루님, 질문있어요! 본문글 같은 경우에 일반적으로 좌측 정렬로 설정되어 있는데 양쪽정렬이 되게 하는 건 어떻게 할까요?

    • Favicon of http://luv4.us BlogIcon luv4 2007.09.25 10:59 신고  댓글주소  수정/삭제

      마루님, 다시 오른쪽마우스금지 스크립트를 사용하시는 것 같은데 초보적인 불펌에 대해서 큰 효과를 낼 순 있겠지만 위의 경우처럼 텍스트 복사가 필요할 때에는 불편이 될 수 있습니다. 좀 더 근본적인 방법은 없을까요..

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

      본문글 작성 후 html 모드에서 다음과 같이 <div>태그로 정의해 주시면 됩니다.

      <DIV style="TEXT-ALIGN: justify"> 본문 </div>
      또는 style.css에서 .article 항목을 찾고 CSS정의에서 [ text-align:justify; ]를 추가해주면 모든 본문 글이 디자인로그 처럼 양쪽정렬 형태로 됩니다.

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

      Luv4님. 그런 불편을 깊이 감안하지 못했습니다. 근래에 너무 불펌이 많아서 그렇습니다.
      이렇게 관심을 가져주시는 분들을 생각하면 풀어야 하겠지만 포털의 불펌이 워낙 심각한터라 걱정스럽네요.
      깊이 재고해 보도록 하겠습니다

  5. Favicon of http://supaflow.tistory.com BlogIcon 플로우 2007.09.24 21:40 신고  댓글주소  수정/삭제  댓글 남기기

    저도 조금 더 가독성을 높이는데 신경을 써야겠네요 ^^

  6. Favicon of http://byeongseon.com BlogIcon byeongseon 2007.09.24 23:42 신고  댓글주소  수정/삭제  댓글 남기기

    제가 알고 있는것이 정확한것인지 아닌지 확신할수는 없지만 적어봅니다..

    OSX상에서 MS Office를 인스톨 할 경우에
    돋움, 바탕을 포함한 몇가지 폰트들이 자동으로 인스톨 되게 됩니다.

    근데 CSS를
    Dotum, Verdana, AppleGothic, Sans-serif;
    처럼 값을 주게 되면 OSX상에서는 의도하지 않은 결과가 나옵니다.
    기본으로 안티알리어싱이 먹히므로 가독성이 매우 떨어집니다.

    굴림으로 값을 줬을때는 최악의 상황이 생기죠 --;;

    하지만 타 시스템에서 AppleGothic이 인스톨 될 확률을 없으므로
    AppleGothic, Dotum, Verdana, Sans-serif;

    이 방법이 더 나아보입니다...

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

      좋은 지적을 해주셔서 감사를 드립니다.
      미처 Mac 사용자를 염두에 두지 못했던것 같습니다.
      조언 해주신 부분을 참고해서 반영토록 하겠습니다.

  7. Favicon of http://byeongseon.com BlogIcon byeongseon 2007.09.24 23:46 신고  댓글주소  수정/삭제  댓글 남기기

    타 OSX사용자분들은 어떻게 사용하시는지 잘 모르겠으나
    저같은 경우에는 국내 웹사이트중에 CSS 폰트값을 굴림으로 잡는 경우가 많아서 MS Office인스톨 후 바탕, 굴림, 돋움, 궁서체를 찾아서
    지우고 사용하고 있습니다...

  8. 나쁜남자 2007.09.25 01:02 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 내용입니다만, 아이러니하게도 기사의 중심내용인 가독성을 높이는 폰드 적용법과 안어울리게, 기사 제목의 글자크기가 그다지 가독성이 좋은 편은 아니라는거죠..옥에 티라고나 할까요..^^

  9. Favicon of http://poem23.com BlogIcon 학주니 2007.09.26 12:03 신고  댓글주소  수정/삭제  댓글 남기기

    쩝.. 저는 그냥 몽땅 맑은고딕체로.. ^^

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

      맑은 고딕이 웹폰트라면 별 문제 없겠지만 시스템 폰트라면 맥 사용자에게 다소 가독성을 해칠 수 도 있다는 지적이 도출 되는것 같습니다.
      style.css의 글꼴 정의에서 apple gothic, 맑은 고딕체 순으로 적용시키면 좋을 것 같습니다.

  10. Favicon of http://kaenium0.ip.or.kr BlogIcon 공상플러스 2007.09.26 16:04 신고  댓글주소  수정/삭제  댓글 남기기

    웹폰트는 보나마나 돈있는 놈들만 쓰고,.. 그럼 딱 맑은고딕이..
    저도 웹폰트 깔아볼까요;; ㅋㅋ

  11. Favicon of http://ismvisualstudio.net/blog/freeism BlogIcon freeism 2007.09.27 10:27 신고  댓글주소  수정/삭제  댓글 남기기

    저도 맑은고딕에 꽃혀서... ^ ---^);
    폰트의 중요성은 더할 나위 없겠죠.
    글 하나 트랙백 드립니다. ^^

  12. Favicon of http://jjungs.tistory.com BlogIcon 쭝쓰 2007.09.27 13:50 신고  댓글주소  수정/삭제  댓글 남기기

    음... 저도 맑은 고딕으로 바꿀까 생각중인데... ^^
    좋은글 잘 보고 갑니다. ㅎ
    그리고 추석이라고 직접 찾아와서 글 적어주셔서 감사합니다.ㅎ

  13. 2007.09.27 14:20  댓글주소  수정/삭제  댓글 남기기

    비밀댓글입니다

  14. Favicon of http://chouxgirl.egloos.com/ BlogIcon veig 2007.10.08 11:53 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 글이네요.

    저같은 경우엔 인터넷에서 글을 읽을 때
    글이 들뜨고 뭐랄까,산만하다는 느낌?
    그래서 쭉쭉 읽혀지지가 않던데...

    얼마 전에 동아닷컴 글꼴 바뀐것 아시죠?
    우리글닷컴에서 만든 우리신문이라는 폰트인데,
    인쇄신문을 보는 냥, 편하게 읽힙니다.

    웹진네오이마쥬도 우리글닷컴의 우리바탕을 채용했는데, 홈피가 아주 멋드러집니다.

    마침 우리글닷컴에서 한글날을 기념해서
    웹폰트 무료배포 행사를 가진다니까 관심있는 분들은 참여해봐도 좋을 것 같네요.

    회사 홈피는 http://www.woorigle.com

  15. Favicon of http://happykus.tistory.com BlogIcon 해피쿠스 2008.02.07 21:00 신고  댓글주소  수정/삭제  댓글 남기기

    마루님 정말 감사합니다~
    제가 이번에 블로그 폰트 조정좀 하고 있는데 마루님의 글이 너무 큰 도움이되었습니다!

  16. Favicon of http://oompa26.com BlogIcon 공장장 2008.03.03 07:51 신고  댓글주소  수정/삭제  댓글 남기기

    디자인로그님이 쓰신 분문에 있는 폰트를 쓰려면 어디에서 수정하면 되나요.


우드스