국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일시트(CSS) - 이제 필요한 서체만 선별적으로 바꿔쓰세요.

2012.08.02 13:17    작성자: ONE™

OS X이 10.7 라이언에서 10.8 마운틴 라이언으로 판올림하면서 오랜 기간 한글 대표 서체로 군림하던 애플 고딕체도 앞서 iOS에서 먼저 선보인 바 있는 애플 SD 산돌고딕 Neo체에게 그 자리를 넘겨주게 되었습니다. 가독성 문제와 볼드체의 부재 때문에 OS X 한글 서체 교체를 열망하던 수많은 국내 맥 유저들의 염원이 이뤄진 기념비적인 일이 아닌가 개인적으로 생각하고 있습니다. 

또, 이번 시스템 서체 교체는 단순히 서체 파일 하나만 바뀐 수준이 아니라 필요에 따라 각재각소에 적용할 수 있는 무려 9가지의 계열 서체가 같이 제공되며, 이로 인해 밋밋하고 평면적으로 한글로 표시되던 메뉴바나 닥(Dock), OS X 및 각종 응용 프로그램들도 이전에 비해 훨씬 미려하고 깔끔하게 보이는 많은 장점을 가지고 왔습니다. 


(무려 9가지 서체!)

운영체제 내에서는 이렇게 깔끔하게 표시되는 애플SD산돌고딕Neo체지만, 워낙 국내 웹 환경이 마이크로소프트 윈도우 체제에 맞춰져 있는지라 대부분의 한글 웹사이트들이 텍스트를 표시하는데 있어 윈도우 비트맵 서체들(돋움, 굴림...)을 사용하고 있습니다. 일반적으로 웹사이트 상의 텍스트는 웹 디자이너가 애초에 특정 서체로 표시되도록 지정을 해놓기 때문에 시스템 폰트가 바뀌었다고해서 웹페이지에 바로 적용되는 것은 아닙니다. 

이 때문에 웹브라우저의 기본 폰트를 애플SD산돌고딕Neo체로 강제 지정하는 스타일 시트(CSS)가 여러 맥 커뮤니티에 소개되고 있고 많은 유저들이 비교적 만족하시면서 사용하는 것으로 알고 있습니다. 


하지만 이런 스타일시트에는 아주 큰 단점 한가지가 있습니다.

폰트 교체에 사용되는 대부분의 이런 스타일 시트(.css)들은 기본적으로 아래와 같은 규칙이 사용되고 있습니다.

 * { 
font-family: Hevetica(혹은 다른 영문 서체), AppleSDGothic !important;
}

위 CSS를 이해하기 쉽도록 풀어서 설명하면, 

모든 웹페이지의 모든 서체를 Helvetica(혹은 다른 영문 서체)로 최우선적으로 표시하고, Helvetica체로 표시될 수 없는 텍스트(한글)는 AppleSDGothic체를 강제로(!important) 적용해라! 라는 의미입니다.

기본적으로 웹사이트 상에서 표시되는 각종 텍스트들은 운영체제의 서체를 하나로 통일하는 방식과는 달리 심미적인 이유나 가독성 향상을 위해 웹디자이너가 서체의 종류나 크기 등을 직접 지정하게 됩니다. (국내 웹사이트는 이런 심미적인 이유보다는 윈도우와의 호환성이나 웹페이지의 모양새나 테이블 틀이 깨지지 않도록 하기 위한 이유가 더 큰 것 같습니다..) 

특히 해외 뉴스 사이트나 블로그등이 가독성이나 디자인상의 이유로 Helvetica 이외에 다른 서체를 사용하는 경우가 많은데 위 방식을 적용할 경우 모든 텍스트가 서체 하나로 일률적으로 표시되어 웹사이트 하나하나의 개성이 완전히 무시되고,  가독성이 오히려 더 떨어지는 등 여러 부작용이 따라옵니다.

 -- CSS 적용 전/후 ---

↑ 국내 웹사이트는 괜찮은데...

↑ 영문 폰트가 동글 동글

↑ 해외 사이트의 영문 기사도 동글동글... 사이트, 내용, 디자인 불문하고 무조건 애플SD산돌고딕...

이런 문제를 간단하게 해결할 수 있는 방법이 있습니다. 

스타일 시트를 이용한 방법을 사용하되 웹페이지의 모든 서체를 애플SD산돌고딕Neo체로 바꿀 것이 아니라 가독성이 떨어지는 일부 한글 비트맵 서체, 즉 돋움, 돋움체, 굴림, 굴림체만 애플SD고딕산돌Neo체로 표시되도록 바꿔주시면 됩니다. 

@font-face {
    font-family: "돋움";
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}

