블로그 글꼴 변경 - 나눔고딕 & Tahoma by yiaong


얼마 전에 블로그 본문 글꼴을 바꾸었다. 한글은 나눔고딕, 알파벳은 Tahoma.

나눔고딕은 네이버에서 만들어서 배포하고 있는 글꼴인데, 단정하고 깔끔해보여서 좋다.
알파벳 글꼴 중에 내가 선호하던 것은 Verdana였는데, 글자폭이 좀 좁아서 날씬해보이는 나눔고딕과 같이 쓰기에는 좀 뚱뚱해보이기에 다른 것을 찾다가 Tahoma를 선택했다.

그리하여, 내 컴퓨터에서는 내 블로그가 이렇게 보이고 있다.




깔끔해서 맘에 든다. 하지만 몇 가지 이슈가 있다.


1. Internet Explorer 문제

나 스스로 보기에는 매우 깔끔해져서 맘에 드는데, 애석하게도 대부분의 사람들에게는 위와 같이 보이지 않을 경우가 더 많겠다.
글꼴 지정 순서를 아래와 같이 했기 때문이다.

font-family: "Tahoma", "나눔고딕", "NanumGothic", "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", "sans-serif";


위에서 제일 처음에 지정되어 있는 Tahoma는 한글 글꼴은 포함하고 있지 않다. 이럴 때, 내가 주로 쓰는 웹브라우저인 SafariFirefox, 또는 Google Chrome 같은 프로그램에서는 그 다음으로 지정된 글꼴이 PC에 있는지, 그리고 그 글꼴에 한글이 포함되어있는지를 찾아서 표시해주게 된다. 그러면 (내가 의도했던 대로) 알파벳은 Tahoma, 한글은 나눔고딕으로 잘 나오게 된다.

문제는 Internet Explorer인데, 대다수의 사람들이 쓰고 있는 이 프로그램에서는 Tahoma가 PC에 일단 있으면, 그 뒤는 찾지 않는다. 그럼 Tahoma에 없는 한글은? 시스템의 기본 글꼴(? - 확인 필요)에서 찾아서 쓴다. 아마 한국어 Windows XP의 경우 '굴림'으로 표시될 것이다. 그래서 이 경우는 (PC에 나눔고딕을 설치했다 해도) 한글은 예전처럼 굴림, 알파벳은 Tahoma로 표시된다.


2. 나눔고딕 문제

그렇다면, 나눔고딕을 앞에다 지정하면 좋잖아? 그럴 수 없었던 이유는 나눔고딕은 한글은 잘 표시할 수 있는 반면, 나눔고딕에 들어있는 알파벳으로는 영어만 제대로 표시할 수 있기 때문이다.
간단한 프랑스어, 독일어, 스페인어 문장을 써서 비교해보면 이렇다.



이렇게, 나눔고딕의 알파벳에는 diacritic이 들어간 문자 등이 없기 때문에 (아마도 다른 글꼴에서 빌어온 탓에) 어색하게 표시된다. 이런 엉성한 꼴을 두고 볼 수는 없지 않겠나. 내가 Verdana 또는 Tahoma를 우선적으로 지정하는 이유이다.


3. ClearType

어쨌든, 그렇다면 Windows에서도 Internet Explorer 말고 Firefox 등의 다른 브라우저를 쓰면 이 블로그에서 나눔고딕이 제대로 나올까?
그렇기는 한데 한 가지 더 손볼 것이 있다. Windows의 글꼴 표시 옵션을 ClearType으로 지정하지 않으면 매우 못생긴 모양으로 표시될 것이기 때문이다. Windows XP의 '디스플레이 등록 정보 - 화면 배색 - 효과' 에서 이 옵션을 켜주어야 한다.
(참고: ClearType을 사용하여 화면 글꼴을 향상시키는 방법 - Microsoft)

그리고, 이 말인즉 Windows 2000 에서는 나눔글꼴이 예쁘게 표시되지 못할 것이라는 뜻이다. ClearType은 Windows XP 이후의 운영체제에서만 쓸 수 있다. 쩝.


그것 참, 내 블로그의 글꼴 하나 지정하는 것도 여러 컴퓨터 환경을 생각하면 내 뜻대로 되는 것이 아니었다. 일단은, 내가 내 컴퓨터에서 보기 좋은 걸로 세팅해놓고 쓰련다.


(혹시라도 크게 불편한 점이나, 제가 잘못 설명한 게 있으면 말씀해주세요...)


+ 2010년 10월 11일, (흔한 경우는 아니지만) 옛한글 글자를 표시할 경우를 생각해서 한글 글꼴들의 선두에 '함초롬돋움(HCR Dotum)'을 두었다...가 일주일 뒤, 다시 나눔고딕을 선두에 두었다. 현재의 폰트 패밀리 설정은 다음과 같다.
font-family: "Tahoma", "Verdana", "나눔고딕", "NanumGothic", "맑은 고딕", "Malgun Gothic", "함초롬돋움", "HCR Dotum", "굴림", "Gulim", "sans-serif";


