Blog Archive

2016-10-08

굴림, 돋움 제거 작전

아직도 많은 곳에서 굴림, 돋움 글꼴이 쓰이고 있다. 윈도우즈 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 기사
돋움 글꼴이 맑은 고딕으로 대체되었다.
돋움 글꼴이 맑은 고딕으로 대체되었다.