색

색은 앱의 사용자에게 정보를 전달하는 직관적인 방법입니다. 대화형 작업을 나타내거나 사용자 작업에 대한 피드백을 제공하고 인터페이스에 시각적 연속성을 부여하는 데 사용할 수 있습니다.

Windows 앱에서 색은 주로 테마 컬러와 테마로 결정됩니다. 이 문서에서는 앱에서 색을 사용하는 방법과 테마 컬러 및 테마 리소스를 통해 모든 테마 컨텍스트에서 Windows 앱을 사용할 수 있도록 하는 방법을 설명합니다.

색의 원칙

색을 의미 있게 사용합니다. 색을 조금만 사용하여 중요한 요소를 강조하면 유동적이고 직관적인 사용자 인터페이스를 만들 수 있습니다.

색을 사용하여 상호작용성을 표시합니다. 한 가지 색을 선택하여 상호작용적 애플리케이션의 요소를 나타내는 것이 좋습니다. 예를 들어 대부분의 웹 페이지에서는 파란색 텍스트를 사용하여 하이퍼링크를 나타냅니다.

색은 개인적으로 사용합니다. Windows에서 사용자는 자신의 환경 전체에 반영되는 테마 컬러와 밝거나 어두운 테마를 선택할 수 있습니다. 사용자의 테마 컬러와 테마를 애플리케이션에 통합하여 자신의 환경을 요구 사항에 맞게 설정하는 방법을 선택할 수 있습니다.

색은 문화적입니다. 다른 문화권의 사용자가 사용된 색을 해석하는 방법을 고려합니다. 예를 들어 일부 문화권에서는 파란색이 미덕과 보호를 나타내지만, 다른 문화권에서는 애도를 나타냅니다.

테마

Windows 앱은 밝거나 어두운 애플리케이션 테마를 사용할 수 있습니다. 이 테마는 앱의 배경, 텍스트, 아이콘, 공용 컨트롤에 영향을 줍니다.

밝은 테마

어두운 테마

기본적으로 Windows 앱의 테마는 Windows 설정의 사용자 테마 기본 설정이거나 디바이스의 기본 테마입니다. 하지만 사용자가 Windows 앱의 테마를 구체적으로 설정할 수 있습니다.

테마 변경

App.xaml 파일에서 RequestedTheme 속성을 변경하면 테마를 변경할 수 있습니다.

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

RequestedTheme 속성을 제거하면 애플리케이션이 사용자의 시스템 설정을 사용할 수 있습니다.

사용자가 인터페이스를 보기 쉽도록 대비색으로 구성된 작은 색상표를 사용하는 고대비 테마를 선택할 수도 있습니다. 이 경우, 시스템이 RequestedTheme을 재정의합니다.

테마 테스트

앱의 테마를 요청하지 않는 경우, 밝은 테마와 어두운 테마로 앱을 테스트하여 모든 조건에서 앱을 읽을 수 있는지 확인해야 합니다.

테마 브러시

공용 컨트롤은 자동으로 테마 브러시를 사용하여 밝은 테마와 어두운 테마의 대비를 조절합니다.

예를 들어 다음 그림은 AutoSuggestBox에서 테마 브러시를 사용하는 방법을 보여 주는 그림입니다.

팁

사용 가능한 테마 브러시에 대한 시각적 개요는 WinUI 3 갤러리 앱: 색을 참조하세요.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

테마 브러시 사용

사용자 지정 컨트롤용 템플릿을 만드는 경우 하드 코드 색 값 대신 테마 브러시를 사용합니다. 앱에서는 이러한 방식으로 모든 테마에 쉽게 적용할 수 있습니다.

예를 들어 이러한 ListView의 항목 템플릿은 사용자 지정 템플릿에서 테마 브러시를 사용하는 방법을 보여 줍니다.

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

앱에서 테마 브러시를 사용하는 방법에 대한 자세한 내용은 테마 리소스를 참조하세요.

강조 색

공용 컨트롤은 테마 컬러를 사용하여 상태 정보를 전달할 수 있습니다. 기본적으로 테마 컬러는 설정에서 사용자가 선택하는 SystemAccentColor입니다. 그러나 브랜드를 반영하기 위해 앱의 테마 컬러를 사용자 지정할 수 있습니다.

테마 컬러 재정의

앱의 테마 컬러를 변경하려면 app.xaml에 다음 코드를 배치합니다.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

테마 컬러 선택

