변경사항

  • 2013-10-02: 나눔바른고딕을 맑은 고딕과 나눔고딕보다 앞세웠다. 내 선호에 따라서 ㅋ
  • 2015-05-04: 환경 변화에 따라 몇 가지를 손봤다. 잘못된 내용도 손봤다.
  • 2016-06-15
    • 글꼴 이름을 적을 때 영문명과 한글명을 병기했었는데 영문만 남겼다.
    • 코펍돋움을 추가했다.
    • 영문 글꼴을 앞세웠던 것을 없앴다. font-weight를 가늘게 하는 방법이 유행하면서, 글꼴의 일관성이 더 중요해진 듯하다.
    • 웹 폰트를 사용할 만하게 됐다고 고쳤다.
    • ie7,8용 fix, 윈도우 XP용 팁을 지웠다. 더이상 필요치 않다.

한글 글꼴

몇 년 전만 해도 웹 폰트를 사용하기 힘들었다. 그러나 이제 모바일조차 인터넷이 웬만큼 빨라져서 몇 가지 장치를 하면 웹 폰트도 사용할 만한 것 같다. 몇 년 전에 비하면 자유롭게 사용할 수 있는 예쁜 글꼴도 꽤 나왔다. 가장 아름다운 것은 상용인 ‘애플 SD 고딕 네오’지만(font-weight가 무려 9종류!), 나눔바른고딕(수정/재배포 자유)이나 코펍돋움(수정/재배포 허락)처럼 자유롭게 사용할 수 있는 글꼴도 일상적으로 사용하기에 전혀 무리가 없다.

아래는 웹폰트를 사용하지 않는 경우 내가 선호하는 글꼴을 우선순위 순으로 적은 목록이다. 웹 폰트를 사용하는 경우 맨 앞에 해당 폰트를 적어 주면 될 것이다.

body{
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-weight: 300;
}

font-weight: 300을 줬는데, 역시 내 선호에 따른 것이다. 이게 실제로 적용되는 경우는 애플 SD 고딕 네오와 맑은 고딕 최신 버전, 나눔고딕 최신버전이 설치돼 있는 경우다. 맑은 고딕과 나눔고딕은 구버전인 경우 가는 굵기가 없다.

영문 글꼴 앞세우기를 포기한 이유

이전에는 한글보다 영어 글꼴을 앞세워서, 영어는 영어 글꼴이 표현하게 했었다. 전엔 이게 괜찮았다. 그런데 font-weight를 가늘게 쓰기 시작하자 문제가 발생했다. 영문은 굵게 한글은 가늘게 나오는 경우가 발생한 것이다. 그래서 영문 글꼴 앞세우기를 이제 더이상 하지 않기로 했다. 만약 영문 글꼴을 앞세우고 싶다면, 사용할 한글 글꼴을 명확히 정한 뒤 그에 어울리는 영문 글꼴을 찾아서 하는 게 좋을 것이다. 웹 폰트를 써서 일관되게 적용한다면 또 상관 없을 것이고 말이다. 그러나 웹 폰트는 여기선 주제를 벗어나니 논외로 하자.

아래 이미지에서 좌측은 영문만 굵은 현상이 발생한 것, 우측은 고친 후를 캡쳐한 것이다. 좌측은 영문이 한글보다 미세하게 굵어서 신경이 쓰인다. 우측이 일관돼 보여 더 예쁘다.

글꼴 표기 순서 해설

이제 왜 글꼴 순서를 저렇게 했는지 설명한다.

맨 앞을 애플의 ‘애플 SD 고딕 Neo’로 설정했다. 윈도우용 글꼴이 있는 맥 사용자들은 있을 테지만, ‘애플 SD 고딕 Neo’가 있는 윈도우 사용자는 없을 것이기 때문에 맥의 기본 글꼴을 더 우선했다. 맥에서 다른 글꼴로 웹사이트를 보는 것보다는 ‘애플 SD 고딕 Neo’로 보는 게 나을 거다. 물론 ‘애플 SD 고딕 Neo’가 상당히 예쁘다는 점이 가장 중요한 점이다.

‘애플 SD 고딕 Neo’ 다음에 적은 글꼴은 맑은 고딕이다. 이제 맑은 고딕이 없는 윈도우 사용자는 거의 없으므로 대부분은 맑은 고딕으로 웹사이트를 보게 될 것이다.

마지막으로 sans-serif라고 써서 애플 SD 고딕 Neo나 맑은 고딕이 없는 경우 시스템 기본 고딕체를 사용하도록 설정한다.

sans-serif는 고딕체를 말한다. 명조체의 끄트머리 삐침 같은 것을 serif라고 부르는데, sans는 없다는 뜻이다. 즉, 삐침 없는 글꼴, 고딕류를 말한다.

다른 글꼴들을 포기한 이유는 윈도우 때문

코펍돋움이나 나눔바른고딕 같은 글꼴도 예쁘다. 맥이나 리눅스에서 보면 말이다. 윈도우 IE나 파이어폭스에선 이 글꼴들은 매우 각져 나온다. 크롬은 자체 렌더링 엔진을 사용하기 때문에 좀 더 봐줄 만하다.

다양한 글꼴이 많아져서 아예 명조체를 기본 글꼴로 지정하고 싶은데, 윈도우 때문에 못하고 있다. 다른 방법을 좀 찾아 볼까 싶다. 일단 이 블로그에는, 윈도우 IE에서도 나름대로 괜찮게 보이는 이롭게 바탕체를 메인 글꼴로 적용해 뒀다. 아래 글꼴 목록에서 첫 번째가 로컬 이롭게 바탕, 두 번째가 웹폰트 이롭게 바탕체다.

