2010. 9. 7. 02:13ㆍIT/Tistory Tips
** 꽤 지루한 글이 될 것 같습니다. 웹폰트에 관심 없으신 분은 읽지 않으셔도 좋습니다. **
이 글이 블로그에 유용한 태그라는 범주에 포함되는지 아닌지 모르겠다. 티스토리가 아닌 다른 블로그엔 적용해보지 않아서 사용할 수 있는지 없는지도 알지 못한다. 어쨌든, 티스토리 블로그 또는 개인 홈페이지에선 적용할 수 있다.
인터넷을 돌아다니다 보면 웹폰트라는 단어를 볼 수 있다. 쉽게 생각하면 싸X월드 글꼴과 비슷한 것이다. 도토리를 주고 글꼴을 구매하면 자신의 미니홈피를 표시하는 글꼴이 바뀐다. 이와 비슷하게 블로그 스킨(skin.html/ style.css)을 만들 때도 내 블로그를 표시할 특정 글꼴을 사용하도록 지정한다. 그러면 내 블로그를 방문하는 사용자의 컴퓨터에 내가 지정한 글꼴이 설치되어 있을 때 그 글꼴로 블로그가 표시된다. 그러나 내 블로그에 접속한 손님의 컴퓨터에 내가 블로그 스킨에서 지정한 글꼴이 없으면 손님 컴퓨터의 시스템 글꼴 또는 웹 브라우저에서 지정한 글꼴로 표시된다.
예를 들어 내 블로그(/'pəlp/)는 Vista/7의 기본 글꼴인 맑은 고딕을 사용하도록 지정되어 있지만, XP 운영 체제를 사용하며 맑은 고딕 글꼴이 설치되어 있지 않은 시스템에선 맑은 고딕이 아닌 다른 글꼴로 표시된다. 웹폰트는 내 블로그를 방문하는 손님의 컴퓨터에 내가 지정한 글꼴이 있든 없든 관계없이 내가 지정한 글꼴로 블로그를 표시하는 방법이다. 즉, 웹폰트를 사용해서 맑은 고딕 글꼴을 지정하면 맑은 고딕이 설치되어 있지 않은 XP 시스템에서 내 블로그를 방문해도 맑은 고딕 글꼴로 표시된다. 대강 상대방 휴대전화에 표시될 내 이름을 지정하는 서비스와 비슷하다.
정리하면 웹폰트는 내 블로그를 방문한 손님에게 보여줄 글꼴을 지정하는 것이며 상대방의 컴퓨터에 내가 지정한 글꼴이 있는지 여부와는 상관없이 내가 원하는 글꼴로 나타난다. (주의: 웹폰트는 누구나 글꼴 파일을 내려받고 이용할 수 있기 때문에 저작권이 있는 글꼴은 사용하면 안 된다.)
웹폰트는 원래 IE에서만 지원하던 기능인데 CSS3에 ttf 파일을 사용한 웹폰트 기능이 추가되면서 지금은 Firefox, Opera, Chrome, Safari 등 주요 웹 브라우저에서 모두 지원한다. 그러나 티스토리에 적용한 웹폰트는 IE와 Chrome, Safari, Opera에서만 지원되며 또 Opera에서는 Opera 설치 폴더 경로에 한글 또는 다른 유니코드 문자가 없을 때만 완벽히 지원한다. 에서는 거의 완벽하게 지원하지만, 간혹 제대로 적용되지 않은 채 표시되는 부분도 있고 Firefox에서는 한글 글꼴은 적용되지 않고 영문 글꼴에 한해서만 적용되며 그나마도 적용될 때가 있고 되지 않을 때가 있어서 가장 제한적으로 적용되었다.Firefox는 크로스 도메인 문제때문에 티스토리 블로그만으론 웹폰트가 표시되도록 설정할 수 없다.<참고 1> 어쨌든, 웹폰트가 어떤 것인지 대강 알아봤으니 실제 적용 방법을 알아보자.
1. 웹폰트로 사용할 글꼴 준비하기 - ttf, eot 변환
웹폰트를 적용하려면 일단 웹폰트로 사용할 글꼴을 정해야 한다. 그런데 여기서 약간의 문제가 발생한다. 우리가 보통 사용하는 글꼴은 ttf(TrueType)나 otf(OpenType) 형식이다. Firefox, Opera, Chrome, Safari에서는 이 형식을 그대로 웹폰트로 지정할 수 있다. 그러나 이렇게 지정하면 정작 대다수가 사용하는 IE에서는 웹폰트로 표시되지 않는다. 내 블로그에 접속하는 IE 사용자에게도 웹폰트가 표시되게 하려면 ttf 파일을 eot(Embedded OpenType) 형식으로 변환해야 한다. 보통 ttf 파일을 eot 파일로 변환할 땐 WEFT(Web Embedding Font Tool)라는 프로그램을 사용한다. 그러나 WEFT는 설치 및 사용 방법이 조금 복잡하고 또 미리 지정한 특정 사이트에서만 사용할 수 있다는 단점이 있다. 싸X월드 글꼴을 다른 사이트에 이용할 수 없는 것과 같다. 이런 불편함을 없애기 위해 여기선 EOTFast란 프로그램을 사용할 것이다. EOTFast은 ttf 파일을 eot로 변환하는 프로그램으로 설치할 필요가 없으며 단 1초 만에 ttf를 eot로 바꿀 수 있다. 또 eot 파일을 사용할 사이트를 지정하지 않으므로 주소에 제한 없이 어디서나 변환한 글꼴을 사용할 수 있다. 일단 eotfast-2-22-10.zip 파일을 내려받아 압축을 푼다. 그럼 위 그림과 같은 파일이 나타난다.
여기서 우리에게 필요한 파일은 그 중 EOTFAST-1.exe라는 파일이다. 프로그램 사용 방법은 아주 간단하다. 심지어 프로그램을 실행할 필요조차 없다. 변환할 ttf 파일을 EOTFAST-1.exe 파일 위에 Drag & Drop (끌어놓기) - 마우스로 변환할 ttf 파일을 클릭하고 왼쪽 단추를 계속 누른 채로 마우스를 이동해서 EOTFast-1.exe 파일 위로 옮긴다. 그다음 마우스 왼쪽 단추에서 손을 떼면 - 하면 잠깐 검정색 창이 나타났다 사라지고 그 후 자동으로 eot 파일이 생성된다. 위 영상을 보면 이해가 빠를 것이다. ttf 파일과 그 파일을 eot로 변환한 두 개의 글꼴 파일이 준비되었으면 1단계 준비가 끝났다.
단, 모든 ttf 파일이 eot 파일로 변환되는 것은 아니다. 이는 WEFT를 사용해도 마찬가지다. eot 파일로 변환되지 않는 글꼴은 IE에서 웹폰트로 표시할 수 없으니 사용하지 않는 편이 낫다.
2. 티스토리 블로그에 글꼴 파일 올리기
두 번째 단계는 준비한 ttf와 eot 파일을 티스토리 블로그에 올리는 것이다. 티스토리 스킨 수정을 몇 번 해본 사용자라면 쉽게 올릴 수 있지만, 혹시 모르니 간단히 집어보고 넘어가자.
 |
 |
일단 자신의 티스토리 블로그 관리자로 이동한다. 그다음 메뉴의 [스킨] - [HTML/CSS 편집]을 클릭한다. 스킨 편집 화면이 나타나면 [파일 업로드] 탭을 클릭하고 [파일업로드] 단추를 눌러서 1단계에서 준비한 ttf와 eot 파일을 올린다. 오른쪽 그림처럼 목록에서 방금 올린 ttf, eot 파일을 확인할 수 있으면 끝이다. 이제 스킨을 수정할 차례다.
3. 티스토리 블로그 스킨 수정하기
세 번째는 티스토리 블로그 스킨 수정이다. 앞서 올린 ttf, eot 파일에 글꼴 이름과 속성을 부여해야 한다. 앞에서 잠깐 언급한 것처럼 웹폰트는 CSS3에 포함된 것으로 티스토리 블로그의 style.css 에서 지정한다. 물론 style 태그를 사용해서 skin.html에 추가할 수도 있지만, 스타일시트를 사용하는데 굳이 그렇게 할 필요는 없다.
2단계에서처럼 HTML/CSS 편집 화면으로 이동한다. 화면 아래의 style.css 부분으로 이동하고 젤 윗부분에 아래 문구를 입력한다.
@font-face {
font-family: "글꼴 이름";
src: url(./images/글꼴파일.eot);
src: local("컴퓨터의 글꼴 이름"), url(./images/글꼴파일.ttf) format("truetype");
}
각 부분에 대해 간단히 살펴보자. 일단 @font-face는 웹폰트를 지정하기 위한 명령이라 생각하면 된다. 명령 옵션을 지정하기 위해 { 를 사용한다. 다음 줄엔 웹폰트로 사용할 때의 글꼴 이름을 지정한다. 이 부분은 원래 글꼴의 이름과는 상관없이 블로그 주인이 원하는 이름을 입력한다. 여기 입력한 이름이 나중에 웹폰트를 적용할 때 사용된다. 그러나 원래 글꼴 이름과 다른 이름으로 지정할 것을 추천한다. 만약 원래 ttf 글꼴 이름이 '바보' 였는데 여기서도 '바보'라고 지정하면 웹폰트가 아닌 컴퓨터에 설치된 글꼴을 불러와서 페이지를 표시하므로 나중에 내가 지정한 웹폰트가 제대로 적용되는지 확인하기가 곤란하다. 그러니 원래 글꼴 이름이 '바보'라면 여기선 '바보1'처럼 다른 이름을 사용할 것을 권장한다.
세 번째 줄은 IE에 표시할 웹폰트를 지정하는 부분이다. 글꼴파일.eot 부분에 앞에서 티스토리 블로그에 올린 eot 파일 이름을 입력한다.
네 번째 줄은 IE가 아닌 다른 브라우저 - Firefox, Opera, Chrome, Safari 등 - 에 표시할 웹폰트를 지정하는 부분이다. IE 부분과 달리 local("컴퓨터의 글꼴 이름") 이라는 부분과 format("truetype")이라는 부분이 있다. local은 웹폰트를 사용하기에 앞서 사용자의 컴퓨터에 특정 글꼴이 있으면 그 글꼴을 우선으로 사용하도록 지정하는 것이다. 예를 들어 local("왕바보") 라고 지정하면 내 블로그에 접속하는 손님의 컴퓨터에 '왕바보'라는 글꼴이 설치되어 있을 때 웹폰트를 따로 내려받지 않고 설치된 글꼴을 바로 사용해서 페이지 표시 시간을 줄인다. "컴퓨터의 글꼴 이름" 부분에 ttf 파일의 원래 글꼴 이름을 입력하면 된다. 글꼴 이름은 탐색기에서 ttf 파일을 더블클릭하면 확인할 수 있다.
마지막 format("truetype")은 사용하는 글꼴 형식을 지정하는 부분이다. 보통 ttf 글꼴을 사용할 테니 format("truetype")을 그대로 입력하면 된다. 만약 otf 글꼴을 사용할 땐 format("opentype")라고 입력한다. 이것 외에도 font-weight와 font-style 속성을 사용할 수 있다. 두 속성은 <span style="">에서와 같은 방식으로 지정하면 된다.
굳이 style.css를 수정하지 않고 skin.html 파일을 수정하겠다면 아래의 내용을 <head></head> 사이에 입력한다.
<style type="text/css">
@font-face {
font-family: "글꼴 이름";
src: url(./images/글꼴파일.eot);
src: local("컴퓨터의 글꼴 이름"), url(./images/글꼴파일.ttf) format("truetype");
}
</style>
4. 실제 글에 웹폰트 적용하기
이제 실제 글에 웹폰트를 지정할 차례다. 앞에서 다룬 span 태그를 사용하면 내가 원하는 특정 부분에 웹폰트를 지정할 수 있다. 간단한 예를 살펴보자.
<span style="font-family: action; color: orange;"> Let me not to the marriage of true minds Admit impediments; love is not love Which alters when it alteration finds, Or bends with the remover to remove. Oh, no, it is an ever-fixed mark, That looks on tempests and is never shaken; It is the star to every wand'ring bark, Whose worth's unknown, although his height be taken Love's not Time's fool, though rosy lips and cheeks Within his bending sickle's compass come; Love alters not with his brief hours and weeks, But bears it out even to the edge of Doom. If this be error, and upon me proved, I never writ, nor no man ever loved. </span> |
▶ |
Let me not to the marriage of true minds Admit impediments; love is not love Which alters when it alteration finds, Or bends with the remover to remove. Oh, no, it is an ever-fixed mark, That looks on tempests and is never shaken; It is the star to every wand'ring bark, Whose worth's unknown, although his height be taken Love's not Time's fool, though rosy lips and cheeks Within his bending sickle's compass come; Love alters not with his brief hours and weeks, But bears it out even to the edge of Doom. If this be error, and upon me proved, I never writ, nor no man ever loved. |
위의 예는 <span style="font-family: 글꼴 이름">를 사용해서 1~3단계에서 지정한 웹폰트 (action)나눔 손글씨 붓체를 사용한 것이다. 가독성은 떨어지지만, 확실히 웹폰트가 적용된 것을 확인할 수 있다. IE, Opera, Chrome에서 적용된 것을 확인했고 안타깝게도 Firefox에선 적용되지 않았다. 앞에서도 이야기했듯이 Firefox는 영문 웹폰트만 적용되는 것 같고 그마저도 될 때도 있고 안될 때도 있다. 어쨌든, 웹폰트는 span뿐 아니라 div, p 등 다양한 태그와 함께 사용할 수 있다.
웹폰트가 상당히 매력적인 기능임엔 틀림없지만, 어느 것이나 그렇듯 만능은 아니다. 일단 웹폰트는 블로그를 방문할 때 글꼴을 내려받아서 해당 글꼴을 사용한다. 글꼴의 크기가 크다면 처음 접속 시간이 오래 걸린다. 또 이 글에서 소개한 방법은 IE에만 적용하는 것이 아니라 다른 브라우저에서도 함께 적용되는 방법이며 ttf나 otf 글꼴을 그대로 사용하기 때문에 무료로 배포된 글꼴이 아닌 저작권이 있는 글꼴을 사용하면 안 된다. 마지막으로 내가 확인한 바로는 티스토리 블로그에 적용한 웹폰트를 완전하게 지원하는 브라우저는 IE와 Opera밖에 없다. Chrome은 거의 완전하게 지원하고 Firefox는 아주 빈약하게 지원한다. Safari는 확인해보진 않았지만, 거의 완전하게 지원할 것 같다.
어쨌든, 웹폰트는 내 블로그 게시물의 소제목 등 특정 글자를 강조할 때 유용하게 쓸 수 있다.
웹폰트 적용에 관한 내용은 @font-face Rule이나 @font-face에서 추가로 확인할 수 있다.