웹 폰트라는게 있다. 싸이월드 이런데 가면 굴림체, 돋움체 이런거 말고 귀여운(척하는) 폰트를 볼 수 있는데, 익스플로러에서만 동작하는 기능을 가지고 수익모델을 만들다니 대한민국도 참 대단하다 싶기는 한데 굴림 궁서 돋움 이런거 지겹기도 하고 뭣보다 안 예쁘니까. 꾸미는 폰트가 아니라, 그냥 기본 폰트니까. 윈도 비스타에서 맑은고딕을 도입해 많은분들이 좋아하기도 하고 ClearType 이런 기술에 관심도 가지기는 했지만, 그래봐야 웹 환경에서 쓸 수 있는 한글폰트가 4개에서 5개로 늘어난 것 뿐이니 IE전용의 기능이라도 어떻게 해보려는 걸 뭐라할 순 없다.

싸이월드에서 파는 웹폰트(글꼴)

이 웹 폰트의 기술적인 배경은 위키피디아에 잘 설명되있는데, 요약하자면 웹폰트(Web typography)라는게 css의 @font-face 속성을 이용하는거고, 이게 CSS2.1에서 빠졌다가 CSS3에서 다시 넣는걸로 얘기되고 있다. 그런데 IE는 그 동안에도 EOT라는 파일포멧만 지원하긴 하지만 이 속성을 꾸준히 지원해왔기 때문에 지금의 "웹폰트"라는게 IE전용인거다.

여튼 지금의 웹폰트는 단점이 좀 많다. 일단 IE에서만 된다는거. 그리고 유통되는 웹폰트들이 대개 비트맵 폰트라 가독성이 떨어진다. (글씨크기가 딱 한 가지고, 윤곽선이 미려하지 않다.) 이건 아마도 대소문자 합쳐 52자에 특수만자만 좀 넣으면 되는 영문 폰트와 달리, 최소한 수천자를 집어넣어야 하는 한글 폰트의 특수성 때문이기도 하겠지만.

위에 잠깐 언급을 했는데 CSS3에서 이 @font-face 속성이 다시 추가될 조짐이 있다. 그리고 몇몇 발빠른 웹브라우저들이 벌써 지원하고 있다. 이 Typekit 서비스는 이걸 노리고 출시한 서비스다.

Typekit.com에 있는 배너인데, 이거 이미지 아니고 다 텍스트다.

이 타입킷 서비스는, 웹게 말하자면 TTF 폰트를 호스팅해준다. 서비스에 가입하면 이들이 제공하는 다양한 폰트를 둘러볼 수 있다. 무료 계정은 1개의 도메인에서 2가지 폰트를 쓸 수 있다. 사용법 자체는 쉬우니까 소개 생략.

근데 이게 왜 좋으냐고? 물론 이거 아직 한글 폰트도 없고,  널리 쓰이는 브라우저 중 대략 80%에서만 동작하는 기능이다. 하지만 관심가질 필요는 충분히 있다고 본다.

우선, 요 앞에 소개했던 Readability서비스가 Typekit을 지원한다. 읽기 편한 폰트로 Readability를 향상한다는 점에서 아주 적절한 조합이다. "이 블로그는 맑은고딕에 최적화되었으니 귀찮으시더라도 다운받아 설치하시라"고 홍보하는 블로그들이 꽤 있는데, 폰트가 어딘가에서 호스팅되고 있다면 방문자가 일부러 폰트를 설치 안해도 된다. 편하겠다.

또 웹사이트 용량을 줄일 수 있다. 서비스가 커질수록 용량은 곧 돈이다. 지금은 예쁜폰트를 웹사이트에 올리려면 이미지로 만들어 올려야 하는데, 이미지 대신 이걸 텍스트로 만들면 당연히 용량이 줄어든다. 물론 경우에 따라 배가 배꼽보다 클 수도 있다. 폰트 용량이 이미지보다 크면 말짱 황이니까. 특히 한글은 ... 중문보단 훨씬 낫지만 영문 폰트에 비해 용량이 클 수 밖에 없다. 하지만 플래시처럼, 몇몇 글자면 뽑아서 올리는 식으로 용량을 줄이는게 가능하지 않을까?

