Xbox 및 TV용 디자인Designing for Xbox and TV

Xbox One 및 텔레비전 화면에서 잘 작동 하도록 Windows 앱을 디자인 합니다.Design your Windows app so that it looks good and functions well on Xbox One and television screens.

10 피트 환경에서 UWP 응용 프로그램의 상호 작용 환경에 대 한 지침은 게임 패드 및 원격 제어 상호 작용 을 참조 하세요.See Gamepad and remote control interactions for guidance on interaction experiences in UWP applications in the 10-foot experience.

개요Overview

유니버설 Windows 플랫폼를 사용 하 여 여러 Windows 10 장치에서 매력적인 환경을 만들 수 있습니다.The Universal Windows Platform lets you create delightful experiences across multiple Windows 10 devices. UWP 프레임 워크에서 제공 되는 대부분의 기능을 사용 하면 앱이 추가 작업 없이 이러한 장치에서 동일한 UI (사용자 인터페이스)를 사용할 수 있습니다.Most of the functionality provided by the UWP framework enables apps to use the same user interface (UI) across these devices, without additional work. 그러나 Xbox One 및 TV 화면에서 잘 작동 하도록 앱을 조정 하 고 최적화 하려면 특별 한 고려 사항이 필요 합니다.However, tailoring and optimizing your app to work great on Xbox One and TV screens requires special considerations.

실내의 소파에 앉아 TV와 상호 작용 하는 게임 패드 또는 리모컨을 사용하여 TV를 조작하는 환경을 10피트 환경 이라고 합니다.The experience of sitting on your couch across the room, using a gamepad or remote to interact with your TV, is called the 10-foot experience . 일반적으로 사용자가 화면에서 약 3m 떨어진 곳에 앉아 있기 때문에 이렇게 이름이 지정되었습니다.It is so named because the user is generally sitting approximately 10 feet away from the screen. 이 경우 가령 0.6m 환경이나 PC 조작 시에는 존재하지 않는 고유한 과제가 발생합니다.This provides unique challenges that aren't present in, say, the 2-foot experience, or interacting with a PC. Xbox One 또는 TV 화면에 출력 되는 다른 장치에 대 한 앱을 개발 하 고 있으며,이를 위해 컨트롤러를 사용 하는 경우에는 항상이 점을 명심 해야 합니다.If you are developing an app for Xbox One or any other device that outputs to the TV screen and uses a controller for input, you should always keep this in mind.

앱이 10 피트 환경에서 잘 작동 하도록 하는 데이 문서의 단계를 모두 수행 하는 것은 아니지만 앱을 이해 하 고 앱에 적절 한 결정을 내릴 때 앱의 특정 요구 사항에 맞게 조정 된 10 피트 환경을 구현 하는 것이 좋습니다.Not all of the steps in this article are required to make your app work well for 10-foot experiences, but understanding them and making the appropriate decisions for your app will result in a better 10-foot experience tailored for your app's specific needs. 10 피트 환경에서 앱을 개발 하는 경우 다음과 같은 디자인 원칙을 고려해 야 합니다.As you bring your app to life in the 10-foot environment, consider the following design principles.

단순Simple

10 피트 환경용 디자인은 고유한 문제 집합을 제공 합니다.Designing for the 10-foot environment presents a unique set of challenges. 해상도 및 보기 거리를 통해 사용자가 너무 많은 정보를 처리 하기 어려울 수 있습니다.Resolution and viewing distance can make it difficult for people to process too much information. 디자인을 깔끔하게 유지 하 고 가능한 가장 간단한 구성 요소로 축소 해 보세요.Try to keep your design clean, reduced to the simplest possible components. TV에 표시 되는 정보의 양은 데스크톱이 아닌 휴대폰에서 볼 수 있는 것과 비교할 수 있어야 합니다.The amount of information displayed on a TV should be comparable to what you'd see on a mobile phone, rather than on a desktop.

Xbox One 홈 화면

일관성이Coherent

10 피트 환경의 UWP 앱은 직관적이 고 사용 하기 쉽습니다.UWP apps in the 10-foot environment should be intuitive and easy to use. 포커스를 명확 하 게 하 고 unmistakable 합니다.Make the focus clear and unmistakable. 공간 전체의 이동이 일관적이 고 예측 가능 하도록 콘텐츠를 정렬 합니다.Arrange content so that movement across the space is consistent and predictable. 원하는 작업에 가장 짧은 경로를 제공 합니다.Give people the shortest path to what they want to do.

Xbox One 영화 앱

스크린샷에 표시 된 모든 동영상은 Microsoft 영화 & TV에서 사용할 수 있습니다.All movies shown in the screenshot are available on Microsoft Movies & TV.

CaptivatingCaptivating

영화 같은 가장 몰입형 환경이 큰 화면에 표시됩니다.The most immersive, cinematic experiences take place on the big screen. 가장자리에서 가장자리로의 장면, 세련 된 움직임, 색 및 입력 체계의 생생한 사용은 앱을 다음 수준으로 사용 합니다.Edge-to-edge scenery, elegant motion, and vibrant use of color and typography take your apps to the next level. 굵게 표시 됩니다.Be bold and beautiful.

Xbox One 아바타 앱

10 피트 환경에 대 한 최적화Optimizations for the 10-foot experience

이제 10 피트 환경에 적합 한 UWP 앱 디자인의 원리를 배웠으므로 앱을 최적화 하 고 뛰어난 사용자 환경을 만들 수 있는 특정 방법에 대 한 다음 개요를 참조 하세요.Now that you know the principles of good UWP app design for the 10-foot experience, read through the following overview of the specific ways you can optimize your app and make for a great user experience.

기능Feature 설명Description
UI 요소 크기 조정UI element sizing 유니버설 Windows 플랫폼는 크기 조정 및 유효 픽셀 을 사용 하 여 보기 거리에 따라 UI의 크기를 조정 합니다.The Universal Windows Platform uses scaling and effective pixels to scale the UI according to the viewing distance. 크기를 이해 하 고 UI를 통해 적용 하면 10 피트 환경에 맞게 앱을 최적화 하는 데 도움이 됩니다.Understanding sizing and applying it across your UI will help optimize your app for the 10-foot environment.
TV 안전 영역TV-safe area UWP는 기본적으로 TV 안전 하지 않은 영역 (화면 가장자리에 가까운 영역)의 UI를 자동으로 표시 하지 않습니다.The UWP will automatically avoid displaying any UI in TV-unsafe areas (areas close to the edges of the screen) by default. 그러나이는 UI가 letterboxed 보이는 "boxed" 효과를 만듭니다.However, this creates a "boxed-in" effect in which the UI looks letterboxed. TV에서 진정한 몰입형 앱이 되려면 지원하는 TV에서 화면 가장자리까지 확장되도록 앱을 수정하는 것이 좋습니다.For your app to be truly immersive on TV, you will want to modify it so that it extends to the edges of the screen on TVs that support it.
Colors UWP는 색 테마를 지원 하 고, 시스템 테마 를 기반으로 하는 앱은 Xbox one에서 기본 설정으로 설정 됩니다.The UWP supports color themes, and an app that respects the system theme will default to dark on Xbox One. 앱에 특정 색 테마가 있는 경우 일부 색은 TV에서 제대로 작동하지 않으며 피해야 한다는 것을 고려해야 합니다.If your app has a specific color theme, you should consider that some colors don't work well for TV and should be avoided.
소리Sound 소리는 컨퍼런스에서 사용자에 게 피드백을 제공 하 고 사용자에 게 피드백을 제공 하는 데 도움이 되는 10 피트 환경의 주요 역할을 합니다.Sounds play a key role in the 10-foot experience, helping to immerse and give feedback to the user. UWP는 Xbox One에서 앱이 실행 중일 때 공용 컨트롤의 소리를 자동으로 설정 하는 기능을 제공 합니다.The UWP provides functionality that automatically turns on sounds for common controls when the app is running on Xbox One. UWP에 기본 제공 되는 소리 지원에 대해 자세히 알아보고이를 활용 하는 방법을 알아보세요.Find out more about the sound support built into the UWP and learn how to take advantage of it.
UI 컨트롤에 대 한 지침Guidelines for UI controls 여러 장치에서 잘 작동 하는 몇 가지 UI 컨트롤이 있지만 TV에서 사용 하는 경우 몇 가지 사항을 고려해 야 합니다.There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. 10 피트 환경을 설계할 때 이러한 컨트롤을 사용 하기 위한 몇 가지 모범 사례에 대해 알아보세요.Read about some best practices for using these controls when designing for the 10-foot experience.
Xbox의 사용자 지정 시각적 상태 트리거Custom visual state trigger for Xbox UWP 앱에 대해 10 피트 환경에 맞게 조정 하려면 사용자 지정 시각적 상태 트리거 를 사용 하 여 앱이 Xbox 콘솔에서 시작 된 것을 감지할 때 레이아웃 변경을 수행 하는 것이 좋습니다.To tailor your UWP app for the 10-foot experience, we recommend that you use a custom visual state trigger to make layout changes when the app detects that it has been launched on an Xbox console.

