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

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

알림

현재 모빌리스 웹 글꼴유료로 바뀌었습니다. 무료도 있지만 월 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 이상


아이폰에서도 보이는 웹 글꼴

제목을 보면 알 수 있지만 아이폰에서도 웹 글꼴이 보인다. 제목으로 사용한 글꼴은 은옛체이다. 휴먼옛체와 비슷한데 아무래도 서체 자체는 은옛체 보다 휴먼옛체가 더 나아 보인다. 그러나 은옛체는 무료이기 때문에 이런 정도의 품질은 충분히 감내할만 하다고 생각한다.

모빌리스 웹 글꼴

따라서 전송량 문제만 없다면 원하는 웹 글꼴로 블로그나 홈페이지를 꾸밀 수 있다. 그런데 얼마 전 모빌리스라는 회사에서 이런 사람들 위한 웹 글꼴 서비스를 시작했다. 웹 글꼴을 내려받아 설치하는 방식이 아니라 모빌리스 서버의 웹 글꼴을 블로그나 홈페이지에서 바로 사용할 수 있도록 하는 서비스이다. 개인이나 비영리 조직은 자유롭게 사용할 수 있기 때문에 나처럼 설치형 블로그 운영자에게는 상당히 괜찮은 서비스다. 현재 제공하는 글꼴은 다음과 같다.

모빌리스 웹 글꼴1
글꼴분류 글꼴이름 글꼴코드
나눔글꼴 나눔고딕 NanumGothicWeb
나눔고딕B NanumGothic...
나눔고딕BB NanumGothic...
나눔명조 NanumMyeongjoWeb
나눔명조B NanumMyeongjo...
나눔손붓 NanumBrushWeb
나눔손펜 NanumPenWeb
은글꼴1 은바탕 UnBatangWeb
은바탕B UnBatangBoldWeb
은디나루 UnDinaruWeb
은디나루B UnDinaruBoldWeb
은디나루L UnDinaruLightWeb
은돋움 UnDotumWeb
은돋움B UnDotumBoldWeb
은그래픽 UnGraphicWeb
은그래픽B UnGraphicBoldWeb
은궁서 UnGungseoWeb
은필기 UnPilgiWeb
은필기B UnPilgiBoldWeb
은글꼴2 은봄 UnBomWeb
은자모바탕 UnJamoBatangWeb

모빌리스 웹 글꼴2
글꼴분류 글꼴이름 글꼴코드
은글꼴2 은자모돋움 UnJamoDotumWeb
은자모노벨 UnJamoNovelWeb
은자모소라 UnJamoSoraWeb
은펜 UnPenWeb
은펜흘림 UnPenheulimWeb
은필기a UnPilgiaWeb
은신문 UnShinmunWeb
은타자 UnTazaWeb
은바다 UnVadaWeb
은옛글 UnYetgulWeb
백묵글꼴 백묵바탕 Baekmuk-BatangWeb
백묵돋움 Baekmuk-DotumWeb
백묵굴림 Baekmuk-GulimWeb
백묵그래픽 Baekmuk-HeadlineWeb
렉시글꼴 렉시굴림 LexiGulimWeb
렉시새봄 LexiSaebomRWeb
은진글꼴 은진 EunjinWeb
은진반달 EunjinBandalWeb
은진방울 EunjinBangwoolWeb
은진구슬 EunjinGuseulWeb
은진낙서 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와 실제 사용할 때의 이름만 똑 같이 지정하면 된다.

@<a href="https://twitter.com/font" target="_blank">font</a>-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개로 제한하는 것이 좋다.

모빌리스 웹 글꼴 관련 링크

관련 글타래

2011/09/05 16:24 2011/09/05 16:24
글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
오늘의 글
인기있는 글
컴퓨터 팁&텍
트랙백 많은 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: http://offree.net/trackback/3492

  1. Subject : [blog] 모빌리스 웹 폰트 Web Font 적용하기

    Tracked from In Search of Excellence 2011/09/10 11:31 del.

    예전에도 트위터에서 모빌리스 웹 폰트 출시했다는 글을 보고 적용해야지 하고 있었는데… 도아님 블로그에서 관련 글을 보고 web font 적용해보았습니다. 이전에도 나눔고딕체를 web font .eot 로 ?

  2. Subject : 아이폰도 되는 한글 웹 글꼴 제공 사이트

    Tracked from go go think_ 2012/01/12 15:31 del.

    도아님...

  3. Subject : 모빌리스 글꼴을 이용하여 웹페이지 글자를 자유롭게

    Tracked from 소프트웨어 견습생의 필살 로그 2012/02/08 19:13 del.

    자신의 블로그 또는 홈페이지를 OS 시스템 글꼴을 사용할 경우 다음과 같은 문제점이 발생할 수 있다. 웹페이지를 볼 때, 맥 OS와 윈도우 OS의 글꼴이 다르다. 나만의 글꼴로 서비스 하는데, 알고?

Facebook

Comments

  1. 베누시안 2011/09/05 18:31

    좋은 정보 감사합니다. 한글도 웹폰트 지원이 되는군요. 실험해봐야겠네요.

    perm. |  mod/del. reply.
    • 도아 2011/09/05 19:51

      한글 웹폰트가 된지는 상당히 오래됐습니다.

  2. zn 2011/09/05 21:25

    유용한 정보네요. 나중에 꼭 써봐야겠습니다.

    perm. |  mod/del. reply.
    • 도아 2011/09/06 09:32

      제 블로그는 이미 적용했습니다. 저는 일전송량을 신경쓰지 않아도 되니 이점이 가장 좋더군요.

  3. 리안 2011/09/06 02:20

    아 정말 기존웹폰트가 IE에서만 동작한다는 슬픈현실때문에 다른 웹브라우저에 맞춰 다른글꼴 크기 조절하고 그런 에로사항이 한번에 해결됬네요.
    호환성 목록만 놓고본다면 사실상 모든 웹브라우저에서 적용가능하군요 :)

    원래 나눔고딕을 쓰던터라 바로 소스만 바꿔서 적용완료했습니다. 좋은글 감사합니다!

    perm. |  mod/del. reply.
    • 도아 2011/09/06 09:33

      예. 아이폰 사파리에서도 잘 보이더군요. 따라서 일반 브라우저라면 아무 문제가 없을 듯합니다. 다만 파일 크기가 커서 모바일에서는 화면 표시하는 시간이 오래 걸릴 수 있겠더군요.

  4. 레즈 2011/09/06 09:56

    멋진 정보네요. 기억해두고 있다가 써먹어야겠어요.

    perm. |  mod/del. reply.
    • 도아 2011/09/06 10:46

      코드 한줄 추가하면 되기 때문에 블로그에 바로 적용해도 될겁니다.

  5. black_H 2011/10/21 23:46

    많은 도움이 되었습니다^^
    저만의 커뮤니티(?) 에 잘 적용하여 사용하고 있습니다~
    도아님 멋쟁이~

    perm. |  mod/del. reply.
    • 도아 2011/10/22 06:53

      감사합니다. 그런데 무척 오랜만이군요.

  6. 글꼴매니아 2013/12/18 18:16

    "은글꼴"체는 "은근히 꼴리는 글꼴"의 약자인가요?

    perm. |  mod/del. reply.

댓글로 기쁨을 나눠요!

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.