Xbox 및 TV용 디자인

Windows 앱을 Xbox One 및 TV 화면에서 보기 좋고 잘 작동하도록 디자인하세요.

10피트 환경에서 UWP 애플리케이션의 상호 작용 환경에 대한 지침은 게임 패드 및 원격 제어 상호 작용 참조하세요.

개요

유니버설 Windows 플랫폼을 사용하면 여러 Windows 디바이스에서 즐거운 환경을 만들 수 있습니다. UWP 프레임워크에서 제공하는 대부분의 기능을 통해 앱은 추가 작업 없이 이러한 디바이스에서 동일한 UI(사용자 인터페이스)를 사용할 수 있습니다. 그러나 Xbox One 및 TV 화면에서 제대로 작동하도록 앱을 조정하고 최적화하려면 특별한 고려 사항이 필요합니다.

방 건너편 소파에 앉아 게임 패드 또는 리모컨을 사용하여 TV와 상호 작용하는 경험을 10 피트 경험이라고 합니다. 사용자가 일반적으로 화면에서 약 10 피트 떨어진 곳에 있기 때문에 이름이 지정됩니다. 이는 예를 들어 2피트 환경이나 PC와의 상호 작용에서는 존재하지 않는 고유한 과제를 제공합니다. Xbox One 또는 TV 화면으로 출력하고 입력에 컨트롤러를 사용하는 다른 장치용 앱을 개발하는 경우 항상 이 점을 염두에 두어야 합니다.

이 문서의 모든 단계가 10피트 환경에서 앱이 제대로 작동하도록 하는 데 필요한 것은 아니지만, 앱을 이해하고 앱에 대한 적절한 결정을 내리면 앱의 특정 요구 사항에 맞게 조정된 10피트 환경이 향상됩니다. 10피트 환경에서 앱을 구현할 때 다음 디자인 원칙을 고려합니다.

단순

10피트 환경을 설계하는 것은 고유한 과제 집합을 제시합니다. 해상도와 시청 거리는 사람들이 지나치게 많은 정보를 처리하기 어렵게 만들 수 있습니다. 가장 간단한 구성 요소로 축소하여 디자인을 깨끗하게 유지합니다. TV에 표시되는 정보의 양은 데스크톱이 아닌 휴대폰에서 볼 수 있는 것과 비슷해야 합니다.

일관된

10피트 환경의 UWP 앱은 직관적이고 사용하기 쉬워야 합니다. 포커스를 명확하고 틀림없게 만듭니다. 공간 전체의 이동이 일관되고 예측 가능할 수 있도록 콘텐츠를 정렬합니다. 사람들에게 자신이 하고 싶은 일에 대한 가장 짧은 경로를 제공합니다.

Xbox One 영화 앱

스크린샷에 표시된 모든 영화는 Microsoft Movies 및 TV에서 사용할 수 있습니다.

매혹적인

가장 몰입감 있는 시네마틱 환경은 큰 화면에서 열립니다. 끝에서 끝까지의 풍경, 우아한 움직임, 그리고 색상과 타이포그래피의 생동감 있는 사용은 앱을 한 단계 더 향상시킵니다. 대담하고 아름답습니다.

10피트 경험 최적화

이제 10피트 환경에 적합한 UWP 앱 디자인의 원칙을 알고 있으므로 앱을 최적화하고 훌륭한 사용자 환경을 만들 수 있는 특정 방법에 대한 다음 개요를 읽어보세요.

앞의 디자인 및 레이아웃 고려 사항 외에도, 앱을 빌드할 때 고려해야 할 게임 패드 및 원격 제어 상호 작용 최적화가 많이 있습니다.

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% 규모에서 960 x 540 px(또는 HTML 앱의 경우 100% 규모에서 1280 x 720 px)에서 멋지게 보이는지 확인합니다.

Xbox용 디자인은 한 해상도인 1920 x 1080에 대해서만 걱정할 필요가 있기 때문에 PC용 디자인과 약간 다릅니다. 사용자에게 더 나은 해상도의 TV가 있는지 여부는 중요하지 않습니다. UWP 앱은 항상 1080p로 확장됩니다.

