돌아오면서 작년에 거의 끝내놓고 설치하지 않았던 테마를 좀더 손보고 입혀놓으니 먼가 새 기분이 난다. 아주 오래간 바뀌지 않을듯 싶다.

서론이 길었다. 아시다시피 브라우저 전쟁은 아직도 계속되고 있다. 새기술, 새 플랫폼, 새 os 등은 꾸준히 브라우저 전쟁에 불을 지피고 있다. Sitepoint가 언급했듯이 9월은 정말 브라우저 벤더들에게는 바쁜 한달이었을 것이다. 불여우 7, 크룸 14, IE10 플랫폼 프리뷰 버전을 내놓은 한달이지만 브라우저 점유율의 변화는 상대적으로 조용했다고나 할까..

전 세계적으로는 IE가 꾸준한 하락세를 보이지만서도 IE9의 사용도는 꾸준히 상승하고 있다. IE전체적으로는 하락세가 점점 평행선을 향해가는 상황이니 곧 변환의 시점이 올듯 하기도 하다. IE점유율이 상승세를 타는 그런것… 말이다…

흥미로운건 그 어느 브라우저보다도 큰 하락폭을 보인건 파이어폭스 브라우저 부분인데 이대로 가다가는 꾸준한 상승세를 타고있는 크롬에게 올해안에 자리를 양보해야할지도 모르는 상황이 올지 모르겠다. 예상은 올해 12월이라지만 지켜볼만 한 부분이다.

여기서 한국의 상황을 잠깐 보겠다.
올해 1월부터의 데이터이다. 윈도우7의 보급과 함께 IE8 이 빠르게 자리를 잡은 상황에서 5월을 기점으로 하락세를 보이면서 IE9 가 매달 거의 1%씩 성장하고 있다. 9월엔 시장점유율을 8.5%까지 끌어 올렸다. 반대로 IE6은 올해 1월부터 8.5%가 하락하면서 현재 23.35% 점유율을 보인다.

브라우저 별로 보면 한국은 이미 크롬이 파이어폭스를 제친 상태다. 파이어폭스보다는 2배정도의 점유율로 6% 시장점유율인데, 반IE운동처럼 파이어폭스 사용이 퍼져나갔던 것을 생각하면 크롬의 시장 점유율은 놀랍다.

한국에서 IE 의 점유율이 하락하고 있긴 하지만 위에서 보았던 전세계적 브라우저 점유율과 비교할때 파란선과 그 외의 선 간격이 참 넓다고 다들 느끼셨을것이다. 저번 포스팅에서 언급했지만 Windows XP 가 팔리기 시작한때가 정확히 10년전 2001년 10월인것을 생각하면 그 오래간 달려온 IE6가 참 많은 영향을 주었겠다는 생각도 들고 물론 아직도 20%의 점유율을 보이는 힘을 보여주고 있으니 아직 왠만한 비IE 브라우저 점유율 보다 높다.

지금은 브라우저가 어디로 가고 있나? 모바일은 전 세계적으로는 오페라 미니/모바일이 22% 를 보이며 기염을 토하고 있는데 스티브잡스의 일과 함께 애플(아이폰, 아이패드)의 향방도 흥미로울것이고 크롬북을 푸쉬하는 구글을 지켜보는것, 윈도우8과 IE10을 들여다 보는것도 흥미로울것이다.

오랜 시간이 지난거 같은데도 브라우저 시장은 후끈하다.

마지막으로 IE10 PP2 데모영상이다.

이제 겨우 베타출시. 물론 그전 테스팅버전들 보통 알파버전이라고 부르는 IE의 플랫폼프리뷰 버전들도 여기저기 buzz 가 있었지만 나름 IE9 베타는 오랜만에 크게 풍파를 일으키는듯 합니다. (여기에 캬~ 넣어주기)

아마도 아주 오랜만에 IE가 IE다워지는 버전을 출시하는 것 부터해서 뜨거워질대로 뜨거워진 HTML5의 열풍을 ‘나름’ 만족시켜줄만한 버전에다가 언제나 ‘표준’의 적이라고 불려지던 IE의 첫 ‘표준’ 선두주자 (나름) 로 부상된 IE이기 때문인거 같네요. :)

지난 IE 플랫폼 프리뷰 마지막 버전에서 어떤 ‘표준’의 이야기를 종식했다면 이번 IE9 베타버전에서는 인터넷 사용의 전반적인 개선을 강조하는듯 합니다.