이전 디자인 및 레이아웃 고려 사항 외에도 응용 프로그램을 빌드할 때 고려해 야 할 몇 가지 게임 패드 및 원격 제어 상호 작용 최적화가 있습니다.In addition to the preceding design and layout considerations, there are a number of gamepad and remote control interaction optimizations you should consider when building your app.

기능Feature 설명Description
XY 포커스 탐색 및 상호 작용XY focus navigation and interaction XY 포커스 탐색 을 사용 하면 사용자가 앱의 UI를 탐색할 수 있습니다.XY focus navigation enables the user to navigate around your app's UI. 그러나이 경우 사용자가 위로, 아래로, 왼쪽 및 오른쪽으로 이동 하도록 제한 됩니다.However, this limits the user to navigating up, down, left, and right. 이에 대 한 권장 사항 및 기타 고려 사항은이 섹션에 설명 되어 있습니다.Recommendations for dealing with this and other considerations are outlined in this section.
마우스 모드.Mouse mode 지도, 그리기 및 그리기와 같은 일부 유형의 응용 프로그램에서는 XY 포커스 탐색이 실용적이 지 않거나 가능 하지 않습니다.XY focus navigation isn't practical, or even possible, for some types of applications, such as maps or drawing and painting apps. 이러한 경우 마우스 모드 를 사용 하면 사용자가 PC의 마우스와 마찬가지로 게임 패드 또는 원격 제어로 자유롭게 이동할 수 있습니다.In these cases, mouse mode lets users navigate freely with a gamepad or remote control, just like a mouse on a PC.
포커스 시각적 개체Focus visual 포커스 시각적 개체는 현재 포커스가 있는 UI 요소를 강조 표시 하는 테두리입니다.The focus visual is a border that highlights the currently focused UI element. 이렇게 하면 사용자가 탐색 하거나 상호 작용 하는 UI를 빠르게 식별할 수 있습니다.This helps the user quickly identify the UI they are navigating through or interacting with.
포커스 연결Focus engagement 포커스 engagement를 사용 하려면 UI 요소에 포커스가 있을 때 사용자가 게임 패드 또는 원격 제어에서 A/Select 단추를 눌러야 합니다.Focus engagement requires the user to press the A/Select button on a gamepad or remote control when a UI element has focus in order to interact with it.
하드웨어 단추Hardware buttons 게임 패드 및 원격 제어는 매우 다양 한 단추와 구성을 제공 합니다.The gamepad and remote control provide very different buttons and configurations.

참고

이 항목의 코드 조각은 대부분 XAML/c #에 있습니다. 그러나 원칙과 개념은 모든 UWP 앱에 적용 됩니다.Most of the code snippets in this topic are in XAML/C#; however, the principles and concepts apply to all UWP apps. Xbox 용 HTML/JavaScript UWP 앱을 개발 하는 경우 GitHub의 뛰어난 Tvhelpers 라이브러리를 확인 하세요.If you're developing an HTML/JavaScript UWP app for Xbox, check out the excellent TVHelpers library on GitHub.

UI 요소 크기 조정UI element sizing

10 피트 환경의 앱 사용자는 원격 제어 또는 게임 기를 사용 하 고 있으며 화면에서 몇 피트 떨어진 곳에 있기 때문에 디자인에 팩터링 해야 할 몇 가지 UI 고려 사항이 있습니다.Because the user of an app in the 10-foot environment is using a remote control or gamepad and is sitting several feet away from the screen, there are some UI considerations that need to be factored into your design. UI에 적절 한 콘텐츠 밀도가 있는지 확인 하 고, 사용자가 쉽게 요소를 탐색 하 고 선택할 수 있도록 너무 복잡해 지지 않도록 합니다.Make sure that the UI has an appropriate content density and is not too cluttered so that the user can easily navigate and select elements. 주의: 단순성은 키입니다.Remember: simplicity is key.

배율 인수 및 적응 레이아웃Scale factor and adaptive layout

크기 조정 요소 를 사용 하면 앱이 실행 되는 장치에 적합 한 크기 조정으로 UI 요소가 표시 되도록 할 수 있습니다.Scale factor helps with ensuring that UI elements are displayed with the right sizing for the device on which the app is running. 바탕 화면에서이 설정은 설정 > 시스템 > 슬라이딩 값으로 표시 될 수 있습니다.On desktop, this setting can be found in Settings > System > Display as a sliding value. 장치에서 지 원하는 경우 동일한 설정이 휴대폰에도 있습니다.This same setting exists on phone as well if the device supports it.

텍스트, 앱 및 기타 항목 크기 변경

Xbox One에는 이러한 시스템 설정이 없지만 UWP UI 요소가 TV에 적절한 크기로 조정되도록 XAML 앱의 경우 200% , HTML 앱의 경우 150% 기본값으로 배율이 지정됩니다.On Xbox One, there is no such system setting; however, for UWP UI elements to be sized appropriately for TV, they are scaled at a default of 200% for XAML apps and 150% for HTML apps. 다른 장치에 대해 UI 요소의 크기가 적절 하 게 조정 되는 동안에는 TV에 대해 적절 하 게 크기가 조정 됩니다.As long as UI elements are appropriately sized for other devices, they will be appropriately sized for TV. Xbox One은 1080p (1920 x 1080 픽셀)에서 앱을 렌더링 합니다.Xbox One renders your app at 1080p (1920 x 1080 pixels). 따라서 PC와 같은 다른 장치에서 앱을 가져올 때 적응 기법을 활용 하 여 UI가 960 x 540 px 100% scale (또는 HTML 앱에 대 한 720% scale의 1280 x 100 px)에서 잘 보이는지 확인 합니다.Therefore, when bringing an app from other devices such as PC, ensure that the UI looks great at 960 x 540 px at 100% scale (or 1280 x 720 px at 100% scale for HTML apps) utilizing adaptive techniques.