올바른 자산 크기인 200개의% (또는 HTML 앱의 경우 150개의%)는 TV 해상도와 관계없이 Xbox One에서 실행될 때 앱에 최적화되어 사용됩니다.

콘텐츠 밀도

앱을 디자인할 때 사용자는 멀리서 UI를 보고 원격 또는 게임 컨트롤러를 사용하여 UI와 상호 작용하므로 마우스 또는 터치 입력을 사용하는 것보다 탐색하는 데 더 많은 시간이 걸립니다.

UI 컨트롤의 크기

대화형 UI 요소의 크기는 최소 높이가 32 epx(유효 픽셀)여야 합니다. 이는 일반적인 UWP 컨트롤의 기본값이며, 200% 크기 조정에서 사용하면 UI 요소가 멀리서 표시되고 콘텐츠 밀도를 줄이는 데 도움이 됩니다.

클릭 횟수

사용자가 TV 화면의 한 가장자리에서 다른 가장자리로 이동하는 경우 UI를 간소화하기 위해 6회 클릭을 초과하지 않아야 합니다. 단순성 원칙이 여기에 적용됩니다.

에 걸쳐

텍스트 크기

멀리서 UI를 표시하려면 다음 규칙을 사용합니다.

• 기본 텍스트 및 읽기 콘텐츠: 최소 15 epx
• 중요하지 않은 텍스트 및 추가 콘텐츠: 최소 12 epx

UI에서 더 큰 텍스트를 사용하는 경우 화면 공간을 너무 많이 제한하지 않는 크기를 선택하여 다른 콘텐츠가 잠재적으로 채울 수 있는 공간을 차지합니다.

배율 인수 선택 해제

앱이 모든 디바이스에서 적절하게 실행될 수 있도록 각 디바이스 유형에 맞춰 크기를 조정하는 배율 지원을 활용할 것을 권장합니다. 그러나 이 동작을 옵트아웃하고 모든 UI를 100% 규모로 디자인할 수 있습니다. 배율 인수는 100개%이외의 값으로 변경할 수 없습니다.

XAML 앱의 경우 다음 코드 조각을 사용하여 배율 인수를 옵트아웃할 수 있습니다.

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

result 성공적으로 옵트아웃했는지 여부를 알려줍니다.

HTML/JavaScript에 대한 샘플 코드를 비롯한 자세한 내용은 크기 조정해제하는 방법을 참조하세요.

UI 요소의 적절한 크기를 계산하기 위해 이 항목에서 언급된 유효 픽셀 값을 두 배로 늘려 실제 픽셀 값으로 변환해야 합니다. HTML 앱의 경우 1.5를 곱하여 계산합니다.

TV 안전 영역

모든 TV가 역사적, 기술적 이유로 화면 가장자리에 콘텐츠를 표시하는 것은 아닙니다. 기본적으로 UWP는 TV가 안전하지 않은 영역에 UI 콘텐츠를 표시하지 않고 대신 페이지 배경만 그립니다.

TV 안전하지 않은 영역은 다음 이미지의 파란색 영역으로 표시됩니다.

다음 코드 조각에서 보여 주듯이 배경을 정적 또는 테마 색 또는 이미지로 설정할 수 있습니다.

테마 색

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

이미지

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

추가 작업 없이 앱이 이렇게 보입니다.

이것은 탐색 창과 그리드와 같은 UI의 일부가 잘린 듯한 느낌을 주어 앱에 답답한 효과를 주기 때문에 최적의 상태가 아닙니다. 그러나 최적화를 통해 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 앱의 경우 코어 창 범위를 사용하는 것이 더 간단한 옵션입니다.

OnLaunched App.xaml.cs 메서드에서 다음 코드를 추가합니다.

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

이 코드 줄을 사용하면 앱 창이 화면 가장자리까지 확장되므로 모든 대화형 및 필수 UI를 앞에서 설명한 TV 안전 영역으로 이동해야 합니다. 상황에 맞는 메뉴 및 열린 콤보 박스같은 일시적인 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>

이러한 두 방법은 이 섹션에 나열된 다른 유형의 컨트롤에도 적용됩니다.

리스트와 그리드의 끝까지 스크롤하기

