Xbox One용 Internet Explorer 개발자 가이드

이 항목에서는 Xbox One용 Internet Explorer에 맞게 사이트를 최적화하려는 웹 개발자를 위한 지침을 제공합니다. 이 항목은 디자인 권장 사항을 포함하며 Internet Explorer 10과 Xbox One용 Internet Explorer의 몇 가지 기술적 차이점에 대해 설명합니다.

이 항목의 내용은 다음과 같습니다.

개요

Xbox One용 Internet Explorer는 사용자가 화면으로부터 10피트 떨어져 있는 텔레비전에서 인터넷을 쉽게 검색할 수 있는 검색 환경입니다. 이 Internet Explorer는 Internet Explorer 10 플랫폼을 기반으로 하며 Windows용 Internet Explorer 10과 동일한 많은 기능을 포함하고 있습니다.

Windows용 Internet Explorer 10에서 잘 작동하는 대부분의 웹 사이트는 수정하지 않고 Xbox용 Internet Explorer에서도 잘 작동합니다.

이 문서는 Xbox One용 Internet Explorer에 맞게 사이트를 최적화하려는 개발자를 위한 것입니다. 이 항목은 디자인 권장 사항을 포함하며 Internet Explorer 10과 Xbox One용 Internet Explorer의 몇 가지 기술적 차이점에 대해 설명합니다.

Xbox One용 Internet Explorer의 새로운 기능

Xbox One용 Internet Explorer는 이 문서에서 설명하는 다양한 방법으로 Xbox 360용 Internet Explorer를 개선합니다. 다음은 새로운 기능을 간략하게 요약한 것입니다.

  • 음성 및 제스처 검색
  • 탭 검색
  • 새 주소 표시줄 디자인
  • 자동 세션 저장 및 복원
  • 향상된 성능
  • 새로운 HTML5 표준 지원

주소 표시줄

주소 표시줄은 Xbox 360의 웹 허브 기능을 대체하며, 웹 사이트 검색을 시작하는 기본 위치입니다. 사용자는 즐겨찾기에서 선택하거나, 최근에 방문한 사이트로 이동하거나, 주소 표시줄에 URL을 입력할 수 있습니다. 사용자는 컨트롤러에서 보기 단추 Xbox One 컨트롤러의 보기 단추를 누르거나 "Xbox Select...Show address bar"라고 말하여 언제든지 주소 표시줄을 시작할 수 있습니다. 제스처를 사용하여 주소 표시줄을 표시하기 위해 사용자는 주소 표시줄을 잡고 화면 아래쪽에서 위로 당길 수 있습니다.

부동 커서 스크린샷

입력 방법

부동 커서

Xbox One용 Internet Explorer에서는 부동 커서 모델(다음 이미지의 그림 참조)이 사용됩니다. 커서를 사용하여 사용자는 동일한 방식으로 브라우저의 모든 부분을 원활하게 조작할 수 있습니다. 즉, 사용자는 웹 페이지 링크, 주소 표시줄, 설정 또는 정보 메시지를 가리키고 클릭할 수 있습니다. 커서를 화면 가장자리로 이동하면 웹 페이지가 자동으로 스크롤되거나 이동되어 왼쪽 엄지스틱과 'A' 단추만 사용하여 웹 페이지를 쉽게 검색할 수 있습니다.

Xbox One 메뉴를 가리키는 부동 커서 이미지

상대 포커스

상대 포커스 모델은 주소 표시줄 같은 Internet Explorer UI 요소를 조작하는 데 사용됩니다. 부동 커서 모델과 달리 커서 또는 포인터가 없습니다. 대신, 포커스를 가진 요소가 항상 있으며 사용자가 위, 아래, 왼쪽 또는 오른쪽으로 이동하여 요소를 변경할 수 있습니다.

컨트롤러 및 Xbox One

사용자는 Xbox One 컨트롤러를 사용하여 모든 브라우저 기능을 제어할 수 있습니다.Xbox One 컨트롤러 이미지

Xbot의 Internet Explorer에서는 Gamepad API가 지원되므로 웹 사이트에서 컨트롤러 이벤트를 중심으로 대화형 작업을 빌드할 수 있습니다. DPad 및 A 단추의 클릭 이벤트와 v-key에 의존하지 않고 웹 사이트에서 Xbox 단추를 제외한 모든 단추 이벤트를 수신 대기하여 컨트롤러 입력에 따라 고유한 환경을 빌드할 수 있습니다. 메뉴 단추를 통해 게임 패드와 검색 컨트롤 사이를 전환할 수 있습니다.