IE 베타 출시 이전 막바지의 글 “User Experiences: Site-Centric Browsing on Windows” 유저 사용경험 : 윈도우 OS에서의 사이트 중심의 브라우징 과 “Putting sites at the center of the browsing experience, using the whole PC: IE9 Beta Available for Download” 컴퓨터의 모든것을 동원하여 사이트를 중심으로한 브라우징 경험을 하도록하기 를 보면 대충 알수 있습니다.

OS 를 사용하여 인터넷 브라우징의 극대화를 보겠다는 시도인데 참신하고 보기 좋습니다. 그리고 그게 맞고요.

태스크바에 직접 넣어버리기.

마치 패북 플러그인을 깐것처럼 웹사이트를 os자체에서 지원하기

사이트의 색상을 브라우저에서 adapt 적응해버리기

애플의 사파리 사용을 보면 전반적인 OS 의 특정 기능을 살린 브라우저 극대화라면(브라우저 뿐만이 아닌 프로그램들이 OS의 이득을보죠) 이번 IE베타는 OS자체가 반응하는 브라우저 극대화가 아닐지.

그러고 보니 지난번 IE7,8 소개한다고 오픈했던 사이트보다는 이번 사이트가 98배 정도 나은듯합니다. ;)

“IE9 베타 다운로드” 브라우징의 앞날은 아직도 넓게넓게 열려있는 광대한 대륙. 모두 달려요.

IE팀의 짱 Hachamovitch가 말하는 ie.. 대충의 사용은 볼수 있습니다

그외 IE9 글들

• 익스플로러가 크롬 만큼 빨라졌는데: IE9 써봤더니
• IE9, 복사니 밴치마크니?
• 인터넷 익스플로러 9 베타 다운로드 링크
• IE9 베타 출시를 축하하며

HTML5, Modernized: Fourth IE9 Platform Preview Available for Developers. HTML5, 더욱 새롭게 된 4번째 IE9플랫폼 프리뷰 버전 공개 라는 글을 번역한 것이다.

HTML5, Modernized: Fourth IE9 Platform Preview Available for Developer

IE9 는 앞으로 HTML5가 웹사이트보다는 기본 어플리케이션인듯한 경험을 전달할 것이라는 전제아래 시작됬다. SVG, CANVAS, VIDEO, AUDIO, TEXT 등을 기반으로 개발자들은 컴퓨터 전체적인 역량을 사용하여 커다란 성과를 가져오게 될 것이며 근대 웹에선 비록 다른 HTML5 브라우저라고 할지라도 동일한 마크업을 사용하게 된다.

IE9 를 통하여 우리는 개발자들과 더욱 가깝게 협력하여 일을 할 수 있었다. 개발자들은 우리의 기초적인 플랫폼을 경험할수 있었으며 그것을 시작으로 하여 개발자들의 피드백, 의견들이 그 어느때 보다도 영향을 많이 끼치게 되었다. IE9 Platform Preview 버전을 2.5million 번 이상 다운로드 하였으며 IE Test Drive 웹사이트의 샘플들은 20million 이상의 방문자들이 다녀갔다. 긍정적인 피드백들과 특정 이슈들을 Connect 를 통하여 전달해 주신분들께 너무나도 감사드린다. 그러한 것들이 개발자 커뮤니티들이 지적한 부분들의 향상에 도움을 주었다.

이제 IE9의 4번째 Platform Preivew 가 이제 공개되었다. 하드웨어의 역량을 끌어낸 HTML5 (fully hardware-acclerated HTML5) 를 경험할수 있게 되었다. 여러분들은 근대 svg 와 네이티브 자바스크립트가 돌아가는 새 drive 샘플등을 경험할 수 있다. 3월에 우리는 매 8주마다 새 Platform Preview를 공개한다고 약속했었다. 이 설치와 함께 여러분들은 더욱 향상된 성능과 더욱 높은 마크업 지원을 보게 될 것이다. 또한 리포트된 많은 버그들이 개선된 것을 볼수 있을 것이다. drive 샘플들을 이하의 클립으로 보자

브라우저가 지원한다면 HTML5 비디오 태그 (h.264 코댁) 를 사용하고 그 외에는 다른 방법을 사용하게 된다. 같은 마크업이 여러 브라우저에서 인식되는 것을 보여주는 좋은 예 이다.

Fully Hardeware-Accelerated HTML5

하드웨어 가속화의 성능에 대한 장점은 IE9와 기타 브라우저들을 양 옆에 놓고 돌렸을 때에 확연하게 차이가 난다. 부분적인 하드웨어 가속이 가능한 브라우저는 개발자들과 사용자들(end users) 에게 불규칙적이고 어떤면에선 예측할수 없는 플랫폼 경험을 제공할 수 있다.

