▲ 인터넷의 미래를 준비하는 IE9 : 속도와 표준, IE9의 발견, 그리고 먼저 경험한 개발자들이 들려 주는 사례들
| 황리건 / 한국마이크로소프트, UX & Web Evangelist 송효종 / NHN, AJAX UI랩 책임UI개발자 문경두 / DAUM, UI센터 |
.jpg){kind=icon}
IE9 영문 블로그에 올라온 소개글을 번역한 글입니다.
IE9은 현대적인 웹이 사이트보다 일반 응용프로그램처럼 느껴지는 HTML5 경험을
전달할 것이라는 약속으로 부터 시작했습니다. 하드웨어 가속된 SVG, canvas, video, audio, text를 사용하여, 개발자들은 뛰어난 성능을 달성하기 위해 전체 PC 성능을 사용하게 될 것입니다. 현대적인 웹에서, 개발자들은 서로 다른 HTML5 브라우저를 넘어서 똑같은 마크업을 사용할 것입니다.
IE9과 함께, 우리는 개발자 커뮤니티와 훨씬 더 가깝게 작업을 해왔습니다. 개발자들은 더 먼저(그리고 더 자주 업데이트된) 플랫폼을 볼 수 있었습니다. 그러한 조기 참여와 함께, 개발자 피드백은 이전보다큰 영향을 가져왔습니다. 사람들은 IE9 플랫폼 프리뷰를 250만회 이상 다운로드 했습니다. IE Test Drive 사이트의 샘플들은 2천만 방문자수가 넘었습니다. 긍정적인 피드백과 Connect에 등록된 많은 특정 이슈들에 감사하고 있습니다. 커뮤니티에서 주목해온 눈에 띄는 개선들을 만드는데 도움이 되었습니다.
지금 바로 사용할 수 있는, 인터넷 익스플로러 9의 4번째 플랫폼 프리뷰는, 완전히 하드웨어 가속된 HTML5의 기회를 보여줍니다. 여러분은 현대적인 SVG와 내장 JavaScript 통합의 실제를 보여주는 새로운 Test Drive 샘플들을 실행해 볼 수 있습니다. 지난 3월, 정확히 매 8주마다 플랫폼 프리뷰를 공개하겠다고 약속하였습니다. 이번 설치를 통해, 더 나은 성능과 똑같은 마크업을 더 많이 지원하는 것을 알게 될 것입니다. 이전 플랫폼 프리뷰 버전들에서 보고된 이슈들이 많이 고쳐졌다는 사실도요. 몇가지 Test Drive 샘플들 영상을 준비했습니다.
완전하게 하드웨어 가속된 HTML5
하드웨어 가속의 성능 혜택은 여러 샘플 사이트를 IE9과 다른 브라우저들에서 차례로 실행해보면 분명해집니다. 부분적 하드웨어 가속을 구현한 브라우저들은-예를 들어, 글자만 또는 비디오 재생만, 이미지만 가속- 개발자와 최종 사용자에게 지속적이지 않고, 예측 불가능한 플랫폼 경험을 줍니다.
IE9은 일관되고, 완전하게 하드웨어 가속된 글자, 그래픽, 그리고 미디어, 음성과 영상 모두를 제공합니다. Hamster Dance Revolution, IE Beatz, 또는 MSNBC Video 등을 서로 다른 브라우저에서 실행해보면 다른 경험을 하게 될 것입니다. Psychedelic Browsing은 HTML5 canvas가 GPU로 완전하게 가속되었을 때 무엇을 할 수 있는지를 보여줍니다.
Modern SVG
플랫폼 프리뷰 4와 함께, 매우 인터랙티브하고, 통합된, 또는 현대적인 SVG를 소개할 수 있어서 기쁘네요. 전형적으로, 개발자들은 SVG에 대해 정적인 공학 다이어그램이나 이미지들을 위한 그래픽 포맷으로 생각하지요. HTML5와 하드웨어 가속을 통해, SVG는 인터랙티브하고 애니메이션을 포함한 시나리오의 새로운 차원을 위한 훌륭한 선택이 됩니다.
여러분은 SVG Dice 예제를 통해 JavaScript를 통해 애니메이션되는 훌륭한 SVG 퍼포먼스를 볼 수 있습니다. 이 샘플은 SVG를 CSS로 스타일링하는 것이 가능하다는 것의 장점을 보여주는 것 뿐 아니라, 똑같은 SVG 마크업을 애니메이션시키는 브라우저들 간의 두드러지는 성능 차이를 보여줍니다. 불행하게도, 똑같은 SVG를 서로 다른 브라우저들이 어떻게 보여주는지 그 차이를 볼 수도 있지요. 산업적인 측면에서 똑같은 마크업을 똑같은 결과로 보여주기 위해서 우리는 더 많은 노력을 해야 합니다.
내장 자바스크립트 통합
우리는 HTML5 응용프로그램을 위해 최적의 토대을 제공할 것이라고 약속했습니다. 성능과 똑같은 마크업 그리고 똑같은 스크립트가 서로 다른 브라우저에서 보장되는 것을 포함해서요. 이런 것들을 잘 하기 위한 하나의 접근은 JavaScript 엔진을 브라우저 안에 내장하도록 통합하는 것입니다. 다른 브라우저들이 현재 그런 것처럼 여러 JavaScript 엔진을 지원하기 위해 주변에 추가로 접합하는 대신에 말이죠. JavaScript 엔진이 브라우저 안에 어떻게 통합되어 있는지는 실제 HTML5를 위해서는 엔진 그 자체만큼이나 중요합니다.
4번째 플랫폼 프리뷰는 새로운 JavaScript 엔진(코드네임 챠크라)를 IE9 내부로 옮기고 단 하나의 통합된 시스템으로 구성하였습니다.
이러한 깊숙한 통합으로, 실제 웹사이트의 성능이 눈에 띄게 향상했고, IE9는 브라
우저와 ECMAScript5에 기반한 스크립트 엔진 사이에 공유된 DOM을 갖는 최초의 브라우저가 됩니다. 그 효과는 실제 성능과 일관성으로 시작됩니다.
이런 근본적인 변화의 중요성을 이해하기 위해 가장 쉬운 방법은 이전 버전의 인터넷 익스플로러가 어떻게 JavaScript를 통합했는지를 보는 것입니다. 지난 15년동안 인터넷 익스플로러는 JScript, VBScript, 그리고 Perl과 같은 전문화된 언어에 이르기 까지 여러 프로그래밍 언어들을 지원해 왔습니다. 이 것을 개발자들이 선택할 수 있도록 할 수록 또한 성능과 기능에 대한 비용이 들었습니다. 성능 문제가 발생할 수 있는 COM을 통해 브라우저와 스크립트 엔진이 통신을 했습니다. 각각의 스크립트 엔진은 DOM에 대한 고유의 언어적 특이한 관점을 갖고 있었는데 이 것이 서로 다른 점들을 유발했습니다.
게다가, 브라우저는 최소의 공통 분모를 사용하도록 강제했는데, 새로운 기능을 추가하는 것을 어렵게 했습니다.
4번째 플랫폼 프리뷰에서, 우리는 JavaScript 엔진을 IE9 내부로 옮겼습니다. 이 변화로, 브라우저와 스크립트 엔진 간의 통신은 이제 직접적이고, 실제 웹사이트들의 속도를 분명하게 향상시킵니다. 이제 JavaScript를 포함하는 브라우저의 모든 하부시스템을 가로지르는 단일 DOM을 갖게 되었습니다. 이 변화는 문서의 일관되고 상호운용가능한 보기를 보장합니다. 그리고 단일 DOM은 ES5(ECMAScript 5)에 기반하고 있는데, 미래를 위한 전반 시스템을 준비하는 것입니다.
JavaScript로 IE9 DOM을 프로그래밍할 때, 객체들은 이제 내장 ES5 객체인 것처럼 느껴집니다. 왜냐하면, 안 쪽을 보면 실제로 ES5 객체이기 때문입니다. 이러한 접근은 DOM에 대한 ECMAScript5의 혜택을 가져옵니다. IE9은 ES5 reflection 기능을 통해서 DOM을 완전하게 탐색가능한 최초의 브라우저입니다. IE9은 ES5 바인딩을 DOM 객체에 적용할 수 있는 최초의 브라우저이기도 합니다. DOM의 완전한 상속뷰를 가능하게 하고, 이런 지원의 기초로써 WebIDL 명세의 혜택을 취하고 있습니다. 이런 변화들과 함께, 개발자들에게 자연스러운 ES5 기반의 프로그래밍 모델을 제공합니다. 향상된 DOM 기능들을 시험해보고, 여러분이 사용하는 브라우저의 DOM과 JavaScript 엔진이 잘 통합되어 있는지 알아보세요. IE9은 전통적인 방식을 통해 추가적인 프로그래밍 언어들을 지원하는 것을 계속할 것입니다. 그러나, 개발자와 기업들이 점점 나아지는 JavaScript의 혜택을 완전히 누리기를 강력히 추천합니다.
또한 플랫폼 프리뷰 4는 JavaScript 엔진 그 자체도 계속 향상시키고 있습니다. JavaScript 성능을 측정하는 한 방법으로 WetKit Sunspider microbenchmark가 있지요. 여기 최근의 결과 차트를 준비했습니다.
이 microbenchmark에서 브라우저 간의 차이는 조금이라도 차이가 발견될 때까지 수도 없이 많이 반복되는 테스트들에서 수천분의 몇초 정도로 수렴되고 있습니다.
현실적인 HTML5 성능은 전체 브라우저 성능을 주로 반영하지, 격리된 JavaScript 엔진만은 아니죠. 예를 들어, 이 영상에서 HTML5 canvas를 재생하는 서로 다른 브라우저들을 나란히 비교해 보여줍니다. 브라우저간의 성능 차이는 눈에 띌 정도지만 상대적인 JavaScript 성능은 반영하지 않습니다. 우리는 다른 브라우저 개발사들이 격리된 상태에서 최적화하기 위해 분리가능한 하부시스템으로 스크립트를 다루는 대신, 모든 분야의 성능과 내장된 통합 JavaScript 엔진등을 설계한 우리들의 시도를 따르는 것을 고려해보기를 바랍니다.
똑같은 마크업, 그리고 테스트
브라우저의 표준 지원에 대해 품질과 완성도를 측정하기 위해, 공식 표준 단체들을 생각해 봤습니다. 그들의 열려있고, 의견 일치를 중시하는 프로세스는 브라우저 개발사들의 커뮤니티와 웹개발자 그리고 디자인 전문가들이 테스트 세트를 만드는 것으로 이끌기 위한 최고의 방법입니다.
플랫폼 프리뷰4와 함께, 우리는 표준 단체에 519개의 새로운 테스트를 만드는데 기여하였습니다. 커뮤니티의 피드백에 따라, 이전에 제출된 5개의 테스트도 수정하였습니다. 이로 인해 IE9 개발 중에 우리가 기여한 테스트의 총 갯수는 2,138개에 이릅니다. 우리는 개별 테스트 케이스에 대한 여러분의 피드백을 환영합니다. 적합한 W3C 워킹그룹에 테스트 케이스들의 피드백을 제공하는 것을 계속해 주시기 바랍니다. ES5 테스트 케이스들의 경우 Microsoft Connect를 통해서 테스트 케이스의 개별 피드백을 제공해 주세요. 또한 우리는 여러분이 만든 테스트 케이스들을 표준 단체에 제출하기 위해 여러분을 초대합니다. Microsoft가 개발해온 테스트 케이스들은 IE Test Center에서 찾을 수 있습니다.
이 테스트 케이스들은 웹 표준 개발자들이 여러 브라우저에서 일관되게 작업하기 위해서 기대하는 완전하고 종합적인 테스트 세트로의 힘찬 출발입니다. 이 세트가 아직 완성되지는 않았지만, 똑같은 마크업의 일부가 서로 다른 브라우저 상에서 어떻게 상호운용될 수 있는지 살펴보는 것은 흥미롭습니다.
어떤 사람들은 표준 준수의 간단한 방법으로 특정한 테스트나 웹사이트를 사용합니다. 서로 다른 사이트들이 서로 다른 수준으로 서로 다른 표준의 부분집합을 테스트합니다. Acid3는 커뮤니티의 일부 사람들이 인용하는 것 중 하나입니다. 서로 다른 10여개의 기술들의 100가지 조각들을 테스트합니다. 아래는 이번 IE9 플랫폼 프리뷰가 현재 Acid3 테스트를 어떻게 수행하는지에 대한 스크린샷입니다. 이전 버전의 83점에서 95점이 되었습니다.
IE9이 개발자들이 사용하고 유용하게 생각하는 더 많은 표준을 구현함에 따라, IE9의 Acid3 점수는 점차 증가했습니다. 남은 점수는 2개의 특정 기술(SVG Fonts와 SVG를 위한 SMIL 애니메이션)이고 이들은 현재 변화 중에 있습니다.
웹개발과 폰트 커뮤니티에서 SVG Fonts에 대한 지원은 얼마간 축소되어 왔습니다. 이미 Acid3 테스트에서 SVG Fonts를 빼는 것에 대한 반대없는 토론도 있었습니다. 커뮤니티는 SVG 워킹 그룹에 SVG Fonts의 선택 가능한 대안을 위해 4번째 제안을 제출해왔습니다.
그 대신에, 개발자들은 Web Open Font Format(WOFF, IE9 플랫폼 프리뷰3와 다른 브라우저에서 지원)을 HTML과 SVG 컨텐츠에 적용할 수 있습니다. CSS3 Fonts 모듈과의 조합으로도 잘 동작하고 선도하는 폰트 개발업체들로부터도 폭넓게 지원받고 있습니다.(예, 여기에서, "폰트 제작자의 다수가 이미WOFF에 정착했거나 선택 포맷으로써 Typekit과 같이 서비스하고 있다.") WOFF 폰트는 이전에 논의된 많은 이유로 인해 더 나은 장기적인 솔루션입니다.
비슷하게, 웹개발 커뮤니티에서 SVG를 위한 SMIL 애니메이션 지원도 크게 다르지 않은 상황이죠. SVG 표준화 노력의 리더는 "SVG 워킹그룹이 애니메이션에 몇가지 변화를 가져오고 필터들을 확장하기 위해서 CSS 워킹그룹과 합치려고 했을 때부터" 현재 상태에서 SMIL을 지원하지 않는 것이 가장 최선일 것이라고 했습니다. CSS3 애니메이션과 SVG를 조화시키기 위한 작업은 이미 시작되었습니다. 개발자들은 Test Drive 사이트의 샘플들에서 하듯이, SVG 애니메이션에 일관성있는 결과와 함께 JavaScript가 쓰일 수 있는 것에 관심이 있었습니다.
베타를 위해 사이트들을 준비하기
4번째 플랫폼 프리뷰와 함께, 우리는 개발자, 디자이너, 그리고 파트너 여러분의 사이트들에 대한 IE9 베타 준비를 시작하도록 강력히 권장합니다.
- IE9 표준 모드에서 여러분의 사이트를 테스트하세요. 이 모드는 최고의 성능과 상호운용성을 제공하고, IE9 베타에서 추가적인 혜택을 제공할 것입니다. HTML5 doctype을 사용하기시를 제안합니다. 보다 자세한 사항은 여기와 여기를 참고하세요.
- 다른 브라우저에 보낸 것과 똑같은 표준 기반의 마크업을 IE9에 보내주기를 권장합니다. 더 자세한 사항은 여기와 여기에 있습니다. 지금까지의 피드백과 사이트들에 대한 우리의 경험에 따르면, IE9 표준 모드에서 여러분의 사이트가 동작하도록 하는 가장 좋은 방법은 IE6, IE7, 또는 IE8 마크업 대신에 다른 브라우저와 똑같은 마크업으로 작업을 하는 것입니다.
- 기능 검사를 사용하세요, 브라우저 검사 대신에요. 동작방식이나 기능 지원에서 브라우저 간의 어떠한 차이점들을 다루기 위해서든 말이죠. 브라우저가 변하는 경우에도 여러분의 사이트가 동작하도록 지켜줄 겁니다.
- Connect 사이트에 이슈 제보를 계속해주세요. 만약, 다른 최신 브라우저들에 보낸 것과 같은 코드를 보내는 데도 여러분의 사이트가 제대로 보이지 않거나 동작하지 않는다면요. IE9 플랫폼 프리뷰 4에서, 우리는 100개가 넘는 커뮤니티 제보 이슈들을 수정해왔습니다. 지금 버전과 IE9 베타 사이에도 더 많은 것들을 수정할 것이고 여러분의 피드백을 필요로 합니다.
- IE9 베타 사용자들의 경험을 생각해주세요. 똑같은 마크업을 사용함으로써 개발용 사이트에서 여러분이 처리할 수 있는 것보다 많은 이슈가 생긴다는 것을 알게 되셨다면, 호환성 모드에서 여러분의 사이트를 실행하는 것이 사용자들을 위해서 더 나을 수도 있습니다.
- HTML5, CSS3, SVG, DOM, ES5 등의 장점을 활용하세요. 모두 개발자 가이드에서 다루고 있습니다. 우리는 여러분이 IE9을 통해서 새로운 기능들과 하드웨어의 장점을 활용하여 웹에 가져올 놀라운 경험에 대해서 기대하고 있습니다.
플랫폼 프리뷰4는 베타로 가는 중요한 이정표입니다. IE9 베타 이전의 마지막 프리뷰입니다. IE9 플랫폼은 거의 완성되었습니다. 우리는 개발자와 파트너들이 베타를 위해 테스팅을 시작하고, IE9의 새로운 기능들의 장점을 누리기 위해 사이트들을 준비하기를 바랍니다. 앞으로도 Connect 사이트를 통한 여러분의 피드백을 기대합니다.
▶ IE9 Beta Download : http://windows.microsoft.com/ko-KR/internet-explorer/download/ie-9/worldwide
▣ 설치후에 해 볼만한 HTML5 추천 사이트
[출처] 현대화된 HTML5 : 개발자를 위한 4번째 IE폼 프리뷰 공개|작성자 황리건
댓글 없음:
댓글 쓰기