웹 사이트를 풍부하게하는 웹 글꼴
한글은 상당히 뛰어난 문자다. 자소 문자이면서 영어와 달리 모아쓴다. 따라서 표현하는데 더 효율적이다. 그러나 한글을 웹에서 표현하려고 하면 항상 부족하다. 컴퓨터에 기본적으로 깔려 있는 글꼴이 너무 제한되기 때문이다. 이런 이유 때문에 꽤 많은 사이트에서 웹 글꼴을 사용한다. 그런데 이런 웹 글꼴은 윈도 기본 브라우저인 인터넷 탐색기에서만 사용할 수 있다. 오늘 소개하는 웹 글꼴은 이런 문제점을 해결한 웹 글꼴이다. 거의 모든 모바일 브라우저와 데스크탑용 브라우저를 지원한다.
알림
현재 모빌리스 웹 글꼴은 유료로 바뀌었습니다. 무료도 있지만 월 2만 다운로드까지만 무료이기 때문에 하루 방문자 수 1000이 넘으면 사용할 수 없습니다. 따라서 모빌리스 웹 글꼴을 사용하려는 분은 이 점을 기억하기 바랍니다. 참고로 모빌리스에서 제공하던 웹 글꼴을 다른 호스팅 서버에 올리고 이 글에서 소개한 방법으로 링크하면 잘 동작합니다. 제 블로그는 글꼴을 드롭박스에 올려 웹 글꼴을 사용하고 있습니다.
웹 글꼴의 문제점
꽤 오래 전에 블로그 글꼴을 우리바탕으로으로 라는 글을 올렸다. 글을 읽어 보면 알 수 있지만 블로그에서 웹 글꼴을 사용하는 방법에 대해 올린 글이다. 컴퓨터의 한글 글꼴은 그 갯수가 너무 부족하다. 윈도 기본 글꼴은 XP는 굴림, 명조, 고딕(돋움), 궁서의 4가지 밖에 없다. 비스타로 오면 맑은 고딕이 하나 더 추가되기는 하지만 부족하기는 마찬가지다. 이렇다 보니 시스템 글꼴을 사용하는 웹 페이지는 거의 비슷하다. 사용할 수 있는 시스템 글꼴이 많아야 5개 밖에 되지 않기 때문이다.
이런 상황이기 때문에 웹 사이트를 조금 더 풍부하게 표현하기 위해 웹 글꼴을 사용한다. 시스템 글꼴을 사용하면 운영체제(윈도, 리눅스, 맥등)에서 지원하는 글꼴만 사용할 수 있는 반면에 웹 글꼴을 사용하면 원하는 글꼴로 자신의 블로그나 홈페이지를 꾸밀 수 있기 때문이다. 네이버 블로그에 접속해 보면 상당히 많은 블로그가 글을 읽기 힘들 정도로 알록 달록(?)한 손글씨를 많이 사용하고 있다. 이런 글꼴은 모두 웹 글꼴로 보면 된다.
그런데 웹 글꼴에는 몇가지 문제가 있다. 먼저 웹 글꼴은 웹 페이지를 브라우저로 읽을 때 서버로 부터 글꼴 파일을 받아와 화면에 표시한다. 특히 한글 웹 글꼴은 글자 수가 많아서 의외로 글꼴 파일의 크기가 크다. 보통 20만 바이트 정도에서 60만 바이트 정도를 차지한다. 따라서 이 블로그처럼 설치형 블로그를 사용하면 의외로 많은 일일전송량을 차지한다. 그러나 전송량 보다 더큰 문제는 과거 웹 글꼴로 많이 사용한 .EOT 형식은 Internet Explorer에서만 사용할 수 있다. 또 일부 웹 글꼴은 ActiveX까지 요구한다.
WOFF 웹 글꼴
따라서 블로그 글꼴을 우리바탕으로라는 글을 쓰며 웹 글꼴을 설치한 뒤 나중에 웹 글꼴을 지운 이유도 Internet Explorer에서만 웹 글꼴을 사용할 수 있고 주로 사용하는 브라우저를 Maxthon에서 크롬으로 바꾸었기 때문이다. 그런데 .EOT 형식 말고 다양한 플랫폼에서 사용할 수 있는 웹 글꼴이 등장했다. 바로 WOFF 형식이다. WOFF 형식을 사용하면 다음과 같은 브라우저에서 웹 글꼴을 표시할 수 있다. 브라우저를 보면 알 수 있지만 대부분의 PC용 브라우저에서 웹 글꼴을 표시할 수 있다.
- 구글 크롬 4.0 이상
- 애플 사파리 3.1 이상
- 마이크로소프트 인터넷 익스플로러 4.0 이상
- 모질라 파이어폭스 3.5 버전 이상
- 오페라 10 이상
또 WOFF는 PC용 브라우저만 가능한 것이 아니라 모바일 기기에서도 웹 글꼴을 표시하는 것이 가능하다. WOFF 웹 글꼴은 다음과 같은 모바일 운영체제에서도 지원한다.
- 애플 iOS 4.1 이상
- 구글 안드로이드 OS 2.2 이상
- 리서치인모션 블랙베리 OS 6 이상
아이폰에서도 보이는 웹 글꼴
제목을 보면 알 수 있지만 아이폰에서도 웹 글꼴이 보인다. 제목으로 사용한 글꼴은 은옛체이다. 휴먼옛체와 비슷한데 아무래도 서체 자체는 은옛체 보다 휴먼옛체가 더 나아 보인다. 그러나 은옛체는 무료이기 때문에 이런 정도의 품질은 충분히 감내할만 하다고 생각한다.
모빌리스 웹 글꼴
따라서 전송량 문제만 없다면 원하는 웹 글꼴로 블로그나 홈페이지를 꾸밀 수 있다. 그런데 얼마 전 모빌리스라는 회사에서 이런 사람들 위한 '웹 글꼴 서비스'를 시작했다. 웹 글꼴을 내려받아 설치하는 방식이 아니라 모빌리스 서버의 웹 글꼴을 블로그나 홈페이지에서 바로 사용할 수 있도록 하는 서비스이다. 개인이나 비영리 조직은 자유롭게 사용할 수 있기 때문에 나처럼 설치형 블로그 운영자에게는 상당히 괜찮은 서비스다. 현재 제공하는 글꼴은 다음과 같다.
| 글꼴분류 | 글꼴이름 | 글꼴코드 | 글꼴분류 | 글꼴이름 | 글꼴코드 |
|---|---|---|---|---|---|
| 나눔글꼴 | 나눔고딕 | NanumGothicWeb | 은글꼴2 | 은자모돋움 | UnJamoDotumWeb |
| 나눔고딕B | NanumGothic... | 은자모노벨 | UnJamoNovelWeb | ||
| 나눔고딕BB | NanumGothic... | 은자모소라 | UnJamoSoraWeb | ||
| 나눔명조 | NanumMyeongjoWeb | 은펜 | UnPenWeb | ||
| 나눔명조B | NanumMyeongjo... | 은펜흘림 | UnPenheulimWeb | ||
| 나눔손붓 | NanumBrushWeb | 은필기a | UnPilgiaWeb | ||
| 나눔손펜 | NanumPenWeb | 은신문 | UnShinmunWeb | ||
| 은글꼴1 | 은바탕 | UnBatangWeb | 은타자 | UnTazaWeb | |
| 은바탕B | UnBatangBoldWeb | 은바다 | UnVadaWeb | ||
| 은디나루 | UnDinaruWeb | 은옛글 | UnYetgulWeb | ||
| 은디나루B | UnDinaruBoldWeb | 백묵글꼴 | 백묵바탕 | Baekmuk-BatangWeb | |
| 은디나루L | UnDinaruLightWeb | 백묵돋움 | Baekmuk-DotumWeb | ||
| 은돋움 | UnDotumWeb | 백묵굴림 | Baekmuk-GulimWeb | ||
| 은돋움B | UnDotumBoldWeb | 백묵그래픽 | Baekmuk-HeadlineWeb | ||
| 은그래픽 | UnGraphicWeb | 렉시글꼴 | 렉시굴림 | LexiGulimWeb | |
| 은그래픽B | UnGraphicBoldWeb | 렉시새봄 | LexiSaebomRWeb | ||
| 은궁서 | UnGungseoWeb | 은진글꼴 | 은진 | EunjinWeb | |
| 은필기 | UnPilgiWeb | 은진반달 | EunjinBandalWeb | ||
| 은필기B | UnPilgiBoldWeb | 은진방울 | EunjinBangwoolWeb | ||
| 은글꼴2 | 은봄 | UnBomWeb | 은진구슬 | EunjinGuseulWeb | |
| 은자모바탕 | UnJamoBatangWeb | 은진낙서 | EunjinNakseoWeb |
웹 글꼴 사용법
글꼴을 사용하는 방법은 두 가지가 있다. 하나는 'LINK 태그'를 이용해서 HTML 문서에 직접 집어넣는 방법이다. 만약 텍스트큐브 설치형이나 티스토리처럼 스킨 편집이 가능한 블로그라면 <head>와 </head> 태그 사이에 다음과 같은 코드를 삽입하면 된다. 또 글꼴을 바꾸고 싶다면 'UnYetgulWeb'만 윗 표의 글꼴 코드로 바꾸면 된다. STYLE 태그는 꼭 HEAD 태그에 올 필요는 없고 필요한 곳에 삽입하면 된다.
<head>
<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=UnYetgulWeb' rel='stylesheet' type='text/css' />
<style type="text/css">
h1 { font-family: 'UnYetgulWeb'; }
</style>
</head>
두번째 방법은 .CSS 파일에 웹 글꼴 코드를 직접 삽입하는 방법이다. 이 경우 자신이 사용하는 스킨의 스타일 파일(예: style.css)을 확인한 뒤 다음과 같은 코드를 삽입하면 된다. 여기서 font-family의 이름은 원하는 대로 지정하면 된다. 'UnYetgulWeb'처럼 영어를 사용해도 되고 다음 예처럼 구분하기 쉽게 '은옛글'로 지정해도 된다. 다만 @font-face에서 지정한 font-family와 실제 사용할 때 이름만 똑 같이 지정하면 된다.
@font-face { font-family:'은옛글'; font-style:normal; font-weight:700; src: url('http://api.mobilis.co.kr/webfonts/Un/UnYetgulCompact.woff') format('woff');}
.titleBox h2 {
font-family: '은옛글', 나눔고딕, 굴림;
}
CSS에 삽입하는 글꼴 코드는 LINK 태그의 주소를 웹 브라우저에 직접 입력하면 알 수 있다. 즉, http://api.mobilis.co.kr/webfonts/css/? ··· etgulweb를 클릭하면 CSS에 삽입하는 코드가 보인다. 마지막으로 LINK 태그를 여러 개 사용하면 많은 웹 글꼴을 사용할 수 있다. 그러나 웹 글꼴은 파일 크기가 크기 때문에 될 수 있으면 최대 2~3개로 제한하는 것이 좋다.