Font Embedding on the Web

  • Article

 

 

안녕하세요 Bill Hill 입니다. 웹에서의 폰트를 인쇄물과 같은 수준으로 높이기 위해 노력 중 입니다. 이번 주에 커다란 진전이 있었습니다. 미국의 유력 폰트 배급업체가 Embedded Open Type (EOT) 포맷 지원을 표명하여, Internet Explorer (1996 년의 Internet Explorer 4에서 EOT 를 지원하고 있습니다) 이외의 웹 브라우저에도 채택을 호소하는 웹 사이트를 개설했습니다.

동시에 Ascender Corporation 와 관련 회사는 다른 웹 브라우저가 지원하고 있는 웹 폰트의 기술에 법적인 문제가 있을 가능성을 경고했습니다.

자세한 내용은 출시 전문 (영어) 또는 Ascender Corporation 사의 웹 사이트 (영어) 를 확인해 주십시오.

EOT 에 의한 폰트 삽입

Embedded Open Type (EOT)는 현재, W3C 에 의한 웹 표준화의 전 단계에 있습니다. 이 포맷은 원래 Microsoft  소유였습니다. Microsoft 는 1990 년대 초기에 Microsoft Word 의 문서 내의 폰트 삽입이 가능하도록 이 포맷을 개발하여, 웹에서도 이용할 수 있도록 Internet Explorer 에도 채택했습니다.

웹에서 글꼴 포함 기술의 도입에 관해서, Ascender 사는 「폰트는 텍스트 기반의 정보나 컨텐츠 인쇄 및 조작에 대해 중요한 역할을 차지합니다. 폰트 삽입은 광범위하고 복잡한 문제로, 우리는 이 웹 사이트가 폰트의 적절한 사용과 라이선스 관리에 대해 배우기 위한 유익한 백서가 되기를 바랍니다. 」라고 말하고 있습니다.

그 웹사이트에서는 아래와 같은 내용들을 다루고 있습니다.

  • 폰트와 법률
  • 문서 폰트 삽입
  • 폰트와 웹 (여러 가지 삽입 기술의 비교)
  • 응용 프로그램, 디지털 컨텐츠, 폰트 삽입 장치

폰트와 웹 항목에서, Ascender 사는 EOT 와 sIFR, Font Linking 를 비교하면서 Microsoft 와 Monotype Imaging 사에 의한 EOT 를 W3C 표준으로 하는 제안에 대해서 환영했습니다 (Monotype Imaging 사는 또 다른 유명한 폰트 배급업체로, EOT 파일의 용량을 가볍게 하는 MicroType Express compression  기술을 개발했습니다) .이 제안은 수개월 전에 W3C에 대해서 행해졌습니다.

「EOT 는 폰트 디자이너와 웹 디자이너에게 몇 가지 이점을 줍니다. 폰트 디자이너들을 위하여 EOT 개발도구는 폰트에 삽입된 접근 권한 정보를 준수하여, 특정 페이지나 사이트에서만 사용이 가능하도록 합니다. 웹 개발자들은 폰트를 부분적으로 이용하거나 압축 가능하기 때문에, 이 기능에 의해 EOT 파일 크기를 감소시켜서 다운로드 시간 단축과 성능 향상으로 연결시킬 수 있습니다. 」라고 Ascender 사는 말하고 있습니다.

원본 상태의 폰트 파일이 서버에 배포되어 @font-face 방식에 의해서 다운로드 되는 Font Linking 기술은 문서에 대한 폰트 삽입 범위에서 벗어날 가능성이 있다고 Ascender 사는 경고합니다. 「웹 페이지 디자이너는 웹 서버에 폰트를 배포하는 것에 대하여, 폰트의 EULA (End User Licensing Agreements)를 침해하지 않도록 충분히 배려해야 합니다. 」. 예를 들어 Ascender 사가 소유한 EULA에서는 확장된 별도의 라이선스를 구입하지 않고, 서버에 폰트를 설치 하는 것을 금지하고 있습니다.

그리고 비교한 결과에 대해서 다음과 같이 설명을 계속하고 있습니다. 「Ascender 사는 EOT 는 완벽하지는 않지만,  현시점에서 폰트 디자이너와 폰트 제조자의 지적 소유권을 보호하는 수단으로 유효한 솔루션이라고 확신하고 있습니다. EOT 는 폰트의 접근 권한 정보를 준수하고, 업계에서 증명된 분할 기술과 압축 기술을 이용하고 있으며, 특정 사이트에서 제한된 폰트 삽입을 가능하게 하는 유일한 웹 폰트 삽입 솔루션입니다. Ascender 사는 EOT 가 W3C 표준이 되었을 경우, 다른 브라우저도 이 방식을 우선적으로 지원하는 것을 희망합니다」

