Internet Explorer 11 호환성확보가이드 개발부 Windows 팀 2013 년 7 월 Version 1.3 Page 1
목차 1. 개요... 3 요약... 3 대상... 3 참조문서... 3 알림... 3 2. 주요개선사항... 4 터치성능및사용자 UI 개선... 4 속도개선... 4 그래픽개선... 5 F12 개발자도구... 5 HTML5 Encypted Media Extensions (EME) 와 Media Source Extensions(MSE) 지원... 5 Flash 지원... 5 3. 호환성확보방안... 6 User Agent String(UA String) 변경... 6 UA String 변경에따른 IE 버전인식문제... 6 UA String 변경에영향을받는실제스크립트또는코드예... 7 IE 버전인식문제해결방안... 8 향상된보호모드 (Enhanced Protected Mode)... 9 향상된보호모드 (Enhanced Protected Mode) 해결방안... 10 추가된 API 와삭제된 API 들... 11 4. 테스트환경... 12 5. 테스트가이드... 13 레이아웃... 13 ActiveX Controls... 14 툴바또는 BHO... 15 테스트수행절차... 16 Windows 8.1 & IE11 호환성센터... 16 6. 부록 : 호환성보기안내... 17 Page 2
1. 개요요약 2013 년 6 월 26 일 //build/ 이벤트에서 Internet Explorer 11 Preview 가 Windows 8.1 Preview 와함께공개되었습니다. //build/ 2013 : http://www.buildwindows.com/ 이에따라각사이트들의 Internet Explorer 11 호환성테스트를위한기본가이드를제공합니다. 대상 이문서는다음을대상으로합니다. Internet Explorer 를클라이언트플랫폼으로개발하는웹개발자또는웹디자이너 Internet Explorer 기반의각종 Add-On 컨트롤을개발하는모듈개발자 그외 Internet Explorer 11 과관련되어시스템운영에영향을받을수있는시스템담당자 참조문서 Windows 8.1 Preview : http://windows.microsoft.com/en-us/windows-8/preview IE 11 Developer Preview for Windows 7 : http://windows.microsoft.com/en-us/internet-explorer/ie-11-worldwide-languages Internet Explorer 공식블로그 국문 http://blogs.msdn.com/b/ie_ko 영문 - http://blogs.msdn.com/ie/ Internet Explorer 11 Guide for Developers http://msdn.microsoft.com/library/ie/bg182636(v=vs.85).aspx 알림 이문서에삽입된이미지와내용은실제환경과다를수있으며, Windows 8.1 Preview 에서 제공하는 Internet Explorer 11 이후버전에대해서는변경될수있는사항을담고있습니다. Page 3
2. 주요개선사항 터치성능및사용자 UI 개선 Internet Explorer 11 은더욱편리한사용자경험을제공하기위해터치성능및 UI 를개선하였습니다. 최신 PC 와태블릿에최적화된브라우징경험을위해진보된터치와제스처에대한지원은웹의멀티터치경험을풍부하게하였습니다. UI 측면에서는탭의위치를주소창이있는브라우저하단으로이동시켜더욱편리하게사용할수있도록하였으며, 탭도원하는수만큼추가가가능합니다. 이밖에동기화된다른 Windows 8.1 디바이스에서도열려있는탭에그대로접속이가능하며, 편의에따라주소창을상시표시할수있는옵션도제공됩니다. 시작화면에사이트를타일형태로추가하는기능도향상되어추가된타일사이즈를여러크기로조절할수있습니다. 속도개선 웹페이지를분석하면서불필요한과정을제거하고, 전처리과정, 네트워크우선순위, 이전 네비게이션캐싱, 그래픽성능을활용하여웹사이트로딩속도를더욱개선하였습니다. Page 4
그래픽개선 WebGL 을지원함에따라 2D, 3D 그래픽을 API 를이용하여 JavaScript 로쉽게구현할수있습니다. High DPI 를지원하여높은해상도에알맞은글자크기를자동으로지정해가독성을높였습니다. W3C Canvas 2D Context Level 2 스펙을구현하여, msimagesmoothingenabled 속성을이용하여이미지를좀더선명하게표현할수있습니다. F12 개발자도구 개발자도구가상당부분변경되었습니다. 코드디버깅, 디스플레이문제해결, 성능향상, 메모리 분석, 웹페이지호환성유지를위해유용하게활용할수있습니다. HTML5 Encypted Media Extensions (EME) 와 Media Source Extensions(MSE) 지원 IE 11 에서 EME 와 MSE 를지원함에따라플러그인없이스트리밍동영상을변경할수있고보호 (DRM) 할수있습니다. 네트워크속도에따라화질을변경할수있습니다. Flash 지원 2013 년 3 월부터 IE 10 및 IE 11 에서 Flash 를기본으로제공하며, Windows 업데이트를통해서최신버전으로업데이트됩니다. 데스크톱 IE 에서는모든웹사이트에서 Flash 가지원되며, 모던 IE 에서는일부호환되지않는사이트들에한해 Flash 사용을제한합니다. Page 5
3. 호환성확보방안 User Agent String(UA String) 변경 웹표준에맞춰제작된웹문서들이모든웹브라우저에서동일하게보여지게하기위해 UA String 의리턴값이변경되었습니다. navigator.useragent( ) 로 IE 버전을얻으면아래와같은문자열이리턴됩니다. Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko 리턴값에보이는것처럼 msie 문자열이보여지지않고대신 rv 문자열과함께버전정보 (11) 가 보여집니다. 또한 like Gecko 문자열을추가하여다른웹브라우저와동일하게여기도록합니다. UA String 변경에따른 IE 버전인식문제 앞서소개한 UA String 변경에따라웹페이지에서영향을받게됩니다. 웹페이지또는웹서버에서 UA String 중에서 msie 와 IE 버전을나타내는숫자 (11) 로웹브라우저를인식하게되는데, 이값을리턴받지못하므로웹브라우저가 Internet Explorer 가아닌다른웹브라우저로인식하게됩니다. 증상으로는 지원하지않는브라우저입니다, unknown browser 등으로메시지창을띄우거나, IE 와연동되어동작하는 ActiveX 가설치되지않거나, 버튼을눌러도반응이없거나, 특정기능이실행되지않는다양한문제가발생합니다. Page 6
또한 navigator.appname( ) 의리턴값을사용하는경우에도리턴값이 Microsoft Internet Explorer 대신 Netscape 로얻게되어오작동을할수있습니다. UA String 변경에영향을받는실제스크립트또는코드예 실제웹사이트에서 useragent( ) 의리턴값중에서 msie 를참조하거나, appname( ) 의리턴값을 참조하여웹브라우저가 IE 인지아닌지를판단하는스크립트또는코드가많습니다. Page 7
IE 버전인식문제해결방안 장기적으로는웹페이지를웹표준에맞게작성하여모든브라우저에서동일하게보이고동작하도록수정합니다. 웹브라우저에서특정기능을지원하는지확인하고사용합니다. 불가피하게 Internet Explorer 에의존하는코드나 ActiveX 컨트롤이있는경우에는 User Agent String 리턴값에서 msie 대신 Trident 문자열을사용합니다. 또한 navigator.appname( ) 의리턴값에서 Microsoft Internet Explorer 사용하는방법을지양합니다. Page 8
향상된보호모드 (Enhanced Protected Mode) 향상된보호모드는 Internet Explorer 10 에서소개되었습니다. 향상된보호모드는공격자가브라우저의취약점을공격하여브라우저또는다른추가기능에침입했을경우에도사용자의데이터를안전하게보호합니다. Internet Explorer 11 에서향상된보호모드가기본값으로설정됨에따라 ActiveX 를비롯한모든 Add-on 들이영향을받게됩니다. ( 참고 ) Windows 7 용 IE 11 에서는향상된보호모드가적용되지않습니다. * 참고자료 : - http://blogs.msdn.com/b/ie_ko/archive/2012/03/14/enhanced-protected-mode.aspx - http://blogs.msdn.com/b/ieinternals/archive/2012/03/23/understanding-ie10-enhancedprotected-mode-network-security-addons-cookies-metro-desktop.aspx Page 9
Internet Explorer 11 에서향상된보호모드를기본값으로설정함에따라서 ActiveX 컨트롤들은 실행에제약을받습니다. [ 추가기능실행 (R)] 버튼을누르면 ActiveX 컨트롤을실행할수있으며 해당웹사이트에서는더이상동일한내용을묻지않습니다. 툴바나 BHO 들은 IE 의프레임과밀접한관련이있기때문에향상된보호모드에대비하지않는 것들은실행을허용하지않습니다. 추가정보 웹페이지에서자세히설명합니다. 향상된보호모드 (Enhanced Protected Mode) 해결방안 ActiveX 등의 Add-on 들이경고메시지없이실행되려면, 다음의조건을만족하도록수정되어야합니다. 1. COM 형태로등록합니다. HKCR\ CLSID\ {CLSID}\ Implemented Categories\ {59fb2056-d625-48d0-a944-1a85b5ab2640} 또는동적으로인스턴스를생성합니다. CATID cats[] = { CATID_AppContainerCompatible }; CoCreateInstanceEx(CLSID_StdComponentCategoriesMgr,...); ICatRegister::RegisterClassImplCategories(REFCLSID, ARRAYSIZE(cats), cats); BHO 의경우는경고메시지없이실행되려면, 다음의조건도만족하도록수정되어야합니다. 2. 32 비트뿐만아니라 64 비트로도개발되어야합니다. Page 10
추가된 API 와삭제된 API 들 웹표준에맞추어기존에지원하던 API 를지원하지않거나, 새로지원하는 API 가추가되었습니다. 기존 API 대체 API 또는추가 API 부연설명 XDomainRequest CORS for XHR Cross-Origin Resource Sharing for XMLHttpRequest proto 새로추가됨. element.dataset 새로추가됨. attachevent window.execscript window.doscroll addeventlistener eval window.scrollleft, window.scrolltop document.all document.filesize, document.getelementbyid XMLHttpRequest 사용 img.filesize script.onreadystatechange, script.onload script.readystate document.selection window.getselection document.createstylesheet document.createlement( style ) style.stylesheet windows.createpopup 바이너리관련데이터바인딩 style.sheet div 또는 iframe 과 zindex 사용 canvas, SVG, CSS3 Animation 등웹표준사용 WinJS 에서제공하는방법사용 Page 11
4. 테스트환경 Windows 8.1 Preview 는 Windows 사이트 (http://windows.microsoft.com/ko-kr/windows- 8/preview) 에서다운로드하실수있습니다. IE11 은 Windows 8.1 Preview 설치시자동설치됩니다. IE11 에서개발자도구 (F12) 를열어 User Agent String( 사용자에이전트문자열 ) 을하위버전또는 타사웹브라우저로바꾸고, 디버깅을할수있으며, 네트워크기능을사용하여네트워크트래픽을 유용하게조사할수도있습니다. Page 12
5. 테스트가이드 IE11 의호환성측면에서변경된사항이현재구현된사이트및 ActiveX 컨트롤에서어떤현상으로나타날수있는지에대한점검포인트입니다. 웹브라우저특히 Internet Explorer 와그버전에따라다르게동작하는페이지들은 User Agent String 의변화로인해서오동작할수있습니다. 향상된보호모드로인해서 ActiveX 컨트롤, BHO, 툴바등이영향을받습니다. 레이아웃 1. 웹페이지또는웹서버에서호환되는문서모드를미리지정해놓은경우웹페이지또는웹서버에서호환되는문서모드를미리지정해놓았다면, IE11 은지정된문서모드에맞도록레이아웃을보여줍니다. 웹페이지또는웹서버에서호환되는문서모드를미리지정해놓았는데도 IE11 에서제대로 보이지않는다면알려주시기바랍니다. 2. 웹페이지또는웹서버에서호환되는문서모드를미리지정해놓지않은경우웹페이지가 HTML5 나 CSS 3 등의최신표준에맞지않는다면렌더링이제대로되지않을수있습니다. 또한 JavaScript 엔진의미지원으로화면이제대로보이지않거나버튼이작동하지않을수도있습니다. < 해결책 > 개발자도구에서 [ 에뮬레이션 ] 영역에서 User Agent String( 사용자에이전트문자열 ) 을 [Internet Explorer 10] 이나그이하버전으로바꿔보시기바랍니다. Page 13
ActiveX Controls ActiveX 컨트롤의설치또는동작이차단되는유형에는다음과같은것이있습니다. 설치가안되는경우 설치는되었으나실행이안되는경우 실행도중에 IE 가비정상종료 (Crash) 되는경우웹페이지가 IE11 에대응하지않도록되어있는경우에는 ActiveX 컨트롤이제대로설치되지않을수있습니다. 예를들어, 여러개의 ActiveX 컨트롤버전중에서 IE 버전에맞는 ActiveX 컨트롤을선택하여설치하는경우에, IE11 에서보내주는 UA(User Agent) String 에서 MSIE 11 로검색하여처리하도록되어있다면, 웹브라우저를 Internet Explorer 로인식하지못해서 ActiveX 컨트롤을설치하지않습니다. Page 14
< 해결책 > ActiveX 컨트롤이설치되지않는다면, 개발자도구에서 [Emulation] 영역에서 User Agent String 을 [Internet Explorer 10] 이나그이하버전으로바꿔보시기바랍니다. 바꾼후에도설치되지않는다면 ActiveX 컨트롤내의코드가호환되지않는경우이므로해당웹사이트또는 ActiveX 컨트롤제작업체에게문의하시기바랍니다. ActiveX 컨트롤이설치는되었지만향상된보호모드로인하여실행되지않는다면, 향상된보호모드메시지에서보여주는 [ 추가기능실행 (R)] 버튼을클릭합니다. [ 추가기능실행 ] 버튼을클릭하여동작하면, ActiveX 컨트롤이향상된보호모드를인식하여실행되도록수정합니다. [ 추가기능실행 ] 버튼을클릭하여동작하지않는다면, ActiveX 컨트롤내의코드가호환되지않는경우이므로해당웹사이트또는 ActiveX 컨트롤제작업체에게문의하시기바랍니다. ActiveX 컨트롤실행도중에 IE 가비정상종료 (Crash) 되는경우도마찬가지로 ActiveX 컨트롤 내의코드가호환되지않는경우이므로 ActiveX 컨트롤제작업체에게문의하시기바랍니다. 툴바또는 BHO 향상된보호모드환경에서는툴바나 BHO 등이실행되지않습니다. 강제로툴바를실행하려면, [ 인터넷옵션 ] 에서 향상된보호모드사용 옵션을선택해제한후 Internet Explorer 를다시시작합니다. 툴바를향상된보호모드환경에서실행하려면, 향상된보호모드해결방안 을참고하여툴바를수정합니다. Page 15
테스트수행절차 IE11 호환성테스트를수행하기위한절차는아래와같습니다. Windows 8.1 & IE11 호환성센터 - 이메일문의처 : IE11@freemconsulting.co.kr - 지원전화 : 02-538-3092 해당문서의온라인버전은아래링크에서다운로드가능합니다. http://www.microsoft.com/ko-kr/ie11compatibility Page 16
6. 부록 : 호환성보기안내 호환성보기 란웹사이트가 IE 11 에서렌더링을제대로보여주지않거나, ActiveX 컨트롤이 IE 11 버전용이아닌다른버전용으로잘못설치되지않도록 Document mode( 문서모드 ) 또는 Browser mode( 브라우저모드 ) 를바꿔주는기능으로 IE8 에서처음소개되었습니다. 웹사이트가 IE11 에서렌더링이제대로되지않을경우, meta tag 를이용해서호환되는 IE 버전을명시해두면 IE11 이그버전에맞게렌더링합니다. 그러나 meta tag 가적용되지않았을경우렌더링이제대로보여주지않는웹사이트들은 Microsoft 에서관리하는목록 (CV list, Compatibility View List) 에추가하여관리하게됩니다. 즉, Document mode( 문서모드 ) 를 IE7 또는 IE8, IE9, IE10 중의하나로설정한것과같은효과입니다. 예 ) <domain docmode="emulateie10" uastring="10" versionvector="10">contoso.com</domain> [ 도구 ] [ 호환성보기설정 ] 을클릭하면다음과같은설정대화상자를보여줍니다. Page 17
Microsoft 호환성목록사용 항목이 CV list 에해당하며기본값으로사용합니다. 이옵션을선택 해제하면호환성보기에적용되지않게되어렌더링이제대로보여주지않게되거나 IE 버전을 잘못인식한 ActiveX 컨트롤이설치및실행됩니다. CVlist 는 [ 드라이브명 :]\Users\[ 사용자 _ 이름 ]\AppData\Local\Microsoft\Internet Explorer\IECompatData\iecompatdata.xml 에서확인하실수있습니다. 예 ) C:\Users\joonglee\AppData\Local\Microsoft\Internet Explorer\IECompatData\iecompatdata.xml 웹사이트에서 IE11 버전에맞게수정하신후에알려주시면 CV list 에서제외되도록처리해드리겠습니다. ( 참고 ) 웹사이트에서지정한 meta tag 가호환성보기리스트 (CV list) 보다우선합니다. 즉, 웹페이지의 <head> 영역에 IE8 모드로호환되도록지정해두었다면, CV list에서 IE10 모드에호환되도록지정한것보다우선하여, IE8 모드로동작하게됩니다. <meta http-equiv="x-ua-compatible" content="ie=8"/> <domain docmode="emulateie10" uastring="10" versionvector="10">contoso.com</domain> 호환성보기리스트와비슷한기능으로주소창에서사용자가임의로웹페이지의문서모드를바꿀 수있는 호환성보기버튼 이있습니다만, IE11 에서는 호환성보기 버튼이제공되지않습니다. 호환성보기리스트에포함되지않은사이트를사용자가직접추가할수있습니다. [ 도구 ] [ 호환성보기설정 ] 을클릭하여, 대화상자에서 이웹사이트추가 란에도메인을직접입력하고 [ 추가 ] 버튼을클릭하면됩니다. 이때에는문서모드와 UA(User Agent) 스트링을별도로지정할수없고, IE7 모드로일괄적용됩니다. Page 18