Tag Archives: 글꼴

굴림, 돋움 제거 작전

아직도 많은 곳에서 굴림, 돋움 글꼴이 쓰이고 있다. 윈도우즈 7에서는 사용자가 바꿀 수 없는 기본 UI의 일부로 남아 있고, 많은 웹 페이지들은 기본적인 산스세리프(sans-serif: 세리프가 없는 고딕 계열 글꼴)로 굴림(Gulim)이나 돋움(Dotum)을 아직 많이 쓰고 있다. 굴림은 윈도우즈 3.1 시절에 처음 나왔고, 윈도우즈 95에서 기본 글꼴로 쓰이기 시작했는데, 해상도가 낮은 화면에서 9포인트(pt)에 특별히 디자인된 비트맵 글꼴 이미지가 깔끔하다는 이유로 아직 널리 쓰인다.

문제는 높은 해상도의 화면이 점점 더 많이 보급되면서 낮은 해상도에서 “특별히” 디자인된 굴림이 보기 싫은 경우가 많아졌다는 것이다. 나는 14인치 Full HD (1920 * 1080) 노트북을 쓰고 있는데, 웹 사이트에서 본문에 굴림 또는 돋움이 사용된 경우, 비트맵 글꼴이 너무 얇게 디자인 되어 있어서 보기가 상당히 고약하다. 화면을 확대해서 보기도 하는데, 그래도 큰 크기에 렌더링된 굴림은 힌팅(hinting: 수학적인 방법으로 윤곽선 폰트의 모양을 보완하는 것)이 안 되어 있기 때문에 상당히 못생기고 지저분해 보인다.

과거 윈도우즈 시절엔 대안이 없어서 굴림을 여기 저기 쓰는 것이 어쩔 수 없는 일이었지만, 이제 윈도우즈 사용자에게도 대안은 많이 있다. 윈도우즈 XP에서부터 나온 마이크로소프트의 클리어타입(ClearType: 마이크로소프트 윈도우즈 고유한 방식의 힌팅 기술)이 적용된 “맑은 고딕”이 있고 그 밖에도 대안은 아주 많아졌다. 적어도 세리프(serif: 꺾임이 있는 명조 계열 글꼴)가 아닌 산스세리프 글꼴에서는. 윈도우즈를 제외한 다른 운영체제(맥 OS, iOS, 안드로이드, 크롬 OS, 리눅스 등)에서는 굴림이라는 레거시 폰트가 존재하지 않기 때문에 문제가 없다. 네이버에서 만든 나눔고딕, 애플 산돌 고딕 네오, 구글의 노토 산스, 심지어 윈도우즈 폰에서도 마이크로소프트 네오 고딕이 기본 글꼴로 사용되고, 웹 제작자가 설사 굴림을 썼다고 하더라도 굴림이 OS에 없기 때문에 브라우저에서 정한 기본 산스세리프가 대체 글꼴로 나와서 정말 보기 싫은(ugly) 상황은 연출되지 않는다. 오직 데스크톱 윈도우즈에서만 과거 시대의 유물, 굴림을 봐야 하는 불쾌한 상황이 생긴다.

가장 좋은 것은 웹 페이지를 만드는 사람들이 제발 굴림과 돋움을 기본 글꼴로 안 썼으면 좋겠다. 그래서 과거에는 윈도우즈 시스템에서 굴림/돋움을 아예 물리적으로 다른 글꼴로 바꿔버리거나, 레지스크리를 바꾸어서 굴림/돋움이라는 글꼴명이 다른 글꼴을 가리키도록 하는 방법도 시도해보았다. 상당히 만족스럽다. 그런데, 웹이 아닌 다른 응용 프로그램(application)에서 일부러 굴림을 쓴 경우를 구별하고 싶었다. 그래서 좀 덜 과격한 방법으로 웹에서만, 원하는 경우에, 굴림과 돋움을 안 보기로 했다.

