Xbox 모범 사례Xbox best practices

기본적으로 모든 UWP 앱은 사용자의 추가 작업 없이 Xbox One에서 실행 됩니다.By default, all UWP apps will run on Xbox One without any extra effort on your part. 그러나 앱을 즐거움 하 고, 고객을 선택 하 고, Xbox에서 최상의 앱 환경을 사용 하려면 아래 지침을 따라야 합니다.However, if want your app to shine, delight your customers, and compete with the best app experiences on Xbox, you should follow the practices below.


시작 하기 전에 Xbox 및 TV디자인에 배치 된 디자인 지침을 살펴보세요.Before you start, take a look at the design guidelines laid out in Designing for Xbox and TV.

Xbox One에 대 한 최상의 환경을 빌드하려면To build the best experiences for Xbox One

Do: 마우스 모드 해제Do: Turn off mouse mode

Xbox 사용자는 자신의 컨트롤러를 선호 합니다.Xbox users love their controllers. 컨트롤러 입력을 최적화 하려면 마우스 모드를 사용 하지 않도록 설정 하 고 방향 탐색 ( XY 포커스 탐색 및 상호 작용이 라고도 함)을 사용 하도록 설정 합니다.To optimize for controller input, disable mouse mode and enable directional navigation (also known as XY focus navigation and interaction). 포커스 트랩 및 액세스할 수 없는 UI를 확인 합니다.Watch out for focus traps and inaccessible UI.

Do: 10 피트 환경에 적합 한 포커스 사각형 그리기Do: Draw a focus rectangle that is appropriate for a 10-foot experience

대부분의 Xbox 사용자는 자신의 TV에서 거실에 앉아 있으므로 표준 포커스 사각형은 10 피트 떨어진 곳에서 볼 때 어렵습니다.Most Xbox users are sitting across the living room from their TV, so keep in mind that the standard focus rectangle is hard to see from ten feet away. 입력 포커스가 있는 UI 요소가 항상 사용자에 게 명확 하 게 표시 되도록 하려면 시각적 표시 지침을 따릅니다.To ensure that the UI element with the input focus is clearly visible to the user at all times, follow the Focus visual guidelines. XAML에서 앱이 Xbox에서 실행 되는 경우이 동작을 무료로 사용할 수 있지만 HTML 앱은 사용자 지정 CSS 스타일을 사용 해야 합니다.In XAML you will get this behavior for free when your app runs on Xbox, but HTML apps will need to use a custom CSS style.

Do: SystemMediaTransportControls 클래스와 통합Do: Integrate with the SystemMediaTransportControls class

Xbox 사용자는 Xbox Media 원격 Cortana (특히 "재생" 및 "일시 중지" 음성 명령)를 사용 하 여 미디어 앱을 제어 하 고 Xbox SmartGlass 효과를 원합니다.Xbox users want to control media apps with the Xbox Media Remote, Cortana (especially the "Play" and "Pause" voice commands), and Xbox SmartGlass. 이러한 기능을 무료로 이용 하려면 앱에서 Xbox 미디어 컨트롤에 자동으로 포함 되는 SystemMediaTransportControls 클래스를 사용 해야 합니다.To get these features for free your app should use the SystemMediaTransportControls class, which is automatically included in the Xbox media controls. 앱에 사용자 지정 미디어 컨트롤이 있는 경우 SystemMediaTransportControls 클래스와 통합 하 여 사용자에 게 이러한 기능을 제공 해야 합니다.If your app has custom media controls, make sure to integrate with the SystemMediaTransportControls class to provide these features to your users. 배경 음악 앱을 만드는 경우 SystemMediaTransportControls 클래스와 통합 하 여 Xbox 멀티태스킹 탭에서 배경 음악 컨트롤이 제대로 작동 하는지 확인 합니다.If you are creating a background music app, integrate with the SystemMediaTransportControls class to ensure that the background music controls work correctly in the Xbox multitasking tab.

고려 사항: 화면 가장자리에 그리기Consider: Draw to the edge of the screen

