Xbox 및 TV용 디자인
Xbox One 및 텔레비전 화면에서 멋지게 보이고 제대로 작동하도록 Windows 앱을 디자인합니다.
10피트 환경에서 UWP 애플리케이션의 상호 작용 환경에 대한 지침은 게임 패드 및 원격 제어 상호 작용을 참조하세요.
개요
이 유니버설 Windows 플랫폼을 사용하여 여러 Windows 디바이스에서 즐거운 환경을 조성할 수 있습니다. UWP 프레임워크에서 제공하는 대부분의 기능을 통해 앱은 추가 작업 없이 이 모든 디바이스에서 동일한 UI(사용자 인터페이스)를 사용할 수 있습니다. 그러나 Xbox One 및 TV 화면에서 잘 작동하도록 앱을 조정하고 최적화하려면 특별히 고려할 점이 있습니다.
실내의 소파에 앉아 TV와 상호 작용 하는 게임 패드 또는 리모컨을 사용하여 TV를 조작하는 환경을 3미터 환경이라고 합니다. 일반적으로 사용자가 화면에서 약 3m 떨어진 곳에 앉아 있기 때문에 이렇게 이름이 지정되었습니다. 이 경우 가령 0.6m 환경이나 PC 조작 시에는 존재하지 않는 고유한 과제가 발생합니다. Xbox One 또는 TV 화면으로 출력하고 컨트롤러를 입력에 사용하는 다른 디바이스용 앱을 개발하는 경우에 늘 이 점을 명심해야 합니다.
10피트 환경에서 앱이 잘 작동하도록 하는 데 이 문서의 모든 단계가 필요한 것은 아니지만, 앱을 이해하고 앱에 적합하게 결정하면 앱의 특정 요구 사항에 맞게 조정된 더 좋은 10피트 환경이 조성됩니다. 10피트 환경에서 앱을 구현할 때 다음 디자인 원칙을 고려합니다.
단순
10피트 환경에 맞게 설계할 때 고유한 과제 집합이 생깁니다. 해상도와 보기 거리 때문에 사람들이 너무 많은 정보를 처리하기가 어려울 수 있습니다. 구성요소를 최대한 간소화하여 디자인을 깔끔하게 유지해보세요. TV에 표시되는 정보의 양은 데스크톱이 아닌 휴대폰에서 보이는 것과 비슷해야 합니다.
일관성
10피트 환경의 UWP 앱은 직관적이고 사용이 간편해야 합니다. 포커스를 분명하고 확실하게 만듭니다. 공간 전체의 이동이 일관되고 예측 가능하도록 콘텐츠를 배열합니다. 사람들에게 하고 싶은 작업에 최단 경로를 제공합니다.
스크린샷에 표시된 모든 영화는 Microsoft 영화 & TV에서 시청할 수 있습니다.
매력
몰입감이 가장 큰 영화 환경은 큰 화면에서 조성됩니다. 에지 투 에지 풍경, 우아한 움직임, 색과 입력 체계의 생생한 활용은 앱의 수준을 한 단계 높여줍니다. 과감한 아름다움
10피트 환경에 맞게 최적화
이제 10피트 환경에 적합한 UWP 앱 디자인의 원칙을 알았으니 앱을 최적화하고 훌륭한 사용자 환경을 만들 수 있는 구체적인 방법에 대한 다음 개요를 읽어보세요.
| 기능 | 설명 |
|---|---|
| UI 요소 크기 조정 | 유니버설 Windows 플랫폼은 크기 조정 및 유효 픽셀을 사용하여 보기 거리에 따라 UI 크기를 조정합니다. 크기 조정을 이해하고 이를 UI에 적용하면 10피트 환경에 맞게 앱을 쉽게 최적화할 수 있을 것입니다. |
| TV 안전 영역 | UWP는 기본적으로 TV 위험 영역(화면 가장자리에 가까운 영역)에 UI를 자동으로 표시하지 않습니다. 그러나 이렇게 하면 UI가 레터박스로 보이는 "boxed-in" 효과가 만들어집니다. 앱이 TV에 진정으로 몰입되게 하려면 지원하는 TV의 화면 가장자리까지 앱이 확장되도록 수정해야 할 것입니다. |
| 색 | UWP는 색 테마를 지원하며, 시스템 테마를 적용하는 앱은 Xbox One에서 기본적으로 어둡게 설정됩니다. 앱에 특정 색 테마가 있는 경우 일부 색이 TV에서 잘 작동하지 않으므로 피해야 한다는 점을 고려해야 합니다. |
| 소리 | 소리는 10피트 환경에서 중요한 역할을 하며, 사용자에게 몰입감과 피드백을 제공하는 데 도움이 됩니다. UWP는 앱이 Xbox One에서 실행 중일 때 일반 컨트롤용 사운드를 자동으로 켜는 기능을 제공합니다. UWP에 기본 제공되는 사운드 지원에 대해 자세히 알아보고 이를 활용하는 방법을 알아봅니다. |
| UI 컨트롤에 대한 지침 | 여러 장치에서 잘 작동하지만 TV에서 사용할 때 고려할 사항이 있는 몇 가지 UI 컨트롤이 있습니다. 10피트 환경용으로 디자인할 때 이러한 컨트롤을 사용하는 몇 가지 모범 사례에 대해 알아봅니다. |
| Xbox에 대한 사용자 지정 시각적 상태 트리거 | UWP 앱을 10피트 환경에 맞게 조정할 때는 앱이 Xbox 콘솔에서 실행되었음을 감지할 때 사용자 지정 시각적 상태 트리거를 사용하여 레이아웃을 변경하는 것이 좋습니다. |
이전 디자인 및 레이아웃 고려 사항 외에도 앱을 빌드할 때 고려해야 할 몇 가지 게임 패드 및 원격 제어 상호 작용 최적화가 있습니다.
| 기능 | 설명 |
|---|---|
| XY 포커스 탐색 및 조작 | XY 포커스 탐색을 사용하면 사용자가 앱의 UI를 탐색할 수 있습니다. 그러나 이렇게 하면 사용자의 상하좌우 탐색이 제한됩니다. 이점과 그 외 고려 사항을 처리하는 권장 사항 이 섹션에 설명되어 있습니다. |
| 마우스 모드. | XY 포커스 탐색은 맵 또는 그리기 및 페인팅 앱과 같은 일부 유형의 애플리케이션에서는 실용적이지 않거나 불가능합니다. 이러한 경우 마우스 모드를 사용하면 PC의 마우스처럼 게임 패드나 리모컨으로 자유롭게 탐색할 수 있습니다. |
| 포커스 시각적 개체 | 포커스 시각적 개체는 현재 포커스가 있는 UI 요소를 강조 표시하는 테두리입니다. 이를 통해 사용자는 탐색하거나 상호 작용하는 UI를 빠르게 식별할 수 있습니다. |
| 포커스 연결 | 포커스 연결을 사용하려면 UI 요소에 포커스가 있을 때 게임패드나 리모컨에서 A/Select 단추를 눌러야 상호 작용할 수 있습니다. |
| 하드웨어 단추 | 게임패드와 리모컨은 매우 다른 단추와 구성을 제공합니다. |
참고 항목
이 항목에 있는 대부분의 코드 조각은 XAML/C#으로 작성되었지만 원칙과 개념은 모든 UWP 앱에 적용됩니다. Xbox용 HTML/JavaScript UWP 앱을 개발하고 있다면 GitHub에서 뛰어난 TVHelpers 라이브러리를 확인하세요.
UI 요소 크기 조정
10피트 환경의 앱 사용자는 원격 제어 또는 게임 패드를 사용하고 화면에서 몇 피트 떨어진 곳에 있기 때문에 디자인에서 고려해야 할 몇 가지 UI 고려 사항이 있습니다. 사용자가 요소를 쉽게 탐색하고 선택할 수 있도록 UI에 적절한 콘텐츠 밀도가 있고 너무 복잡하지 않아야 합니다. 단순성이 핵심입니다.
배율 및 적응형 레이아웃
배율은 앱이 실행 중인 디바이스에 적합한 크기로 UI 요소가 표시되게 하는 데 도움이 됩니다. 데스크톱에서 이 설정은 설정 > 시스템 > 디스플레이에 슬라이딩 값으로 제공됩니다. 디바이스에서 이를 지원하는 경우에도 이 설정이 휴대폰에 존재합니다.
Xbox One에는 이러한 시스템 설정이 없지만 UWP UI 요소의 크기를 TV에 맞게 조정되도록 XAML 앱은 기본값 200%로, HTML 앱은 150%로 크기가 조정됩니다. UI 요소가 다른 디바이스에 맞게 적절하게 크기가 조정된다면 TV에도 맞게 적절하게 크기가 조정됩니다. Xbox One은 앱을 1080p(1920 x 1080 픽셀)로 렌더링합니다. 따라서 PC 같은 다른 디바이스에서 앱을 가져올 때 적응 기술을 활용하여 UI가 100% 배율(또는 HTML 앱의 경우 100% 배율에서 1280 x 720px)에서 960 x 540px로 멋지게 보이는지 확인합니다.
Xbox용 디자인은 한 해상도 1920 x 1080만 걱정하면 되므로 PC용 디자인과 약간 다릅니다. 사용자에게 더 나은 해상도의 TV가 있는지 여부는 중요하지 않습니다. UWP 앱은 항상 1080p로 크기가 조정됩니다.
200%(또는 HTML 앱의 경우 150%)의 올바른 자산 크기도 TV 해상도에 관계없이 Xbox One에서 실행될 때 앱용으로 끌어옵니다.
콘텐츠 밀도
앱을 디자인할 때 사용자가 멀리서 UI를 보고 원격 또는 게임 컨트롤러를 사용하여 UI와 상호 작용하므로 마우스 또는 터치 입력을 사용할 때보다 탐색하는 데 더 많은 시간이 걸립니다.
UI 컨트롤의 크기
대화형 UI 요소의 크기는 최소 높이가 32 epx(유효 픽셀)여야 합니다. 이는 일반적인 UWP 컨트롤의 기본값이며, 200% 배율로 사용하면 UI 요소가 멀리서도 보여 콘텐츠 밀도를 줄이는 데 도움이 됩니다.
클릭 수
사용자가 TV 화면의 한 가장자리에서 다른 가장자리로 이동하는 경우 클릭 6회 이하로 UI를 간소화할 수 있어야 합니다. 이 경우에도 단순성의 원칙이 적용됩니다.
텍스트 크기
멀리서 UI가 보이게 하려면 다음 규칙을 사용합니다.
- 기본 텍스트 및 읽기 콘텐츠: 최소 15 epx
- 중요하지 않은 텍스트 및 추가 콘텐츠: 최소 12 epx
UI에서 더 큰 텍스트를 사용할 때는 화면 공간을 너무 많이 제한하지 않는 크기를 선택하여 다른 콘텐츠가 잠재적으로 채울 수 있는 공간을 차지합니다.
배율 옵트아웃
앱은 각 디바이스 유형에 맞게 크기를 조정하여 모든 디바이스에서 적절하게 실행되는 데 도움이 되는 배율 지원을 활용하는 것이 좋습니다. 그러나 이 동작을 옵트아웃하고 모든 UI를 100% 배율로 디자인할 수 있습니다. 배율은 100% 이외의 값으로 변경할 수 없습니다.
XAML 앱은 다음 코드 조각을 사용하여 배율을 옵트아웃할 수 있습니다.
bool result =
Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);
result에서 성공적으로 옵트아웃했는지 여부를 알려줍니다.
HTML/JavaScript에 대한 샘플 코드를 포함하는 기타 자세한 내용은 크기 조정을 해제하는 방법을 참조하세요.
이 항목에서 언급한 유효 픽셀 값을 실제 픽셀 값을 두 배로 늘려(HTML 앱의 경우는 1.5 곱하여) UI 요소의 적절한 크기를 계산해야 합니다.
TV 안전 영역
역사적, 기술적 이유 때문에 일부 TV는 화면 가장자리에 콘텐츠를 표시하지 않습니다. 기본적으로 UWP는 TV 위험 영역에 UI 콘텐츠를 표시하지 않고 대신 페이지 배경만 그립니다.
다음 이미지에서 TV 위험 영역이 파란색 영역으로 표시되어 있습니다.
다음 코드 조각으로 알 수 있듯이 배경을 정적 또는 테마 색 또는 이미지로 설정할 수 있습니다.
테마 색상
<Page x:Class="Sample.MainPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
이미지
<Page x:Class="Sample.MainPage"
Background="\Assets\Background.png"/>
이는 추가 작업 없이 보이게 되는 앱의 모양입니다.
탐색 창 및 그리드 같은 UI의 일부가 잘려 앱에 "boxed-in" 효과를 주기 때문에 이것은 최적이 아닙니다. 그러나 최적화를 통해 UI의 일부를 화면 가장자리로 확장하여 앱에 더 많은 영화 효과를 줄 수 있습니다.
가장자리로 UI 끌기
사용자에게 더 많은 몰입감을 주도록 특정 UI 요소를 사용하여 화면 가장자리까지 확장하는 것이 좋습니다. 여기에는 ScrollViewers, 탐색 창 및 CommandBars가 있습니다.
반면에 대화형 요소와 텍스트는 항상 화면 가장자리를 피하여 일부 TV에서 차단되지 않도록 해야 합니다. 화면 가장자리의 5% 내에서 필수가 아닌 시각적 개체를 끌어오는 것이 좋습니다. UI 요소 크기 조정에서 언급했듯이 Xbox One 콘솔의 기본 배율 200%를 따르는 UWP 앱은 960 x 540 epx 영역을 활용하므로 앱의 UI에서 다음 영역에 필수 UI를 배치하지 않아야 합니다.
- 위쪽과 아래쪽에서 27 epx 거리
- 왼쪽 및 오른쪽에서 48 epx 거리
다음 섹션에서는 UI를 화면 가장자리로 확장하는 방법을 설명합니다.
코어 창 범위
10피트 환경만 대상으로 하는 UWP 앱은 코어 창 범위를 사용하는 것이 더 간단한 옵션입니다.
App.xaml.cs의 OnLaunched 메서드에서 다음 코드를 추가합니다.
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
(Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);
이 코드 줄을 사용하면 앱 창이 화면 가장자리까지 확장되므로 모든 대화형 및 필수 UI를 앞에서 설명한 TV 안전 영역으로 옮겨야 합니다. 컨텍스트 메뉴 및 열린 ComboBoxes 같은 임시 UI는 TV 안전 영역 안으로 자동으로 유지됩니다.
창 배경
탐색 창은 일반적으로 화면 가장자리 근처로 끌어지므로 어색한 간격이 생기지 않게 배경이 TV 위험 영역으로 확장되어야 합니다. 이 경우 탐색 창 배경 색을 앱 배경 색으로 변경하면 됩니다.
앞에서 설명한 대로 코어 창 범위를 사용하면 화면 가장자리에 UI를 끌 수 있지만 SplitView의 콘텐츠에서 양수 여백을 사용하여 TV 안전 영역 내에 유지해야 합니다.
여기서 탐색 창의 배경이 화면 가장자리로 확장되었고, 탐색 항목은 TV 안전 영역에 유지되고 있습니다.
SplitView의 콘텐츠(이 경우 항목 그리드)가 화면 아래쪽으로 확장되어 계속되고 잘리지 않는 것처럼 보이지만 그리드의 상단은 여전히 TV 안전 영역 내에 있습니다. (목록 및 그리드의 스크롤 끝에서 이 작업을 수행하는 방법에 대해 자세히 알아보세요).
다음 코드 조각은 이런 효과를 냅니다.
<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>
CommandBar는 일반적으로 앱의 하나 이상의 가장자리 근처에 배치되는 창의 또 다른 예이며, TV에서처럼 그 배경이 화면 가장자리까지 확장되어야 합니다. 여기에는 일반적으로 우측에 "..."로 표시되는 자세히 단추도 포함되는데 이것은 TV 안전 영역에 유지되어야 합니다. 다음은 원하는 상호 작용 및 시각 효과를 달성하기 위한 몇 가지 다른 전략입니다.
옵션 1: 배경색을 CommandBar 투명하거나 페이지 배경과 동일한 색으로 변경합니다.
<CommandBar x:Name="topbar"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
...
</CommandBar>
이렇게 하면 CommandBar이 페이지의 나머지 부분과 동일한 배경 위에 있는 것처럼 보이므로 배경이 화면 가장자리로 원활하게 흐릅니다.
옵션 2: 채우기가 배경과 같은 색인 배경 사각형을 CommandBar 추가하고 페이지의 나머지 부분과 아래에 CommandBar 배치합니다.
<Rectangle VerticalAlignment="Top"
HorizontalAlignment="Stretch"
Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch">
...
</CommandBar>
참고 항목
이 방식을 사용하는 경우에는 자세히 단추는 필요한 경우에 아이콘 아래에 있는 AppBarButton의 레이블을 표시하기 위해 필요한 경우 열린 CommandBar의 높이를 변경합니다. 이 크기 조정을 방지하려면 레이블을 아이콘의 오른쪽으로 이동하는 것이 좋습니다. 자세한 내용은 CommandBar 레이블을 참조하세요.
이 두 방식 모두 이 섹션에 나열된 다른 유형의 컨트롤에도 적용됩니다.
목록 및 그리드의 스크롤 끝
목록 및 그리드에는 화면에 동시에 들어갈 수 있는 것보다 더 많은 항목을 포함하는 것이 일반적입니다. 이 경우 목록 또는 그리드를 화면 가장자리로 확장하는 것이 좋습니다. 가로 스크롤 목록과 눈금은 오른쪽 가장자리까지 확장되어야 하며 세로 스크롤은 맨 아래까지 확장되어야 합니다.
목록이나 그리드가 이와 같이 확장되지만 포커스 시각적 개체 및 이와 연결된 항목을 TV 안전 영역 내에 유지하는 것이 중요합니다.
UWP에는 VisibleBounds 내에 포커스 시각적 개체를 유지하는 기능이 있지만 목록/그리드 항목이 안전 영역의 보기로 스크롤할 수 있도록 안쪽 여백을 추가해야 합니다. 특히 다음 코드 조각에서처럼 ListView 또는 GridView의 ItemsPresenter에 양수 여백을 추가합니다.
<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>
이전 코드 조각을 페이지 또는 앱 리소스에 배치한 다음, 다음과 같은 방법으로 액세스합니다.
<Page>
<Grid>
<ListView Style="{StaticResource TitleSafeListViewStyle}"
... />
참고 항목
이 코드 조각은 특히 ListViews를 위한 것이며, GridView 스타일은 ControlTemplate과 Style 모두에 대한 TargetType 특성을 GridView로 설정합니다.
항목을 보는 방법을 보다 세밀하게 제어하려면 애플리케이션이 버전 1803 이상을 대상으로 하는 경우 UIElement.BringIntoViewRequested 이벤트를 사용할 수 있습니다. 다음 코드 조각에서와 같이 ListView/GridView의 ItemsPanel에 배치하여 내부 ScrollViewer보다 먼저 catch할 수 있습니다.
<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
});
}
}
색
기본적으로 유니버설 Windows 플랫폼은 앱의 색상을 TV 안전 범위에 맞게 조정하여(자세한 내용은 TV에 적합한 색 참조) 앱이 어떤 TV에서도 자연스럽게 보이도록 합니다. 또한 TV의 시각적 환경을 개선하기 위해 앱에서 사용하는 색 세트를 향상할 수 있습니다.
애플리케이션 테마
앱에 적합한 항목에 따라 애플리케이션 테마(어둡거나 밝은)를 선택하거나 테마를 옵트아웃할 수 있습니다. 색 테마의 테마에 대한 일반 권장 사항에 대해 자세히 알아보세요.
UWP를 사용하면 앱이 실행되는 디바이스에서 제공하는 시스템 설정에 따라 테마를 동적으로 설정할 수도 있습니다. UWP는 항상 사용자가 지정한 테마 설정을 적용하지만 각 디바이스는 적절한 기본 테마도 제공합니다. Xbox One의 특성 상 생산성 환경보다 미디어 환경을 가질 것으로 예상되므로 기본적으로 어두운 시스템 테마로 설정됩니다. 앱의 테마가 시스템 설정을 기반으로 하는 경우 Xbox One에서는 기본적으로 어둡게 설정될 것입니다.
강조 색
UWP는 사용자가 시스템 설정에서 선택한 강조 색을 표시하는 편리한 방법을 제공합니다.
Xbox One에서는 사용자가 PC에서 강조 색을 선택할 수 있는 것처럼 사용자 색을 선택할 수 있습니다. 앱이 브러시 또는 색 리소스를 통해 이러한 강조 색을 호출하는 동안은 시스템 설정에서 사용자가 선택한 색이 사용됩니다. Xbox One의 강조 색의 단위는 시스템이 아니라 사용자입니다.
Xbox One의 사용자 색 집합은 PC, 휴대폰 및 기타 디바이스에 있는 것과 다릅니다.
앱에서 SystemControlForegroundAccentBrush 등의 브러시 리소스 또는 색 리소스(SystemAccentColor)를 사용하거나 UIColorType.Accent* API를 통해 직접 테마 컬러를 호출하기만 하면 해당 색이 Xbox One에 적합한 테마 컬러로 바뀝니다. 고대비 브러시 색도 PC 및 휴대폰과 동일한 방식으로 시스템에서 가져옵니다.
일반적인 강조 색에 대한 자세한 내용은 강조 색을 참조하세요.
TV 간의 색분산
TV용으로 디자인할 때는 렌더링되는 TV에 따라 색이 상당히 다르게 표시됩니다. 색이 모니터에서와 똑같이 표시된다고 생각하지 마세요. 앱이 색의 미묘한 차이를 사용해 UI의 일부를 구분하는 경우 색이 함께 혼합되어 사용자가 혼동할 수 있습니다. 사용자가 사용하는 TV에 관계없이 사용자가 명확하게 구분할 수 있을 정도로 다른 색을 사용해 보세요.
TV 안전 색
색의 RGB 값은 빨간색, 녹색 및 파란색의 강도를 나타냅니다. TV는 극단적인 농도를 제대로 처리하지 못하기 때문에 특정 TV에서 이상한 밴드 효과를 생성하거나 흐리게 표시될 수 있습니다. 또한 고강도 색은 블루밍(인접 픽셀들이 동일한 색을 끌어오기 시작하는 것)을 야기할 수 있습니다. TV 안전 색으로 간주되는 것에 대한 생각은 다양하지만 RGB 값 16-235(또는 16진수의 10-EB) 이내의 색이 일반적으로 TV에 사용하기에 안전합니다.
지금까지 Xbox 앱은 색상을 "TV에 적합한" 색 범위에서 벗어나지 않도록 맞추어야 했습니다. 하지만 Fall Creators Update부터는 Xbox One이 전체 범위 콘텐츠를 TV에 적합한 범위에 맞게 자동으로 조정합니다. 즉, 대부분 앱 개발자들이 더 이상 TV에 적합한 색에 대해서 걱정할 필요가 없습니다.
Important
이미 TV에 적합한 색 범위에 포함되는 비디오 콘텐츠는 Media Foundation을 사용해 재생해도 이러한 색 조정 효과가 적용되지 않습니다.
DirectX 11 또는 DirectX 12를 사용해 앱을 개발하면서 사용자 고유의 스왑 체인을 만들어 UI 또는 비디오를 렌더링하는 경우에는 IDXGISwapChain3::SetColorSpace1을 호출하여 사용할 색 공간을 지정할 수 있습니다. 그러면 시스템이 색 조정 여부를 알 수 있습니다.
UI 컨트롤에 대한 지침
여러 장치에서 잘 작동하지만 TV에서 사용할 때 고려할 사항이 있는 몇 가지 UI 컨트롤이 있습니다. 10피트 환경용으로 디자인할 때 이러한 컨트롤을 사용하는 몇 가지 모범 사례에 대해 알아봅니다.
탐색 창
탐색 창(햄버거 메뉴라고도 함)은 UWP 앱에서 일반적으로 사용되는 탐색 컨트롤입니다. 일반적으로 이것은 사용자를 다른 페이지로 이동시키는 목록 스타일 메뉴에서 선택할 수 있는 몇 가지 옵션이 있는 창입니다. 일반적으로 이 창은 공간을 절약하기 위해 축소되기 시작하는데 사용자가 단추를 클릭하여 열 수 있습니다.
탐색 창은 마우스와 터치로 쉽게 액세스할 수 있지만, 사용자가 창을 열려면 단추로 이동해야 하므로 게임 패드/리모컨을 사용하면 접근성이 떨어집니다. 따라서 보기 단추가 탐색 창을 열게 하고, 이를 통해 사용자가 페이지 왼쪽까지 탐색하여 열게 하는 것이 좋습니다. 이 디자인 패턴을 구현하는 방법에 대한 코드 샘플은 프로그래밍 방식 포커스 탐색 문서에서 찾을 수 있습니다. 이렇게 하면 창의 콘텐츠에 쉽게 액세스할 수 있습니다. 탐색 창이 다양한 화면 크기로 동작하는 방법과 게임 패드/원격 탐색의 모범 사례에 대한 자세한 내용은 탐색 창을 참조하세요.
CommandBar 레이블
레이블을 CommandBar의 아이콘 오른쪽에 배치하여 높이를 최소화하고 일관성을 유지하는 것이 좋습니다. CommandBar.DefaultLabelPosition 속성을 CommandBarDefaultLabelPosition.Right로 설정하여 이 작업을 수행할 수 있습니다.
또한 이 속성을 설정하면 레이블이 항상 표시되는데 사용자의 클릭 횟수를 최소화하기 때문에 10피트 환경에 적합합니다. 이는 다른 디바이스 유형도 따라하기 좋은 모델입니다.
도구 팁
도구 설명 컨트롤은 사용자가 마우스를 요소 위에 대거나 요소를 탭하고 그 그림을 누를 때 UI에 추가 정보를 제공하는 방식으로 도입되었습니다. 게임 패드 및 리모컨의 경우는 요소가 포커스를 받고, 짧은 시간 동안 화면에 유지된 다음, 사라지는 짧은 순간이 지나면 Tooltip가 나타납니다. 이 동작은 너무 많은 Tooltip이 사용되는 경우 방해가 될 수 있습니다. TV용으로 디자인할 때는 Tooltip을 사용하지 않도록 합니다.
단추 스타일
표준 UWP 단추는 TV에서 잘 작동하지만, 단추의 일부 시각적 개체 스타일은 UI에 더 집중시키므로 특히 포커스가 있는 위치를 명확하게 알려줄 수 있는 10피트 환경에서 모든 플랫폼에 대해 고려해야 할 것입니다. 이러한 스타일에 대한 자세한 내용은 단추를 참조하세요.
중첩된 UI 요소
중첩된 UI는 중첩된 항목과 컨테이너 항목이 서로에게서 독립된 포커스를 취할 수 있는 컨테이너 UI 요소 내에 묶인 실행 가능한 중첩 항목을 노출합니다.
중첩된 UI는 일부 입력 형식에서 잘 작동하지만 XY 탐색을 사용하는 게임 패드 및 리모컨에서는 작동하지 않는 경우가 있습니다. 이 항목의 지침에 따라 UI가 10피트 환경에 최적화되었는지 그리고 사용자가 상호 작용 가능한 모든 요소에 쉽게 액세스할 수 있는지 확인해야 합니다. 한 가지 일반적인 솔루션은 중첩된 UI 요소를 ContextFlyout에 배치하는 것입니다.
중첩된 UI에 대한 자세한 내용은 목록 항목의 중첩된 UI를 참조하세요.
MediaTransportControls
MediaTransportControls 요소를 사용하면 사용자가 재생, 일시 중지, 닫힌 캡션 켜기 등의 기본 재생 환경을 제공하여 미디어와 상호 작용할 수 있습니다. 이 컨트롤은 MediaPlayerElement의 속성이며 단일 행과 이중 행의 두 가지 레이아웃 옵션을 지원합니다. 단일 행 레이아웃은 슬라이더 및 재생 단추가 모두 한 행에 있으며 재생/일시 중지 단추는 슬라이더 왼쪽에 있습니다. 이중 행 레이아웃은 슬라이더가 자체 행을 차지하며, 재생 단추는 별도의 하부 행에 있습니다. 10피트 환경용으로 디자인할 때는 게임 패드에 더 나은 탐색 기능을 제공하는 이중 행 레이아웃을 사용해야 합니다. 이중 행 레이아웃을 사용하도록 설정하려면 MediaPlayerElement의 TransportControls 속성에 있는 MediaTransportControls 요소에서 IsCompact="False"을 설정합니다.
<MediaPlayerElement x:Name="mediaPlayerElement1"
Source="Assets/video.mp4"
AreTransportControlsEnabled="True">
<MediaPlayerElement.TransportControls>
<MediaTransportControls IsCompact="False"/>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
미디어 재생을 방문하여 앱에 미디어를 추가하는 방법에 대해 자세히 알아보세요.
참고 항목
MediaPlayerElement는 Windows 10 버전 1607 이상에서만 사용할 수 있습니다. 이전 버전의 Windows 10 앱을 개발하는 경우 MediaElement를 대신 사용해야 합니다. 위의 권장 사항도 MediaElement에 적용되며 TransportControls 속성에 동일한 방식으로 액세스됩니다.
검색 환경
콘텐츠 검색은 10피트 환경에서 가장 일반적으로 수행되는 기능 중 하나입니다. 앱에서 검색 환경을 제공하는 경우 사용자가 게임 패드의 Y 단추를 가속기로 사용하여 이에 빠르게 액세스하게 하는 데 도움이 됩니다.
대부분의 고객은 이미 이 가속기를 잘 알고 있지만 필요할 경우 UI에 시각적 Y 문자 모양을 추가하여 고객이 단추를 사용하여 검색 기능에 액세스할 수 있음을 나타낼 수 있습니다. 이 단서를 추가하는 경우에는 Segoe Xbox MDL2 기호 글꼴(XAML 앱은 , HTML 앱은 \E426)를 사용하여 Xbox 셸 및 기타 앱과 일관성을 제공해야 합니다.
참고 항목
Segoe Xbox MDL2 기호 글꼴은 Xbox에서만 사용할 수 있으므로 PC에는 기호가 올바르게 표시되지 않습니다. 그러나 Xbox에 배포하면 TV에 표시됩니다.
Y 단추는 게임 패드에서만 사용할 수 있으므로 UI의 단추와 같이 검색에 액세스하는 다른 방법을 제공해야 합니다. 안 그러면 일부 고객은 이 기능에 액세스하지 못할 수 있습니다.
10피트 환경에서는 디스플레이에 제한된 공간이 있기 때문에 고객이 전체 화면 검색 환경을 사용하는 것이 더 쉬운 경우가 많습니다. 전체 화면 또는 부분 화면 "현재 위치" 검색이 있든 관계없이 사용자가 검색 환경을 열면 화면 키보드가 이미 열려 있으므로 고객이 검색어를 바로 입력할 수 있게 하는 것이 좋습니다.
Xbox에 대한 사용자 지정 시각적 상태 트리거
UWP 앱을 10피트 환경에 맞게 조정하려면 앱이 Xbox 콘솔에서 실행되었음을 감지할 때 레이아웃을 변경하는 것이 좋습니다. 이 작업을 수행하는 한 가지 방법은 사용자 지정 시각적 상태 트리거를 사용하는 것입니다. Visual Studio용 Blend에서 편집해야 하는 경우에 시각적 상태 트리거가 가장 유용합니다. 다음 코드 조각은 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>
트리거를 만들려면 앱에 다음 클래스를 추가합니다. 이것은 위의 XAML 코드에서 참조하는 클래스입니다.
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 코드에 지정한 레이아웃을 자동으로 수정합니다.
앱이 Xbox에서 실행 중인지 여부를 검사한 다음 적절히 조정할 수 있는 또 다른 방법은 코드를 사용하는 것입니다. 다음과 같은 간단한 변수를 사용하여 앱이 Xbox에서 실행되는지 확인할 수 있습니다.
bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
"Windows.Xbox");
그런 다음 이 검사 후에 코드 블록에서 UI를 적절하게 조정할 수 있습니다.
요약
10피트 환경용 디자인에서는 다른 플랫폼용 디자인과 다르게 특별히 고려해야 할 사항이 있습니다. UWP 앱의 직선 포트를 Xbox One으로 확실히 수행할 수 있고 이것이 작동되겠지만 이것이 반드시 10피트 환경에 최적화되는 것은 아니라 사용자 불만으로 이어질 수 있습니다. 이 문서의 지침에 따라 앱이 TV에서처럼 좋은지 확인합니다.
관련된 문서
Windows developer