IE9 는 하드웨어를 기반으로 한 일정한 그래픽, 택스트, 미디어, 사운드와 비디오를제공한다. HAMSTER DANCE REVOLUTION, IE BEATS, MSNBC VIDEO 를 각각 다른 브라우저들로 돌려보며 차이점을 경험해보기 바란다. Psychedilic Browsing 은 하드웨어 가속이 전적으로 사용된 GPU 에서 HTML5의 CANVAS 가 무엇을 할수 있는지 보여준다.

Modern SVG

Platform Preivew 4 를 통하여 높은 상호반응과 통합되어진 svg를 보여줄수 있게되어 기쁘다. 보통 svg라 하면 개발자들은 static 이미지들과 다이아그램등의 형태를 생각한다. HTML5 와 하드웨어 가속을 사용한 svg는 상호반응하며 움직이는 시나리오를 생각할수 있는 새로운 기반으로 사용될 수 있다.

SVG DICE 예를 보면 자바스크립트로 움직임을 전달하며 보여주는 svg의 성능을 볼 수 있다. 이 샘플은 브라우저들간의 SVG 마크업을 표현하는 성능의 차이와 SVG에 CSS로 스타일을 적용 시키는 잇점을 놀랍게도 잘 보여주고 있다. 불행하게도 동일한 SVG를 다르게 표현하는 브라우저들의 차이들을 볼 수 있으며 그것은 브라우저 커뮤니티가 같은 결과물이 나올수 있도록 앞으로 노력해야 하는 것을 보여준다.

(일모리: 매일 비IE브라우저들을 쫓아가기에 바빴던 IE팀이 IE9를 통해 앞으로 일정 부분에 있어서 선두 주자로 다시 나서면서 타 브라우저 회사들에게 일침을 가하는 부분이다. 몇몇분들에겐 통쾌함을 다른분들에겐 쓰라림을 안겨주는 부분이 되기도 하겠다만.. 이하에서 자바스크립트나 마크업 테스트들에서 계속 타 브라우저들을 비교하며 여태까지의 서러움을 조금이나마 설욕한다)

자체적 자바스크립트의 조화

우리는 HTML5 어플리케이션의 성능과 브라우저들간의 동일한 마크업 출력을 위한 올바른 기반을 새우는데에 헌신하기로 작정하였다. 이를 성취하기 위한 한 부분으로 몇몇 브라우저들이 여러 자바스크립트 엔진을 껴 넣는것 과는 다르게 브라우저 안에 자바스크립트 엔진을 통합하는 것이다. 실제적인 HTML5 에 있어서 자바스크립트 엔진을 브라우저안에 통합하는 것이 자바스크립트 자체만큼이나 중요한 것이다.

4번째 Platform Preview 는 Chakra 코드네임을 가진 새 자바스크립트 엔진을 IE9 안에 넣으므로 하나의 통합된 시스탬을 만들었다.

이 깊은 통합으로 인해 실제적인 웹사이트들의 기능 향상이 이루어지며 ECMAScript 를 기반으로 한 브라우저와 스크립트 엔진사이의 shared DOM(DOM을 공용하는) 을 갖게된 최초의 브라우저 이다. 잇점들은 실제적인 성능 향상과 일정함부터 시작된다.

이 본질적인 변화에 대한 가장 쉬운 이해는 인터넷익스플로러의 이전 버전들이 어떻게 자바스크립트를 사용하였는가를 보면 알 수 있다. 적어도 약 15년간 IE는 자바스크립트를 포함하여 VBScript, 특정언어의 Peal까지 여러 프로그래밍 언어를 지원해왔다. 개발자들에게 이러한 선택권을 허락하면서 성능과 기능의 저하를 감안해야 했다. 브라우저와 이러한 언어들은 COM을 통하여 소통하였고 그것은 성능의 문제를 가지고 오게 되었다. 각 스크립트 엔진들은 DOM를 각각의 시각으로 이해하였고 모순과 불일치를 가져왔다. 그 뿐만 아니라 브라우저들은 최소의 공통분모를 갖게되었고 새 기능들을 제작하는데 더욱 어려워지게 된 것이다.