덧글

  • 유레카 2008/12/01 09:04 #

    오우,.좀 이뿌네요 글꼴이..
  • yiaong 2008/12/01 14:09 #

    나눔고딕 말씀이죠? 네, 좀 이쁘더라구요..
  • 쉐부랑코 2009/04/30 12:17 # 삭제

    그럼 결국 익스플로러에서는 나눔고딕을 볼 수 있는 방법이 없는 건가요;
  • yiaong 2009/04/30 14:16 #

    font-family 에서 가장 처음에 지정하면 될 겁니다.
    그런데 (위에 말했듯이) 한국어와 영어 외의 언어에서는 엉성한 모양의 글자가 섞여서 표시될 거예요. 저는 그렇게 보고 싶지 않아서 tahoma나 verdana를 먼저 지정한 것이구요.
  • 쉐부랑코 2009/04/30 19:41 # 삭제

    음.. 그러니까 yiaong님께서 글꼴 순서에서 나눔체를 처음에 지정하지 않으시면 익스플로러를 사용하는 사람들은 yiaong님의 글들이 굴림으로 보이게 된다는 말씀이신가요? 아니면 윈도우 자체적으로 각자 글꼴 순서를 변경할 수 있다는 말씀이신가요?;;
  • yiaong 2009/04/30 20:02 #

    앞에서 말씀하신 것이 맞습니다. 제 블로그에는 나눔글꼴을 '처음에' 지정하지 않았기에, 익스플로러에서 제 블로그를 보면 한글은 굴림으로 표시될 것입니다.
  • 이치로 2010/01/12 11:53 # 삭제

    위에 언급해주신 것을 css로 만들어서 사용자 서식에 넣었더니 이쁘게 잘 나옵니다. IE에서도 나눔고딕 잘 쓰고 있어요 ㅎㅎ
  • yiaong 2010/01/12 16:38 #

    그러셨군요. 어떻게 하셨는지 포스팅해주시면 다른 분들께도 도움이 될 것 같네요. :)
  • inggoon 2010/07/20 02:21 #

    감사합니다. 제 블로그에도 적용해보았더니 잘 나오는군요.
    익스플로러를 사용하지만 tahoma - 나눔고딕이 자동으로 지정되는 것 같습니다.
    아마 버전이나 업데이트에 의해 수정된 것 같으네요, 이 블로그도 나눔고딕으로 보이니까요 ^^
  • yiaong 2010/09/06 12:59 #

    엇, 그렇습니까? 저는 아직도 익스플로러에서는 굴림이 나오던데요.
    (XP SP3에 IE8 환경입니다만..)
  • superkts 2010/07/23 13:34 # 삭제

    우연히 들렀다가 보고갑니다 ^^ 오페라에서도 익스와 같이 처리하는 듯 합니다.
    한글이 굴림으로 나오네요.. 지금 파폭으로 보고있는데 폰트 이쁘네요 ㅋ
  • yiaong 2010/09/06 13:03 #

    네, 오페라 10에서도 그렇군요.

    저는 요즘 Mac에서는 사파리, Windows에서는 크롬을 주로 쓰고 있는데요.
    둘 다 깔끔해보여서 좋아하고 있습니다.
  • 우잉뿌잉 2010/08/08 15:43 #

    폰트 어케 바꾸지...요...?ㅜ
  • yiaong 2010/09/06 13:04 #

    한번 잘 찾아보세요. 저도 잘... ^^;
  • 박준석 2010/11/28 18:18 # 삭제

    번역부탁드려염~


    ġڴ
    Ⱓε Ϻ;ߤФн ó?
  • yiaong 2010/12/03 10:40 #

    이게 뭔가요..? --;
  • 임종태 2011/05/30 16:15 # 삭제

    저도 지금 익스프롤러와 크롬으로 동시에 보고 있는데
    예쁜 글꼴이 두곳에서 다 잘 표현되네요...
    좋은 정보가 되었습니다. 저도 적용시켜 좌야겠네요.
    감사합니다.
  • yiaong 2011/05/31 00:56 #

    도움이 되었다니 뿌듯하네요. :)
    덧글 감사합니다~
  • Quasar 2011/11/22 21:48 #

    windows 7 + IE 9 조합입니다.
    아직도 family font 순서를 저렇게 하셨는지 모르겠지만
    나눔고딕으로 잘 나오네요!
  • yiaong 2011/11/24 14:15 #

    그렇습니까? 그렇다면 앞으로는 글꼴 관련해서 신경을 좀 덜 써도 되겠군요!

    (그런데, 제가 본문 내용을 쓸 때 프로그램 버전들을 명시하지 않았었군요. 지금 다시 읽어보니 어떤 버전에서 문제가 있었는지 알 수가 있나.. 흠, 허술하게시리. --; )
  • 행인 2012/01/30 15:42 # 삭제

    블로그 특성상 알파벳과 한글이 계속 혼용되어 나오는데
    저 Tahoma + 나눔고딕 조합이 정말 시각적으로 만족스럽네요
    좋은 정보 감사합니다~
  • yiaong 2012/01/31 00:39 #

    도움이 되었다니 뿌듯합니다. :)
  • 김른 2013/06/30 20:53 # 삭제

    와 이런 간단한 트릭이 있었네요! 블로그에 영어와 한글, 일본어를 사용하고 있는데 각각 다른 글꼴로 지정하고 싶었거든요. 전부 나눔고딕으로 해 버리면 영어가 볼품없게 나와버려서... 바로 이 방법을 적용했더니 정말 만족스럽네요! 대신 첫 번째 글꼴이 한글을 지원하지 않는 것이어야 되겠군요 ㅎㅎ 다만 나눔고딕 글꼴이 일본어를 지원하는 바람에 일본어 글자체는 나눔고딕으로 표현되어 버리네요. 어쨌든 정말 감사드립니다!
  • yiaong 2013/07/14 17:18 #

    뿌듯하네요. 인사 감사드립니다. :)
※ 이 포스트는 더 이상 덧글을 남길 수 없습니다.


CCL 안내


Creative Commons License

이 블로그의 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.