IE의 게임 패드는 최대 8개의 컨트롤러를 지원하고, 첫 번째 컨트롤러는 자동으로 식별되며, 후속 컨트롤러는 사용자가 해당 단추를 누르면 식별됩니다. 각 컨트롤러는 사용자가 브라우저를 조작하기 위해 메뉴 또는 보기 단추를 누르면 연결이 끊깁니다. 웹 사이트에서 게임 패드 입력이 가능하도록 디자인된 경우 표준 검색 제어로 전환할 필요가 없도록 게임 패드를 통해 페이지의 모든 요소에 액세스할 수 있게 하세요.

Xbox SmartGlass

Xbox SmartGlass는 스마트폰이나 태블릿(Windows Phone, Windows 8, iOS, Android)에서 실행하여 Xbox One에 연결할 수 있는 소프트웨어입니다. Xbox One용 Internet Explorer를 사용하는 동안 Xbox SmartGlass를 두 번째 화면 및 컨트롤러로 사용할 수 있습니다. 터치 사용 장치를 사용할 경우 트랙 패드와 같은 장치를 사용하여 커서를 이동하고 장치에서 터치 키보드로 입력할 수 있습니다.

음성

Xbox One용 Internet Explorer에는 음성만 사용하여 쉽게 웹을 검색할 수 있는 새로운 음성 기술이 있습니다. 사용자는 음성 명령을 통해 웹 사이트를 검색하고, 사용자 인터페이스를 제어하고, 링크를 클릭할 수 있습니다.

지원되는 음성 명령

전역 명령

"Xbox"

활성 듣기를 켭니다.

"Select"

음성 포커스를 전역 컨텍스트에서 앱 컨텍스트로 전환합니다. 바로 가기: "Xbox 선택"

"Play"/"Pause"

웹 페이지에서 오디오 또는 동영상 요소를 제어합니다.

"Show full screen video"

전체 화면 모드에서 동영상 요소를 표시합니다.

 

주소 표시줄 명령

"Show Address bar"

주소 표시줄을 표시합니다.

"Hide Address bar"

주소 표시줄을 숨깁니다.

"Go Back"

뒤로 스택의 다음 항목으로 이동합니다.

"Go Forward"

앞으로 스택의 다음 항목으로 이동합니다.

"Add Favorite"

즐겨찾기에 웹 페이지를 추가합니다.

"Remove Favorite"

즐겨찾기에서 웹 페이지를 제거합니다.

"Settings"

웹 허브

"Favorites"

즐겨찾기 목록을 엽니다.

"Recent"

최신 목록을 엽니다.

"Featured"

추천 목록을 엽니다.

"Browse to <website>"(동적)

브라우저에서 웹 사이트를 검색합니다. 사이트 이름은 인기 있는 웹 사이트 이름이거나 즐겨찾기 또는 추천 웹 사이트일 수 있습니다.

"Help"

도움말 도우미 앱을 시작합니다.

 

웹 페이지 수준

"Browse to <website>"(동적)

브라우저에서 웹 사이트를 검색합니다. 사이트 이름은 인기 있는 웹 사이트 이름이거나 즐겨찾기 또는 추천 웹 사이트일 수 있습니다.

"Click on <link>"(동적)

<link>를 클릭합니다.

"Go Back"

뒤로 스택의 다음 항목으로 이동합니다.

"Go Forward"

앞으로 스택의 다음 항목으로 이동합니다.

"Show Address bar"

마지막으로 본 상태로 주소 표시줄을 엽니다.

"Favorites"

즐겨찾기 목록으로 주소 표시줄을 엽니다.

"Add Favorite"

즐겨찾기에 웹 페이지를 추가합니다.

"Remove Favorite"

즐겨찾기에서 웹 페이지를 제거합니다.

"Show menu"

상황에 맞는 메뉴를 엽니다.

"Play"

화면 동영상을 재생합니다.

"Pause"

화면 동영상을 일시 중지합니다.

"Full Screen"

화면 동영상을 전체 화면으로 엽니다.

 

제스처

사용자는 다른 Xbox One 앱과 동일한 자연스러운 제스처를 사용하여 웹을 검색할 수 있습니다. 제스처 사용을 시작하기 위해 사용자가 손을 들기만 하면 제스처 커서가 표시됩니다. 페이지를 이동하고 스크롤하기 위해 사용자는 손으로 잡는 것처럼 주먹을 쥡니다. 확대/축소하기 위해 사용자는 페이지를 잡고 사용자 쪽으로 당겨 확대하거나 반대쪽으로 당겨 축소할 수 있습니다. 링크를 누르기 위해 사용자는 손을 펴서 링크를 가리키고 손을 화면 쪽으로 이동한 다음 반대쪽으로 이동하여 "누릅니다".

10피트 디자인 고려 사항

화면으로부터의 거리