이 사이트에서는 이 기술을 소개하기 위해서 몇 가지 무료 폰트와  최초의 웹 기반 EOT 생성 도구를 제공하고 있습니다..

Ascender 사의 추천은 제가 한동안 잊고 있었던 폰트 삽입을 다시 꺼내서 가지고 놀게 하였습니다. 우선 Microsoft  웹 사이트 (영어)에서 WEFT (영어) (Windows Embedding Font Tool)를 다운로드하는 것부터 시작했습니다.

이 도구를 본격적으로 이용하기 전에 다운로드 페이지에 링크된 샘플코드의 가이드를  읽어 보시기를 권장합니다. WEFT 페이지의 "Troubleshooting and Testing" 에도 정보가 있습니다.

하지만, 이 도구에 지나친 기대를 하지는 말아 주세요. EOT 파일의 생성이나 페이지에서 해당 파일들을 링크하는 CSS 폰트 선언 등은 편리하지만, 대상이 되는 페이지의 복잡한 정도에 따라서 몇 가지는 수동으로 조정해야 합니다. 

염려는 되지만, 한번 해봅시다.

이제, 저는 아주 큰 잘못을 저질러야 합니다.

실험을 위해, 블로그와 같이 읽기 쉽게 디자인 되어 있는 것에 EOT 를 적용해 보았습니다. 저는 문자와 폰트의 전문가이지만 웹 코드 전문가가 아닙니다. 저는 보기 쉽고, 읽기 쉬운 페이지를 만들고 싶었습니다. 간단한 실험이었습니다. 이 실험 때문에 새롭게 페이지를 직접 만들고 싶지는 않았습니다. 그래서 간단한 방법을 선택하여, 익숙한 멀티 컬럼 페이지를 생성하는 응용 프로그램을 사용했습니다.

이것은 일회용 코드입니다. 이것은 매우 장황하고, 해석이 불가능하고, 많은 부분에서 일반성이 없는 특수한 코드가 이용 됩니다. Chris Wilson (IE Platform Architect)와 같은 진정한 웹 개발자라면 이것을 조금 보고, 절규할지 모른다고 것을  잘 알고 있습니다.

Chris는 제 페이지가  불만스러웠지만, 즉시 웹 표준에 적합하도록 다시 코딩 해 주었습니다.  코드 변경을 매우 바쁜 Chris 에 해 주었다는 것은 대단한 일입니다. 제 페이지는 마치 Chris 가 매일 통과하는 복도에 있는 구불거린 그림과 같습니다. 만약 그가 고치지 않으면, 결국 그가 불쾌하게 될 뿐입니다.

첫 페이지를 표준에 맞게 만드는데 그의 손을 한번 거치고 나니 코드는 원래의 4 분의 1 까지 줄어들었습니다. 제가 말하기는 좀 그렇지만, 꽤 좋은 느낌으로 완성되었습니다. 우리는 업로딩 가능한 「웹표준을 준수한 버전」의 페이지를 얻기 위해서 노력할 예정입니다. (주말은 가족과 보내고 싶다고 Chris 는 말하고 있지만····) .

어쨌든, 만약 이 코드에 대해 누군가에게 불평하고 싶다면 저에게  말씀해 주세요.

문제가 있을 지도 모르는  제 페이지는 https://billhillsite.com (영어) 입니다.

이 페이지는 현재 제작 중으로, 불일치가 존재할 가능성이 있습니다. 한 예로, 한 두 사람은  어떤 디스플레이에서는 화면이 짤리는 이슈에 대해서 얘기해 주었습니다. 이 이슈는 좀 더 알아봐야 겠죠.

이 페이지들은 1400x900 디스플레이에서 보이도록 디자인이 되었고, 메뉴나 주소창 등 읽기를 방해하는 모든 요소들을 제거하기 위해 익스플로러를 전체화면으로 바꾸는 F11키를 이용해서 보여져야 합니다. 저는 F11키를 이용해서 이 같은 "읽기"모드와 모든 메뉴와 툴바 들이 있는 "브라우징" 모드를 전환하고는 합니다.

이 페이지를 표시하기 위해 위해서는 미세한 조정이 필요하고, 다음과 같은 ＠font-family 수식문을 추가했습니다.

<style>

   @font-face {

   font-family: Cambria;

   font-style: normal;

   font-weight: normal;

   src: url(CAMBRIA2.eot);

   }

개발 팀에 이 문제에 대해 피드백을 주었고, 이러한 수동 조정의 수고를 생략하도록 세부 마무리를 하고 있습니다.