이 4번째 Platform Preivew에선 JS 엔진을 IE9 으로 옮겼다. 이 변화로 인해 브라우저와 스크립트 엔진과의 소통이 직접적으로 되었으며 실질적인 웹사이트들에서의 성능 향상이 확연하게 들어나게 되었다. 이제 한개의 DOM으로 모든 브라우저의 서브 시스탬들 사이에서 이해하게 되었다. 자바스크립트 또한 말이다. 이 변화는 문서에 대한 일정하며 상호 운용성이 있는 시각을 제공한다. 이 단독의 DOM은 이제 ES5를 기반으로 하며 앞으로 미래를 대비하게 된다.

When programming the IE9 DOM from JavaScript, objects now feel like native ES5 objects because, underneath the covers, they actually are ES5 objects. This approach brings the benefits of ECMAScript5 to the DOM. With the fourth Platform Preview, IE9 becomes the first browser to have a fully discoverable DOM through ES5 reflection features. IE9 is the first browser to apply ES5 bindings to DOM objects, enabling a full Inheritance view of the DOM, and taking advantage of the WebIDL specification as the foundation for this support. Together, these changes provide developers a natural ES5 based programming model. Try some of these enhanced DOM capabilities out for yourself to see how well your browser’s DOM and JavaScript engine are integrated. IE9 will continue to support additional programming languages through the legacy model, but we strongly encourage developers and enterprises to take full advantage of the benefits of JavaScript moving forward.

Platform Preview 는 또한 자바스크립트 엔진 자체를 향상하는데에도 꾸준히 노력중이다. 그 잣대중의 하나가 웹킷 Sunspider 마이크로밴치마크이다. 최근 보여준 결과의 차트이다.

실제적인 html5의 성능은 자바스크립트 엔진 자체 보다는 브라우저 전체의 성능을 보여준다. 이 비디오에서 여러 브라우저들이 html5 canvas를 돌리는 비교를 볼 수 있다. 브라우저들간의 성능의 차이들은 자바스크립트들의 차이와 비교해 볼때 놀랍지 않을 수 없다. (일모리: 너무 많이 차이나서 놀랍다라고..)
우리는 타 브라우저 벤더들이 우리의 리드를 따라 (우리처럼) 성능향상을 위한 설계와 자바스크립트를 통합하는 것을 고려해 보기 바란다.

(일모리: 아 저건… 매번 사파리 새 버전이 나올때마다 스티브 잡스가 보여주던 차트가 아니던가…. 정확히 사파리 바로 앞에 위치해 있다. 보란듯이…)

동일한 마크업 그리고 테스트들

브라우저의 표준 지원의 질과 완전함을 위해서 공식적인 표준안을 채택하였다. 그들의 열리고 전체적인 의견을 수렵하는 방법은 브라우저벤더들과 개발자들 그리고 디자인 프로들을 모아 테스트하는데에 최고의 방법이다.

Platform Preview4 를 통하여 우리는 519개의 새 테스트들을 표준안에 기여하였다. 커뮤니티의 피드백을 기반으로 하여 이전에 넣었던 5개의 테스트들 또한 업데이트 하였다. 이로써 우리가 IE9개발을 하면서 기여한 테스트들의 숫자가 2,138개가 되었다. 우리는 특정 부분에 대한 테스트 피드백을 환영한다. 계속 올바른 W3C working 그룹에 테스트 사례들을 피드백 해 주기 바란다. ES5 테스트 사례 는 마이크로소프트의 Connect 를 통하여 해주기 바란다. 여러분들의 테스트들을 표준 커뮤니티에 알려주는 것도 잊지 말기 바라며 IE 테스트 센터를 통해 여러 테스크 사례들을 볼 수 있다.

이러한 테스트들은 개발자들이 여러 브라우저 테스팅 SUITE 을 통하여 브라우저들이 동일한 잣대 아래 개발되도록 돕는다. 이하의 SUITE은 완성된건 아니지만 같은 마크업의 브라우저들간의 차이점을 볼수 있다.

몇몇 사람들은 특정 테스트나 웹사이트를 표준의 잣대로 생각하며 사용한다. 각각의 사이트들이 다르게 표준을 이해하고 정도 또한 다르게 테스트를 한다. ACID3 는 몇몇 사람들이 기준으로 삼는 것 중의 하나다. 약 12개의 기술들을 100개의 조각들로 나누어 테스트를 한다. IE9의 현제 태스팅 결과이다. 지난번 83에서 이제 95까지 성장했다.

IE9 가 개발자들이 사용하고 생각하는 표준들을 계속 통합시키면서 ACID3의 점수가 높아지고 있다. 나머지 점수는 2가지의 특정한 SVG 폰트와 SMIL에니메이션의 기술인 아직 변화되고 있는 부분이다.