10피트(또는 10인치) 디자인은 거실에 맞게 최적화된 환경에 적용됩니다. 대부분의 Xbox One 사용자는 Xbox를 텔레비전에 연결하고 화면으로부터 약 10피트 떨어져 앉습니다. 이 거리로 인해 기존 웹 페이지의 기본적인 작업이 더 어려워질 수 있습니다. 예를 들어 글꼴이 작아 읽기가 힘들 수 있으며 가리키기 메뉴 및 링크가 작아 클릭하기 어려울 수 있습니다.

TV에 맞게 웹 페이지를 디자인하는 경우 보이는 영역에 전체적으로 더 적은 정보가 표시되는 것이 좋으며 해당 영역에 표시되는 내용은 제한된 작업에 중점을 두어야 합니다(원하는 작업을 자동으로 수행하거나 기본적으로 작업을 선택하는 경우도 고려). 콘텐츠를 단순하고 간결하며 아래로 스크롤하지 않아도 화면에서 완전히 볼 수 있도록 유지합니다.

다음은 고려해야 할 몇 가지 다른 지침입니다.

  • 보는 거리를 고려하여 사이트의 글꼴 및 그래픽을 더 크게 만듭니다. 사람들은 같은 크기의 컴퓨터 모니터보다 TV에서 상대적으로 더 멀리 앉아 있습니다.
  • TV에서 복잡하게 나타나지 않으려면 페이지에 있는 요소 사이의 빈 공간을 더 크게 만듭니다. 일반적으로 이를 공백(또는 안쪽 여백)이라고 하며 웹 콘텐츠를 구분하고 검색하기 쉽게 만드는 기본적인 측면입니다.

음성을 위한 디자인

Xbox One용 Internet Explorer에서는 음성을 사용한 웹 검색 지원이 새로 추가되었습니다. 사용자는 음성으로 "browse to"라고 말하여 인기 있는 웹 사이트를 검색하고, "click on"이라고 말하여 페이지의 링크를 클릭할 수 있습니다.

일반적으로 개발자는 음성으로 액세스할 수 있도록 웹 페이지를 업데이트할 필요가 없습니다. Internet Explorer에서 사용자 웹 사이트를 검색하면 웹 페이지의 링크, 단추 및 기타 대화형 요소가 자동으로 검사됩니다. 이러한 요소의 텍스트를 가져와서 음성 엔진으로 전송되는 문법이라는 용어 목록을 작성합니다. 예를 들어 다음과 같은 HTML 조각을 고려해 보세요.

<a href="http://www.microsoft.com"> Microsoft </a>

사용자가 음성을 통해 링크를 "클릭"할 수 있도록 Internet Explorer에서 "Click on Microsoft" 구를 자동으로 생성합니다.

다음을 수행하여 음성이 제대로 작동하는지 확인할 수 있습니다.

  • 래스터화된 텍스트(이미지의 텍스트)를 사용하지 마세요. 가능하면 이미지에 텍스트를 렌더링하지 마세요. 대신, CSS와 함께 표준 HTML 요소를 사용하여 원하는 시각적 텍스트 스타일을 얻습니다.
  • 링크 텍스트를 복제하지 마세요.

    일부 웹 페이지에는 "more…" 또는 "read article" 같은 동일한 텍스트가 포함된 많은 링크가 있습니다. 사용자가 페이지에서 여러 번 반복되는 링크의 텍스트를 말하는 경우 사용자가 원하는 링크를 선택할 수 있도록 각 링크에 번호 레이블을 추가하는 명확성 환경이 브라우저에서 시작되어야 합니다. 링크 내의 텍스트를 반복해서 사용하지 마세요.

  • 단일 <video> 요소를 사용하세요.

    사용자가 "Xbox Play" 또는 "Xbox Pause"를 말하여 동영상 재생을 제어할 수 있도록 Internet Explorer에서 웹 페이지의 첫 번째 <video> 요소를 자동으로 검사하고 Xbox Media 컨트롤을 이 요소에 연결합니다. 여러 동영상 요소를 사용하는 경우 사용자가 재생하려는 요소가 실제로 재생되는 동영상이 아닐 수도 있습니다.

제스처를 위한 디자인

또한 Xbox One용 Internet Explorer에서는 제스처를 사용한 웹 검색 지원이 새로 추가되었습니다. 제스처를 사용하여 웹 페이지를 이동 및 스크롤하고, 웹 페이지 요소를 누르고, 브라우저 UI를 조작할 수 있습니다.

터치용으로 디자인된 사이트는 일반적으로 제스처로 잘 작동합니다. 적중 대상이 크고 정보 밀도가 작으며 조작이 간단할수록 사용자가 쉽게 제스처를 사용하여 사이트를 검색할 수 있습니다.

Xbox One용 Internet Explorer에는 제스처용으로 디자인되지 않은 웹 사이트를 사용자가 쉽게 검색할 수 있도록 하는 두 가지 기능이 있습니다.

