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

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"체로 표시가 되는데, 여기에 굴림체와 애플고딕체등도 추가해 주면 이번글의 핵심인 한글/영문 서체를 선별적으로 적용하는 팁이 완성됩니다. ↓

@font-face {
    font-family: "돋움";
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: Dotum;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: DotumChe;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: "굴림";
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: Gulim;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: GulimChe;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: AppleGothic;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}

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