많은 Tv가 디스플레이의 가장자리를 벗어나 tv 안전 지역내에 모든 앱의 중요 한 콘텐츠를 표시 해야 합니다.Many TVs cut off the edges of the display, so all of your app's important content should be displayed within the TV-safe area. UWP에서는 overscan 를 사용 하 여 TV 안전 영역 내에서 콘텐츠를 유지 하지만이 기본 동작은 앱 주위에 명확한 테두리를 그릴 수 있습니다.UWP uses overscan to keep the content within the TV-safe area, but this default behavior can draw an obvious border around your app. 최상의 환경을 제공 하려면 기본 동작을 끄고 화면 가장자리에 UI를 그리는 방법의 지침을 따르세요.To provide the best experience, turn off the default behavior and follow the instructions at How to draw UI to the edge of the screen.


Overscan를 사용 하지 않도록 설정 하는 경우 대화형 요소 및 텍스트가 TV 안전 영역 내에 유지 되는지 확인 해야 합니다.If you disable overscan, it's your responsibility to make sure that interactive elements and text remain within the TV-safe area.

고려 사항: TV 안전 색 사용Consider: Use TV-safe colors

Tv는 컴퓨터 모니터 뿐만 아니라 극단적인 색의 강도를 처리 하지 않습니다.TVs don't handle extreme color intensities as well as computer monitors do. 사용자가 홀수 줄무늬 효과 나 씻어 아웃 이미지를 볼 수 없도록 앱에서 높은 강도 색을 사용 하지 마십시오.Avoid high-intensity colors in your app so that users don't see odd banded effects or a washed-out image. 또한 tv에서 잘 보이는 색은 사용자와 매우 다르게 보일 수 있습니다.Also, be aware that differences between TVs mean that colors that look great on your TV might look very different to your users. 을 읽고 앱을 모든 사용자에 게 표시 하는 방법을 이해 하세요.Read Colors to understand how to make your app look great to everybody!

주의: 크기 조정을 사용 하지 않도록 설정할 수 있습니다.Remember: You can disable scaling

UWP 앱은 모든 장치에서 컨트롤 및 글꼴과 같은 UI 요소를 읽을 수 있도록 자동으로 확장 됩니다.UWP apps are automatically scaled to ensure that UI elements such as controls and fonts are legible on all devices. XAML을 사용 하는 앱은 200%까지 크기가 조정 되 고, HTML을 사용 하는 앱은 150%로 크기가 조정 됩니다.Apps that use XAML are scaled by 200%, while apps that use HTML are scaled by 150%. 앱이 Xbox에서 표시 되는 방식에 대 한 더 많은 제어를 원하는 경우 기본 배율 인수를 사용 하지 않도록 설정 하 여 HDTV의 실제 픽셀 크기 (1920 x 1080)를 사용 하도록 설정 합니다.If you want more control over how your app looks on Xbox, disable the default scale factor to use the actual pixel dimensions of an HDTV (1920x1080). Xbox에서 잘 보이도록 앱을 조정 하는 방법에 대 한 크기 조정 및 효과적인 픽셀 및 크기 조정을 해제 하는 방법을 살펴보세요.Take a look at How to turn off scaling and Effective pixels and scaling for information about tailoring your app to look great on Xbox.

UWP 앱에 적용 되는 이러한 사례를 확인 하려면이 비디오를 확인 하세요.If you want to get a glimpse of these practices applied to a UWP app, check out this video!

채널 9Channel 9

다음은 Channel 9 에 대 한 정보를 활용 하 여 Xbox에서 놀라운 앱을 빌드하는 데 유용한 정보입니다.The following talks on Channel 9 are a great source of information for building amazing apps on Xbox:

Xbox에서 앱 개발App Dev on Xbox

Xbox의 앱 개발 이벤트는 xbox에서 앱을 처음 빌드할 때 사용할 수 있는 개발자를 위한 좋은 출발점입니다.The App Dev on Xbox event is a great starting point for developers new to building apps on Xbox.

참고 항목See also