한 가지 해상도, 1920 x 1080에 대해 걱정 하기만 하면 되므로 Xbox를 위한 디자인은 PC 디자인과 약간 다릅니다.Designing for Xbox is a little different from designing for PC because you only need to worry about one resolution, 1920 x 1080. 사용자에 게 더 나은 해상도를 가진 TV가 있는지 여부는 중요 하지 않습니다 — . UWP 앱은 항상 1080p로 규모를 조정 합니다.It doesn't matter if the user has a TV that has better resolution—UWP apps will always scale to 1080p.

TV 해상도에 관계 없이 Xbox One에서 실행 하는 경우 앱에 대해 200% (또는 HTML 앱의 경우 150%)의 올바른 자산 크기를 가져올 수도 있습니다.Correct asset sizes from the 200% (or 150% for HTML apps) set will also be pulled in for your app when running on Xbox One, regardless of TV resolution.

콘텐츠 밀도Content density

앱을 디자인 하는 경우 사용자는 마우스 또는 터치식 입력을 사용 하는 것 보다 탐색 하는 데 시간이 오래 걸리는 원격 또는 게임 컨트롤러를 사용 하 여 UI를 표시 하 고 상호 작용 하 게 됩니다.When designing your app, remember that the user will be viewing the UI from a distance and interacting with it by using a remote or game controller, which takes more time to navigate than using mouse or touch input.

UI 컨트롤의 크기Sizes of UI controls

대화형 UI 요소는 최소 높이 32 window.epx.codesnippet (유효 픽셀)로 크기를 조정 해야 합니다.Interactive UI elements should be sized at a minimum height of 32 epx (effective pixels). 이는 일반적인 UWP 컨트롤에 대 한 기본값이 며, 200% 배율로 사용 될 경우 UI 요소가 거리에서 표시 되 고 콘텐츠 밀도를 줄일 수 있도록 합니다.This is the default for common UWP controls, and when used at 200% scale, it ensures that UI elements are visible from a distance and helps reduce content density.

100% 및 200% 규모의 UWP 단추

클릭 횟수Number of clicks

사용자가 TV 화면의 한 가장자리에서 다른 가장자리로 이동 하는 경우 UI를 간소화 하기 위해 6 개 이하의 클릭 이 필요 합니다.When the user is navigating from one edge of the TV screen to the other, it should take no more than six clicks to simplify your UI. 여기서는 단순함 의 원칙이 여기에 적용 됩니다.Again, the principle of simplicity applies here.

6 개 아이콘

텍스트 크기Text sizes

UI가 거리에서 표시 되도록 하려면 다음의 thumb 규칙을 사용 합니다.To make your UI visible from a distance, use the following rules of thumb:

  • 주 텍스트 및 콘텐츠 읽기: 15 window.epx.codesnippet 최소값Main text and reading content: 15 epx minimum
  • 중요 하지 않은 텍스트 및 보충 콘텐츠: 12 window.epx.codesnippet 최소값Non-critical text and supplemental content: 12 epx minimum

UI에서 더 큰 텍스트를 사용 하는 경우 화면 부동산을 너무 많이 제한 하지 않는 크기를 선택 하 여 다른 콘텐츠가 채워질 수 있는 공간을 확보 합니다.When using larger text in your UI, pick a size that does not limit screen real estate too much, taking up space that other content could potentially fill.

배율 인수 옵트아웃Opting out of scale factor

앱이 확장 비율 지원을 활용 하는 것이 좋습니다 .이를 통해 각 장치 유형에 대해 크기를 조정 하 여 모든 장치에서 적절 하 게 실행 하는 데 도움이 됩니다.We recommend that your app take advantage of scale factor support, which will help it run appropriately on all devices by scaling for each device type. 그러나이 동작을 옵트아웃 (opt out) 하 고 모든 UI를 100% 배율로 디자인할 수 있습니다.However, it is possible to opt out of this behavior and design all of your UI at 100% scale. 배율 인수를 100% 이외의 값으로 변경할 수 없습니다.Note that you cannot change the scale factor to anything other than 100%.

XAML 앱의 경우 다음 코드 조각을 사용 하 여 배율 인수를 옵트아웃 (opt out) 할 수 있습니다.For XAML apps, you can opt out of scale factor by using the following code snippet:

bool result =
    Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);

result 에서 옵트아웃 (opt out) 했는지 여부를 알려 줍니다.result will inform you whether you successfully opted out.

HTML/JavaScript에 대 한 샘플 코드를 비롯 한 자세한 내용은 크기 조정을 해제 하는 방법을 참조 하세요.For more information, including sample code for HTML/JavaScript, see How to turn off scaling.

이 항목에서 설명 하는 유효 픽셀 값을 실제 픽셀 값 (또는 HTML 앱의 경우 1.5을 곱하여)으로 두 배로 조정 하 여 적절 한 크기의 UI 요소를 계산 해야 합니다.Please be sure to calculate the appropriate sizes of UI elements by doubling the effective pixel values mentioned in this topic to actual pixel values (or multiplying by 1.5 for HTML apps).

TV 안전 영역TV-safe area

모든 Tv에서 콘텐츠를 표시 하는 것은 과거 및 기술적인 이유로 인해 화면 가장자리까지 모두 표시 됩니다.Not all TVs display content all the way to the edges of the screen due to historical and technological reasons. 기본적으로 UWP는 TV 안전 하지 않은 영역에 UI 콘텐츠를 표시 하는 것을 방지 하 고 대신 페이지 배경만 그립니다.By default, the UWP will avoid displaying any UI content in TV-unsafe areas and instead will only draw the page background.

TV 안전 하지 않은 영역은 다음 이미지의 파란색 영역으로 표시 됩니다.The TV-unsafe area is represented by the blue area in the following image.

TV 안전 하지 않은 영역

다음 코드 조각에서 보여 주는 것 처럼 배경을 정적 또는 테마가 적용 된 색 또는 이미지로 설정할 수 있습니다.You can set the background to a static or themed color, or to an image, as the following code snippets demonstrate.

테마 색Theme color

<Page x:Class="Sample.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

이미지Image

<Page x:Class="Sample.MainPage"
      Background="\Assets\Background.png"/>

이는 추가 작업 없이 앱이 표시 되는 모양입니다.This is what your app will look like without additional work.

TV 안전 영역

지금은 탐색 창과 그리드 같은 UI 부분이 잘린 것처럼 보이는 "박스" 효과가 앱에 나타나기 때문에 최적 상태가 아닙니다.This is not optimal because it gives the app a "boxed-in" effect, with parts of the UI such as the nav pane and grid seemingly cut off. 그러나 UI의 일부를 화면 가장자리로 확장 하 여 앱에 더 많은 효과를 줄 수 있도록 최적화를 수행할 수 있습니다.However, you can make optimizations to extend parts of the UI to the edges of the screen to give the app a more cinematic effect.

가장자리에 UI 그리기Drawing UI to the edge

사용자에 게 더 많은 집중 교육을 제공 하기 위해 특정 UI 요소를 사용 하 여 화면 가장자리로 확장 하는 것이 좋습니다.We recommend that you use certain UI elements to extend to the edges of the screen to provide more immersion to the user. 여기에는 ScrollViewers, Nav 창CommandBars가 포함 됩니다.These include ScrollViewers, nav panes, and CommandBars.