주요 브라우저들이 예전에는 장애인들의 웹 접근성을 높이기 위한 한 방편으로 사용자 스타일 시트(user style sheet)를 불러와서 웹 페이지를 사용자가 원하는 방식으로 볼 수 있도록 편의를 제공했었다. 그런데 굳이 사용자가 스타일시트를 정의해서 불러 쓰는 경우가 많지 않았는지, 언제부턴가 인터넷 익스플로러를 제외하고는 그 기능이 다 사라졌다. 그래서 부득이하게 브라우저 확장 기능을 써서 굴림 글꼴을 내 눈 앞에서 사라지게 했다. 우선 굴림과 돋움이 웹 사이트에 출현하면 그것을 다른 글꼴로 대체하는 CSS (Cascading Style Sheet)를 만들었다. 굴림의 대체 글꼴은 굴림과 모양이 상당히 유사한 나눔고딕을, 돋움의 대체 글꼴은 그냥 윈도우즈에서 기본 제공하는 맑은 고딕을 사용하였다.

@font-face {font-family: Gulim; src: local("NanumGothic");}
@font-face {font-family: Dotum; src: local("Malgun Gothic");}
@font-face {font-family: 굴림; src: local("NanumGothic");}
@font-face {font-family: 돋움; src: local("Malgun Gothic");}
cs

 

이제 브라우저별로 확장 기능을 사용해 위의 스타일을 모든 웹 사이트에 적용하였다. 사용자가 임의로 정의한 스타일시트나 스크립트를 사용하여 웹 페이지를 나만의 방식으로 보여주는 확장 기능은 상당히 많다. 대표적인 것이 초기에 센세이션을 일으켰던 파이어폭스에는 그리스몽키 (Greasemonkey)가 있고, 스타일만 바꿔주는 크롬용 스타일봇(Stylebot), 이와 유사한 스타일리시(Stylish)도 있다. 오페라, 크롬, 파이어폭스에 모두 있는 확장 기능으로는 커스텀 스타일 스크립트(Custom Style Script) (파이어폭스용, 오페라용, 크롬용)가 있다. 마이크로소프트 엣지 브라우저에도 확장 기능이 윈도우즈 스토어를 통해서 제공되는데 아직 사용자 정의 스타일을 쓸 수 있는 확장 기능은 없다. 인터넷 익스플로러는 자체적으로 사용자 정의 스타일을 불러다 쓸 수 있는데, 위와 같은 내용을 CSS로 만들어 로딩하면 이상하게 인터넷 익스플로러가 죽어버린다. 결국 오페라에는 커스텀 스타일 스크립트를, 크롬에는 스타일봇을, 파이어폭스에는 스타일리시를 이용해서 위와 같은 글꼴 대체 스타일을 적용했다. 보기 싫었던 굴림과 돋움을 웹 사이트에서 몰아내고 나니 웹 서핑이 한결 쾌적해졌다.

돋움 글꼴이 여러 곳에 쓰였다. zdnet.co.kr 기사
돋움 글꼴이 여러 곳에 쓰였다. zdnet.co.kr 기사
돋움 글꼴이 맑은 고딕으로 대체되었다.
돋움 글꼴이 맑은 고딕으로 대체되었다.

우리바탕, 우리돋움 출시에 대한 개인 의견

한글날을 맞아 우리글닷컴에서 개발한 소위 지능형 한글 글꼴이라는 것을 무료로 배포하고 있다고 신문에 보도되었습니다. 글꼴을 만드는 작업은 고도의 기술력과 프로그래밍, 디자인, 노력, 비용의 산물이기 때문에 우리글닷컴에서 개발한 결과물에 대해 감사와 경의를 표합니다. 그런 노력에 꼬투리를 잡으려는 의도는 아니며, 전문가가 아닌 일반 사용자로서 느낀 몇 가지 아쉬움, 신문 기사의 오류에 대해 말하고자 합니다. 제가 틀린 내용을 주장한다면 댓글로 반박해주십시오.

첫째, 서명덕 기자님의 기사에는 약간 오류가 있습니다. 기존에 윈도우즈 사용자들이 쓰던 굴림, 돋움 글꼴은 비트맵 글꼴이 아니라 트루타입 글꼴이지만, 작은 크기에서 트루타입 힌팅(hinting)이나 래스터라이징(rasterizing) 기술이 떨어질 때에 만들었던 글꼴이라 가독성을 임의로 높이기 위해 글꼴 크기마다 비트맵으로 디자인을 해놓은 것 뿐입니다.