그리고, 좀 더 시맨틱한 웹이 된다. 요즘 아이폰때문에도 그렇고 웹표준에 관심들이 많은데, 단지 HTML 문법 잘 지켰다는 수준에서가 아니라 내용까지도 시맨틱해진단 얘기다. 뭔소리냐고? 이를테면, 중요한 내용 강조하려고 굵고 눈에띄는 폰트를 써서 만든 배너 이미지 웹사이트에 올리는 경우가 많은데, 이게 시각적으로는 강조되서 보이지만 네이버고 구글 이런 검색엔진은 내용을 못 알아챈다. 아직 이미지 안에 들어있는 내용까지 검색되게 해주는 기술은 없다. 즉 바꿔말하면 당신의 웹사이트가 더 검색 잘 된다는 뜻. 한국에선 SEO라는 것도 좀 희안하게 키워드광고같은 쪽으로만 발달을 하는 경향이 보이기는 하지만 .... 더 자세한 건 다음 기회에.

비슷한 맥락에서, 웹 접근성(Web Accessibility)에도 도움이 된다. 웹 접근성이란, 몸이 좀 불편한 사람이나 악조건(햇빛이 엄청 밝은 곳이나 마우스가 없는 상황, 심지어 아이폰같은 제한된 기기를 쓰는 경우도 포함)에 처한 경우라도 정보를 얻는데 어려움이 있는가 없는가 하는 걸 따지는건데, 쉽게 생각하자면 시각장애인용 웹사이트 이런걸 떠올려도 괜찮다. 한국에선 법으로 강제되지는 않고 있다만 몇몇 선진국에서는 공공기관 웹사이트는 누구든 정보접근이 쉽도록 강제하는 법이 있다. 플래시나 이미지를 쓰면 접근성이 떨어지기 땜에 최소한 공공기관에선 쓰지 말라고 하는 것인데, 한국에선 잘 안 지켜진다. 장애가 없는 사람도 쓰기 불편한... 아 이게 주 내용이 아니고. 암튼 웹 표준을 잘 지키면 접근성은 반쯤은 따라온다고 봐도 된다.

종종 그렇듯이 주 내용보다 잡설이 더 길었다. CSS는 갈수록 빵빵해지고, 이런 기술의 적용은 쉬운게 아니다. 당장 포토샵이 편하고 사다놓은 폰트가 잔뜩인 디자이너가 이 서비스를 쓰고싶을까? 브라우저 호환성도 문제다. IE는 TTF포멧을 지원하지 않아 궁여지책으로 조악한 EOT를 써야한다. 하지만 분명히 웹 문서의 품질이 점점 인쇄물의 그것에 다가가고 있다.

저작자 표시
신고
  1. Commented by BlogIcon 아크몬드 at 2010.02.07 15:28 신고

    좋은 글, 잘 읽고 갑니다 :)

  2. Commented by BlogIcon sh. at 2010.08.05 14:43 신고

    follow-up.
    http://wiki.github.com/sorccu/cufon/about
    sIFR의 대안으로서 <canvas>를 이용.

  3. Commented by BlogIcon sh. at 2011.07.01 20:24 신고

    그 동안 구글이 Google Web Fonts 서비스를 엄청나게 발전시켰다. Typekit 팀과 모종의 협력관계가 있는 것 같기도 하고. http://www.google.com/webfonts/v2 타입킷은 여전히 Adobe 등의 고품질 폰트를 콜렉션에 추가하고 있고.
    한글 웹 폰트를 찾는다면 모빌리스의 웹폰트 서비스 http://api.mobilis.co.kr/webfonts/ 를 우선 검토해보자. 어지간한 공개 한글폰트를 다 구비하고 있다. http://fontface.kr/ 도 참고.

  4. Commented by 마이콩 at 2011.07.04 11:39 신고

    많은 도움이 됐습니다. 감사합니다.



티스토리 툴바