반면에 대화형 요소와 텍스트는 일부 Tv에서 잘리지 않도록 하기 위해 항상 화면 가장자리를 피하는 것도 중요 합니다.On the other hand, it's also important that interactive elements and text always avoid the screen edges to ensure that they won't be cut off on some TVs. 화면 가장자리의 5% 내에서 필수적이 지 않은 시각적 개체만 그리는 것이 좋습니다.We recommend that you draw only non-essential visuals within 5% of the screen edges. UI 요소 크기 조정에 설명 된 대로, Xbox one 콘솔의 기본 배율 비율 200%에 해당 하는 UWP 앱은 960 x 540 epx의 영역을 사용 하므로 앱의 UI에서 다음과 같은 영역에 필수 UI를 배치 하지 않아야 합니다.As mentioned in UI element sizing, a UWP app following the Xbox One console's default scale factor of 200% will utilize an area of 960 x 540 epx, so in your app's UI, you should avoid putting essential UI in the following areas:

  • 위쪽 및 아래쪽에서 27 window.epx.codesnippet27 epx from the top and bottom
  • 48 왼쪽 및 오른쪽 가장자리에서의 window.epx.codesnippet48 epx from the left and right sides

다음 섹션에서는 UI를 화면 가장자리로 확장 하는 방법을 설명 합니다.The following sections describe how to make your UI extend to the screen edges.

핵심 창 경계Core window bounds

10 피트 환경을 대상으로 하는 UWP 앱의 경우에는 핵심 창 경계를 사용 하는 것이 더 간단 합니다.For UWP apps targeting only the 10-foot experience, using core window bounds is a more straightforward option.

OnLaunched의 메서드에서 App.xaml.cs 다음 코드를 추가 합니다.In the OnLaunched method of App.xaml.cs, add the following code:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
    (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

이 코드 줄을 사용 하면 앱 창이 화면 가장자리로 확장 되므로 모든 대화형 및 필수 UI를 앞에서 설명한 TV 안전 영역으로 이동 해야 합니다.With this line of code, the app window will extend to the edges of the screen, so you will need to move all interactive and essential UI into the TV-safe area described earlier. 상황에 맞는 메뉴 및 열린 ComboBoxes같은 임시 UI는 TV 안전 영역 내에 자동으로 남아 있습니다.Transient UI, such as context menus and opened ComboBoxes, will automatically remain inside the TV-safe area.

핵심 창 경계

창 배경Pane backgrounds

탐색 창은 일반적으로 화면 가장자리 근처에 그려져 있으므로 배경을 TV 안전 하지 않은 영역으로 확장 하 여 잘못 된 간격을 도입 하지 않도록 합니다.Navigation panes are typically drawn near the edge of the screen, so the background should extend into the TV-unsafe area so as not to introduce awkward gaps. 이렇게 하려면 탐색 창의 배경색을 앱 배경의 색으로 변경 하면 됩니다.You can do this by simply changing the color of the nav pane's background to the color of the app's background.

앞에서 설명한 대로 핵심 창 경계를 사용 하면 UI를 화면 가장자리에 그릴 수 있지만 SplitView의 콘텐츠에 양의 여백을 사용 하 여 TV 안전 영역 내에 유지 해야 합니다.Using the core window bounds as previously described will allow you to draw your UI to the edges of the screen, but you should then use positive margins on the SplitView's content to keep it within the TV-safe area.

화면 가장자리로 확장 된 탐색 창

여기서 탐색 창의 배경은 화면 가장자리로 확장 되었으며 해당 탐색 항목은 TV 안전 영역에 유지 됩니다.Here, the nav pane's background has been extended to the edges of the screen, while its navigation items are kept in the TV-safe area. SplitView(이 경우에는 항목의 그리드) 콘텐츠가 화면 아래쪽으로 확장 되어 계속 표시 되는 것 처럼 표시 되 고, 그리드 위쪽은 TV 안전 영역 내에 있습니다.The content of the SplitView (in this case, a grid of items) has been extended to the bottom of the screen so that it looks like it continues and isn't cut off, while the top of the grid is still within the TV-safe area. 목록 및 표의 스크롤 끝에서이 작업을 수행 하는 방법에 대해 자세히 알아보세요.(Learn more about how to do this in Scrolling ends of lists and grids).

다음 코드 조각에서는이 효과를 적용 합니다.The following code snippet achieves this effect:

<SplitView x:Name="RootSplitView"
           Margin="48,0,48,0">
    <SplitView.Pane>
        <ListView x:Name="NavMenuList"
                  ContainerContentChanging="NavMenuItemContainerContentChanging"
                  ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                  ItemTemplate="{StaticResource NavMenuItemTemplate}"
                  ItemInvoked="NavMenuList_ItemInvoked"
                  ItemsSource="{Binding NavMenuListItems}"/>
    </SplitView.Pane>
    <Frame x:Name="frame"
           Navigating="OnNavigatingToPage"
           Navigated="OnNavigatedToPage"/>
</SplitView>

명령 모음 은 일반적으로 앱의 하나 이상 가장자리 근처에 배치 되는 창의 또 다른 예입니다. TV에서는 배경이 화면 가장자리로 확장 되어야 합니다.CommandBar is another example of a pane that is commonly positioned near one or more edges of the app, and as such on TV its background should extend to the edges of the screen. 또한 일반적으로 "..."로 표시 되는 더 많은 단추를 포함 합니다. 오른쪽에는 TV 안전 영역에 남아 있어야 합니다.It also usually contains a More button, represented by "..." on the right side, which should remain in the TV-safe area. 다음은 원하는 상호 작용 및 시각적 효과를 얻기 위한 몇 가지 다른 전략입니다.The following are a few different strategies to achieve the desired interactions and visual effects.

옵션 1 : 배경색을 CommandBar 페이지 배경과 동일한 색 또는 투명 한 색으로 변경 합니다.Option 1 : Change the CommandBar background color to either transparent or the same color as the page background:

<CommandBar x:Name="topbar"
            Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
            ...
</CommandBar>

이렇게 하면 CommandBar 페이지의 나머지 부분과 동일한 배경 위에 있는 것 처럼 보일 수 있으므로 배경은 화면 가장자리에 원활 하 게 흐릅니다.Doing this will make the CommandBar look like it is on top of the same background as the rest of the page, so the background seamlessly flows to the edge of the screen.

옵션 2 : 채우기가 배경과 동일한 색 인 배경 사각형을 추가 하 CommandBarCommandBar 페이지의 나머지 부분에서 및 아래에 배치 합니다.Option 2 : Add a background rectangle whose fill is the same color as the CommandBar background, and have it lie below the CommandBar and across the rest of the page:

<Rectangle VerticalAlignment="Top"
            HorizontalAlignment="Stretch"      
            Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch">
            ...
</CommandBar>

참고

이 방법을 사용 하는 경우 추가 단추를 클릭 하면 필요한 경우 열린의 높이가 변경 되어 CommandBar 아이콘 아래에의 레이블이 표시 됩니다 AppBarButton .If using this approach, be aware that the More button changes the height of the opened CommandBar if necessary, in order to show the labels of the AppBarButtons below their icons. 이러한 크기 조정을 방지 하려면 레이블을 아이콘의 오른쪽 으로 이동 하는 것이 좋습니다.We recommend that you move the labels to the right of their icons to avoid this resizing. 자세한 내용은 CommandBar 레이블을 참조 하세요.For more information, see CommandBar labels.

이 두 가지 방법 모두이 섹션에 나열 된 다른 형식의 컨트롤에도 적용 됩니다.Both of these approaches also apply to the other types of controls listed in this section.

목록과 모눈의 스크롤 끝Scrolling ends of lists and grids

목록과 그리드는 동시에 화면에 맞출 수 있는 것 보다 더 많은 항목을 포함 하는 것이 일반적입니다.It's common for lists and grids to contain more items than can fit onscreen at the same time. 이 경우 목록 또는 그리드를 화면 가장자리로 확장 하는 것이 좋습니다.When this is the case, we recommend that you extend the list or grid to the edge of the screen. 가로 스크롤 목록과 모눈은 오른쪽 가장자리로 확장 하 고 세로 스크롤은 아래쪽으로 확장 해야 합니다.Horizontally scrolling lists and grids should extend to the right edge, and vertically scrolling ones should extend to the bottom.

TV 안전 영역 그리드 구분

목록 또는 눈금이 다음과 같이 확장 되는 동안 포커스 시각적 개체와 관련 항목을 TV 안전 영역 내에 유지 하는 것이 중요 합니다.While a list or grid is extended like this, it's important to keep the focus visual and its associated item inside the TV-safe area.

스크롤 그리드 포커스는 TV 안전 영역에 유지 되어야 합니다.

UWP에는 포커스를 VisibleBounds내부에 유지 하는 기능이 있지만 목록/그리드 항목을 안전 영역 보기로 스크롤할 수 있도록 안쪽 여백을 추가 해야 합니다.The UWP has functionality that will keep the focus visual inside the VisibleBounds, but you need to add padding to ensure that the list/grid items can scroll into view of the safe area. 특히 다음 코드 조각과 같이 ListView 또는 GridViewItemsPresenter에 양의 여백을 추가 합니다.Specifically, you add a positive margin to the ListView or GridView's ItemsPresenter, as in the following code snippet:

<Style x:Key="TitleSafeListViewStyle"
       TargetType="ListView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="ScrollViewer"
                                  TabNavigation="{TemplateBinding TabNavigation}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                  AutomationProperties.AccessibilityView="Raw">
                        <ItemsPresenter Header="{TemplateBinding Header}"
                                        HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                        HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                        Footer="{TemplateBinding Footer}"
                                        FooterTemplate="{TemplateBinding FooterTemplate}"
                                        FooterTransitions="{TemplateBinding FooterTransitions}"
                                        Padding="{TemplateBinding Padding}"
                                        Margin="0,27,0,27"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

페이지 또는 앱 리소스에 이전 코드 조각을 추가한 후 다음과 같은 방법으로 액세스할 수 있습니다.You would put the previous code snippet in either the page or app resources, and then access it in the following way:

<Page>
    <Grid>
        <ListView Style="{StaticResource TitleSafeListViewStyle}"
                  ... />

참고

이 코드 조각은 특히에 해당 합니다. ListView 스타일의 경우 GridView ControlTemplate스타일 모두에 대해 TargetType 특성을로 설정 GridView 합니다.This code snippet is specifically for ListViews; for a GridView style, set the TargetType attribute for both the ControlTemplate and the Style to GridView.

항목이 표시 되는 방식을 보다 세부적으로 제어 하기 위해 응용 프로그램이 버전 1803 이상을 대상으로 하는 경우 BringIntoViewRequested 이벤트를 사용할 수 있습니다.For more fine-grained control over how items are brought into view, if your application targets version 1803 or later, you can use the UIElement.BringIntoViewRequested event. ItemsPanel 다음 코드 조각과 ListView / 같이 내부 ScrollViewer 가 실행 되기 전에이를 catch 하기 위해 ListView GridView 의 ItemsPanel에 넣을 수 있습니다.You can put it on the ItemsPanel for the ListView/GridView to catch it before the internal ScrollViewer does, as in the following code snippets:

<GridView x:Name="gridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"
                           BringIntoViewRequested="ItemsWrapGrid_BringIntoViewRequested"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>
// The BringIntoViewRequested event is raised by the framework when items receive keyboard (or Narrator) focus or 
// someone triggers it with a call to UIElement.StartBringIntoView.
private void ItemsWrapGrid_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)
{
    if (args.VerticalAlignmentRatio != 0.5)  // Guard against our own request
    {
        args.Handled = true;
        // Swallow this request and restart it with a request to center the item.  We could instead have chosen
        // to adjust the TargetRect’s Y and Height values to add a specific amount of padding as it bubbles up, 
        // but if we just want to center it then this is easier.

        // (Optional) Account for sticky headers if they exist
        var headerOffset = 0.0;
        var itemsWrapGrid = sender as ItemsWrapGrid;
        if (gridView.IsGrouping && itemsWrapGrid.AreStickyGroupHeadersEnabled)
        {
            var header = gridView.GroupHeaderContainerFromItemContainer(args.TargetElement as GridViewItem);
            if (header != null)
            {
                headerOffset = ((FrameworkElement)header).ActualHeight;
            }
        }

        // Issue a new request
        args.TargetElement.StartBringIntoView(new BringIntoViewOptions()
        {
            AnimationDesired = true,
            VerticalAlignmentRatio = 0.5, // a normalized alignment position (0 for the top, 1 for the bottom)
            VerticalOffset = headerOffset, // applied after meeting the alignment ratio request
        });
    }
}