인력

Internet Explorer는 링크 및 단추와 같은 "누를 수 있는" 페이지 요소에 자동으로 "인력"을 적용합니다. 인력은 이러한 요소에 "커서 중력"을 적용하여 사용자가 쉽게 누를 수 있게 합니다.

일반적으로 클릭 가능한 요소에는 <a> 및 <button>과 같은 표준 조작 태그를 사용하는 것이 좋습니다. onclick 이벤트 처리기에 <div>와 같은 비조작 태그를 사용하지 마세요. 이벤트 처리기를 사용해도 되지만 <button> 및 <a>와 같이 기본적으로 대화형인 요소 유형에만 사용하세요.

자동 확대/축소

터치와 마찬가지로 제스처는 키보드와 마우스를 사용하는 것보다 덜 정확합니다. 사용자의 손은 약 140x140px인 제스처 커서로 표시됩니다. 단추와 링크가 좁은 간격으로 포함된 일부 웹 사이트에서는 사용자의 손이 동시에 여러 링크 위에 놓일 수 있습니다. 이 경우 Internet Explorer에서 자동으로 확대/축소 커서를 표시합니다. 이 커서는 사용자가 누를 경우 커서 아래의 임의 링크를 클릭하는 대신 자동 확대/축소가 발생함을 나타냅니다.

사용자가 누를 경우 클릭 대신 자동 확대/축소가 발생함을 나타내는 확대/축소 커서 이미지

이전 그림에서 볼 수 있듯이, 사용자가 현재 커서 위치를 누르면 한 링크나 다른 링크를 쉽게 누를 수 있도록 Internet Explorer가 자동으로 확대됩니다.

커서를 누른 후 확대된 링크 이미지

자동 확대/축소 기능의 과도한 사용을 피하려면 링크와 단추의 간격이 충분하도록 웹 사이트를 디자인하세요.

콘텐츠 및 기능

우수한 10인치 웹 환경은 만들기 및 생산성 시나리오와 반대로 콘텐츠 사용에 맞게 최적화되었습니다. 예를 들어 사용자가 생성한 동영상 웹 사이트는 동영상 검색, 재생, 업로드, 편집 및 태깅 기능을 지원할 수 있습니다. 10인치 버전은 검색 및 재생에 맞게 특별히 최적화될 수 있으며 편집 기능을 제공하지 않을 수 있습니다. 기능 다운로드 및 업로드와 같이 TV 환경에 적합하지 않은 링크 및 기능을 제공합니다.

화면에서 탐색 세로 막대를 볼 수 있도록 유지하고 화면 높이(~650px 미만 높이)에 맞추세요. 이를 위해 탐색 요소의 항목 수를 줄여야 할 수도 있습니다. CSS를 통해 사이트를 최적화하는 경우 범주를 div 태그에 배치하고 display:none을 사용하여 제거된 범주를 숨길 수 있습니다.

조작 – 간단하게 유지

사용자는 컨트롤러, Xbox SmartGlass, 음성 및 제스처를 비롯한 다양한 입력 장치를 사용하여 Internet Explorer를 조작합니다. 마우스 및 키보드를 사용하면 잘 작동하는 일부 조작이 터치나 컨트롤러를 사용하면 수행하기가 더 어려울 수 있습니다. 끌어서 놓기, 가리키기 및 제한된 조작은 사용하지 마세요.

탐색 및 링크

데스크톱 검색과 비교할 때 거실 환경의 두 가지 주요 차이점은 사용자가 더 멀리 떨어져 있다는 점과 컨트롤러나 손가락이 마우스보다 정확하지 않은 입력 장치라는 점입니다. 대상을 더 크게 만들 뿐만 아니라 TV에 적합하지 않거나 거의 액세스하지 않는 링크를 제거하여 탐색을 접히는 부분 위에 유지해야 할 수도 있습니다.

탐색 인터페이스를 디자인할 때 선택을 강조하고 더 크게 만들어 사용자가 링크 및 기타 누르기 대상을 선택하기 쉽게 만들고 보기 쉽게 만듭니다.

  • 링크 및 단추에 가리키기 상태를 추가하여 포인터가 대상을 누를 때 강조 표시합니다.
  • 확장된 대상 영역에 충분한 안쪽 여백을 사용하여 각 클릭 대상(링크, 단추 등)을 크게 만듭니다.
  • 팝업 요소를 사용하지 마세요. 팝업 요소는 방해가 되고 닫기가 어려울 수 있습니다.

다음 이미지에는 두 가지 세로 탐색 모음 예가 있습니다. 첫 번째 예는 마우스 조작을 위해 디자인되었습니다. 터치 및 컨트롤러 사용자에게는 링크 간격이 너무 가깝습니다.

