델리 키포스

제 블로그로 들어오는 여러 가지 경로 중 구글을 통해 들어오는 경우를 관심있게 보고 있습니다. 최근에 ‘크롬 맑은 고딕’이라는 키워드로 들어오는 경우가 제법 있었습니다. 아마도 크롬에 맑은고딕을 적용하는 방법을 찾는 사람이 아닐까라고 생각해봅니다.  저도 굴림이나 돋움에 너무 질려서 웬만하면 나눔고딕으로 보고 싶은데 크롬 3.0에는 글꼴 강제 지정 기능이 없어 많이 아쉬웠었습니다.

그런데 오늘 혹시나 하는 마음에 크롬 확장 프로그램(extension)을 찾아보니 userContent라는 확장 프로그램이 있었습니다. 내용을 대충 읽어보니 사용자가 지정한 CSS를 모든 웹 페이지에 적용하는 확장 프로그램인 듯해서 설치를 진행해봤습니다.

우선 2010년 1월 현재 안정 채널(stable channel, 크롬 프로젝트에서는 버전 대신 채널이라는 용어을 사용하고 있네요)은 버전 3.x으로 확장 프로그램 기능을 지원하지 않습니다.  그래서 크롬 프로젝트 홈페이지에 가보니 베타 채널과 개발 채널을 설치할 수 있더군요. 아무래도 베타 채널이 조금 더 안정적이기 때문에 베타 채널을 설치했는데 다행이 베타 채널(ver 4.0)은 확장 프로그램을 지원하더군요.

그리고 userContent 확장 프로그램을 설치했습니다. 아직 사용자 CSS를 지정하지 않았기 때문에 웹 페이지를 열어도 아무런 변화가 없었습니다. ‘도구 메뉴 > 확장 프로그램’을 선택하면 확장 프로그램 페이지가 열리고 userContent 항목의 옵션 버튼을 클릭하면 사용자 CSS 입력 페이지가 열립니다.

* { font-family : '나눔고딕' !important; }

편집 창에 위 내용을 입력한 후 저장합니다. 그러면 크롬으로 여는 모든 페이지에 나눔고딕이 적용됩니다. 당연한 얘기지만 PC에 나눔고딕이 설치되어 있어야 합니다.

CSS 구문을 간단하게 살펴보면 *는 전체 선택자(universal selector)이며 해당 구문은 모든 엘리먼트(element)에 나눔고딕을 글꼴로 적용해라는 내용입니다. (만약 맑은고딕을 적용하려면 ‘나눔고딕’ 대신 ‘맑은 고딕’이라고 입력합니다.)  !important는 사용자 스타일의 우선 순위를 높게 합니다. 기본적으로 제작자(author)가 지정한  스타일이 사용자 스타일보다 우선 순위가 높습니다. 그러나 !important가 선언된 스타일의 경우 사용자 스타일이 더 높은 우선 순위를 갖게됩니다. 그래서 제작자 지정한 글꼴은 무시되고 사용자 지정한 나눔고딕이 웹 페이지에 적용됩니다.

* { font-family : sans-serif !important; }

사용자 스타일을 위에 내용으로 저장하면 브라우저에서 지정한 산세리프체 글꼴이 페이지에 적용됩니다. 이 방법은 사용자 지정 글꼴을 변경할 때 CSS 구분을 직접 편집하는 않고 브라우저가 지원하는 옵션 기능을 이용하기 때문에 CSS 문법에 익숙하지 않은 사용자들이 쉽게 사용할 수 있습니다. 사용자 지정 글꼴을 변경하려면 ‘기능 메뉴 > 옵션 > 고급설정 > 언어와 글꼴’에서 변경할 수 있습니다.

파이어폭스도 좋은 브라우저이긴 하지만 개인적으로 빠른 랜더링과 UI의 간결함 때문에 크롬을 더 좋아합니다. 그러나 지금까지는 크롬에 글꼴을 강제하는 기능이 없어 파이어폭스를 메인 브라우저로 사용하고 있었습니다. 하지만 크롬 4.0부터는 사용자 스타일 지정할 수 있기 때문에 더이상 크롬을 메인 브라우저로 사용하지 않을 이유가 없습니다. 크롬 좋아요~!