Colors

기본적으로 유니버설 Windows 플랫폼는 tv 안전 범위로 앱 색의 크기를 조정 합니다 (자세한 내용은 tv 안전 색 참조). 앱이 tv에서 잘 보이도록 합니다.By default, the Universal Windows Platform scales your app's colors to the TV-safe range (see TV-safe colors for more information) so that your app looks good on any TV. 또한 TV에서 시각적 환경을 개선 하기 위해 앱에서 사용 하는 색 집합에 대해 향상 된 기능이 있습니다.In addition, there are improvements that you can make to the set of colors your app uses to improve the visual experience on TV.

응용 프로그램 테마Application theme

앱에 적합 한 항목에 따라 응용 프로그램 테마 (어둡게 또는 밝게)를 선택 하거나 테마를 옵트아웃 (opt out) 할 수 있습니다.You can choose an Application theme (dark or light) according to what is right for your app, or you can opt out of theming. 색 테마의 테마에 대 한 일반적인 권장 사항에 대해 자세히 알아보세요.Read more about general recommendations for themes in Color themes.

또한 UWP를 사용 하면 앱이 실행 되는 장치에서 제공 하는 시스템 설정에 따라 테마를 동적으로 설정할 수 있습니다.The UWP also allows apps to dynamically set the theme based on the system settings provided by the devices on which they run. UWP는 항상 사용자가 지정 하는 테마 설정을 고려 하지만 각 장치는 적절 한 기본 테마를 제공 합니다.While the UWP always respects the theme settings specified by the user, each device also provides an appropriate default theme. Xbox One의 특성으로 인해 생산성 경험 보다 많은 미디어 환경을 사용할 것으로 예상 되는 경우 기본적으로 어두운 시스템 테마를 사용할 수 있습니다.Because of the nature of Xbox One, which is expected to have more media experiences than productivity experiences, it defaults to a dark system theme. 앱의 테마가 시스템 설정을 기반으로 하는 경우 Xbox One에서는 기본적으로 어둡게 설정됩니다.If your app's theme is based on the system settings, expect it to default to dark on Xbox One.

강조 색Accent color

UWP는 사용자가 시스템 설정에서 선택한 강조 색 을 표시 하는 편리한 방법을 제공 합니다.The UWP provides a convenient way to expose the accent color that the user has selected from their system settings.

Xbox One에서는 사용자가 PC에서 강조 색을 선택할 수 있는 것 처럼 사용자 색을 선택할 수 있습니다.On Xbox One, the user is able to select a user color, just as they can select an accent color on a PC. 앱이 브러시 또는 색 리소스를 통해 이러한 강조 색을 호출 하는 한 시스템 설정에서 사용자가 선택한 색이 사용 됩니다.As long as your app calls these accent colors through brushes or color resources, the color that the user selected in the system settings will be used. Xbox One의 악센트 색은 시스템이 아닌 사용자 당입니다.Note that accent colors on Xbox One are per user, not per system.