마우스 조작용으로 디자인된 페이지를 보여 주는 다이어그램

터치, 제스처 및 컨트롤러 사용자 입장에서 이러한 링크를 탐색하려면 너무 많은 손놀림이 필요합니다. 잘못된 링크를 클릭하면 문제가 될 수 있습니다.

다음 두 번째 이미지에서는 링크 간격이 더 멀리 떨어지도록 탐색 모음이 수정되고 사용자가 누르기 대상 영역을 더 명확하게 볼 수 있도록 구분선이 추가되었습니다.

간격이 더 멀어진 링크와 구분선이 있는 탐색 모음 다이어그램

레이아웃

크기

Xbox용 Internet Explorer에서는 레이아웃 기반 확대/축소와 광학 확대/축소를 함께 사용하여 TV에 최적화된 사이트를 제공합니다. 웹 사이트가 "너비에 맞게" 자동으로 확대/축소되어 텍스트가 더 커지고 멀리에서 볼 수 있습니다. TV 가로 세로 비율(16:9 또는 4:3), 해상도(720p, 1080p) 및 "안전한 영역"(사용자가 켜거나 끌 수 있는 TV 화면 가장자리 주위의 버퍼 영역)의 크기를 포함하여 이러한 자동 확대/축소 수준을 결정하는 여러 가지 요소가 있습니다.

Microsoft Xbox용 Internet Explorer는 하드웨어에 따라 확대/축소 수준을 자동으로 최적화하므로 다음과 같은 몇 가지 요소를 알아야 합니다.

  • 1024px 너비에 맞게 디자인된 웹 사이트가 일반적으로 제대로 표시됩니다. Internet Explorer는 레이아웃 확대/축소를 사용하여 웹 페이지를 자동으로 너비에 맞춥니다.
    • 너비가 약 1200px 이상인 웹 사이트에서는 가로 스크롤이 발생합니다.
  • 많은 TV가 와이드스크린(16:9)입니다. 세로 스크롤을 요구하는 대신 화면의 너비를 이용하는 레이아웃을 사용해 보세요.
  • Xbox용 Internet Explorer는 여러 개의 창을 지원하지 않으므로 팝업 창을 사용하지 마세요.

고정 위치 요소

고정 위치 요소(CSS(CSS 스타일시트) position: fixed)는 원활한 이동 및 스크롤에 방해가 될 수 있습니다. 이런 방식으로 요소를 배치하지 마세요.

레이아웃 기법

Xbox One용 Internet Explorer는 유연한 상자 및 그리드 레이아웃을 포함하여 Windows용 Internet Explorer 10과 동일한 CSS3 기능을 대부분 지원합니다.

실습 데모는 다음을 참조하세요.

텍스트 고려 사항

10인치 떨어진 곳에서 읽을 수 있을 만큼 크게 설정하고 눈의 피로를 덜어주는 색을 사용하여 텍스트의 가독성을 향상시킬 수 있습니다.

  • 12pt보다 작은 텍스트를 사용하지 마세요.
  • 많은 텔레비전은 컴퓨터 모니터보다 밝기 수준이 더 높습니다. 어두운 배경의 밝은색 텍스트는 눈의 피로를 덜 수 있습니다.

색 지침

  • 배경색으로 흰색(rgb(255, 255, 255))을 사용하지 마세요. 대신 rgb(200, 200, 200)를 사용하세요.
  • 최신 HDTV뿐만 아니라 저화질 TV에서 웹 사이트를 테스트하세요.

4가지 화면에 대한 접근 방식: TV, PC, 태블릿, 모바일

최대 고객을 확보하기 위해 대부분의 웹 사이트가 데스크톱/노트북 PC, 태블릿 및 모바일 장치를 비롯한 여러 가지 장치 폼 팩터용으로 디자인되고 테스트되었습니다.

여러 가지 장치별 웹 페이지

일부 웹 사이트에는 장치별 환경(예: 모바일 사이트)이 있습니다. 이러한 경우는 일부 시나리오에 적합할 수 있습니다. 예를 들어 모바일 및 데스크톱 환경과 다른 Xbox용 환경을 특별히 디자인하는 경우 별도의 독립 실행형 환경을 구축하는 것이 적합할 수 있습니다. 그러나 여러 가지 독립된 버전의 사이트를 유지 관리하려면 비용이 많이 들 수 있습니다.

이 작업을 수행하는 일반적인 방법은 클라이언트 또는 서버에서 사용자 에이전트 문자열을 검색하고 사용자를 장치별 웹 페이지로 리디렉션하는 것입니다. Xbox를 검색하려면 사용자 에이전트 문자열에서 "Xbox" 토큰을 검색합니다.

단일 웹 페이지

