HTML5 와 Internet Explore 9

황리건UX EvangelistMicrosoft Corporation

Welcome

Internet Explorer 9 웹 플랫폼의 최우선 목표

• 한벌로 두루 쓰는 HTML5 마크업 • 똑같은 HTML 과 CSS 마크업을 똑같은 방식으로 해석하기• 똑같은 자바스크립트를 똑같은 방식으로 실행하기

• GPU 를 사용하는 HTML5 그래픽과 미디어• HTML5 은 높은 성능을 갖춘 그래픽 하부시스템을 요구합니다 .

• 전반에 걸쳐 높은 성능의 HTML5 지원• JavaScript execution• Page layout• Page display

The HTML5 Web:그래픽 & 리치미디어

웹의 진화

The AJAX Web: 자바스크립트+

DOM+ 비동기 요청

Web “2.0”

The Content Web: HTML & CSS

Web “1.0”

5

브라우저 동작 원리

Display Tree

“DOM”

HTML Objects

CSS Properties

Script Edits

Events Animates

AnimationTimer

Layout Display

Input streams

HTMLCSSScriptXHTML

Parsed

6

새로운 자바스트립트 엔진 , Chakra

7

ACID3 Test

8

CSS3 Selectors Test

9

한벌로 두루 쓰는 HTML5 마크업똑같은 HTML, CSS, 자바스크립트를 똑같은 방식으로 해석하기

한벌로 두루 쓰는 HTML5 마크업

HTML, CSS, 자바스크립트를 똑같은 방식으로 해석

• 항상 경쟁 우위의 차이는 존재할 수 밖에 없습니다 . • 표준의 진화• 서로 다른 체계를 따라 브라우저 구현

• 핵심 플랫폼만은 반드시 상호운용 가능해야 합니다 .

1 43 85 1271692112532953373794214635055475896316737150

10002000300040005000600070008000

상위 7000 여 사이트의 API 사용현황

API ( 사용 빈도에 따른 순위 )

사이

트 수

API 순위 사용하는 사이트 비율indexOf 1 94%

getElementById 13 80%

addEventListener 27 65%

getComputedStyle 62 26%

13

데모 시연DOM Events, DOMContentLoaded, getElementsByClassName

IE9 가 지원하는 마크업 언어

• HTML5 • 다른 스펙들과의 접점에서의 대응 방식을 정의합니다 .• 알려지지 않은 요소들 (unknown elements) 의 파싱• Inline SVG

• XHTML/XML• 엄격하고 , Fail-Fast 한 파싱은 개발자들이 에러를 빨리 찾을 수 있도록

도와줍니다 . • 사용자 정의 엘리먼트를 안전하게 사용할 수 있도록 네임스페이스를

제공합니다 .• 브라우저 외부 처리하는 것이 더 쉽습니다 .

• SVG• 독립 실행가능한 XML 기반 문서 (.svg file)• XHTML 문서 안에 포함시키기• HTML5 문서 안에 포함시키기

16

알려지지 않은 요소들의 파싱

• 스타일 적용• Children 구조

17

기존의 SVG 방식

18

Inline SVG

CSS 기반 구조

• CSS3 Selectors• 더 적은 스크립트와 간단한 마크업으로 더 많은 것을 할 수 있게

해줍니다 .

• CSS3 Namespaces• XHTML 문서에서 네임스페이스를 사용할 수 있는 스타일 요소

데모 시연CSS3 Selectors, T-shirt Designer

IE9 프로그래밍 모델

• 웹 플랫폼의 핵심 부분은 DOM 을 다루는데 사용됩니다 .

• DOM Core

• DOM Events

• DOM Style

• DOM HTML

• DOM Range

• HTML5 Selection

데모 시연DOM Style, DOM Range & HTML Selection

마크업과 프로그래밍 모델 : IE Platform Preview

Category Feature v1 v2

Markup Inline SVG in HTML

XHTML/XML

CSS 기반 구조 CSS3 Selectors

CSS3 Namespaces

DOM Core

Events

Style

Range

HTML5 Selection

GPU 를 사용한 HTML5 그래픽

GPU 를 사용하는 HTML5 그래픽과 미디어

HTML5 의 그래픽적 풍부함은 높은 성능을 갖춘 그래픽 하부 시스템을 요구합니다 .

• GPU 를 쓰게 됨으로써 ,• 알파채널 블렌딩과 같은 기능들이 높은 성능으로 구현되는 것이