(일모리 : 이하는 그에 대한 변명아닌 설명)
Support for SVG Fonts in the web development and font communities has been declining for some time. There’s already been discussion without objection of dropping SVG fonts from the Acid3 test. The community has put forth a proposal in the SVG Working Group to give SVG Fonts optional status.
Instead, developers can use the Web Open Font Format (WOFF, supported in IE9 Platform Preview 3 as well as other browsers) for both HTML and SVG content. It works well in conjunction with the CSS3 Fonts module and has broad support from leading font vendors (e.g. here, “a majority of font makers have already settled on WOFF or services like Typekit as their format of choice”). WOFF fonts are a better long-term solution for many reasons discussed previously.
Similarly, support for SMIL animation of SVG in the web development community is far from strong. The leader of the SVG standardization effort wrote that not supporting SMIL in its current state is probably best “since the SVG WG intends to coordinate with the CSS WG to make some changes to animation and to extend filters.” There’s already work started to reconcile CSS3 animations and SVG. Developers interested in animating SVG can use JavaScript, as the samples in the test drive site do today, with consistent results.
(특별히 woff 폰트가 앞으로 더 낫다는 이야기가 눈에 띈다)

이제 베타 버전의 준비

이제 4번째 Platform Preview가 나온만큼 개발자들과 디자이너들, 그리고 파트너들에게 IE9 베타를 슬슬 준비하라고 말하고 싶다.

• 당신의 웹사이트를 IE9 스텐다드 (표준) 모드로 테스트 하십시오
  HTML5 DOCTYPE 사용하시고 여기 저기 더 자세히
• 이제 비 IE 브라우저들에게 사용했던 마크업들을 사용해 보십시오
  IE6, 7, 8 마크업을 기반으로 하지 마시고 타 브라우저들에 사용했던 마크업을 기반으로 만들어 보십시오
• 브라우저 인식기능 보단 기능 인식 기능을 사용하십시오
  이것으로 크로스 브라우저 차이나 기능 서포트를 제어하시기 바랍니다. 브라우저가 바뀌더래도 여러분의 사이트가 작동하게 됩니다.
• Connect 에 문제들을 리포트 해주십시오
• IE 9베타 유저들을 고려해주십시오. 혹시나 마크업을 개선하는 것이 너무나도 많은 어려움을 가져온다면 Compatibility View를 고려해주십시오
• HTML5, CSS3, SVG, DOM, ES5등을 이용 하십시오

이번 Platform Preview4는 베타로 가는길의 중요한 마일스톤이다. ie9 beta 전의 마지막 preview 이기도 하다. IE9의 기반은 이제 거의 완성되었다. 개발자들과 파트너들이 베타를 준비하며 IE9의 새 역량들을 최대한 사용했으면 좋겠다.

Internet Explorer 9 Platform Preview 4 다운로드

* 번역을 마치며 본 몇가지 흥미로운 문구들

“IE9 는 앞으로 HTML5가 웹사이트보다는 기본 어플리케이션인듯한 경험을 전달할 것이라는 전제아래 시작됬다.”

“불행하게도 동일한 SVG를 다르게 표현하는 브라우저들의 차이들을 볼 수 있으며 그것은 브라우저 커뮤니티가 같은 결과물이 나올수 있도록 앞으로 노력해야 하는 것을 보여준다.”

“ECMAScript 를 기반으로 한 브라우저와 스크립트 엔진사이의 shared DOM(DOM을 공용하는) 을 갖게된 최초의 브라우저 이다.”

“우리는 타 브라우저 벤더들이 우리의 리드를 따라 (우리처럼) 성능향상을 위한 설계와 자바스크립트를 통합하는 것을 고려해 보기 바란다.”

“IE9 가 개발자들이 사용하고 생각하는 표준들을 계속 통합시키면서 ACID3의 점수가 높아지고 있다.”

• HTML5의 video 태그와 audio태그를 지원한다는것 (기타 문서적인 틀을잡는 태그들은 이미 지원중이었슴)
• 더욱 빨라진 js엔진
• Location Aware Browsing 탑재
• 더욱 빨라진 컨텐츠 렌더링
• 새로운 웹기술적용: downloadable fonts, CSS media queries, new transformations and properties, JavaScript query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG transforms.

파이어폭스 인스톨 후 html5의 video, audio 태그를 강조하는거 보니 안띄워줄수 없더군요. 태그는 간단합니다.

<video src="http://videos.mozilla.org/firefox/3.5/meet/meet.ogv" controls style ="width: 600px;"></video>

삽입후 출력되는 화면.