앱의 사용자 지정 테마 컬러를 선택하는 경우 최적의 가독성을 위해 테마 컬러를 사용하는 텍스트와 배경의 대비가 충분한지 확인합니다. 대비를 테스트하기 위해 Windows 설정의 색 선택 도구를 사용하거나, 이 온라인 대비 도구를 사용할 수 있습니다.

테마 컬러 색상표

Windows 셸의 테마 컬러 알고리즘은 테마 컬러의 밝은 음영 및 어두운 음영을 생성합니다.

테마 리소스로 이러한 음영에 액세스할 수 있습니다.

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

UISettings.GetColorValue 메서드 및 UIColorType 열거형을 통해 테마 컬러 색상표를 프로그래밍 방식으로 액세스할 수도 있습니다.

색 테마 지정을 위한 테마 컬러 색상표를 앱에서 사용할 수 있습니다. 다음은 버튼에 테마 컬러 색상표를 사용하는 방법을 보여 주는 예제입니다.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

컬러 배경에서 컬러 텍스트를 사용하는 경우 텍스트와 배경의 대비가 충분한지 확인합니다. 기본적으로 하이퍼링크나 하이퍼텍스트는 테마 컬러를 사용합니다. 배경에 테마 컬러 변형을 적용하는 경우 원래 테마 컬러의 변형을 사용하여 컬러 배경에서 컬러 텍스트의 대비를 최적화해야 합니다.

아래 차트는 테마 컬러의 다양한 밝은/어두운 음영 예와 컬러 표면에 컬러 유형을 적용하는 방법을 보여 줍니다.

컨트롤에 스타일을 지정하는 방법에 대한 자세한 내용은 XAML 스타일을 참조하세요.

색 API

애플리케이션에 색을 추가하는 데 사용할 수 있는 몇 가지 API가 있습니다. 첫째로, Colors 클래스는 미리 정의된 색의 큰 목록을 구현합니다. XAML 속성을 통해 자동으로 액세스할 수 있습니다. 아래 예제에서는 버튼을 만들고 백그라운드 컬러와 포그라운드 컬러 속성을 Colors 클래스의 멤버로 설정합니다.

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

XAML에서 Color 구조체를 사용하여 RGB 또는 16진수 값으로 고유한 색을 만들 수 있습니다.

<Color x:Key="LightBlue">#FF36C0FF</Color>

FromArgb 메서드를 사용하여 코드에서 동일한 색을 만들 수도 있습니다.

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

문자 'Argb'는 네 가지 색 구성 요소인 알파(불투명도), 빨간색, 녹색, 파란색을 나타냅니다. 각 인수의 범위는 0~255입니다. 기본 불투명도 255(100% 불투명)를 제공하는 첫 번째 값을 생략할 수 있습니다.

참고

C++를 사용하는 경우 ColorHelper 클래스를 통해 색을 만들어야 합니다.

단색 UI 요소를 그리는 데 사용할 수 있는 SolidColorBrush의 인수로 Color를 사용하는 경우가 가장 일반적입니다. 이 브러시는 일반적으로 ResourceDictionary에 정의되어 있어 여러 요소에서 재사용할 수 있습니다.

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

브러시를 사용하는 방법에 대한 자세한 내용은 XAML 브러시를 참조하세요.

유용성

대비

요소와 이미지에는 테마 컬러 또는 테마에 관계없이 서로 구분할 수 있을 만큼 충분한 대비가 있어야 합니다.

애플리케이션에서 사용할 색을 고려하는 경우 접근성이 가장 중요합니다. 아래 지침을 사용하여 가능한 한 많은 사용자가 애플리케이션에 액세스할 수 있도록 합니다.

조명

주변 조명의 변화는 앱의 유용성에 영향을 줄 수 있습니다. 예를 들어 검은색 배경의 페이지는 화면 눈부심으로 인해 외부에서 읽을 수 없는 반면, 흰색 배경의 페이지는 어두운 공간에서 보는 것이 어려울 수 있습니다.

색맹

색맹은 앱의 유용성에 영향을 줄 수 있습니다. 예를 들어 적록 색맹인 사용자는 빨간색과 녹색 요소를 구분하는 데 어려움이 있습니다. 남성의 약 8% 및 여성의 약 0.5%는 적록 색맹이므로 이러한 색 조합을 애플리케이션 요소 간의 유일한 구별자로 사용하지 않도록 합니다.

관련

• XAML 스타일
• XAML 테마 리소스
• WinUI 3 갤러리 - 색