EOT 포맷을 공개했을 때에서, Ascender 사의 웹 사이트와 같이 EOT 를 생성하는 다른 도구가 만들어지는 것을 기대하고 있습니다. W3C 제안에는 샘플코드도 포함되어 있기 때문에,  웹 페이지 생성 도구에 EOT 생성 기능 통합에 많이 참고가 됩니다. 따라서 코드는 보다 긴밀히 통합할 수 있겠지요.

좋은 소식은 수동 조정이 필요한 경우, 하나의 페이지에 한번 제대로 적용하면 복사&붙여넣기를 이용해서 다른 페이지에도 적용할 수 있는 것입니다. 더 좋은 방법은 스타일 시트를 이용하면, 모든 페이지에 적용할 수 있습니다.

WEFT 와 EOT 동작

폰트 삽입을 이용한 페이지의 성능을 향상시키는 방법으로서 WEFT 도구의 필요한 폰트만을 폰트 개체로서 생성하는 부분집합 생성 기능을 이용하는 방법이 있습니다. 이렇게 하면 매우 크기가 작고, 다운로드 시간도 단축할 수 있습니다.

예를 들어, 영어로 기술하는 경우, 키릴 문자나 그리스 문자를 이용할 필요가 없기 때문에 언어 기반의 부분집합이 이용 가능합니다. 이 도구에는 "페이지마다" ,"사이트마다" 라는 7 개의 설정이 있습니다. 저희 테스트 사이트는 자주 업데이트 하기 위해 처음에는 "부분집합을 이용하지 않음" 을 선택하였는데, 이는 가장 큰 크기의 폰트 개체를 생성하지만 나중에 생성하는 새로운 컨텐츠에 대해서는 폰트 개체의 업데이트를 실시하지 않겠다는 것을 의미합니다.

그러나, 한편으로는 과할 수 있을 것 같다고 생각하여, 언어 기반의 부분집합을 시험했는데 대폭적인 성능 향상을 볼 수 있었습니다!

예를 들면 Calibri 와 Cambria 는 각각 4 개의 폰트패밀리 (Standard, Bold, Italic, Bold Italic)를 포함하는 큰 폰트들임에도, 작은 크기로도 가독성을 배려한 정교한 힌트 정보를 가지고 있습니다.  4개의 폰트패밀리를 부분집합 기능을 이용하지 않고 개체화하면 175K 바이트 내외의 크기가 됩니다. 언어 기반의 부분집합 기능을 이용했을 경우는 원래의 1/3 정도의 크기이지만, 페이지 표시는 드로잉이 빨라지는 것 이외에는 완전히 동일합니다.

좋은 점은 폰트 개체나 스타일 이름이 같게 하면, 페이지 코드의 변경 없이 사이트 루트 디렉토리에 있는 폰트 개체를 변경할 수 있습니다.

제 경험에 비추어 볼 때 많은 시간을 절약할 수 있는 또 다른 좋은 팁으로는, WEFT 는 웹 서버에서 페이지들을 분석할 수 있도록 해주지만, 로컬드라이브에도 폰트 개체를 생성하도록 설정할 수 있습니다. 폰트 개체를 웹 서버에 생성하려면 엄청난 시간이 걸립니다. 이 경우에는, 고속으로 폰트 개체를 생성할 수 있는 로컬드라이브를 작업 영역으로 하여 폰트 개체를 생성하고, 생성된 개체를 FTP 로 업로딩합니다.

폰트 삽입의 기술은 단지 디자이너에게 멋진 웹페이지를 만들 수 있게 하기 위해서가 아니고, 가독성 때문에 중요합니다. 일반적으로의 텍스트를 읽는데 적합한 11 또는 12 포인트의 폰트를 생성하기 위해서는 방대한 작업이 필요합니다. 화면 표시 등에서 정상적으로 동작하는 힌트를 포함한 완전한 캐릭터 집합을 생성하기 위해서는 폰트 디자이너가 일년에서 몇 년간 개발을 계속해야 할 지도 모릅니다. 

그러나 Windows Vista 나 Office 2007, Mac Office 2008 을 사용하고 있다면, 웹 페이지로의 삽입에 사용할 수 있는 유익한 폰트 집합을 벌써 갖고 있는 것입니다. 이것들은 C* 폰트로 불리고 있습니다 (Clear Type 에 최적화되어 폰트 명이 C 로 시작되는 것부터 이렇게 불립니다) .Calibri , Candara , Consolas (코딩에 최적인 고정폭 폰트) , Cambria (4000 종류의 수학기호를 포함) , Constantia , 그리고 Corbel 등이 있죠.