이제 css로 스타일을 입혀줄수 있겠죠 video {border: 3px solid #eee;} 응용의 부분은 무궁무진합니다.

@font-face

이번 파이어폭스 3.5 부터는 @font-face 가 지원되게 됩니다. CSS3에서 구현되는 기능으로 보지만 이미 CSS2 때에도 사실 IE에서 특정 폰트종류 (.eot) 만 지원되었었죠. 엄청난 관심가운데 개발이 되어졌음에도 불구하고 copyright, 라이센스 등의 문제와 브라우저 미지원으로 널리 사용되지 못했습니다. 물론 이제 사파리3.1, 크롬 2.0 브라우저에 이어 불여우3.5 까지 지원되며 곧 릴리스될 오페라10 에서도 지원하게 됩니다. 몇달안에 IE를 제외한 모든 메이저 브라우저들이 이 기능을 지원 한다는 것입니다.

W3C에서 정의하는 @font-face 를 따오면, @font-face는 필요한 폰트를 링크하여 필요한 부분에 출력토록 하는 기능을 담당합니다. 제작자가 특정 환경때문에 폰트 미지원을 우려하여 기본폰트만을 사용하는 제한을 벗어나서 유저에게 원하는 렌더링을 보여줄수 있게 됩니다. CSS 룰을 사용하여 유저에이전트(보통 브라우저) 는 주어진 텍스트 안에 제작자가 원하는 특정 폰트가 사용될 경우 다운로드 하여 출력하게 됩니다. TrueType (.ttf) 이나 OpenType (.otf) 을 사용할수 있는 것이죠.

The @font-face rule allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of “web-safe” fonts, allowing for consistent rendering independent of the fonts available in a given user’s environment. A set of font descriptors define the location of a font resource, either locally or externally, and the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text. – W3C

사용법은 나름 쉽습니다. @font-face 에서 사용되어질 폰트이름과 위치를 지정해 놓으면 기본조건이 갖추어 집니다. 그 후 보통 폰트 스타일을 적용하는 것과 동일하게 font-family를 사용하여 이름을 불러주면 되겠습니다.

@font-face {
   font-family: ILMOL;
   src: url("http://ilmol.com/ILMOL.ttf") format("truetype");
}

p {
font-family: ILMOL;
}

특별히 제작자가 사용하고자 하는 폰트와 비슷한 폰트가 이미 유저의 컴퓨터에 있을 시에 그것을 먼저 사용하도록 하며 비슷한 폰트 조차도 없을 경우 다운로드 하게 하는 방법이 local입니다. 예를들어 ILMOL 이라는 폰트와 ELMOL 그리고 YILMOL 이라는 폰트가 거의 비슷한 스타일을 갖고 있으니 ILMOL폰트를 다운로드 전에 ELMOL이나 YILMOL 폰트가 일단 유저 컴퓨터에 있나 확인하여 사용하게 하려면,

@font-face {
  font-family: ILMOL;
  src: local("ELMOL"), 
       local("YILMOL"), 
       url(ILMOL.ttf);
}
 
body { font-family: ILMOL, sans-serif; }

이렇게 지정해 줄수 있습니다. 이는 특히 다른 플랙폼의 컴퓨터들 사이에 비슷한 폰트를 지정할때 유용한데 맥에서의 Helvetica 는 PC에 없으므로 비슷한 서체인 Trebuchet MS 가 있나 확인을 먼저 하게한 후에 Helvetica를 다운받게 할수 있겠죠. 물론 둘다 저작권의 문제도 있고 기본적으로 제공되므로 실제적인 사용의 사례는 없겠지만 말입니다.

위는 실제적으로 사용해 본 결과 입니다. 약 40k밖에 되지 않는 “Walt Disney Script” 서체 입니다. 웹그림 1개 다운로드 받는 사이즈 정도밖에 되지 않지만 엄청나게 파워풀한 결과를 가지고 올 수 있습니다. 디자이너분들은 무슨 이야기인지 뼈저리게 느끼고 계실듯 하네요. 물론 현재 IE와 Opera 9.x는 보이지 않습니다.

아직 이른걸까?

인터넷익스플로러가 지원하지 않는다는 치명적인 단점 말고도 넘어야 할 산들이 있습니다. 일단은 서체의 라이센스 문제입니다. 다행이도 Typekit 이 이부분을 위하여 열심히 뛰고 있는 중입니다만 무료라고 제공되는 폰트들이라 해도 css링크나 웹폰트로의 사용은 금하고 있는것들이 대부분 입니다. 타입킷 이메일 알림이에 가입해 놓은지 오래되었지만 아직도 별 다른 소식이 없네요.

한국에 이 문제를 적용시키게 되면 그 문제는 더욱 커지게 됩니다. 무료로 제공되는 폰트들을 찾기가 거의 불가능 할 뿐더러 지난번 네이버에서 ‘나눔’ 서체를 공개하며 한글 폰트 개발이 얼마나 어려운가를 나누었지만서도 몇천자를 디자인하여야 함은 해외 폰트개발과는 너무나도 차이가 납니다. 또한 서체의 개발이 어렵고 방대한 만큼 그 용량또한 방대합니다. 약 4MB을 넘나드는 사이즈는 웹폰트로써 적합한지의 의문조차 갖지 못하게 만들죠.

그럼 우리에겐 단순히 그림의 떡이냐. 네 앞으로 몇년간은 충분히 가능합니다만 변화의 가능성 또한 충분합니다. 일단 IE의 미지원이 그래도 가장 큰 장애물이겠지만 IE 개발팀 또한 @font-face의 필요를 충분히 인식하고 있기 때문에 추후에 곧 지원되지 않을까 하는 생각입니다. 이미 .eot 폰트 종류를 지원하므로 가능한 부분이라고 봅니다. CSS3가 완전해지지 않는한 지원않겠다는 방침을 들고 일어서면 할말 없습니다만…

IE가 지원에 나섬으로 인해서 모든 브라우저에서 @font-face가 가능해 진다고 볼때 제일 먼저 군침을 돌릴만한 곳은 각종 메거진과 신문사들입니다. 사이트들이 더욱 미려해지고 시시각각 바뀌는 헤드라인이 그 어느때 보다도 아름답게 출력된다면 이를 마다할 미디어 매체는 없다고 봅니다. 더군다나 1px의 미학을 즐기는 디자이너들에게는 천국과 같겠죠.
“난 1px 오탁후!”
여기서 웹서체를 제공하는 회사나 폰트업체가 나온다면 그 또한 유명세를 타게 될지도 모르는 일이구요.

언제 어떠한 방식으로 이 부분이 한국의 디자이너들과 개발자들에게 영향이 갈지는 누구도 모릅니다. 하지만 이미 해외개발자들에겐 시동이 걸렸고 사이트가 더욱더 세련되어지고 진화되도록 도울것은 확실합니다.
Less image, faster browsing, better internet.
이건 그 누구도 부인할수 없는 모두가 원하는 결과입니다. :)