웹 검색 폼 팩터 및 입력 방법이 널리 사용되는 경우 대부분의 웹 사이트에 대해 장치 범위 전체에서 제대로 작동하는 단일 웹 페이지를 사용하는 것이 좋습니다. 다음은 단일 페이지를 사용하여 여러 장치를 대상으로 지정할 때 고려할 몇 가지 사항입니다.

  • 마우스, 키보드, 터치 및 컨트롤러용 디자인
  • 1024px 너비용 디자인
  • 적응 디자인 사용
    • CSS 미디어 쿼리 또는 JavaScript를 사용하여 페이지를 로드하는 장치의 속성에 따라 페이지 레이아웃을 변경할 수 있습니다.
      • 모바일 장치의 경우 이미지 품질을 낮춰 대역폭을 저장하고 성능을 향상시키는 방법 고려
      • 좁은 장치에서 가로 스크롤을 최소화하여 가독성 향상
  • 플러그 인 사용 금지
    • HTML5 오디오 및 동영상(H.264/AAC/MP3) 사용
  • 팝업 창 사용 금지

기술 고려 사항

Internet Explorer 10의 새로운 기능

다음은 지원되는 몇 가지 HTML5 기능 목록입니다.

CSS

DOM

HTML5

IndexedDB

JavaScript

SVG

성능

Xbox용 Windows Internet Explorer에는 다음에 표시된 변경 내용을 제외하고 Windows용 Internet Explorer 10과 동일한 HTML5 기능이 있습니다.

Xbox용 Windows Internet Explorer 및 Internet Explorer 10 간의 HTML5 기능 차이점

W3C 지리적 위치

W3C의 지리적 위치는 Xbox용 Internet Explorer에 포함되지 않습니다. navigator.geolocation이 정의되어 있지 않습니다.

prompt() 메서드

JavaScript prompt() 메서드는 지원되지 않습니다.

JavaScript로 복사/붙여넣기

선택, 복사 및 붙여넣기는 지원되지 않습니다.

파일 API

HTML5 File API는 지원되지 않습니다.

 

Xbox용 Internet Explorer에서 지원되는 개발자 기능의 전체 목록은 다음을 참조하세요.

사용자 에이전트 헤더 문자열/헤더

사용자 에이전트 문자열은 JavaScript에서 사용할 수 있는, 브라우저 또는 사용자 에이전트를 식별하는 문자열 및 HTTP 헤더입니다. Xbox One용 Internet Explorer는 구성 방식에 따라 여러 개의 사용자 에이전트 문자열을 보낼 수 있습니다.

사용자 에이전트 문자열의 적절한 사용

우수한 웹 사이트는 다양한 브라우저 및 폼 팩터에서 잘 작동합니다. 여러 브라우저에서 작동하는 코드를 작성하는 가장 좋은 방법은 사용자 에이전트 검색이 아니라 기능 및 동작 검색을 수행하는 것입니다. 예를 들어 기능이 사용자 에이전트 문자열을 기준으로만 존재한다고 가정하지 마세요. 기능 및 동작 검색에 대한 자세한 내용은 동일한 태그: 브라우저 간 코드 작성(영문)을 참조하세요.

예를 들어 TV 형식 환경과 같이 Xbox용 Internet Explorer에 별도의 웹 사이트를 구축하려는 경우 사용자 에이전트 문자열에서 "Xbox" 토큰을 확인하면 TV 형식 웹 사이트로 리디렉션하는 적절한 방법이 될 수 있습니다.

Xbox 사용자 에이전트 문자열 토큰

각 사용자 에이전트 문자열에는 다음 두 개의 Xbox 관련 토큰이 있습니다.

Xbox

  • Xbox 토큰은 모든 버전(Xbox 360용 Internet Explorer 및 Xbox One용 Internet Explorer)에 포함되어 있습니다. 이후 버전의 Xbox용 Internet Explorer에도 포함됩니다.

Xbox One

  • Xbox One 토큰을 사용하여 Xbox 360과 Xbox One을 구분할 수 있습니다.

예를 들어 TV 형식 환경과 같이 Xbox용 Internet Explorer에 별도의 웹 사이트를 구축하려는 경우 사용자 에이전트 문자열에서 "Xbox" 토큰을 확인하면 TV 형식 웹 사이트로 리디렉션하는 적절한 방법이 될 수 있습니다.

코드 샘플: Xbox 사용자 에이전트 문자열 검색


var XBox360 = false;
var XBoxOne = false;

if (/Xbox/.test(navigator.userAgent)) {
	if (/Xbox One/.test(navigator.userAgent)) {
		XBoxOne = true;
	}
	else {
		XBox = true;
	}
}


호환성 보기