개인적으로, 이러한 폰트를 생성하기 위해서 어느 정도의 노력을 했는지 잘 알고 있습니다. 왜냐하면, 제가 이 프로젝트를 관리해왔기 때문입니다. 경쟁을 이겨 낸 최고의 디자이너가 아웃라인을 설계하고, 업계 최고 수준의 힌트 정보를 붙일 수 있었습니다.

이 계획에는 긴 시간으로 방대한 비용이 소요되었습니다. 우리가 이러한 폰트를 관심을 가지는 이유는 이 시간과 비용 때문입니다. 이러한 폰트는 그것을 탑재한 응용 프로그램 (그리고 운영 체제)에 큰 가치를 줍니다. 그러나, 이러한 폰트 삽입에 관한 접근권한은 폰트가 탑재되고 있는 제품의 하나를 구입하면「편집 가능」상태로 설정됩니다. EOT 를 이용하여 자유롭게 폰트를 삽입하는 것이 가능한 것을 의미합니다. 단, TTF 폰트파일을 그대로 서버에 배포하는 것은 허가 되지 않습니다.

디스플레이에 표시할 때, 특히 마음에 드는 것은 Cambria 와 Calibri 입니다. 저는 종이 매체 (최적 크기는 11 포인트)를 읽을 때보다 디스플레이를 볼 때는 조금 거리를 취하기 때문에 BODY 부분에는 12 포인트를 이용하고 있습니다.

연산에 의해 기계적으로 생성된 것과 달리, 이 폰트들은 디자이너가 수동으로 생성한  Italic 체, Bold 체, Italic Bold 체를 가지고 있습니다. 기계적으로 생성되어 기울어진 Roman 과는 달리, 수동으로 생성한 Italic 체에는 절묘한 맛이 있습니다.

EOT의 장래

이번에 작업한 페이지를 정확하게 표시할 수 있는 것은 현시점에서 EOT 를 지원하는 유일한 브라우저인 Internet Explorer에서  밖에 정확하게 표시할 수 없는 것을 생각해 주세요. EOT 는 1990 년대에 Word 를 위해서 개발된 아이디어로, 1995 년에 웹을 위한 뛰어난 아이디어가 되었습니다. 그러나, Netscape 는 다른 규격을 채택했기 때문에 Microsoft 는 EOT 의 소유권을 계속 유지했고,  양 쪽을 모두 사용한 쪽은 없었습니다.

작년에 저는 동료들을 모아 함께 EOT 를 오픈 스탠다드로 하기 위한 캠페인을 시작하여, W3C에 대해서 제안을 설명했습니다.

저는 이 기술이 표준화 되어 다른 브라우저에도 구현되기를 바라고 있습니다. 왜냐하면 이 기술이 웹 상에서 폰트를 이용하는 경우에 발생할 수 있는 문제를 해결하기 원하는 최종 사용자나, 웹 디자이너 (이미 알고 있는 상용 폰트를 사용하기를 원하는)에게 적절한 해결 방법일 뿐만 아니라, 상용 폰트의 생성자에서도 결과적으로 웹 폰트 삽입을 허용하도록 할 수 있기 때문입니다.

우리는 웹 상에서의 폰트 이용에 관련해서 이 생태계에 포함된 모든 사람에서 공정하도록 이 이슈를 해결할 필요가 있습니다.

EOT 를 이용한 삽입의 실험을 시험해 주세요. 실제로 삽입을 실행한 샘플 등을 보게 되기를 기대하고 있습니다.

Bill Hill
Program Manager

 

* 이 글은 Internet Explorer 개발 팀 블로그 (영어)의 번역 문서입니다. 이 글에 포함된 정보는 Internet Explorer 개발 팀 블로그 (영어)가 생성된 시점의 내용으로, 제품의 사양이나 기능이 보장되는 것은 아닙니다. 이 글에 포함된 정보의 이용은 사용 조건을 참조해 주세요. 또, 이 글 게재 시점에서 Internet Explorer 개발 팀 블로그 (영어)의 내용이 변경 될 수 도 있습니다. 최신 정보는 Internet Explorer 개발 팀 블로그 (영어)를 참조하십시오. 

영문 원본 :Font Embedding on the Web (영어)

업데이트 일자 :  2008 년 7 월 21 일

 

* 역자 추가 :

“이번 리뷰를 하면서 국내의 EOT 기술을 이용한 다양한 웹폰트 사례가 떠올랐습니다. 이 글을 쓴 Bill Hill에게 소개해 주었더니 자신의 블로그 독자들에게 한국 사례들을 소개하는 포스팅을 올려 주었네요.”

https://billhillsblog.blogspot.com/2009/03/korean-websites-showcase-font-embedding.html