좋은 소식에도 불구하고 한숨소리가…? ;; ㅠㅠ

웹개발로써야 IE6이 사라지는데에 조금이나마 도움이 되면 좋지만… 결국 최대액수는 $1 million 이다.

“왠지 씁쓸 하구만…”

For every download of Windows Internet Explorer 8 from this site, we will donate 8 means to Feeding America to help accelerate an end to hunger in this country. Internet Explorer 8 is completely free and comes with exciting new features including Accelerators, Web Slices and In-Private Browsing. – Browser for the Better

아무튼 조금이나마 배고픈 사람들에게 도움이 간다는 것으로 시선을 돌려볼까…

사파리 브라우저를 설치하시면 오프닝 영상이 나오게 됩니다. 이 영상은 처음에 단순한 맥OSX 설치후에 시작되는 프로그램 자체적인 영상으로 생각했지만 그것이 아니라 여러 이미지들과 작은 MOV 파일을 가지고 HTML, CSS3, JS 로 이루어진 html 페이지 입니다. 물론 영상을 보시면 하나의 비디오 파일을 돌리는 듯한 착각이 들 정도로 잘 꾸며져 있습니다. 이미 베타버전 공개시 토론되었던 부분이라 아주 오랜 시간 후에 치는 뒷북일수 있겠군요.

<audio id="music" src="http://images.apple.com/safari/welcome/media/audio.mp4"></audio>
  <div id="header">
      <h1>Welcome to Safari 4</h1>
  </div>
  <div id="apple">
		<div class="icon"></div>
		<div class="spots"></div>
		<div class="flare"></div>
		<div class="flareicon"></div>
  </div>
  <div id="safari">
    <div>
		 <video id="compass" src="http://images.apple.com/safari/welcome/media/compass.mov" width="256" height="256">
			 <img src="http://images.apple.com/safari/welcome/images/safari.jpg" width="200" height="200" alt="Safari 4" />
		 </video>
    </div>
  </div>
</video>