또한 Xbox One의 사용자 색 집합은 Pc, 휴대폰 및 기타 장치의 사용자 색 집합과 동일 하지 않습니다.Please also note that the set of user colors on Xbox One is not the same as that on PCs, phones, and other devices.

앱에서 SystemControlForegroundAccentBrush 또는 색 리소스 ( SystemAccentColor )와 같은 브러시 리소스를 사용 하거나 대신 UIColorType * API를 통해 악센트 색을 직접 호출 하는 경우 해당 색은 Xbox one에서 사용할 수 있는 악센트 색으로 바뀝니다.As long as your app uses a brush resource such as SystemControlForegroundAccentBrush , or a color resource ( SystemAccentColor ), or instead calls accent colors directly through the UIColorType.Accent* API, those colors are replaced with accent colors available on Xbox One. 고대비 브러시 색은 PC와 휴대폰에서와 동일한 방법으로 시스템에서 가져옵니다.High contrast brush colors are also pulled in from the system the same way as on a PC and phone.

일반적으로 강조 색에 대 한 자세한 내용은 강조 색을 참조 하세요.To learn more about accent color in general, see Accent color.

Tv 간의 색 차이Color variance among TVs

TV를 설계할 때 색은 렌더링 되는 TV에 따라 크게 다르게 표시 됩니다.When designing for TV, note that colors display quite differently depending on the TV on which they are rendered. 색이 모니터에서와 똑같이 표시 된다고 가정 하지 마십시오.Don't assume colors will look exactly as they do on your monitor. 앱이 UI의 일부를 구분 하기 위해 색의 미묘한 차이를 사용 하는 경우 색은 함께 혼합할 수 있으며 사용자는 혼동을 받을 수 있습니다.If your app relies on subtle differences in color to differentiate parts of the UI, colors could blend together and users could get confused. 사용자가 사용 하는 TV에 관계 없이 사용자가 명확 하 게 구분할 수 있는 색을 사용 하려고 합니다.Try to use colors that are different enough that users will be able to clearly differentiate them, regardless of the TV they are using.

TV 안전 색TV-safe colors

색의 RGB 값은 빨강, 녹색 및 파랑의 강도를 나타냅니다.A color's RGB values represent intensities for red, green, and blue. Tv는 극단적인 강도를 잘 처리 하지 않습니다 — . 이러한 효과는 홀수 줄무늬 효과를 생성 하거나 특정 tv에서 희미하게 표시 될 수 있습니다.TVs don't handle extreme intensities very well—they can produce an odd banded effect, or appear washed out on certain TVs. 또한 높은 강도 색으로 인해 blooming (인접 한 픽셀은 동일한 색 그리기 시작) 될 수 있습니다.Additionally, high-intensity colors may cause blooming (nearby pixels start drawing the same colors). TV를 안전 하 게 보호 하는 것으로 간주 되는 항목에는 다른 학교가 있지만 RGB 값 16-235 (또는 16 진수의 경우 10-EB)에 있는 색은 일반적으로 TV에 안전 하 게 사용할 수 있습니다.While there are different schools of thought in what are considered TV-safe colors, colors within the RGB values of 16-235 (or 10-EB in hexadecimal) are generally safe to use for TV.

TV 안전 색 범위

지금까지 Xbox의 앱은이 "TV 안전" 색 범위 내에서 색을 조정 해야 했습니다. 그러나 적합 한 작성자 업데이트로 시작 하는 Xbox One은 전체 범위 콘텐츠를 TV 안전 범위로 자동으로 확장 합니다.Historically, apps on Xbox had to tailor their colors to fall within this "TV-safe" color range; however, starting with the Fall Creators Update, Xbox One automatically scales full range content into the TV-safe range. 즉, 대부분의 앱 개발자는 TV 안전 색에 대해 더 이상 걱정할 필요가 없습니다.This means that most app developers no longer have to worry about TV-safe colors.

중요

TV 안전 색 범위에 이미 있는 비디오 콘텐츠에는 미디어 파운데이션을 사용 하 여 재생할 때이 색 크기 조정 효과가 적용 되지 않습니다.Video content that's already in the TV-safe color range doesn't have this color scaling effect applied when played back using Media Foundation.

DirectX 11 또는 DirectX 12를 사용 하 여 앱을 개발 하 고 UI 또는 비디오를 렌더링 하기 위해 고유한 스왑 체인을 만드는 경우 IDXGISwapChain3:: SetColorSpace1를 호출 하 여 사용 하는 색 공간을 지정할 수 있습니다. 그러면 시스템에서 색의 크기를 조정 해야 하는지 여부를 알 수 있습니다.If you're developing an app using DirectX 11 or DirectX 12 and creating your own swap chain to render UI or video, you can specify the color space you use by calling IDXGISwapChain3::SetColorSpace1, which will let the system know if it needs to scale colors or not.

UI 컨트롤에 대 한 지침Guidelines for UI controls

여러 장치에서 잘 작동 하는 몇 가지 UI 컨트롤이 있지만 TV에서 사용 하는 경우 몇 가지 사항을 고려해 야 합니다.There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. 10 피트 환경을 설계할 때 이러한 컨트롤을 사용 하기 위한 몇 가지 모범 사례에 대해 알아보세요.Read about some best practices for using these controls when designing for the 10-foot experience.

피벗 컨트롤Pivot control

피벗 은 다른 머리글이 나 탭을 선택 하 여 앱 내에서 보기를 빠르게 탐색 합니다.A Pivot provides quick navigation of views within an app through selecting different headers or tabs. 컨트롤은 어떤 머리글에 포커스가 있는지 밑줄을 사용 하 여 게임 패드/원격을 사용할 때 현재 선택 된 헤더를 보다 명확 하 게 합니다.The control underlines whichever header has focus, making it more obvious which header is currently selected when using gamepad/remote.

피벗 밑줄

IsHeaderItemsCarouselEnabled 속성을로 설정 하면 true 선택 된 피벗 머리글이 항상 첫 번째 위치로 이동 하는 것이 아니라 피벗이 항상 동일한 위치를 유지할 수 있습니다.You can set the Pivot.IsHeaderItemsCarouselEnabled property to true so that pivots always keep the same position, rather than having the selected pivot header always move to the first position. TV와 같은 큰 화면 표시에서는 헤더 래핑이 사용자에게 방해가 될 수 있으므로 환경이 개선됩니다.This is a better experience for large-screen displays such as TV, because header wrapping can be distracting to users. 모든 피벗 머리글이 한 번에 화면에 맞지 않는 경우 고객이 다른 헤더를 볼 수 있도록 스크롤 막대가 있습니다. 그러나 최상의 환경을 제공 하기 위해 모든 것이 화면에 적합 한지 확인 해야 합니다.If all of the pivot headers don't fit onscreen at once, there will be a scrollbar to let customers see the other headers; however, you should make sure that they all fit on the screen to provide the best experience. 자세한 내용은 탭 및 피벗을 참조 하세요.For more information, see Tabs and pivots.

