태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

웹폰트 우리새봄체, 블로그에 적용하니

분류: Design Information/Design Fonts 작성일: 2008.10.03 18:29 Editor: 마루[maru]

어제 오후 완성형 벡터스크린 폰트 개발 기업 렉시테크로 부터 메일로 전달된 폰트 '우리새봄체'블로그에 적용해 보았습니다.

블로그폰트를 적용하는 과정은 첨부해 보내준 폰트 적용 가이드에 따라 별다른 어려움 없이 적용할 수 있었지만 블로그의 사이드바 콘텐츠 폰트까지 동일하게 적용해 일체감을 살리기 위해서는 스타일시트(CSS) 일부를 약간 수정하는 작업이 필요하기도 했었습니다.

우리민족에 한글의 자부심을 고취시키고 한글문화 창달을 위해 앞장서서 노력하는 폰트개발 기업 ‘렉시테크’에서 제공하고 있는 폰트는 ‘우리바탕’부터 지금 블로그에 적용시킨 ‘우리새봄’에 이르기까지 7종이 있지만, 나름 가독성과 감성적 미려함이 살아있는 폰트 ‘우리새봄’체가 마음에 들었습니다.

사용자 삽입 이미지

우리새봄 폰트 블로그 적용 모습

하지만 ‘우리새봄’체의 경우는 제목용 혹은 시니어세대를 위한 본문용 서체로 제작된 것으로, 명조체와 고딕체의 중간형태를 띄기 때문에 제목이나 본문 어디에서나 잘 어울리지만 블로그 포스팅에 있어 본문의 특정 구문을 강조할 경우, 강조하지 않은 본문과의 구분이 명확하지 않아 다른 색상이나 크기로 구분해야 한다는 것이 적지 않은 아쉬움으로 남기도 했습니다.

다음으로 남은 과제는 폰트의 경우 마이크로소프트(MS)의 인터넷 익스플로러(IE)만 지원하므로 파이어폭스나 구글크롬 사용자를 고려해야 했습니다. 인터넷 익스플로러(IE)를 기준으로 보기 좋게 하려는 마음이 앞서 우리새봄 폰트의 크기를 조정하게 되면 타 브라우저에서는 보는 블로그의 대체폰트의 폰트크기가 달라져 전체적인 조화가 흐트려질 수 있고, 그것으로 인해 레이아웃이 깨어지는 현상이 생길 수 있습니다.

그러므로 가급적 브라우저 상호 호환을 고려하여, 타 브로우저로 전환해 폰트 적용결과를 꼼꼼히 모니터링한 다음 가장 최적의 폰트사이즈를 찾아 대입하고 폰트를 인식하지 않는 브라우저에서 편안한 가독성을 유지할 수 있도록 대체 폰트를 적용시켜 놓는 것도 꼭 잊지 말아야 합니다. 참고로 IE6.0 버전에서는 클리어타입이 적용되지 않아 폰트의 가장자리가 깔끔하게 표현되지 않는 현상을 보이기도 했습니다.

현재 디자인로그 블로그에 적용된 폰트는 '우리새봄'으로 12px과 13px의 폰트 크기와 줄 간격 170%를 적용시킨 상황이며, 파이어폭스. 사파리. 구글크롬 그리고 애플의 맥 사용자를 위해 대체폰트로 애플고딕(Apple Gothics)이 적용되도록 CSS를 조정해 놓았습니다.

계속해서 우리새봄 폰트 적용으로 좀 더 개선된 블로그 콘텐츠의 가독성을 확보하기 위해 스타일시트(CSS)를 편집하여 변화를 살펴 보고 있지만, 폰트가 적용된 블로그의 현재의 느낌도 개인적으론 그다지 나쁘지 않은 것 같아 일단은 만족해 하고 있습니다. 그러나 독자들과 방문자들은 어떨지 모르기 때문에 블로그폰트 적용 전과 적용 후의 느낌을 댓글을 통해 들을 수 있었으면 하는 바람입니다.

혹시 블로그를 찾아주시는 방문자와 독자분들께서는 우리새봄 폰트가 적용된 후 불편한 점이나 개선되었으면 하는 점이 있으면 댓글을 통해 아낌없는 조언을 해주시길 부탁합니다. 여러분의 조언을 바탕으로 어느 정도 블로그폰트 적용이 안정이 되면 폰트와 관련하여 유익한 정보를 공개하여 함께 공유할 수 있도록 마련하겠습니다.

아울러, 지금까지 폰트 사용과 관련하여 액티브X 등 인터넷 브라우저간 지원 문제로 사용자들의 관심과 사랑을 많이 받지 못했지만, 사용자들의 폰트 관련 기대 요구가 커지면 개발 기업들도 다양한 폰트 개발과 다양한 브라우저의 지원을 위한 발빠른 대응을 할 수 있지 않을까 하는 생각을 갖게 됩니다.