목록 및 그리드는 화면에 동시에 들어갈 수 있는 것보다 더 많은 항목을 포함하는 것이 일반적입니다. 이 경우 목록 또는 그리드를 화면 가장자리로 확장하는 것이 좋습니다. 가로로 스크롤하는 목록과 눈금은 오른쪽 가장자리까지 확장되어야 하며, 세로로 스크롤하는 경우에는 아래쪽 가장자리까지 확장되어야 합니다.

목록이나 그리드가 확장될 때, 시각적 포커스와 관련 항목을 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}"
                  ... />

애플리케이션이 버전 1803 이상을 대상으로 하는 경우 항목을 보는 방법을 보다 세밀하게 제어하려면 UIElement.BringIntoViewRequested 이벤트사용할 수 있습니다. 코드 조각에서와 같이 ItemsPanel을 ListView/GridView에 배치하면 내부 ScrollViewer보다 먼저 이를 포착할 수 있습니다.

<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로부터 안전한 색에 대해 걱정할 필요가 없습니다.

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에서 잘 작동하지만, 모든 플랫폼 특히 10피트 환경에서는 포커스가 어딘지 명확하게 보여주는 효과적인 UI 비주얼 스타일을 고려해 보는 것이 좋습니다. 이러한 스타일에 대한 자세한 내용은 단추참조하세요.

중첩된 UI 요소

중첩된 UI는 중첩된 항목과 컨테이너 항목이 서로 독립적인 포커스를 취할 수 있는 컨테이너 UI 요소 내에 묶인 중첩된 실행 가능한 항목을 노출합니다.

중첩된 UI는 일부 입력 형식에서 잘 작동하지만 XY 탐색을 사용하는 게임 패드 및 원격에서는 항상 작동하지 않습니다. 이 항목의 지침에 따라 UI가 10피트 환경에 최적화되고 사용자가 모든 상호 작용 가능한 요소에 쉽게 액세스할 수 있는지 확인해야 합니다. 한 가지 일반적인 해결 방법은 중첩된 UI 요소를 ContextFlyout에 배치하는 것입니다.

중첩된 UI에 대한 자세한 내용은 목록 항목중첩된 UI를 참조하세요.

미디어 전송 제어

MediaTransportControls 요소를 사용하면 사용자가 재생, 일시 중지, 선택 자막 켜기 등을 허용하는 기본 재생 환경을 제공하여 미디어와 상호 작용할 수 있습니다. 이 컨트롤은 MediaPlayerElement 속성이며 두 가지 레이아웃 옵션인 단일 행 및 이중 행지원합니다. 단일 행 레이아웃에서 슬라이더 및 재생 단추는 모두 한 행에 있으며 재생/일시 중지 단추는 슬라이더 왼쪽에 있습니다. 이중 행 레이아웃에서 슬라이더는 별도의 아래쪽 행에 재생 단추가 있는 자체 행을 차지합니다. 10피트 환경을 위해 디자인할 때는 게임 패드에 더 나은 탐색 기능을 제공하므로 이중 행 레이아웃을 사용해야 합니다. 두 행 레이아웃을 사용하도록 설정하려면 IsCompact="False"MediaTransportControls 속성의 요소에 MediaPlayerElement 설정합니다.

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

미디어 재생 방문하여 앱에 미디어를 추가하는 방법에 대해 자세히 알아보세요.

검색 환경

콘텐츠 검색은 10피트 환경에서 가장 일반적으로 수행되는 함수 중 하나입니다. 앱이 검색 환경을 제공하는 경우 사용자가 게임 패드의 Y 단추를 가속기로 사용하여 빠르게 액세스할 수 있습니다.

대부분의 고객은 이미 이 가속기를 잘 알고 있어야 하지만 원하는 경우 시각적 Y 문자 모양을 UI에 추가하여 고객이 단추를 사용하여 검색 기능에 액세스할 수 있음을 나타낼 수 있습니다. 이 신호를 추가하는 경우 Segoe Xbox MDL2 기호 글꼴(XAML 앱의 경우, HTML 앱의 경우 \E426)의 기호를 사용하여 Xbox 셸 및 기타 앱과 일관성을 제공해야 합니다.

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 앱용 장치 기초 안내서
• 게임 패드 및 원격 제어 상호 작용
• UWP 앱의 사운드