탐색 창 ( 햄버거 메뉴 라고도 함)은 UWP 앱에서 일반적으로 사용 되는 탐색 컨트롤입니다.A navigation pane (also known as a hamburger menu ) is a navigation control commonly used in UWP apps. 일반적으로 사용자가 다른 페이지로 이동 하는 목록 스타일 메뉴에서 선택할 수 있는 몇 가지 옵션이 포함 된 창입니다.Typically it is a pane with several options to choose from in a list style menu that will take the user to different pages. 일반적으로이 창은 공간 절약을 위해 축소 된 상태로 시작 되며, 사용자는 단추를 클릭 하 여 열 수 있습니다.Generally this pane starts out collapsed to save space, and the user can open it by clicking on a button.

마우스 및 터치를 사용 하 여 탐색 창에 액세스할 수 있지만, 게임 패드/원격을 사용 하면 사용자가 창을 열기 위해 단추를 탐색 해야 하므로 액세스 가능성이 줄어듭니다.While nav panes are very accessible with mouse and touch, gamepad/remote makes them less accessible since the user has to navigate to a button to open the pane. 따라서 보기 단추를 사용 하 여 탐색 창을 열고 사용자가 페이지의 왼쪽에 있는 모든 방법을 탐색 하 여 열 수 있도록 하는 것이 좋습니다.Therefore, a good practice is to have the View button open the nav pane, as well as allow the user to open it by navigating all the way to the left of the page. 이 디자인 패턴을 구현 하는 방법에 대 한 코드 샘플은 프로그래밍 방식 포커스 탐색 문서에서 찾을 수 있습니다.Code sample on how to implement this design pattern can be found in Programmatic focus navigation document. 이를 통해 사용자는 창의 내용에 매우 쉽게 액세스할 수 있습니다.This will provide the user with very easy access to the contents of the pane. 탐색 창이 다른 화면 크기에서 작동 하는 방법 및 게임 패드/원격 탐색의 모범 사례에 대 한 자세한 내용은 nav pane을 참조 하세요.For more information about how nav panes behave in different screen sizes as well as best practices for gamepad/remote navigation, see Nav panes.

CommandBar 레이블CommandBar labels

해당 높이가 최소화 되 고 일관 되 게 유지 되도록 CommandBar 의 아이콘 오른쪽에 레이블을 배치 하는 것이 좋습니다.It is a good idea to have the labels placed to the right of the icons on a CommandBar so that its height is minimized and stays consistent. 이 작업은 CommandBar. DefaultLabelPosition 속성을로 설정 하 여 수행할 수 CommandBarDefaultLabelPosition.Right 있습니다.You can do this by setting the CommandBar.DefaultLabelPosition property to CommandBarDefaultLabelPosition.Right.

아이콘 오른쪽에 레이블이 있는 명령 모음

이 속성을 설정 하면 레이블이 항상 표시 됩니다 .이는 사용자에 대 한 클릭 횟수를 최소화 하기 때문에 10 피트 환경에 적합 합니다.Setting this property will also cause the labels to always be displayed, which works well for the 10-foot experience because it minimizes the number of clicks for the user. 이는 다른 장치 유형을 따르는 좋은 모델 이기도 합니다.This is also a great model for other device types to follow.

도구 설명Tooltip

도구 설명 컨트롤은 사용자가 마우스를 위로 가져갈 때 UI에 추가 정보를 제공 하는 방법으로 도입 되었습니다.The Tooltip control was introduced as a way to provide more information in the UI when the user hovers the mouse over, or taps and holds their figure on, an element. 게임 패드 및 원격의 경우 Tooltip 요소가 포커스를 가질 때 잠깐 후에 표시 되 고, 잠시 동안 화면을 유지 한 후 사라집니다.For gamepad and remote, Tooltip appears after a brief moment when the element gets focus, stays onscreen for a short time, and then disappears. 너무 많은를 사용 하는 경우이 동작이 혼란을 수 있습니다 Tooltip .This behavior could be distracting if too many Tooltips are used. TooltipTV를 설계할 때를 사용 하지 않도록 합니다.Try to avoid using Tooltip when designing for TV.

단추 스타일Button styles

표준 UWP 단추가 TV에서 잘 작동 하는 반면, 단추의 일부 비주얼 스타일은 UI에 대 한 주의를 표시 합니다. 특히,이는 특히 10 피트 환경에서 포커스가 있는 위치를 명확 하 게 전달 하는 데 도움이 되는 모든 플랫폼에 대해 고려해 야 할 수 있습니다.While the standard UWP buttons work well on TV, some visual styles of buttons call attention to the UI better, which you may want to consider for all platforms, particularly in the 10-foot experience, which benefits from clearly communicating where the focus is located. 이러한 스타일에 대 한 자세한 내용은 단추를 참조 하세요.To read more about these styles, see Buttons.

중첩 된 UI 요소Nested UI elements

중첩 된 UI는 컨테이너 UI 요소 내에 중첩 된 실행 가능한 항목을 노출 합니다. 중첩 된 항목 뿐만 아니라 컨테이너 항목도 서로 독립적인 포커스를 가질 수 있습니다.Nested UI exposes nested actionable items enclosed inside a container UI element where both the nested item as well as the container item can take independent focus from each other.

중첩 된 UI는 일부 입력 형식에 대해서는 잘 작동 하지만 항상 사용 하는 것은 아닙니다.Nested UI works well for some input types, but not always for gamepad and remote, which rely on XY navigation. 이 항목의 지침에 따라 UI가 10 피트 환경에 맞게 최적화 되어 있고 사용자가 모든 interactable 요소에 쉽게 액세스할 수 있는지 확인 해야 합니다.Be sure to follow the guidance in this topic to ensure that your UI is optimized for the 10-foot environment, and that the user can access all interactable elements easily. 한 가지 일반적인 해결 방법은 중첩 된 UI 요소를에 넣는 것입니다 ContextFlyout .One common solution is to place nested UI elements in a ContextFlyout.

중첩 된 UI에 대 한 자세한 내용은 목록 항목의 중첩 된 ui를 참조 하세요.For more information on nested UI, see Nested UI in list items.

MediaTransportControlsMediaTransportControls

MediaTransportControls 요소를 사용 하면 사용자가 재생, 일시 중지, 폐쇄 캡션 등을 수행할 수 있는 기본 재생 환경을 제공 하 여 미디어와 상호 작용할 수 있습니다.The MediaTransportControls element lets users interact with their media by providing a default playback experience that allows them to play, pause, turn on closed captions, and more. 이 컨트롤은 MediaPlayerElement 의 속성 이며 두 개의 레이아웃 옵션인 단일 행두 행 을 지원 합니다.This control is a property of MediaPlayerElement and supports two layout options: single-row and double-row . 단일 행 레이아웃에서 슬라이더와 재생 단추는 모두 한 행에 있으며 슬라이더 왼쪽에 있는 재생/일시 중지 단추가 있습니다.In the single-row layout, the slider and playback buttons are all located in one row, with the play/pause button located to the left of the slider. 이중 행 레이아웃에서 슬라이더는 자체 행을 차지 하며 재생 단추는 별도의 아래쪽 행에 있습니다.In the double-row layout, the slider occupies its own row, with the playback buttons on a separate lower row. 10 피트 환경을 디자인 하는 경우 더 나은 게임 패드 탐색을 제공 하므로 이중 행 레이아웃을 사용 해야 합니다.When designing for the 10-foot experience, the double-row layout should be used, as it provides better navigation for gamepad. 이중 행 레이아웃을 사용 하도록 설정 하려면 IsCompact="False" 의 요소에서를 설정 MediaTransportControls TransportControls MediaPlayerElement 합니다.To enable the double-row layout, set IsCompact="False" on the MediaTransportControls element in the TransportControls property of the MediaPlayerElement.