저작자 표시 비영리 변경 금지
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://osnews.kr BlogIcon osnews 2008.10.03 19:55 신고  댓글주소  수정/삭제  댓글 남기기

    새봄체 글꼴 이쁘네요.

    그런데 글꼴에 진하게 속성이 들어가 있는 건가요?
    일반적인 상태보다는 약간 두껍다는 생각이 듭니다.
    두꺼워서 잘 보이기도 하지만 그게 또 거슬리기도 하네요.

    윈도에서도 IE에서 보는 것과 크롬에서 보는 것이 다른데
    윈도용에서는 어떤 글로 대치된 것인가요?

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

      볼드타입이라 일반적인 본문체보다는 두껍습니다.
      잘 보이지만 시각적인 피로감도 조금 따르는 것 같습니다.
      본문은 다른 서체 적용을 고려해 봐야 할 것 같구요.
      그리고, 윈도용 크롬과 파폭에서도 애플고딕이 대체됩니다.

  2. Favicon of http://writerbox.org/alphonse BlogIcon Alphonse 2008.10.03 21:18 신고  댓글주소  수정/삭제  댓글 남기기

    결국 익스플로러 전용... OTL

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

      정확한 이유는 아직 알 수 없지만 현재로선 웹폰트가 IE 전용으로만 나오고 있네요.
      곧 타 브라우저에도 적용될 수 있기를 기대해 봐야겟습니다.

  3. Favicon of http://0sunsee.tistory.com BlogIcon 잉샨 2008.10.04 03:03 신고  댓글주소  수정/삭제  댓글 남기기

    글꼴 적용 시도해보구 포기한지 한달이 넘었네요..ㅠㅠ

  4. Favicon of http://hummingbird.tistory.com BlogIcon 벌새 2008.10.04 09:56 신고  댓글주소  수정/삭제  댓글 남기기

    읽기에는 편하지만 텍스트 작성시 강조할 수 있는 여지가 부족해 보이는 글꼴이군요.

  5. Favicon of http://poem23.com BlogIcon 학주니 2008.10.04 11:10 신고  댓글주소  수정/삭제  댓글 남기기

    웹폰트인데 FF3에서는 적용이 안되는지.. 쩝.. -.-;

  6. Favicon of http://mindeater.tistory.com BlogIcon MindEater™ 2008.10.04 11:53 신고  댓글주소  수정/삭제  댓글 남기기

    이쁘긴한데...그런 문제점이 있었군요~~
    지금 사용하시는 방법으로 형광펜이다 색깔로 강조를 한다면 그리 큰문제는 없어보이네요 ^^;;;

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

      예쁘다니 좋네요.^^
      말씀하신 것처럼 형광색으로 강조해주면 되는데, 볼드타입이라 텍스트가 많은 블로그에선 다소 눈의 피로감도 느끼게 되는 것 같습니다.

  7. Favicon of http://s2news.net BlogIcon S2day 2008.10.04 13:30 신고  댓글주소  수정/삭제  댓글 남기기

    예쁘긴한데, 글씨체가 굵다보니 눈이 아프고, 블로그 어느곳에 촛점을 두어야할지 모르겠습니다.

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

      저도 약간 우려했던 부분인데, 우리새봄체가 볼드타입이라 그런 것 같습니다.
      본문서체를 우리바탕이나 우리신문체로 전환해봐야 할 것 같습니다.^^
      늘 좋은 말씀을 해주셔서 감사드립니다.
      잘 지내고 계시죠?

  8. 남뽕 2008.10.06 10:25 신고  댓글주소  수정/삭제  댓글 남기기

    항상 감사한 글들 잘 보고 있습니다 적용된 글꼴은 미려하고 좋습니다 ^^
    그렇지만 굴림이나 돋움처럼 가독성이 수월하지는 않습니다 ^^

    읽기 편한 면보다는 좀더 미적인 측면에 ..장점이 있는듯 하네요

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

      ^^좋은 말씀 감사합니다.
      아직은 돋움이나 굴림이 보편적인 웹폰트로 활용되는 터라 적응이 쉽지 않은 것 같습니다.
      계속 보고 있으니 괜챦은 것 같은데.. 찾아주시는 분들은 조금 부담스러워 하는군요. 그래도 미려하다는 것은 인정하셔서 고민 됩니다.^^

  9. Favicon of http://yggoodday.tistory.com BlogIcon 하늘향기* 2008.10.06 14:25 신고  댓글주소  수정/삭제  댓글 남기기

    이것이 새봄체군요.. ^^ 제가 보기에도 그냥 보기는 예쁜데 눈이 피로하다는 생각이 드네요. 이전에 돋움, 굴림에 너무 익숙해져서인지....그래도 심하게(!) 꾸며진 디자인 폰트보다는 가독성이 나은 것 같습니다.

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

      실험 초기에 웹폰트 우리새봄체만 적용했을 때는 볼드타입이라 조금 눈이 피로한 느낌이 있었는데, 타이틀과 본문을 각각 다른 서체를 적용함으로써 지금은 많이 개선시켰다고 생각하고 있습니다.
      우리새봄과 우리신문체를 조합한 상태입니다.
      지금도 불편한 점이 있으신지 말씀해주시면 개선하도록 하겠습니다.

  10. 몹삼 2008.10.15 22:29 신고  댓글주소  수정/삭제  댓글 남기기

    시사2580에서 보고 전자신문에서도 보고 우리새봄체 찾아 여기까지 왓습니당 클클0
    웹폰트로도 나왔나보네요? 음- 전 괜찮아보입니당 호오-
    폰트로도 있겠지요? 이건 어디서 다운받을 수 있나요? (혹시..무료...? 유료..?)

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

      저도 늦게 방송을 보았습니다.
      우리새봄, 우리소영 폰트 이름이 아마도 디자이너 이름을 딴 것 같더군요.^^
      이렇게 찾아 주셔서 감사드리고요. 현재 TTF폰트와 웹폰트로 렉시테크와 우리글닷컴에서 판매되고 있는데 현재 한글 르네상스 캠페인 기간이라 우측 하단의 배너를 클릭하고 참여하시면 좋은 기회가 될 것 같습니다.

  11. Favicon of http://epichigh.tistory.com BlogIcon 왕곰취 2008.12.19 10:52 신고  댓글주소  수정/삭제  댓글 남기기

    예쁘네요. 사진보다는 글의 양이 많은 블로그라면 아주 유용할것 같습니다. 동아닷컴글꼴 컴퓨터에 다운받아서 사용했었는데 웹폰트로 사용해보고싶을만큼 예쁩니다. 기간은 끝났네요. ㅎㅎ

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

      왕곰취님. 감사합니다.
      말씀대로 적당히 글이 많은 블로그에 잘 어울린답니다.^^
      웹폰트로 적용하면 독자들이 조금은 글 읽기가 편안하다는 말씀을 하시더군요.^^ 한번 적용해 보시길 바랍니다.

  12. Favicon of http://www.webplantip.com BlogIcon 어라 2009.05.19 00:50 신고  댓글주소  수정/삭제  댓글 남기기

    그렇게 좋은 호응은 없네요... 기업블로그를 준비중인데 콘텐츠 폰트를 돋움으로 할 것 같습니다. 혹시 추천 웹용 폰트가 있으면 알려주시면 감사하겠습니다. ^^

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

      웹폰트 우리새봄체는 볼드타입이라 타이틀폰트로 어울리며, 본문체로 사용하기는 조금 부담스러울 수 있습니다.
      디자인로그는 가독성과 브라우저별 폰트 호환성을 감안 우리새봄체와 우리신문체를 혼용해서 적용하고 있습니다.
      기업 블로그를 준비중이라면 본문 웹폰트로 우리신문체를 적용하는 것이 괜찮을 것 같습니다.
      이렇게 찾아주셔서 감사합니다.^^ 잘 지내시죠?

    • Favicon of http://www.webplantip.com BlogIcon 어라 2009.05.19 10:13 신고  댓글주소  수정/삭제

      핫 답변 감사합니다. ^^ 또 하나 질문 드려용. 우리 신문체는 무료로 쓸 수 있는건가요?

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

      무료폰트는 아니구요. 우리글닷컴에서 상용으로 판매되고 있습니다. 개인용과 기업용으로 구분되어 판매되고 있으니 아래 링크를 참조하시길 바랍니다.
      http://www.woorigle.com/LfontMall/list_03.php

  13. Favicon of http://onlyshow.tistory.com BlogIcon 조각잠 2009.10.01 08:12 신고  댓글주소  수정/삭제  댓글 남기기

    안경 닦아야 할것 같은 기분이 듭니다.폰트를 보고 있자니.난시에 가까운
    좀 명확히 보이지도 않고 흐릿한게 불편해 보입니다. ^^

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

      웹폰트가 적용되어 그렇습니다.
      혹시 디스플레이 설정> 화면배색> 고급에서 'ClearType'에 체크를 하시지 않으셨더면 그렇게 보입니다.
      틈나실 때 한번 체크해 보시길 바랍니다.
      그리고 답글이 늦어 너무 죄송합니다.


우드스