웹마스터 팁

(자료실에 'webfont(웹폰트) 애드온' 을 올리면서 써놓은 글을 재구성했습니다. )



1. 웹폰트 개념(?)

(1) 개념 : 검색해보세요;;

(2) 웹환경에서의 폰트 사용과 어려움 

- 기본적으로 인간이 정보를 얻는 수단은 언어이므로 웹 역시 '문자(텍스트)' 위주의 공간일 수 밖에 없습니다. 화면에서도 가장 중요하고 많이 보이는 부분 역시 '문자' 입니다. 이를 보기 좋게(가독성, 디자인 포함) 만드려면 다양한 글꼴이 필요한 데 여기에는 많은 어려움이 있습니다. 윈도우(가장 많이 쓰는 운영체제)에 쓸만한(한글의 경우) 기본글꼴의 수가 많지 않고, 또 운영체제가 다른 경우, 운영체제의 버전이 다른 경우, 특히 요즘의 경우 모바일 환경 등 각각 설치된 기본 글꼴이 다르므로 모든 사용자 환경에서 동일하게 보이기란 쉽지 않은 현실입니다.
 특히 한글의 경우 이 정도가 심합니다. '굴림'과 '돋움'외에는 공통적인 글꼴이 없습니다(게다가 이 두 글꼴을 비슷하지요;;). 거기다 모바일까지 고려하면 이마저도 호환이 되지를 않습니다. 

(3) 웹폰트 사용 추세

- 최근 html5, css3 도입 등으로 적극적으로 활용될 것이라 생각합니다. 다만 한글의 경우 한글의 특수성때문에 영문에 비해 글꼴 제작이 어려우며(시간, 비용 등), 폰트 용량이 현저히 크고, 무료로 제공되는 폰트가 많지 않아서 적극적으로 사용될 지에 대해서는 조금 더 지켜봐야 알 것 같습니다. 
 또 IE를 사용하는 비율이 매우 높아 (아래서 검토하겠지만) IE8 이하의 비효율적인 웹폰트 사용방식으로 인해 당분간 적극적으로 웹폰트를 사용하는 데 장애가 될 것이라 생각합니다. 


(4) 추천하는 웹폰트 (혹은 폰트)


- 나눔글꼴 : 무료로 쓸만한 한글 폰트가 없는 현실에서, 나눔글꼴이 가장(주관적입니다;;) 가독성이 좋고 모양이 아름다우며, '네이버'에서 검색화면 등을 통해 배포를 유도하고 있기 때문에 가장 사용자가 많을 것이라고 생각합니다. 홈페이지는 http://hangeul.naver.com/index.nhn 입니다. 

- 맑은 고딕 : 우선 윈도우 비스타 이상, 마이크로소프트 오피스 2007(?) 이상에 기본 글꼴입니다. 사용하는 사용자가 많을 것이라 생각됩니다. (ps. 현재(2011.05) 국내의 PC에서 비스타 이상의 사용자 비율은 30% 정도입니다.) 웹폰트로 만들어서 사용할 수 있는 지는 잘 모르겠습니다..;; 

- 한글(워드프로세스)에 내장된 글꼴 : 국내에서 '한글'이 설치되지 않은 컴퓨터는 거의 없다고 생각합니다. 이에 착안하여 굳이 웹폰트로 사용하지 않더라도 여기 내장된 글꼴을 베이스로 사이트로 만드셔도 국내 웹환경에서는 문제가 없을 거라 생각합니다. 

 

2. 브라우저별 동작방식

(1) IE8 이하

 - eot 만 지원합니다.  src 외에 최근의 font-face 다른 속성(local 등등)을 지원하지 않습니다.

 local 속성을 지원하지 않아 css에 font-face 선언만 하면 현재 사용자 pc에 설치 여부와 상관없이 무조건 읽어 오게 되어 비효율적입니다. 

(2) IE9, FF, 크롬, 사파리 

 - woff, ttf, svg을 지원합니다. ttf는 용량이 너무 커서 woff가 지원되는 현실에 비추어 이 애드온에서는 생략했습니다.

 local 속성을 지원하여 사용자 pc에 폰트가 설치 되어 있는 경우에 웹폰트를 읽지 않고, 또한 문서의 font-face로 선언된 글꼴이 사용되지 않는 경우에도 불러오지 않습니다. 매우 효율적입니다. 결국 font-face 선언해두는 것만으로 트래픽, 사용자 브라우저의 로딩 등의 부담없이 웹폰트를 사용할 수 있게 합니다. local에서 폰트의 한글명을 못 읽는 경우가 있어 폰트명을 영문과 한글명 두번 선언해야합니다. 

(3) 아이폰 : svg 파일만 지원합니다. (*아이폰3에서는 현재 woff 을 지원하지 않습니다. 아이폰4 이후의 기본 웹브라우저는 확인하지 못했습니다.)



3. 사용법

 (웹폰트애드온에 사용된 나눔글꼴을 기준으로 설명합니다.)

(1) IE8 이하를 제외한 브라우저 : IE8을 제외한 브라우저에서는 그냥 css에서 font-face 타입만 선언해두고 필요한 부분에 font-family에 아래의 정의된 명칭을 사용하시면 됩니다. ex. ng, nm, np 등등  