<MediaPlayerElement x:Name="mediaPlayerElement1"  
                    Source="Assets/video.mp4"
                    AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls IsCompact="False"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

미디어를 앱에 추가 하는 방법에 대 한 자세한 내용을 보려면 미디어 재생 을 방문 하세요.Visit Media playback to learn more about adding media to your app.

! [참고] MediaPlayerElement 는 Windows 10 버전 1607 이상 에서만 사용할 수 있습니다.![NOTE] MediaPlayerElement is only available in Windows 10, version 1607 and later. 이전 버전의 Windows 10 용 응용 프로그램을 개발 하는 경우에는 MediaElement 를 대신 사용 해야 합니다.If you're developing an app for an earlier version of Windows 10, you'll need to use MediaElement instead. 위의 권장 사항은에 MediaElement 도 적용 되며, 속성은 TransportControls 동일한 방식으로 액세스 됩니다.The recommendations above apply to MediaElement as well, and the TransportControls property is accessed in the same way.

검색 환경Search experience

콘텐츠 검색은 10 피트 환경에서 가장 일반적으로 수행 되는 기능 중 하나입니다.Searching for content is one of the most commonly performed functions in the 10-foot experience. 앱이 검색 환경을 제공 하는 경우 사용자는 게임 패드의 Y 단추를 액셀러레이터 키로 사용 하 여 빠르게 액세스할 수 있도록 하는 것이 도움이 됩니다.If your app provides a search experience, it is helpful for the user to have quick access to it by using the Y button on the gamepad as an accelerator.

대부분의 고객은이 액셀러레이터를 이미 잘 알고 있어야 하지만, 원하는 경우 시각적 Y 문자 모양을 UI에 추가 하 여 고객이 단추를 사용 하 여 검색 기능에 액세스할 수 있음을 나타낼 수 있습니다.Most customers should already be familiar with this accelerator, but if you like you can add a visual Y glyph to the UI to indicate that the customer can use the button to access search functionality. 이 큐를 추가 하는 경우에는 Segoe XBOX MDL2 symbol 글꼴 (HTML 앱의 경우)에서 기호를 사용 하 여 &#xE3CC; \E426 Xbox shell 및 기타 앱과의 일관성을 제공 해야 합니다.If you do add this cue, be sure to use the symbol from the Segoe Xbox MDL2 Symbol font (&#xE3CC; for XAML apps, \E426 for HTML apps) to provide consistency with the Xbox shell and other apps.

참고

Segoe Xbox MDL2 Symbol 글꼴은 Xbox에서만 사용할 수 있기 때문에 PC에서는 기호가 제대로 표시되지 않습니다.Because the Segoe Xbox MDL2 Symbol font is only available on Xbox, the symbol won't appear correctly on your PC. 그러나 Xbox에 배포한 후에는 TV에 표시 됩니다.However, it will show up on the TV once you deploy to Xbox.

Y 단추는 게임 패드 에서만 사용할 수 있으므로 UI의 단추와 같은 검색에 대 한 다른 액세스 방법을 제공 해야 합니다.Since the Y button is only available on gamepad, make sure to provide other methods of access to search, such as buttons in the UI. 그렇지 않으면 일부 고객이 기능에 액세스 하지 못할 수 있습니다.Otherwise, some customers may not be able to access the functionality.

10 피트 환경에서는 고객이 전체 화면 검색 환경을 사용 하는 것이 더 쉬울 수도 있습니다.In the 10-foot experience, it is often easier for customers to use a full screen search experience because there is limited room on the display. 전체 화면 또는 부분 화면, "내부" 검색을 사용 하는 경우 사용자가 검색 환경을 열 때 사용자가 검색 환경을 열 때 사용자가 검색 용어를 입력할 준비가 되 면 화면 키보드가 이미 열려 있는 것이 좋습니다.Whether you have full screen or partial-screen, "in-place" search, we recommend that when the user opens the search experience, the onscreen keyboard appears already opened, ready for the customer to enter search terms.

Xbox의 사용자 지정 시각적 상태 트리거Custom visual state trigger for Xbox

UWP 앱을 10 피트 환경에 맞게 조정 하려면 앱이 Xbox 콘솔에서 시작 된 것을 감지할 때 레이아웃을 변경 하는 것이 좋습니다.To tailor your UWP app for the 10-foot experience, we recommend that you make layout changes when the app detects that it has been launched on an Xbox console. 이 작업을 수행 하는 한 가지 방법은 사용자 지정 시각적 상태 트리거 를 사용 하는 것입니다.One way to do this is by using a custom visual state trigger . 시각적 상태 트리거는 Blend for Visual Studio 에서 편집 하려는 경우에 가장 유용 합니다.Visual state triggers are most useful when you want to edit in Blend for Visual Studio . 다음 코드 조각에서는 Xbox의 시각적 상태 트리거를 만드는 방법을 보여 줍니다.The following code snippet shows how to create a visual state trigger for Xbox:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Xbox"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="RootSplitView.OpenPaneLength"
                        Value="368"/>
                <Setter Target="RootSplitView.CompactPaneLength"
                        Value="96"/>
                <Setter Target="NavMenuList.Margin"
                        Value="0,75,0,27"/>
                <Setter Target="Frame.Margin"
                        Value="0,27,48,27"/>
                <Setter Target="NavMenuList.ItemContainerStyle"
                        Value="{StaticResource NavMenuItemContainerXboxStyle}"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

트리거를 만들려면 앱에 다음 클래스를 추가 합니다.To create the trigger, add the following class to your app. 이 클래스는 위의 XAML 코드에서 참조 하는 클래스입니다.This is the class that is referenced by the XAML code above:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

        set
        {
            _queriedDeviceFamily = value;
            _currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
            SetActive(_queriedDeviceFamily == _currentDeviceFamily);
        }
    }
}

사용자 지정 트리거를 추가한 후에는 앱이 Xbox One 콘솔에서 실행 중임을 검색할 때마다 XAML 코드에서 지정 된 레이아웃을 자동으로 수정 합니다.After you've added your custom trigger, your app will automatically make the layout modifications you specified in your XAML code whenever it detects that it is running on an Xbox One console.

앱이 Xbox에서 실행 중인지 확인 하 고 코드를 통해 적절 한 조정을 수행할 수 있습니다.Another way you can check whether your app is running on Xbox and then make the appropriate adjustments is through code. 다음 간단한 변수를 사용 하 여 앱이 Xbox에서 실행 중인지 확인할 수 있습니다.You can use the following simple variable to check if your app is running on Xbox:

bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
                    "Windows.Xbox");

그런 다음이 검사에 따라 코드 블록에서 UI를 적절 하 게 조정할 수 있습니다.Then, you can make the appropriate adjustments to your UI in the code block following this check.

요약Summary

10 피트 환경을 디자인 하는 경우 다른 플랫폼에 대 한 디자인과 다르게 고려 하기 위해 고려해 야 할 특별 한 고려 사항이 있습니다.Designing for the 10-foot experience has special considerations to take into account that make it different from designing for any other platform. UWP 앱의 직선 포트를 Xbox One으로 사용할 수는 있지만, 작동 하는 것은 아니지만, 사용자의 불편을 일으킬 수 있는 것은 아닙니다.While you can certainly do a straight port of your UWP app to Xbox One and it will work, it won't necessarily be optimized for the 10-foot experience and can lead to user frustration. 이 문서의 지침에 따라 앱이 TV에 있을 수 있는 것과 동일한 지 확인 합니다.Following the guidelines in this article will make sure that your app is as good as it can be on TV.