모빌리스웹폰트 소개
DESCRIPTION
모빌리스에서 제공하는 아웃라인 웹폰트 서비스 소개 자료입니다.TRANSCRIPT
㈜모빌리스
2012.5
모빌리스 웹폰트 서비스
웹디자이너가
멋지게 디자인한
홈페이지가
왜 웹브라우저에서
멋지게 보이지 않을까 ?
???
이유는 폰
트 ???
웹디자이너가홈페이지에 사용한
헤움알럽축구체
사용자가 보는 홈페이지 폰트
사용자 PC 에 헤움알럽축구체가 없어서 !!!
아웃라인 웹폰트 개념
아웃라인 헤움폰트로웹디자이너가 디자인한
홈페이지
어떠한 장치에서도동일한 아웃라인 헤움폰트로웹디자이너가 의도한동일한 홈페이지 LOOK 제공
해외 사례The New York Times
NewsweekBloomberg
Twitter....
한글 웹폰트의 문제
비트맵 폰트여서 거칠게 보인다 .
폰트파일 크기가너무 크다 .
4.1MB
모빌리스 웹폰트
아웃라인 폰트여서 미려하게 보인다 .
폰트파일 크기를확 줄여준다 .
700KB
모빌리스 웹폰트 서비스아웃라인 웹폰트를 50% 이상 경량화하여
홈페이지 방문객들이어떤 기계에서 어떤 웹브라우저로 접속하더라도
속도 저하없이 동일한 폰트로 보이도록 하는혁신적 웹폰트 서비스
아웃라인 웹폰트의 장점• 프린터 인쇄가 자유롭다 . 이미지의 경우 프린터 인쇄 해상도에 따라 뭉개져 나오기도
한다 .• 웹디자이너가 디자인을 바꾸더라도 텍스트의 크기 변형이 용이하다 .• 검색엔진에서 검색을 용이하게 해준다 . 이미지로 제목을 사용할 경우 검색엔진이
색인화하지 못한다 .• 웹접근성을 위해 화면을 키웠을 때 계단현상없이 텍스트 폰트가 커진다 .
폰트명 원본 폰트 경량 폰트
나눔 고딕 4.1MB 700KB
서울한강체 8.3MB 300KB
헤움소설체 1.8MB 470KB
• 폰트 경량화 기술로 웹폰트 크기 최적화• 개발자용 자바스크립트 jQuery 플러그인 제공• 크로스 브라우징 지원• 모바일 브라우저 지원• 최적화된 서버 캐시 제어
폰트 경량화 예시
모빌리스 웹폰트 서비스의 특징
500 여종의 풍부한 한글폰트 지원• 2012.5 현재 공급 확정된 한글 폰트 총 455 종
• 기존 오픈 폰트 라이선스 기반의 한글 웹폰트 55 종나눔글꼴 , 은글꼴 , 렉시글꼴 ,
백묵글꼴 , 은진글꼴 , 드로이드글꼴
• 태시스템의 상용 글꼴 150 종
• 헤움폰트의 상용 글꼴 250 종
• 이외에 오픈 폰트 라이선스 기반 영문 웹폰트 500 종 추가 예정
어떻게 사용하나요 ?• 단 두줄이면 끝납니다 .
• 먼저 <head> 안에 아래 HTML 코드를 넣습니다 .
<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb' rel='stylesheet' type='text/css' />
• 스타일쉬트 (<style>) 안에 웹폰트 이름을 명시합니다 .
body { font-family: 'NanumGothicWeb'; }
• 끝 !
웹개발자를 위한 jQuery Plugin• 프론트엔드 개발자들이 정교하게 웹폰트를 제어할 수 있도록
jQuery Plugin 제공
• http://api.mobilis.co.kr/webfonts/jwebfont.min.js
$('.title').hide().webfont( 'NanumGothicWeb', { subset: 'moderate', loading: function( data ) {
// 폰트 로딩이 시작될 때 호출됩니다 . }, loaded: function( data ) {
// 폰트 로딩이 완료되면 호출됩니다 . $(this).show();
}, error: function( data ) {
// 폰트 로딩에 실패하면 호출됩니다 .$(this).addClass(‘fallback’);
} });
• 추후 다양한 font subsetting 과 lettering.js를 활용한 다양한 한글 웹폰트 제어 라이브러리 제공예정
모빌리스 웹폰트 서비스 활용 예• 쌍용자동차
쌍용자동차 공식홈페이지 - http://www.smotor.com/
• FubuFubu 공식 홈페이지 - http://www.fubu.co.kr/
• 투니버스투니버스 홈페이지 - http://tooniverse.tooniland.com/
• TechNeedleIT 관련 인터넷 미디어 - http://techneedle.com
• 예올문화유산 보존 재단법인 사이트 - http://yeol.org/
• 해커스 어학원고우해커스 모바일 사이트 - http://m.gohackers.com/
• 이외 수천여 사이트에서 모빌리스 웹폰트 서비스 이용 중
참고자료
• 웹폰트 서비스의 태동http://qyleekr.blogspot.com/2011/04/blog-post.html
• 웹타이포그래피 발표자료http://qyleekr.blogspot.com/2011/11/blog-post.html
• “ 아이폰 되네” 한글 웹폰트 서비스 눈길http://www.zdnet.co.kr/news/news_view.asp?artice_id=20110902120026
• 아이폰도 되는 한글 웹 글꼴 제공 사이트http://offree.net/entry/Free-Web-Font-by-Mobilis