가능하고 ,• 부드러운 애니메이션과 비디오 재생을 위해 필요한 프레임수를

제공하고 ,• 다른 시스템들이 더 빠르게 실행될 수 있도록 CPU 부하를

줄여줍니다 .

GPU 를 이용한 HTML5

퍼포먼스 향상 자바스크립트 실행

DOM 인터랙션과 레이아웃

GPU 파워를 이용한 렌더링

크로스 브라우저상호운용성

HTML5 마크업

CSS3 마크업

DOM 프로그래밍

그래픽 기능 알파 컬러 & 투명도

라운드 코너 & 멀티 백그라운드

HTML5 에 통합된 SVG 그래픽

미디어 기능 <video> 요소 MPEG-4/H.264 코덱

<audio> 요소 MP3/AAC 코덱

<img> JPEG-XR, 컬러 프로필

Rich Graphics: HTML5 의 기초

• 그래픽적으로 풍부한 스타일링• 향상된 이미지 지원• 확대축소 가능한 벡터 그래픽• 미디어 요소

일관된 고화질과 고성능을 제공하기 위해 , IE9 은 윈도우 7 의 GPU 그래픽 기능에 기반하고 있습니다 .

CSS3 로 그래픽적으로 풍부한 스타일링

• CSS3 Colors• 알파 컬러 , rgba() 와 hsla() 함수• 투명도 조절 , opacity 속성

• CSS3 Backgrounds and Borders• 둥근 모서리 , border-radius 속성• 하나의 요소에 다수의 배경 이미지 적용• Block 요소에 box-shadow 속성

데모 시연Border Radius, CSS3 Media Queries

30

향상된 이미지 지원

• ICC 버전 4 와 버전 2 컬러 프로필• 내장 컬러 프로필이 있는 이미지를 올바르게 표현해줍니다 .

• 새로운 JPEG XR 포맷• JPG 보다 높은 압축률

• 같은 사이즈로 더 높은 퀄리티• 같은 퀄리티로 더 적은 용량

• JPEG XR 도 무손실 압축을 지원합니다• 고해상도의 원본 사진을 주고 받는데 유용합니다 .

• TIFF 이미지 포맷• 무손실 이미지 , 흑백 이미지 , 문서와 팩스 스캔 이미지 등으로

유명한 포맷입니다 .

31

데모 시연Color Profiles, Image Support

확대 / 축소 가능한 벡터 그래픽

• 마크업과 DOM 기반의 그래픽 : SVG 1.1• “View source” 에서 간결함 —쉽게 배울 수 있다• 쉬운 서버 사이드 생성— XML 형식• 쉬운 클라이언트 사이드 디버깅— DOM 으로 해석• 널리 쓰이는 그래픽 프로그램들을 지원• 쉬운 HTML5 통합

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<rect fill="red" x="20" y="20" width="100" height="75" />

<rect fill="blue" x="50" y="50" width="100" height="75" />

</svg>

SVG : Internet Explorer Platform Preview

SVG Feature v1 v2

Document Structure

Basic Shapes

Paths

Text

Transforms

Painting, Filling, Color

Scripting

Styling

Gradients and Patterns

Clipping and Masking

Markers and Symbols

DemosTweet Cloud, Real World Diagram, Org Charts, Biz Charts, Atlas zure Europawahl

리치 미디어 통합—플러그인 없이

• HTML5 <video> 요소• 업계 표준의 MPEG-4/H.264 비디오• 페이지의 어떤 요소와도 조합해서 쓸 수 있습니다 .

• HTML 컨텐츠 , 이미지 , SVG 그래픽• 풀 HD 해상도의 풀스크린 모드에서 60fps 를 유지하는 GPU

기반의 구현 가능• DXVA 와 풀 하드웨어 비디오 디코더를 모두 지원

• HTML5 <audio> 요소• 업계 표준인 MP3 와 AAC 오디오

<video width="800" height="450" src="myvideo.mp4" autoplay>

No video for you</video>

비디오 데모Video

38

비디오 데모Network Monitoring

가장 빠른 IE9 정보 ( 영문 )http://blogs.msdn.com/ie

8 주 마다 한번씩 선보이는IE9 플랫폼 프리뷰 다운로드

www.IETestDrive.com

무엇이든 물어보세요 .황리건 @HRG

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,

it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.