둘째, 화면용 글꼴과 인쇄용 글꼴의 이원화는 비단 우리 나라에서만 생긴 문제는 아닙니다. 로마자 알파벳을 쓰는 서구 문화권에서도 아직까지 화면용 글꼴로는 고딕 계열(sans-serif)을 더 많이 사용하고, 인쇄시에는 명조 계열(serif)을 더 많이 사용합니다. 그것은 모니터와 글꼴의 품질이 아무리 발전했다고는 하지만 아직까지도 명조 계열을 종이에서만큼 깨끗하게 표시하는 데에 한계가 있기 때문이지 않을까 싶습니다. 그리고 사람들도 그것을 그냥 당연하거나 익숙하게 생각하기도 하구요.

셋째, 명조 계열 글꼴의 가독성이 더 좋다는 증거는 뚜렷하지 않습니다. 김태진(1991)의 실험 결과에서도 명조 계열 글꼴과 고딕 계열 글꼴의 지각적 반응 속도의 차이는 거의 없었고, 당시 유행하던 탈네모꼴 글꼴보다 네모꼴 글꼴을 더 쉽게 지각할 수 있는 것으로 나타났습니다. 그 이후로 제가 어떤 연구가 되었는지 찾아보지 않아서 추가적인 어떤 증거가 있는지는 모르겠습니다. 다른 증거가 있다면 알려주십시오.

넷째, 인터넷 한글 활자의 공급이 마이크로소프트사에만 의존하고 있다면서 한국인을 위한 한국인에 의한 인터넷 활자의 제작이라는 취지는 좋지만, 하필이면 마이크로소프트사의 인터넷 익스플로러에서만 작동하는 비표준 독점 기술인 액티브 엑스를 사용해야만 글꼴을 볼 수 있다는 것이 아쉽습니다. 다른 브라우저 사용자들은 유료로 돈을 주고 글꼴을 사야 하겠지요.

다섯째, VTT(Visual TrueType)은 마이크로소프트의 폰트 개발 도구로 윈도우즈 XP에서부터 도입된 소위 클리어타입(ClearType)이라는 발전된 힌팅 기술을 적용해 글꼴을 개발할 수 있게 해주는 것입니다. 이 툴을 이용했다는 것과, 한글 글꼴폭을 가변적으로 했다는 것만으로 지능형 한글 시스템이라는 이름을 붙인 것은 좀 과장인 것 같습니다. 가변폭 글꼴은 이미 1990년대에 빨래줄 글꼴이 나오면서 등장을 했고, 글자의 폭이 다르기 때문에 초기에 워드프로세서와 같은 프로그램에서 처리하기가 상당히 까다로웠었지만 옛날의 이야기입니다. 디자인 면에서는 완전히 똑같은 폭에 모든 글자를 가두지는 않고, 그렇다고 기존의 빨래꼴 글꼴처럼 심한 변화를 주지는 않았네요. 그런데 “이” 모음이 있는 글꼴이 “오”나 “우” 모음 글꼴보다 확연하게 좁게 한 것이 개인적으론 아주 자연스러워보이지는 않습니다. 다만, 아직까지 한글 글꼴에서 글꼴의 특성에 따라 시각적으로 간격을 일정하게 조정해주는 커닝(kerning)이 적용된 글꼴이 없었다는 것을 감안하면 아주 반가운 일입니다.

참고: 영문 글꼴들은 보통 글자에 따라 폭이 넓거나 좁은 대신, 글자들 사이의 간격을 일정하게 유지하는 것이 일반적입니다. 글자의 폭을 일정하게 유지해야 하는 특수한 경우(예를 들면 코딩할 때 쓰는 글꼴이나, 구식 타자기 글꼴)에는 글자의 폭을 일정하게 유지하는 대신, 세리프(serif)를 크고 과장되게 그려서 여전히 글자간의 간격을 일정하게 유지하지요.