호환성 보기는 이전 버전의 웹 표준에 맞게 작성된 웹 페이지가 제대로 작동하도록 하는 Internet Explorer의 모드입니다. Xbox One용 Internet Explorer에서 호환성 보기는 웹 사이트가 Microsoft에서 업데이트하는 사이트 목록에 포함된 경우에만 사용할 수 있습니다. 호환성 보기 목록에 대한 자세한 내용은 호환성 보기 목록 이해를 참조하세요. 웹 사이트에서 호환성 보기를 사용하면 다른 사용자 에이전트 문자열이 웹 사이트로 전송됩니다.

y 기본값, Xbox One용 Internet Explorer에서 Windows용 Internet Explorer 10과 유사한 사용자 에이전트 문자열을 보냅니다. 사용자가 모바일 버전의 웹 사이트를 표시하도록 선택할 수 있습니다. 이 경우 Xbox One용 Internet Explorer는 Windows Phone 사용자 에이전트 문자열과 유사한 사용자 에이전트 문자열을 보냅니다.

사용자 에이전트 문자열 참조

다음은 Xbox One용 Internet Explorer에서 보내는 사용자 에이전트 문자열입니다.

호환성 보기 데스크톱/모바일 문자열

꺼짐

데스크톱

Mozilla/5.0(호환; MSIE 10.0; Windows NT 6.2; Trident/6.0; Xbox; Xbox One)

꺼짐

모바일

Mozilla/5.0(호환; MSIE 10.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/10.0; Xbox; Xbox One)

켜짐

데스크톱

Mozilla/4.0(호환; MSIE 7.0; Windows NT 6.1; Trident/3.1; Xbox; Xbox One)

켜짐

모바일

Mozilla/4.0(호환; MSIE 7.0; Windows Phone OS 7.5; Trident/3.1; IEMobile/7.0; Xbox; Xbox One)

 

글꼴

다운로드 가능한 글꼴은 CSS @font-face 기능을 통해 지원됩니다. 지원되는 글꼴 형식은 WOFF 및 TTF입니다. .EOT(Embedded OpenType) 형식은 지원되지 않습니다.

메모리

Xbox One 콘솔에는 8GB의 총 시스템 메모리가 있습니다. 그러나 Internet Explorer 같은 공유 리소스 응용 프로그램에서는 훨씬 적은 양의 메모리(~480MB)를 사용할 수 있습니다. 페이지 파일이 없으며, 이 메모리 양보다 많이 사용하는 경우 응용 프로그램이 중지될 수도 있습니다.

너무 많은 메모리가 필요하여 로드할 수 없는 웹 페이지를 구성할 수 있습니다. 큰 이미지 요소는 렌더링되지 않을 수 있으며 극단적인 경우 브라우저가 종료되고 Xbox 홈 화면으로 돌아갈 수 있습니다. 웹 사이트가 제대로 작동하고 모든 리소스가 올바르게 로드되는지 확인하세요.

웹 페이지가 로드되지 않으면 다음 단계를 수행하여 메모리 사용을 최소화하세요.

  • Reduce the resolution of your image resources.

    이미지 해상도를 줄이면 이미지가 더 빨리 다운로드되고 메모리가 더 적게 사용됩니다. 축소된 해상도 이미지의 표시 크기가 너무 작으면 CSS를 사용하여 원래 표시 크기로 이미지를 다시 늘릴 수 있습니다. 이미지 편집 도구를 사용하여 이미지 크기를 다시 조정해야 합니다. CSS를 통해 이미지 크기를 줄이거나 형식을 .png에서 .jpg로 변경하기만 하면 메모리 사용이 줄지 않습니다.

  • Only use one <video> tag.

    페이지의 각 <video> 요소에 대해 메모리가 사용되어 오버헤드가 발생할 수 있습니다. 단일 <video> 요소를 사용하고 필요에 따라 수정(위치 변경, 동영상 src 특성 변경 등)할 수 있습니다.

이동 및 스크롤

특히 이동 또는 스크롤되는 페이지에서는 CSS position:fixed를 사용하지 마세요. Internet Explorer는 이동 및 확대/축소 작업 중 웹 페이지의 "스크린샷"을 사용하여 이러한 작업을 빠르고 유연하게 수행할 수 있습니다. 고정 요소 위치 지정은 이동 및 스크롤 중에 페이지가 다시 이미징되도록 합니다.

Xbox용 Internet Explorer에서는 사용자가 화면 가장자리로 커서를 밀면 자동으로 웹 페이지를 스크롤하는 푸시 스크롤을 사용하여 웹 페이지를 쉽게 이동하고 스크롤할 수 있습니다.

