맑은 고딕이라는 글꼴을 적용한 후 예쁘기는 한데 흐릿해서 못보겠다는 분들이 보입니다. 이 글은 이러한 분들만을 위해 작성합니다.

먼제 흐릿하게 보이는 현상이 무엇인지는 시시콜콜 블로그의 글을 보시면 알 수 있습니다. 아래는 위에 소개한 포스트에 나오는 이미지입니다.

저의 설정 환경에서는 아래와 같이 보입니다. 한국어판이 아니기 때문에 셀에 표시되는 내용을 비교해 보셔야 합니다.

어느 정도의 차이는 있겠지만 흐릿한 정도가 완화되어 있는 것을 보실 수 있습니다. (물론 비트맵 글꼴과의 선명도 비교는 무리입니다.)

맑은 고딕은 영문의 Segoe UI와는 다르게 글자의 굵기가 얇습니다. 일정 크기 이상이 되면 문제가 없지만 10포인트 근처에서는 흐릿해지는 것을 어쩔 수 없습니다. 이것을 보완할 수 있는 방법이 ClearType Tuner를 이용하는 것입니다.

ClearType Tuner는 마이크로 소프트의 홈페이지에서 받을 수 있습니다. 또는 ActiveX를 이용하는 튜닝 페이지에서 온라인상으로 할 수 있습니다. 튜닝 단계에서 중요한 포인트는 마지막 단계인 아래 페이지입니다.

제일 처음에 있는 제일 굵은 스타일을 선택하게되면 흐릿한 정도를 최대한 완화할 수 있습니다. 흐릿함 때문에 맑은 고딕을 포기하셨던 분들에게 도움이 되었기를 바랍니다.

Vista에서 적용되는 '맑은 고딕' 때문에 말이 많습니다. Vista RC1 한글 버전 스크린샷이 올라온 글 에서는 출시전에 한글 글꼴이 꼭 변경되어야 한다는 말도 나오고 있습니다. 기존의 Bitmap 글꼴인 '굴림'이나 '돋움'에 비해 뿌옇게 보인다는 것이 주 이유입니다. 각자의 취향이 있겠지만 웹의 관점에서 두개의 글꼴을 비교해 보도록 하겠습니다.

'맑은 고딕'과 같이 등장하는 것으로 ClearType이라는 기술이 있습니다. Microsoft에서 개발한 기술입니다. Adobe에서도 CoolType이라는 비슷한 기술을 가지고 있습니다. 기본적인 아이디어는 오프라인 인쇄물의 글자와 동일한 가독성을 지원하는 것입니다. '맑은 고딕' 같은 TrueType 글꼴에서 사용되는 ClearType 이전에도 Font Smoothing이라는 기술이 존재했었습니다. Windows 98 SE 버전에서부터로 기억합니다. Windows XP에서는 Standard이라는 이름으로 ClearType과 구분되어 있습니다. Font Smoothing은 TrueType 글꼴에서 외곽선을 Antialising 처리하여 뭉게주는 방식입니다. 도트의 계단 현상을 없애주는 것으로 3D 그래픽 등에서 많이 사용되고 있습니다. 이것과 ClearType을 자세히 확대해 보면 아래와 같이 보이게 됩니다.

ClearType vs. Standard

Font Smooting은 글자를 단순히 부드럽게 처리하는 것이고, ClearType은 Antialising 된 글자의 가독성을 높이기 위해 경계 부분에 임의의 계산된 RGB색 추가하게 됩니다.

특히 LCD 모니터에서의 문자 가독성을 높여준다고 합니다. LCD의 경우 CRT와 다르게 하나의 픽셀이 세개로 분리된 RGB가 모여서 이루어 집니다. 일반적으로 가독성이 CRT에 비해 떨어지게 됩니다. 이런 이유로 ClearType을 적용할 경우의 개선 효과가 CRT보다 좋다고 합니다. 저 같은 경우에는 CRT에서도 사용하고 있습니다. LCD가 아니더라도 부드럽게 보이는 것이 좋기 때문입니다. 추가적인 내용은 Allblog 검색(ClearType) 으로 대신합니다.

이번 포스팅을 하게 된 이유인 웹에서의 '맑은 고딕'에 대해 기존 Bitmap 폰트인 '돋움'과 비교해 보겠습니다. 아래 그림은 Tistory 메인어 올라왔던 글을 캡쳐한 것입니다. 각각 IE 옵션에서 기본('돋움')과 '맑은 고딕'으로 설정 하였을 경우입니다. 이러한 페이지에서는 둘 다 무난하게 보이는 것을 볼 수 있습니다.

돋움

맑은 고딕

참고로 아래 그림은 '맑은 고딕'을 ClearType 적용없이 보았을 경우입니다. Bitmap 글꼴의 경우 ClearType의 영향을 받지 않지만 TrueType 글꼴은 볼 수 없을 정도로 흐려지는 것을 볼 수 있습니다. CRT를 사용한다 하더라도 ClearType을 켜놓아야 하는 것이 이런 이유입니다.

ClearType을 적용하지 않은 맑은 고딕

앞서 본 것처럼 일반적인 문자 크기에서는 기존 Bitmap과 TrueType의 차이가 두드러 지지 않습니다. 오히려 Bitmap 글꼴이 더욱 선명하게 보이고 있습니다. 현재까지 웹에서 쓰이는 한글 글꼴(돋움, 굴림)의 경우 9포인트 글자가 대부분인것이 이 이유입니다. 9포인트 이상이나 이하의 경우 위아래로 하나 정도의 크기만으로 제한하여 사용하고 있고, 크거나 작은 문자에서는 '굴림'체는 사용하지 않고 있습니다. 큰 문자인 제목의 경우 별도의 이미지로 대처하거나 영문을 사용하는 것이 일반적입니다. TatterTools의 텍스트 기반 스킨들도 제목 부분이 영어로 대체되어 있는것을 많이 볼 수 있습니다.

더 작은 문자나 큰 문자로 만들어진 페이지에서는 아래와 같이 보이게 됩니다. 어떤 것이 더 가독성이나 미적으로 나아 보이는지는 여러분의 판단에 맡기겠습니다.

작은 글자 상태에서의 돋움

작은 글자 상태에서의 맑은 고딕

큰 글자 상태에서의 돋움

큰 글자 상태에서의 맑은 고딕

마지막으로 ClearType을 최대로 활용하기 위한 팁으로 ClearType Tuner를 소개합니다. Microsoft에서는 ClearType의 세부적인 설정을 변경할 수 있는 웹페이지와 프로그램을 제공합니다. 웹사이트에서 설정할 수 있는 ClearType Tuner 페이지 와 ClearType Tuner PowerToy 프로그램 을 이용하여 세부적인 설정을 할 수 있습니다. 아래 이미지는 웹페이지의 설정 마지막 단계를 보여주고 있습니다. 저 같은 경우 제일 선명하게 표시하기 위해 첫번째 옵션을 선택하여 사용하고 있습니다.

ClearType Tuner

국내에서도 A List Apart 와 같은 텍스트 기반의 멋진 사이트들이 많이 등장하기를 기대해 봅니다.