[ 추가 사항 ]
전체 선택자를 사용하는 경우 pre 엘리먼트에도 스타일이 적용됩니다. 그런데 pre 엘리먼트는 주로 프로그램 소스 코드를 출력할 때 사용되며 소스 코드는 고정폭 글꼴이 적용되는 것이 좋을 것 같아서 pre, code, samp 엘리먼트를 제외한 모든 block 엘리먼트와 inline 엘리먼트에 적용되도록 수정하였습니다.

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, div, blockquote, form, hr, table, 
  fieldset, address, li, dt, dd, td, tt, i, b, big, small, em, string, 
  dfn, kbd, var, cite, abbr, acronym, a, q, sub, sup, span, bdo, input, 
  select, textarea, label, button, font 
{
  font-family : sans-serif !important;
}

css, 글꼴, 나눔고딕, 맑은고딕, 사용자스타일, 크롬, 폰트

요즘 회사 홈페이지 개편 작업을 진행하고 있습니다. 홈페이지 작업할 때면 느끼는 점이지만 웹 디자인이라는 것이  편집 디자인에서 파생되었기 때문에 타이포그래피가 매우 중요합니다. 그런데 윈도우즈 XP 환경에서 한글은 매우 열악합니다. 기본적으로 내장된 글꼴은 굴림, 돋움, 바탕 정도이며 이 글꼴들은 작은 크기에서 비트맵으로 렌더링되어 특정 크기가 아니면 보기가 약간 별로입니다. 오죽하면 대부분의 한글 홈페이지가 굴림 9pt에 맞춰서 디자인되었겠습니까?

물론 작은 크기에서 내장된 비트맵을 사용하지 않는 경우 글자가 뭉그러져 보이거나 가독성이 떨어진다는 의견도 있습니다만 요즘은 클리어타입도 있고 해서 개인적으로 작은 크기에서도 클리어타입이 적용되는 글꼴을 선호합니다. 먼저 접한 것은 맑은고딕이였습니다. 비스타의 기본 글꼴로 비스타가 보급(?)되면서 같이 보급되었습니다. 저는 XP를 쓰기 때문에 파워포인트 뷰어를 설치할 때 같이 설치되는 편법을 이용해서 맑은고딕은 사용했습니다.

그리고 작년인가요? 한글날을 기념해서 나눔고딕과 다음체가 발표되었습니다. 처음엔 맑은고딕과 나눔고딕이 비슷비슷해 보였습니다. 그런데 시간이 조금 흐르면서 맑은고딕보다는 나눔고딕에 더 선호가 갔습니다. 뭐랄까요… 조금 더 다듬어진 느낌이랄까요? 그리고 얼마 후 다시 나눔고딕코딩 글꼴이 배포되었습니다. 너무너무 고마운 글꼴이었습니다. 오죽하면 영문 고정 글꼴과 맑은고딕을 합쳐서 새로운 글꼴로 만들어버릴까라는 생각까지 했겠습니까?

여담으로 브라우저에 보면 지정된 글꼴 무시라는 기능이 있습니다. CSS에서 지정된 글꼴을 무시하고 브라우저에서 지정한 글꼴로 렌더링하는 기능입니다. 사실 많은 한글 홈페이지에서 글꼴을 굴림으로 지정하고 있는데 아마도 페이지 디자인할 때 굴림에 맞춰서 했기 때문에 그러지 않을까고 생각해봅니다. 아무튼 개인적으로 굴림이 너무 지겨워서 파이어폭스에 해당 기능을 켜고 웹서핑하고 있습니다. 그런데 개인적으로 파이어폭스보다는 크롬을 더 선호하지만 크롬에는 글꼴 무시 기능이 아직 구현되어 있지 않아서 결국 메인 브로우저의 자리에서 밀려나고 말았답니다 ㅎ

두서없이 적다보니 생각보다 길어졌습니다. 대충 마무리는 짓어야 할 것 같은데… 한글은 독창적이고도 아름다운 글자인 만큼 영어 처럼 다양한 글꼴이 개발되고 보급되었으면 좋겠습니다;;

글꼴, 나눔고딕, 맑은고딕, 크롬, 파이어폭스, 폰트