스크롤되는 콘텐츠에 <divs> 또는 <iframes>를 사용하지 마세요. 스크롤 콘텐츠를 포함하려면 웹 페이지의 <body> 요소를 사용하세요. 푸시 스크롤은 하위 스크롤 요소에서 작동하지 않습니다. 사용자가 하위 스크롤러를 스크롤하려면 오른쪽 엄지스틱을 사용해야 합니다.

JavaScript 성능

Xbox용 Internet Explorer에서는 신속한 JavaScript 해석을 위해 Internet Explorer용 JavaScript 엔진을 사용합니다. 그러나 JIT(Just In Time) 컴파일 기능이 없으므로 일부 JavaScript 작업은 Windows용 Internet Explorer와 비교하여 더 오래 걸릴 수 있습니다.

또한 Xbox용 Internet Explorer에는 원활한 이동 및 스크롤을 위한 성능 향상이 있습니다. 웹 페이지에서 원활한 이동 및 스크롤을 유지 관리하려면 스크롤 이벤트에 응답하는 JavaScript의 사용을 제한하세요.

미디어 형식

Xbox용 Internet Explorer에서는 신속한 JavaScript 해석을 위해 Internet Explorer용 JavaScript 엔진을 사용합니다. 그러나 JIT(Just In Time) 컴파일 기능이 없으므로 일부 JavaScript 작업은 Windows용 Internet Explorer와 비교하여 더 오래 걸릴 수 있습니다.

최적의 동영상 성능을 위해 720p 해상도에서 h.264 "높은" 프로필을 사용하여 동영상을 인코딩하는 것이 좋습니다.

확장: 플러그 인, ActiveX 및 다운로드

ActiveX 컨트롤, 브라우저 도우미 개체, 도구 모음 및 탐색 창과 같은 플러그 인은 Xbox용 Internet Explorer에서 지원되지 않습니다. HTML5 오디오 및 동영상은 고품질 미디어 환경에서 사용할 수 있습니다.

파일 다운로드 및 실행 프로그램은 지원되지 않습니다. 모든 파일 다운로드가 차단됩니다. HTTP 및 HTTPS 프로토콜이 지원됩니다. 다른 모든 프로토콜은 차단됩니다.

디버깅 및 테스트

Xbox용 Internet Explorer의 웹 사이트를 개발하고 디버그하기 위해 Windows 8의 Internet Explorer 10을 사용할 수 있습니다.

ActiveX 컨트롤 사용 안 함

Xbox용 Internet Explorer는 플러그 인을 지원하지 않으므로 Microsoft Silverlight 또는 Adobe Flash와 같은 ActiveX 컨트롤을 사용하지 않도록 설정해야 합니다. 이 작업을 쉽게 수행하려면 ActiveX 필터링을 켭니다.

Internet Explorer 10:

  1. 안전을 클릭한 다음 ActiveX 필터링을 클릭합니다.
  2. 새로 고침 단추를 클릭하여 웹 페이지를 다시 로드합니다.

동일한 단계를 수행하여 ActiveX 필터링을 끌 수 있습니다.

레이아웃

다양한 확대/축소 수준에서 크기를 테스트해야 합니다. 왜냐하면 이러한 수준은 사용자의 TV 형식 및 연결에 따라 Xbox에서 자동으로 조정되기 때문입니다.

  • Internet Explorer 10에서 도구, 확대/축소, 사용자 지정…을 차례로 클릭합니다.
  • 100%에서 185% 사이의 확대/축소 수준을 테스트합니다.

Internet Explorer 10에서 개발자 도구를 사용하여 사용자 에이전트 문자열을 변경할 수 있습니다.

Dn532261.wedge(ko-kr,VS.85).gif사용자 에이전트 문자열

  1. F12 키를 누릅니다.
  2. 도구를 클릭하고 사용자 에이전트 문자열 변경을 선택한 다음 사용자 지정…을 클릭합니다.
  3. 이름 필드에 Xbox: desktop, CV off를 입력합니다.
  4. 사용자 에이전트 문자열 필드에 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Xbox; Xbox One)을 입력합니다.
  5. 추가를 클릭합니다.
  6. 설정을 클릭합니다.

FAQ

용어설명

Q: 사용자가 해당 쿠키를 관리할 수 있나요?

A: 예. 사용자는 설정에서 쿠키 및 모든 검색 기록을 삭제할 수 있습니다.

Q: Xbox 360은 어떤가요? 두 버전의 브라우저용 사이트를 빌드하려면 어떻게 해야 하나요?

A: 일반적으로 기능 검색 및 유연한 레이아웃과 같은 웹 개발 방법을 준수하면 두 브라우저에서 모두 만족스러운 결과가 생성됩니다. Xbox 360용 Internet Explorer에 대한 자세한 내용은 Xbox 360용 Internet Explorer 개발자 가이드를 참조하세요.

 

 

 

표시:
© 2015 Microsoft