웹 개발자를 위한 새로운 Windows UI에서 검색

이 문서에서는 Windows 8의 페이지 기능이 새로운 Windows UI의 Internet Explorer와 익숙한 데스크톱용 Internet Explorer에서 어떤 차이가 있는지에 대해 설명합니다. 또한 터치 우선 사이트를 빌드하는 모범 사례에 대해 설명합니다. 이러한 권장 사항은 Internet Explorer 10 이상의 두 검색 환경에 모두 적용됩니다.

Windows 8은 Internet Explorer 10에서 두 가지 검색 환경, 즉 익숙한 데스크톱용 검색 환경과 새 Windows 8 검색 환경을 제공합니다.

두 검색 환경은 네트워크 스택 및 캐시에서 렌더링 엔진에 이르기까지 동일한 기본 구성 요소를 사용하며, 둘 다 동일한 사용자 에이전트 문자열을 보내고 동일한 DOM(문서 개체 모델)을 사용합니다. 개발자는 두 환경을 Internet Explorer 10이라는 하나의 브라우저로 처리합니다.

ActiveX 및 다른 이진 확장성

Windows 8 검색 환경은 Microsoft ActiveX 또는 다른 이진 확장성을 지원하지 않습니다. 모든 고객에 대해 사이트가 작동하게 하려면 플러그 인을 사용하지 않는 환경을 제공하세요. 이렇게 하면 Windows 8 검색 환경을 사용하는지, ActiveX 필터링 또는 브라우저 추가 기능으로 플러그 인을 사용하지 않도록 설정하는지, 플러그 인을 지원하지 않는 장치(예: 전화 또는 태블릿)에서 찾는지에 관계없이 플러그 인 없이 검색하는 모든 고객에게 도움이 됩니다.

적절한 대체 패턴

사이트에서 최상의 모범 사례에 따라 표준 기반 기능을 먼저 테스트하고 필요한 경우에만 플러그 인으로 대체하면 더 나은 고객 환경을 제공할 수 있습니다. 다음 예제에서는 HTML5 동영상을 먼저 검색 및 사용한 다음 video 요소를 사용할 수 없는 경우 플러그 인을 사용하는 방법을 보여 줍니다.


<video id="video1" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">

    <object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">

        <p>Please update your browser or install Flash</p>

    </object>
</video>


코덱, 캡션 등 HTML5 오디오 및 동영상의 브라우저 간 지원에 대한 자세한 내용은 실용적인 브라우저 간 HTML5 오디오 및 동영상을 참조하세요. 이미 많은 사이트가 플러그 인 없이 광고를 제공할 때 이와 동등한 대체 동작을 수행하여 이 방법이 실용적이고 확장 가능한 솔루션임을 보여 줍니다.

사이트에서 플러그 인을 통해 뛰어난 환경을 제공하는 경우 다음 대체 동작을 사용합니다.


<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">

    <video id="video1" width="640" height="360" controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">

        <p>Please update your browser or install Flash</p>

    </video>
</object>


이 패턴은 플러그 인이 있는 사용자는 플러그 인을 사용하고, 플러그 인이 없는 사용자는 기본 플랫폼 환경을 사용하도록 합니다. 고객이 플러그 인이나 기본 지원 없이 브라우저를 사용하는 경우 플러그 인을 설치할 수 있습니다.

단기 완화 방법

사이트를 업데이트하려면 시간이 걸릴 수 있습니다. 일시적으로 데스크톱용 Internet Explorer 10에서 사이트를 보도록 사용자에게 제안해야 하는 경우 "META" 태그나 "HTTP" 헤더를 사용하여 사이트를 업데이트할 수 있으며, 그러면 Windows Internet Explorer에서 사용자에게 알리고 데스크톱으로 전환하는 옵션을 제공합니다.


HTTP Header
X-UA-Compatible: requiresActiveX=true
META TAG
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>


참고  사용자가 데스크톱용 Internet Explorer에서도 기존 ActiveX 컨트롤을 실행하지 않는 전화 등의 장치를 사용 중일 수도 있습니다. 이러한 장치 중 일부는 화면이 작고, ActiveX 컨트롤이나 데스크톱 검색 환경에서 작동하지 않을 수도 있는 터치 입력만 허용합니다. 데스크톱 환경을 사용하도록 강제하는 옵션은 대체 콘텐츠가 없는 경우 최후의 수단으로만 사용해야 합니다.

새로운 Windows UI 검색 환경 문제 디버그

두 검색 환경에서 사이트 동작 간의 유일한 차이점은 플러그 인 지원입니다. F12 개발자 도구를 사용하여 사이트 문제를 디버그하기 위해 데스크톱의 플러그 인 없는 환경을 에뮬레이트하려는 경우 먼저 ActiveX 필터링을 사용하도록 설정합니다( "도구->안전->ActiveX 필터링").

사이트 작동 방식에 다른 차이점이 있는 경우 이 문제를 Connect에서 보고하세요.

터치 우선 사이트 빌드

Windows 8의 Internet Explorer 10은 사용자가 터치, 펜, 마우스 등 다양한 입력 장치 중에서 선택할 수 있는 최초의 브라우저입니다. Internet Explorer 10에서 사이트를 방문하는 고객은 이러한 입력 장치를 하나 이상 사용할 수 있습니다. Windows 8 UI는 뛰어난 터치 환경을 제공하지만 마우스와 키보드 사용을 선호하는 고객도 있고, 익숙한 데스크톱 환경에서 터치를 사용하려는 고객도 있습니다.

사용자가 어떤 입력 방법을 사용할 것인지 가정하지 않는 것이 중요합니다. 대신, 기능 검색을 사용하여 장치에서 지원되는 방법을 확인합니다.

터치식 입력 검색

다음 예제는 앱이 터치 우선 환경을 제공할 수 있는지 여부를 결정하는 데 도움이 됩니다.


if (window.navigator.maxTouchPoints) {
        // user has touch hardware
    }
    else {
        // user does not have touch hardware
    }


게임에 최소 3개 이상의 터치 지점이 필요한 경우 등과 같이 사용 가능한 터치 지점 수에 관심이 있는 경우 검색 코드를 다음과 같이 변경합니다.


    if (window.navigator.maxTouchPoints >= 3) {
        // user has at least three touch points 
    }
    else if (window.navigator.maxTouchPoints) {
        // user has only one or two touch points
    }
    else {
        // user does not have touch hardware
    }


관련 항목

플러그 인이 없는 검색에 대한 준비

 

 

표시:
© 2014 Microsoft