위 CSS 규칙은 웹페이지의 특정 서체 A를 시스템에 설치된 B로 표시하거나, B가 없는 경우 C로 표시라는 내용입니다. 따라서 "돋움"체로 표시될 텍스트들이 "Apple SD Gothic Neo"체로 표시가 되는데, 여기에 굴림체와 애플고딕체등도 추가해 주면 이번글의 핵심인 한글/영문 서체를 선별적으로 적용하는 팁이 완성됩니다. ↓   

>> 새 CSS 전체 펼치기 <<

* 원하실 경우 다른 한글 서체도 추가로 더 지정해 줄 수 있고(예" "바탕", Batang, BatangChe ...), "Apple SD Gothic"과 NanumGothic의 위치를 바꿔 나눔 고딕을 한글 대체 서체로 사용할 수 있습니다.  



↑ 외국 사이트는 영향을 주지 않고 국내 사이트의 한글 텍스트만 서체를 바꿔줍니다.

지금 적용해 보세요^^ 

bitmap_to_AppleSDGothicNeo.css.zip


[업데이트]

2012년 8월 5일 - 댓글로 받은 피드백을 기반으로 몇가지 규칙을 더 넣어주었습니다. 

Back_to_the_Mac_20120805.css.zip

적용방법

사파리


위 스타일 시트를 내려 받은 후 적당한 폴더에 넣고, 사파리 환경설정 > 고급 > 스타일 시트에서 해당 파일을 선택해 주시면 됩니다. 

구글 크롬

내려받은 스타일 시트를 Custom.css로 이름을 바꾸로 아래 경로에 있는 Custom.css 파일에 덮어씌우시면 됩니다.

사용자 계정/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

    
  1. 이전 댓글 더보기
  2. Blog Icon
    aaron

    완전 감사합니다. 이것때문에 사파리를 지웠다 다시 까랑야하나? 했는데 깔끔히 해소되었네요.

  3. Blog Icon
    신원석

    정말 대단하십니다. 아무리 인터넷을 뒤져도 방법을 못찾았다가 다른 이유로 검색 중 발견했습니다. 애플에서 상 받으셔야 합니다. 고맙습니다. ㅠㅠ

  4. Blog Icon
    chris

    크롬은 css 적용 하는거 업데이트 되면서 막혔습니다.
    수정하셔야 할듯 합니다.

  5. Blog Icon
    yoonhee

    감사합니다!!^^

  6. Blog Icon
    nabiruri


    추천받아 오게되었는데, 도움 많이 받고 갑니다! 감사합니다!

  7. Blog Icon
    friedpotato

    언젠가부터 크롬 자체설정으로 커버됩니다.
    환경설정 - 고급 설정 표시 - 웹 콘텐츠 - 글꼴 맞춤설정 에서 설정해 보세요.
    기존에 애플고딕으로 나오던 구글, 페북 등... 예쁘게 나오네요.

  8. Blog Icon
    Bohwan

    plex site가 그림이 요상시래 깨져 나와서 검색하다가
    한방에 해결하고 갑니다.

    정말 감사합니다.

  9. Blog Icon
    Duke

    Safari 는 위의 내용대로 하시면 됩니다. css 정의를 잘 만들어주셨네요.

    Chrome 의 경우, 위에 소개된 Custom.css 파일을 대체하는 방식은 더 이상 유효하지 않습니다. 아래 블로그 내용 참고하시기 바랍니다.
    http://monowx.blog.me/220082864023

  10. Blog Icon
    8Gasari

    올려주신파일을 개인적으로 수정해서 사용하고싶은데 클릭하니 사파리로 열려서 수정이 되질않습니다.
    어떻게하면 수정이 가능한가요?

  11. Blog Icon
    winging7@naver.com

    오오오 정말 꼭꼭 필요했던 건데ㅠㅠ 드디어 네이버 블로그도 깨지지 않고 볼수 있겠군요... 사파리의 스타일시트부분이 뭔지 몰라서 그냥 지나쳤었는데 이런게 있었다니... 감사합니당

  12. Blog Icon
    Lee

    정말 큰 도움을 주시네요... 감동감동

  13. 크으으으으으 ㅠㅠb 감사합니다!

  14. Blog Icon
    goood

    맥 생뉴비인 저한테는 정말 빛과 소금같은 존재이십니다.

    글쓴이님 지하에 가둬놓고 블로그 포스팅만 시키고 싶네요.

  15. Blog Icon
    아이쿠야

    감사하고 또 감사합니다~^^

  16. 와우! 감사합니다! ^^

  17. Blog Icon
    행인1

    정말 감사드립니다.
    너무 큰 도움이 되었어요.
    리플 꼭 달아드리고 싶어 달고 갑니다!

  18. Blog Icon
    화가

    맥사고 정말 많은 도움을 받고있습니다.! 감사합니다.!

  19. Blog Icon
    Lee JB

    궁서체에서 변경 때문에 찾다가 여기서 해결하고 갑니다. 감사합니다.

  20. 감사합니다. ^^

  21. Blog Icon
    이쁜이

    가져갈께요 감사합니다.