font-family: "Iropke Batang", "IropkeBatang", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

원래는 구체적인 글꼴을 지정하지 않았었다

윈도우 XP가 가장 대중적이고, 따로 설치할 한글 글꼴이 거의 없던 시절에는 그냥 sans-serif 하나만 지정하자는 주의였다. 윈도우 XP는 비트맵 글꼴이 아니면 제대로 표현을 못 해 맑은 고딕 등 클리어 타입류 글꼴은 부옇게 나오기 일쑤였다. 그런 상황에서 기본 글꼴이 아닌 다른 글꼴을 사이트의 기본 글꼴로 지정하는 것은 모험이었다. 그 땐 윈도우 비스타나 윈도우7인 경우를 감지해서 글꼴을 맑은 고딕으로 표시해 주는 식으로 대응하기도 했다. 리눅스나 맥은 알아서들 예쁜 글꼴을 설정해서 쓰는데 굳이 내가 건드릴 이유는 없다고 생각했고 말이다.

시절이 그랬으니, 고딕인 걸 알려 주고, 각 OS별 브라우저의 기본 글꼴을 사용하게 하는 게 가장 나은 타협책이라고 생각했다. 고급 사용자가 브라우저에 글꼴을 설정하는 경우엔 그걸 따르게 될 것이니 고급 사용자를 존중하는 측면도 있었다.

또한 당시엔 글꼴을 지정하지 않느니만 못한 사이트도 종종 있었다(지금도 없다고 할 순 없지만 말이다). 예컨대, 어떤 언론 사이트는 당시 은 돋움1을 기본 스타일로 지정을 해 뒀더랬다. 메인컴이 리눅스였던 나는 브라우저 기본 글꼴을 함초롬 바탕으로 해 두고 사용하고 있었는데, 이 언론사 사이트에만 들어가면 은 돋움으로 렌더링이 되니 꽤 짜증이 났었다. 어차피 당시까지 대부분의 리눅스는 은 돋움을 기본 글꼴로 해 뒀기 때문에 굳이 은 돋움으로 글꼴을 지정하지 않아도 은 돋움으로 사이트를 렌더링했을 것이다.

심지어 가장 앞세운 글꼴은 굴림이었다. 왜 굳이 모든 윈도우의, 즉, 99% 사용자의 기본 글꼴인 굴림을 일부러 지정하는지 모를 노릇이었다. 서브컴인 맥으로 해당 사이트에 들어가면 맥에 설치된 굴림으로 표시가 됐다! 심지어 맥에서 굴림을 지워도 애플고딕을 명시해 놔서 애플고딕으로 표시됐다. 애플 SD 고딕 Neo를 놔두고 말이다. 산 넘어 산이었다.

이 언론사도 좀 나아졌다

이제 이 언론사 사이트는 웹폰트를 사용한다. 글꼴 설정을 보니 아래와 같다.

font-family: "Nanum Gothic"!important

굴림과 은 돋움, 애플고딕을 기본 글꼴로 설정했던 옛날보단 나아진 것이라고 할 수 있지만, 지금 내 컴엔 나눔고딕이 설치돼 있음에도 불구하고 웹 폰트를 다운받게 했으니 감점이다. !important는 왜 사용했는지 모르겠고, sans-serif도 명시하지 않았다. Regular와 Bold체 두 개를 해서 총 1.3MB를 다운받게 했는데, 왜인지 모르겠지만, 그걸 한 번 더 받게 해서 총 2.6MB를 다운 받게 한다. 결국 글꼴에 대한 고민은 아직도 모자라 보인다.

그나마 다행이라고 해야 하나 싶은 건 m.으로 시작하는 모바일 전용 사이트에선 웹폰트를 아예 사용하지 않는다는 것이다. 아래가 모바일 전용 사이트 글꼴 설정이다.

font-family: HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif-light;

기왕 데스크톱 사이트에서 나눔고딕을 사용한다면 브랜드 통일성을 위해 모바일에서도 나눔고딕을 가장 앞세울 수 있었다. 굳이 웹폰트를 사용할 필요는 없다. 나눔고딕이 설치된 스마트폰도 꽤 있기 때문이다. 그리고 맨 마지막에 넣어 둔 sans-serif-light는 처음 보는 값이라 찾아 봤는데, 안드로이드에서만 사용되는 값이다. 데스크톱 크롬에서 테스트해 보니 값이 무시된다. 안드로이드만 대응할 게 아니라면 맨 뒤에는 sans-serif를 명시해 줘야 한다. 따라서 아래처럼 개선해 볼 수 있겠다(영문 글꼴 표현을 위해 HelveticaNeue-Light를 앞세운 것으로 간주했다).

font-family: HelveticaNeue-Light, NanumGothic, AppleSDGothicNeo-Light, sans-serif-light, sans-serif;

Light도 명시를 하는 것보다 font-weight를 활용하는 게 나을 것 같은데, 테스트해 볼 여유는 없으니 대충 의견만 내고 나머지는 패스한다.

  1. 물론 은글꼴은 좋은 글꼴이다. 백묵글꼴과 함께 오랫동안 리눅스에서 사용할 수 있는 거의 유일한 한글 글꼴이었던 것으로 안다. 은 바탕은 옛 한글을 제대로 표시하는 몇 안 되는 글꼴 중 하나기도 하다. 여기선 내가 원하는 글꼴을 덮어쓴 것이 주요 문제라는 뜻으로 언급했다. 은글꼴에 대한 자세한 내용은 위키백과의 은글꼴 항목을 참조하면 된다.