여섯째, 클리어타입이 모든 모니터에서 다 깨끗하게 잘 나오는 것은 아닙니다. 저같이 구형 LCD 모니터를 쓰는 사람들은 대부분의 힌팅을 적용한 글꼴들이 상당히 많이 퍼져서 흐릿하게 보이거나 색번짐이 나타납니다. 그래서 윈도우즈 비스타에서 기본으로 제공하는 맑은 고딕 글꼴에 똑같이 클리어타입을 적용해서 봐도, 고급 노트북 화면에서 볼 때와 구형 아날로그 연결 방식의 LCD 모니터에서 볼 때 상당히 차이가 납니다. 그래서 구형 모니터에서는 아직도 클리어타입을 비롯한 모든 힌팅 옵션을 다 끄고, 그냥 얇고 또렷한 굴림을 사용합니다. 맑은 고딕을 강제로 적용한데다가 전경과 배경색의 대비도 흐릿하게 해놓은 웹 페이지를 윈도우즈 환경에서 구형 모니터로 보고 있으면 상당히 짜증이 납니다. 마찬가지로, 웹 페이지에서 강제로 클리어타입을 적용하도록 해서 사용자에게 선택권을 빼앗아갈 때에 불편을 느끼는 사용자도 있을 수 있습니다.

일곱째, 웹에서의 여러 가지 글꼴 사용에 앞서, 보편적인 정보 전달 원리를 충실히 지켜야 합니다. 웹을 종이 매체와 똑같이 보는 것에는 무리가 있습니다. 종이 매체에 한 번 찍힌 글자는 그대로 고정되지만, 웹에 찍힌 글자를 모두가 똑같은 환경에서 보지는 않습니다. 사람마다 모니터의 종류도 다르며, 모두가 윈도우즈를 사용하지도, 인터넷 익스플로러를 쓰는 것도 아닙니다. 심지어, 어떤 사람은 글자를 시각적으로 듣는 것이 아니라 음성으로 웹 페이지를 듣습니다. 즉, 모든 사람이 해당 글꼴을 똑같이 볼 수는 없다는 것을 감안한다면 글꼴에 의존적인 디자인은 경계해야 합니다. 우리글닷컴 홈페이지에는 모든 사람이 윈도우즈 환경이며, 인터넷 익스플로러에서 해당 글꼴을 볼 수 있다고 가정하고, 게다가 글꼴을 특별히 키우거나 줄이지 않고 기본값으로만 본다고 가정하고 페이지를 디자인하였습니다. 따라서 위의 조건에서 조금이라도 벗어난 모든 사람들은 이상하게 어긋나거나 해독이 어려운 텍스트들을 보게 됩니다.

웹폰트가 제대로 나왔을 때의 문단 모양

웹폰트가 제대로 나오지 않았을 때 깨진 문단 모양

이와 같은 현상은 아직도 웹이나 컴퓨터 화면의 특성을 제대로 파악하지 못하고, 고정된 폭을 가진 종이 위에 타자기로 글자를 찍던 시절에 사용하던 줄바꿈 방식을 그대로 사용하기 때문에 일어납니다. 아직도 많은 사람들이 워드프로세서나 프리젠테이션 프로그램이나, 웹 페이지를 작성할 때에 흔히 범하는 실수입니다.

너무 부정적인 의견만 내세운 것 같습니다. 천편일률적이고 멋도 없는 굴림 글꼴 때문에 많은 사람들이 쓸데없이 그래픽으로 글자를 그리던 관행에서 벗어날 수 있는 대안적인 글꼴이 많아지고 보급되는 것은 참 좋은 일입니다. 그러나 그런 글꼴도 보편적인 기술 환경에서 보편적으로 활용 가능하도록 보급했으면 더 좋았을 것 같은 아쉬움이 남습니다. 그리고 새로운 글꼴을 써서 멋스럽게 웹 페이지를 만드는 것보다 더 중요한 것은, 정보 전달이라는 원래의 의도가 어떤 환경에서도 훼손되지 않도록 신경을 쓰는 일일 것입니다.