Freigeben über

IE10의 표준 기반 웹 그래픽으로 전환

  • Artikel

사용자들은 브라우저에 관계없이 인터넷의 모든 사이트를 방문하여 우수한 환경을 경험하기를 기대합니다. IE9의 첫 플랫폼 프리뷰 출시를 발표하면서 2010년 3월 16일 게시된 글을 통해 Internet Explorer 개발 과정에서 브라우저에 관계 없이 일관된 '동일 마크업, 동일 결과'라는 목포를 추구하고 있음을 알려드린 바 있습니다. IE9에서 이러한 목표 달성에 큰 진전이 있었으며 IE10의 HTML5 기반 표준과 쿼크 모드는 이러한 노력을 완성시킵니다. IE10에서 HTML5 구문 분석이란 제목의 글에는 IE10의 HTML5 기반 표준과 쿼크 모드에서 제외된 기존 기능들이 정리되어 있습니다.

본 글은 VML(벡터 표시 언어) 및 DirectX 기반 필터 및 전환의 두 가지 기존 기능을 추가로 제외시키는 내용을 다룹니다. 이 두 기능은 IE9 이후 MSDN 문서에서 사용되지 않는 것으로 나타났기 때문에(예를 들어, 필터 및 전환의 첫 문장에 '이 주제에서는 Windows Internet Explorer 9 이후 사용되지 않는 시각적 필터와 전환의 기능을 설명합니다.'라고 나와 있음) IE10 표준 및 쿼크 모드에서 제외되었습니다.

VML과 DX 필터의 일반적 기능은 IE10 및 다른 브라우저의 최신 버전에서 표준에 기반을 둔 대체 기능으로 구현됩니다. 이러한 기존의 IE 기능은 하드웨어 가속의 표준 기반 대체 기능에 비해 성능이 떨어지지만 문서 모드 5, 7, 8 및 9로 IE10에서 계속 사용할 수 있습니다. 기존의 문서 모드를 유지하는 대신 사이트를 표준 기반 기술로 전환할 것을 웹 개발자에게 권장합니다.

VML을 대체하는 SVG

Microsoft를 비롯한 다른 기업들은 1998년에 W3C에 VML(벡터 표시 언어)을 제안했고 IE5가 이를 처음 구현한 브라우저가 되었습니다. W3C는 VML을 다른 경합 제안과 결합시켜 SVG라는 결과물을 내놓았습니다. 간략한 과정을 보려면 VML(벡터 표시 언어)을 참조하십시오.

IE9에 구현된 SVG는 웹 사이트 및 이를 사용하는 응용 프로그램에서 VML을 대체하는 데 필요한 기능을 제공합니다. Microsoft 다운로드 센터에 게시된 VML에서 SVG로 전환 가이드에 VML을 SVG로 전환하기 위한 안내 정보가 나와 있습니다.

Raphaël JavaScript 라이브러리는 가능한 경우에 SVG를 사용하고 그렇지 않은 경우에는 VML을 사용하는 경량의 사용하기 쉬운 그래픽 API입니다. Raphaël은 IE8 이상 최신 버전에서 작동하는 벡터 그래픽 솔루션을 구축하는 경우에 훌륭한 선택입니다.

DX 필터를 대체하는 CSS3

Internet Explorer 4에는 웹 개발자가 웹 페이지에 멀티미디어 스타일의 효과를 적용할 수 있도록 시각적 필터 및 전환 모음이 도입되었습니다. DX 필터라는 이름은 근본 구현 기술인 DirectX와 'filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)'와 같은 긴 구문 형식에서 유래되었습니다. DX 필터는 SVG 필터 효과와 동일하지 않지만 둘 모두 CSS 속성 이름 filter를 사용합니다.

이후 이러한 효과 중 불투명도, 그라데이션, 그림자 등 가장 인기가 많은 효과가 CSS3 초안 또는 권장기술 후보가 되었습니다. IE10에서는 이러한 CSS3 규격을 지원하므로 기존의 IE용 필터가 필요 없습니다. 또 한 가지 필터인 AlphaImageLoader는 한때 IE6에서 PNG 투명도 관련 버그 해결에 많이 사용되었지만 이러한 버그는 IE7에서 해결되었습니다.

다음 표에는 많이 이용되는 DX 필터와 이를 대체하는 표준 기반 기능을 정리했습니다.

DX 필터 표준 기반 대체 기능
Alpha opacity
AlphaImageLoader <img> or background-image and related properties
Gradient background-image: linear-gradient()
DropShadow text-shadow or box-shadow
Matrix transform, transform-origin

IE10에서 SVG 필터 효과는 SVG의 컨텍스트에서 자주 사용되지 않는 소수 사용자만을 위한 필터를 시뮬레이션하는 용도로 이용될 수 있습니다.

참고: IE9 문서 모드는 DX 필터와 일부 표준 기반 대체 기능을 모두 지원하기 때문에 동일 요소에서 두 속성을 모두 지정하지 않는 것이 현명합니다. Modernizr와 같은 라이브러리를 사용하면 CSS에서 기능 감지를 사용하고 중복된 선언을 방지하기가 편리합니다.

지금 바로 동일 마크업으로 전환

위에서 설명한 변동 사항은 Windows 개발자 프리뷰에서 사용할 수 있는 IE10 플랫폼 프리뷰 4부터 적용됩니다.

이전의 어떤 IE 버전보다도 IE10은 다른 인기 있는 브라우저와 동일한 마크업 및 코드에서 더욱 효과적으로 작동합니다(우선 '-ms-'를 포함하도록 CSS 공급업체별 접두사를 업데이트해야 함). 한편, 이러한 기존의 두 기능을 없애는 것은 IE10에 적합하게 개발된 콘텐츠가 다른 브라우저에서도 작동한다는 것을 의미하기 때문에

결국 동일한 표준 기반 콘텐츠를 모든 브라우저에서 이용할 수 있어 사용자가 더욱 편리해집니다.

- Ted Johnson, 수석 프로그램 관리자, Internet Explorer 그래픽