HTML5 지원 하면 떠오르는 두 태그죠 audio, video가 눈에 띄실겁니다. 그러나 어찌보면 이 페이지에서 작은 부분을 차지할뿐 중요한건 CSS3 자체에 있습니다. #apple 안에 들어있는 .icon, .spots .flare .flareicon 등이 영상에 직접적인 연관을 보여줍니다. 물론 이벤트를 컨트롤 하는 js도 빼 놓을수 없겠죠.

오프닝 페이지의 소스를 보시면 아시겠지만 웹킷전용 CSS3를 제어하여 각각의 icon spots 등을 순서대로 ease-in, linear 방식등으로 일정 시간에 플레이되고 지연되도록 설정되어 있습니다. 간단한 순서대로 나열해서 말씀드리자면 첫째로 대강의 기본 설정이 첫 부분입니다. 그리고 각각의 엘리먼트들이 스케쥴데로 플레이 되도록 -webkit-keyframes 값들이 지정되어 있고 마지막에는 설정값과 엘리먼트의 연결 그리고 플레이 시간이 지정되어 있습니다.

하나하나 설명을 드리면 너무나 길어질듯 하구요, 간단히 예제를 보면서 설명드리겠습니다.
이하 코드는 제가 방금 제작한 ilmol.com 인트로입니다… 참 썰렁하네요.
대강의 스토리 라인은 ilmol.com/wp 를 클릭시 설정된 애니메이션이 작동하는 것입니다. 애니메이션은 하단에서 부터 화면 상단부분까지 사이즈및 투명도가 올라가면서 뚜렷하게 출력된후 사라지는 순서로 정했습니다. 일단 구현된 페이지를 사파리4에서 한번 보시구요.

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Welcome to ILMOL</title>
<meta name="Author" content="ilmol" />
<style type="text/css">
body {margin:0; color:#fff; background: #000; overflow:hidden;text-align:center;}
div h1 {-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(rgba(255, 255, 255, 0.4)));
}
@-webkit-keyframes introo {
 
      0% {
        opacity: 0;
        -webkit-animation-timing-function:ease-out;
        padding-top: 200px;
      }
 
      60% {
        opacity: 1;
        -webkit-transform: scale(2);
        -webkit-animation-timing-function:ease-in;
        padding-top: 50px;
      }
      
      100% {
        opacity: 0;
        -webkit-transform: scale(0.7);
        -webkit-animation-timing-function:linear;
        padding-top: 75px;
       
      }
    }
.slide {
  -webkit-animation-name: introo;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 2;
}
</style>
</head>
<body>
<div onclick="className='slide'">
    <h1>ilmol.com/wp</h1>
</div>
</body>
</html>

보시다시피 html 은 별거 없습니다. 간단한 js로 slide가 시작되도록했고 ilmol.com/wp 주소가 그 안에 들어있습니다.
이 간단한 부분을 가지고 css에서 여러가지를 지정해 주어야 합니다. 애니메이션의 키프래임안에서 시간에따라 어떻게 변화할 것인지를 지정하는 것이 첫번째 입니다. -webkit-keyframes 다음에 나오는 것이 에니메이션 이름이구요. 각각의 keyframe 타임라인에는 투명도, animation-timing-function, 위치 등이 지정되어 있습니다.

keyframe 이 지정되었다면 몇초간 이루어지는지 몇번 이루어 지는지 등을 지정합니다. 저는 3초간 한 사이클이 이루어지고 2번 플레이 되도록 지정했습니다.

.slide {
  -webkit-animation-name: introo;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 2;}

주의깊게 보실 부분은 에니메이션 이름이 지정되어 있다는 것입니다. “-webkit-animation-name: introo;” 키프래임 설정이름과 애니메이션 이름이 연결되어야 합니다. 위의 말씀드린 몇가지만 주의하셔서 살펴보시면 전혀 어렵지 않습니다 :)

이번 사파리4 오프닝 영상은 이를 백분 활용하여 감쪽같은 영상을 만들어 내었고 그 영상만으로도 우리를 매혹시키기에 충분했습니다. 앞으로 여러가지 활용 부분들이 개발되고 적용되겠지만 사파리내에서 한정되기 보다는 공식 css3를 사용하여 모든브라우저에 활용되면 좋겠다라는 꿈을 가져봅니다. 물론 쉽지도 않을듯 하고 시간도 걸리리라 생각됩니다만… 스케쥴에 앞서가고 있는 html5, 스케쥴에 뒤쳐진 css3, 둘의 만남은 어떻게 웹을 바꾸어 놓을지. 그리고 언제가 될지가 괜시리 기다려지는 그런 날입니다.