<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>겨미♡웹 &#187; web fonts</title>
	<atom:link href="http://miya.pe.kr/tag/web-fonts/feed/" rel="self" type="application/rss+xml" />
	<link>http://miya.pe.kr</link>
	<description>웹 클라이언트 사이드 - UI 그리고 마크업.</description>
	<lastBuildDate>Tue, 24 Jan 2012 07:16:44 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>최신 브라우저들의 CSS Multiple Backgrounds &amp; Web Fonts 지원, 어떻게 되고 있나? &#8211; 2/2</title>
		<link>http://miya.pe.kr/2008/03/25/%ec%b5%9c%ec%8b%a0-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80%eb%93%a4%ec%9d%98-css-multiple-backgrounds-web-fonts-%ec%a7%80%ec%9b%90-%ec%96%b4%eb%96%bb%ea%b2%8c-%eb%90%98%ea%b3%a0-%ec%9e%88%eb%82%98/</link>
		<comments>http://miya.pe.kr/2008/03/25/%ec%b5%9c%ec%8b%a0-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80%eb%93%a4%ec%9d%98-css-multiple-backgrounds-web-fonts-%ec%a7%80%ec%9b%90-%ec%96%b4%eb%96%bb%ea%b2%8c-%eb%90%98%ea%b3%a0-%ec%9e%88%eb%82%98/#comments</comments>
		<pubDate>Tue, 25 Mar 2008 04:18:56 +0000</pubDate>
		<dc:creator>김군우</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[웹 표준]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[web fonts]]></category>
		<category><![CDATA[웹 폰트]]></category>

		<guid isPermaLink="false">http://miya.pe.kr/archives/74</guid>
		<description><![CDATA[지난 번에 Multiple Backgrounds에 대해 알아보았는데 이에 이어 오늘은 Web Fonts에 대해 써보겠습니다. Web Fonts 간략한 배경 웹 폰트는 상당히 오래된 기술입니다. 브라우저 전쟁 시절 IE와 넷스케이프가 각자의 독자적인 기술로 사용했고 IE에는 그 때의 웹 폰트가 아직도 남아있습니다. 그런 과정에서 MS는 웹 폰트에 대한 표준 제정을 제안했고 현재 CSS3의 한 부분이 되었습니다. 진행상황 오페라의 CTO인 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://miya.pe.kr/archives/72">지난 번에 <span xml:lang="en" lang="en">Multiple Backgrounds</span>에 대해 알아보았는데</a> 이에 이어 오늘은 Web Fonts에 대해 써보겠습니다.</p>

<h3 xml:lang="en" lang="en">Web Fonts</h3>

<h4>간략한 배경</h4>

<p>웹 폰트는 상당히 오래된 기술입니다. 브라우저 전쟁 시절 IE와 넷스케이프가 각자의 독자적인 기술로 사용했고 IE에는 그 때의 웹 폰트가 아직도 남아있습니다. 그런 과정에서 MS는 웹 폰트에 대한 표준 제정을 제안했고 <a href="http://www.w3.org/TR/css3-webfonts/">현재 CSS3의 한 부분</a>이 되었습니다.</p>

<h4>진행상황</h4>

<p>오페라의 <abbr title="Chief Technical Officer" xml:lang="en" lang="en">CTO</abbr>인 <a href="http://people.opera.com/howcome/" xml:lang="de" lang="de">H&aring;kon Wium Lie</a>가 <a href="http://www.alistapart.com/" xml:lang="en" lang="en">A List Apart</a>에 기고한 <a href="http://www.alistapart.com/articles/cssatten/" xml:lang="en" lang="en">CSS @ Ten: The Next Big Thing</a>이 웹 브라우저에서의 웹 폰트 지원과 그 필요성에 대해 설명하였고 <a href="http://docs.info.apple.com/article.html?artnum=307467">현재 사파리 3.1 버전이 이를 지원하고 있습니다.</a> 오페라는 아직 지원하지 않습니다만, 정황 상 곧 지원하겠죠?</p>

<p>파이어폭스의 경우 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=70132">버그질라의 글</a>을 통해 지켜보고 있습니다만, <a href="http://wiki.mozilla.org/Firefox3/Product_Requirements_Document">파이어폭스3의 일정</a>에는 웹 폰트의 지원이 빠져있습니다. 그러나 <a href="http://wiki.mozilla.org/Firefox/Feature_Brainstorming:Web_Standards_Support">브레인 스토밍에 언급된 것</a>은 고무적인 일이고 곧 추가될 것이라는 기대를 갖게 하는군요.</p>

<p>IE의 경우 현재 출시된 IE8 베타에서도 <a href="http://en.wikipedia.org/wiki/Embedded_OpenType" xml:lang="en" lang="en">Embedded OpenType</a>만을 지원하고 있습니다. 늘 그렇듯 앞으로의 판도를 예상할 수 있는 정보를 찾을 수 없었죠.</p>

<h4>몇 개의 테스트</h4>

<p><a href="http://www.alistapart.com/articles/cssatten/" xml:lang="en" lang="en">CSS @ Ten: The Next Big Thing</a>에서 쓰인 예제 중 한 개를 사파리 3.1을 통해 보았습니다. 트루타입 폰트를 사용한 예제입니다. 그리고 해당 트루타입 폰트들을 <a href="http://en.wikipedia.org/wiki/Embedded_OpenType" xml:lang="en" lang="en">Embedded OpenType</a>으로 변환 후 IE에서 실험해보았습니다.</p>

<p><a href="/ex/08/webfont/safari-csszen.jpg" title="사파리 스크린샷 원본 보기"><img alt="사파리 3.1에서의 스크린샷" src="/ex/08/webfont/safari-csszen.jpg" width="300" /></a>
     <a href="/ex/08/webfont/ie-csszen.jpg" title="IE7 스크린샷 원본 보기"><img alt="IE7에서의 스크린샷" src="/ex/08/webfont/ie-csszen.jpg" width="300" /></a></p>

<p>제법 비슷합니다. <strong>하지만 다릅니다.</strong></p>

<p>다음으로 HY견명조라는 한글 폰트를 본 블로그에 포함시켜서 테스트 해보았습니다. IE에서는 위와 마찬가지로 변환 후 테스트 하였습니다.</p>

<p><a href="/ex/08/webfont/safari-webfont.jpg" title="사파리 스크린샷 원본 보기"><img alt="MS 윈도우 XP 서비스팩 2의 사파리 3.1에서의 HY견명조 스크린샷" src="/ex/08/webfont/safari-webfont-640.jpg" width="200" /></a> <a href="/ex/08/webfont/xp-webfont.jpg" title="MS 윈도우 XP 서비스팩 2의 IE7 스크린샷 원본 보기"><img alt="MS 윈도우 XP 서비스팩 2의 IE7에서의 HY견명조 스크린샷" src="/ex/08/webfont/xp-webfont-640.jpg" width="200" /></a> <a href="/ex/08/webfont/vista-webfont.jpg" title="MS 윈도우 비스타의 IE7 스크린샷 원본 보기"><img alt="MS 윈도우 비스타의 IE7에서의 HY견명조 스크린샷" src="/ex/08/webfont/vista-webfont-640.jpg" width="200" /></a></p>

<p>XP와 비스타의 윈도우의 폰트 렌더링 기술인 클리어 타입을 적용한 결과입니다. IE에서 사용할 수 없을만큼 투박하게 표시됩니다. 운영체제의 문제라고 생각됩니다만 결론은 비스타의 IE에서도 웹 폰트용으로 특수하게 가공되지 않은 폰트들은 사용할 수 없다는 것입니다. 그다지 좋은 결과는 아니군요. 제가 폰트에 관한 지식이 부족한 관계로 테스트를 잘못 수행한 것은 아닌지 약간은 염려됩니다. 혹시 그런 부분이 있으면 지적 부탁드립니다.</p>

<h4>결론</h4>

<p>애석하게도 <a href="http://www.w3.org/TR/css3-webfonts/">CSS3의 웹 폰트 모듈</a>은 마지막 업데이트가 6년전(2002년)이었고 아직도 <span xml:lang="en" lang="en">Working Draft </span>상태입니다. 또한 IE는 <a href="http://en.wikipedia.org/wiki/Embedded_OpenType" xml:lang="en" lang="en">Embedded OpenType</a>만을 지원하고 있으며, 폰트의 렌더링 또한 우리가 원하는 모양새가 아닙니다.</p>

<p>오페라 진영의 제안과 사파리의 지원이 있었지만 IE와 파이어폭스에서 매끄럽게 사용할 수 있기 전까지는 마냥 기다릴 수 밖에 없을 것 같습니다.</p>

<h4>대안을 통한 조금 나은 결론</h4>

<p><a href="http://www.truefontfamily.com/" xml:lang="en" lang="en">True Font Family</a>에서는 웹 폰트 속성을 대체하는 자바스크립트 라이브러리를 제공하고 있습니다. 자세히 살펴보지는 않았지만 웹 폰트가 점점 정착되어 가는 동안 하위 호환성을 보장할 수 있는 대안이 될 수 있을 것 같습니다. 국내에서는 <a href="http://www.woorigle.com">우리글닷컴</a>이 확대·축소 가능한 웹 폰트를 제공하고 있습니다. 윈도우에서 깨져보이지 않도록 가공된 폰트이죠. (싸이월드나 네이버 등에서 사용하는 가독성 떨어지는 고정 사이즈의 비트맵 웹 폰트랑은 많이 다릅니다.)</p>

<p>조만간 마크업에서 텍스트를 미려하게 표현하기 위한 <code xml:lang="en" lang="en">&lt;img&gt;</code> 태그를 곧 거둬낼 수 있지 않을까 하는 기대를 해봅니다.</p>
]]></content:encoded>
			<wfw:commentRss>http://miya.pe.kr/2008/03/25/%ec%b5%9c%ec%8b%a0-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80%eb%93%a4%ec%9d%98-css-multiple-backgrounds-web-fonts-%ec%a7%80%ec%9b%90-%ec%96%b4%eb%96%bb%ea%b2%8c-%eb%90%98%ea%b3%a0-%ec%9e%88%eb%82%98/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