1
2
3
4
5
6
7
8
9
@font-face{font-family:ng;font-style:normal;font-weight:normal;src:local('NanumGothic'),local('나눔고딕'),url(addons/webfont/font/ng.woff) format('woff')}
@font-face{font-family:ng;font-style:normal;font-weight:bold;src:local('NanumGothic'),local('+
 '나눔고딕'),url(addons/webfont/font/ngb.woff) format('woff')}
@font-face{font-family:ngeb;font-style:normal;font-weight:normal;src:local('NanumGothic ExtraBold'),local('나눔고딕 ExtraBold'),url(/addons/webfont/font/ngeb.woff) format('woff')}
@font-face{font-family:nm;font-style:normal;font-weight:normal;src:local('NanumMyeongjo'),local('나눔명조'),url(addons/webfont/font/nm.woff) format('woff')}
@font-face{font-family:nm;font-style:normal;font-weight:bold;src:local('NanumMyeongjo'),local('나눔명조'),url(addons/webfont/font/nmb.woff) format('woff')}
@font-face{font-family:nmeb;font-style:normal;font-weight:normal;src:local('NanumMyeongjo ExtraBold'),local('나눔명조 ExtraBold'),url(addons/webfont/font/nmeb.woff) format('woff')}
@font-face{font-family:np;font-style:normal;font-weight:normal;src:local('Nanum Pen Script'),local('나눔손글씨 펜'),url(addons/webfont/font/np.woff) format('woff')}
@font-face{font-family:nb;font-style:normal;font-weight:normal;src:local('Nanum Brush Script'),local('나눔손글씨 붓'),url(addons/webfont/font/nb.woff) format('woff')}


(2) IE8 이하 
- 다음의 코드를 작성하면 무조건 폰트파일을 로딩합니다. 웹폰트 로딩하는 시간까지 약간의 딜레이가 발생합니다. (ps. 경험상 3가지를 이상 웹폰트를 사용하지 않는 것을 추천드립니다. )

1
2
@font-face{font-family:ng;font-style:normal;font-weight:normal;src:url(/addons/webfont/font/ng.eot)}
@font-face{font-family:ng;font-style:normal;font-weight:bold;src:url(/addons/webfont/font/ngb.eot)}



- 스크립트로 설치된 폰트를 검출하여 없을 시에 로딩하는 방식이 효율적으로 보입니다. 단 이 방식은 브라우저 로딩 후에 글꼴을 읽게 되는 단점이 있습니다. ps. 현재 '웹폰트애드온'이 이 방식을 사용하고 있습니다. 방식이 궁금하신 분은 이 애드온을 살펴보세요.) 
 

태그 연관 글
  1. [2011/10/15] 묻고답하기 WebFont 반응이 없습니다. by 쥬르날
  2. [2010/10/07] 웹마스터 팁 나눔고딕 웹폰트가 아닌 API로 적용하여 사용해보자!! by 으아악. *10
  3. [2009/01/23] 묻고답하기 웹폰트를 적용중인데요 본문에서 나온 부분을 어느 CSS를 수정해야는지요 ? by 김민787 *3
  4. [2008/09/11] 웹마스터 팁 에디터 9pt 추가 및 에디터에도 웹폰트 보이게 하기. by 욜리 *13
  5. [2007/08/17] 웹마스터 팁 위지웍 에디터 웹폰트 사용하기 by 최지연 *6
제목 글쓴이 날짜
(포인트) 레벨별 포인트 계산 기능 추가 [4] file Simulz 2007.11.19
(CSS) IE8용 웹조각 기능 file Simulz 2009.03.26
XE위키 모듈: 숫자 문서의 짧은 주소 문제와 미디어위키 문법 사용시 내부링크 문제 해결하기 Gunmania 2016.02.12
가상사이트 페이지별 개별 레이아웃 적용하기 Xiso 2016.01.31
warning: call time pass by reference 에러 해결 방법 [6] ezi 2011.07.28
리눅스 10원짜리 팁 - history 명령어 응용 paraduxx 2016.01.12
리눅스 10원짜리 팁 - 탭 키 쓰십니까 ? paraduxx 2016.01.12
회원가입폼 기본항목에 안내문구 넣기 paraduxx 2016.01.11
XE와 마인크래프트 서버 화이트리스트 연동하기 [9] file 연가시먹었다 2012.08.25
일반 게시판에서 익명 선택하여 작성하기 [2] POWERXE 2015.12.27
메뉴활성화에 따라 원하는 위치에 레이어 넣고 바꾸기.. 왼쪽 플래시 메뉴 메뉴따라서 바꾸기 [4] 만쓰별(정만) 2009.01.24
비밀글 이여도 갤러리나 웹진형에서, 썸네일이나 요약 부분이 나타나게 수정하려면.. sejin7940 2015.12.23
상단에 스르르~ 닫기 가능한 배너 달기 [30] file 야옹잉 2014.06.20
빠른 글 쓰기: 메인 페이지에서 글 쓰기 [1] file 윈컴이 2015.12.09
통합검색 기능에 권한 적용하기 (완전 차단 필요할 때) [9] file 모노소프트 2012.04.30
관리자만 볼 수 있는 로그인 기록 페이지 만들기 퍼니엑스이 2015.12.07
rsync 와 ssh root 접속을 막고 인증키로만 백업하기 마루디자인 2015.11.25
리눅스 백업 1.0 ibin 2015.11.23
이제는 유튜브동영상 손쉽게 다운로드 받으세요 ミ:つÞ [7] 딴죽을거는남자 2015.11.02
파시ㅇ 예제입니다. [3] file 유창화 2015.11.12