웹 사이트를 풍부하게하는 웹 글꼴

한글은 상당히 뛰어난 문자다. 자소 문자이면서 영어와 달리 모아쓴다. 따라서 표현하는데 더 효율적이다. 그러나 한글을 웹에서 표현하려고 하면 항상 부족하다. 컴퓨터에 기본적으로 깔려 있는 글꼴이 너무 제한되기 때문이다. 이런 이유 때문에 꽤 많은 사이트에서 웹 글꼴을 사용한다. 그런데 이런 웹 글꼴은 윈도 기본 브라우저인 인터넷 탐색기에서만 사용할 수 있다. 오늘 소개하는 웹 글꼴은 이런 문제점을 해결한 웹 글꼴이다. 거의 모든 모바일 브라우저와 데스크탑용 브라우저를 지원한다.

알림

현재 모빌리스 웹 글꼴은 유료로 바뀌었습니다. 무료도 있지만 월 2만 다운로드까지만 무료이기 때문에 하루 방문자 수 1000이 넘으면 사용할 수 없습니다. 따라서 모빌리스 웹 글꼴을 사용하려는 분은 이 점을 기억하기 바랍니다. 참고로 모빌리스에서 제공하던 웹 글꼴을 다른 호스팅 서버에 올리고 이 글에서 소개한 방법으로 링크하면 잘 동작합니다. 제 블로그는 글꼴을 드롭박스에 올려 웹 글꼴을 사용하고 있습니다.

웹 글꼴의 문제점

꽤 오래 전에 블로그 글꼴을 우리바탕으로으로 라는 글을 올렸다. 글을 읽어 보면 알 수 있지만 블로그에서 웹 글꼴을 사용하는 방법에 대해 올린 글이다. 컴퓨터의 한글 글꼴은 그 갯수가 너무 부족하다. 윈도 기본 글꼴은 XP는 굴림, 명조, 고딕(돋움), 궁서의 4가지 밖에 없다. 비스타로 오면 맑은 고딕이 하나 더 추가되기는 하지만 부족하기는 마찬가지다. 이렇다 보니 시스템 글꼴을 사용하는 웹 페이지는 거의 비슷하다. 사용할 수 있는 시스템 글꼴이 많아야 5개 밖에 되지 않기 때문이다.

이런 상황이기 때문에 웹 사이트를 조금 더 풍부하게 표현하기 위해 웹 글꼴을 사용한다. 시스템 글꼴을 사용하면 운영체제(윈도, 리눅스, 맥등)에서 지원하는 글꼴만 사용할 수 있는 반면에 웹 글꼴을 사용하면 원하는 글꼴로 자신의 블로그나 홈페이지를 꾸밀 수 있기 때문이다. 네이버 블로그에 접속해 보면 상당히 많은 블로그가 글을 읽기 힘들 정도로 알록 달록(?)한 손글씨를 많이 사용하고 있다. 이런 글꼴은 모두 웹 글꼴로 보면 된다.

그런데 웹 글꼴에는 몇가지 문제가 있다. 먼저 웹 글꼴은 웹 페이지를 브라우저로 읽을 때 서버로 부터 글꼴 파일을 받아와 화면에 표시한다. 특히 한글 웹 글꼴은 글자 수가 많아서 의외로 글꼴 파일의 크기가 크다. 보통 20만 바이트 정도에서 60만 바이트 정도를 차지한다. 따라서 이 블로그처럼 설치형 블로그를 사용하면 의외로 많은 일일전송량을 차지한다. 그러나 전송량 보다 더큰 문제는 과거 웹 글꼴로 많이 사용한 .EOT 형식은 Internet Explorer에서만 사용할 수 있다. 또 일부 웹 글꼴은 까지 요구한다.

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개로 제한하는 것이 좋다.

관련 글타래