아크릴 소재

아크릴은 반투명 질감을 만드는 유형의 브러시입니다. 앱 표면에 아크릴을 적용하여 깊이를 추가하고 시각적 개체 레이어를 설정할 수 있습니다.

중요 API: AcrylicBrush 클래스, Background 속성

밝은 테마의 아크릴

어두운 테마의 아크릴

아크릴 및 Fluent 디자인 시스템

Fluent 디자인 시스템을 사용하면 조명, 깊이, 움직임, 재질 및 배율이 통합된 선명한 현대식 UI를 만들 수 있습니다. 아크릴은 앱에 물리적 질감(재질)과 깊이를 추가하는 Fluent 디자인 시스템 구성 요소입니다. 자세한 내용은 Fluent Design 개요를 참조하세요.

예제

WinUI 2 갤러리
WinUI 2 갤러리 앱이 설치된 경우 여기를 클릭하여 앱을 열고 작동 중인 아크릴을 확인합니다.

WinUI 2 갤러리 앱 받기(Microsoft Store)
소스 코드 가져오기(GitHub)

아크릴 혼합 유형

아크릴의 가장 눈에 띄는 특징은 투명도입니다. 소재를 통과하여 보이는 것을 변경하는 두 가지 아크릴 혼합 유형이 있습니다.

• 백그라운드 아크릴은 현재 활성 앱의 뒤에 있는 바탕 화면 배경 화면 및 다른 창을 표시하여 애플리케이션 창 사이에 깊이를 추가하고 사용자의 개인 기본 설정을 반영합니다.
• 인앱 아크릴은 앱 프레임 내부에 깊이감을 더하여 포커스와 계층을 모두 제공합니다.

여러 아크릴 표면을 레이어링하지 않습니다. 여러 레이어의 백그라운드 아크릴은 시야를 방해하는 착시 현상을 유발할 수 있습니다.

아크릴을 사용하는 경우

• 스크롤 또는 상호 작용할 때 콘텐츠가 겹칠 수 있는 표면 같은 UI를 지원하려면 인앱 아크릴을 사용합니다.
• 팝업 메뉴, 플라이아웃, 빠르게 해제할 수 있는 UI 같은 일시적인 UI 요소에는 백그라운드 아크릴을 사용합니다.
  일시적인 시나리오에 아크릴을 사용하면 일시적인 UI를 트리거한 콘텐츠와의 시각적 개체 관계를 유지하는 데 도움이 됩니다.

탐색 화면에서 인앱 아크릴을 사용하려는 경우 앱 흐름을 개선할 수 있도록 콘텐츠를 아크릴 창 아래로 확장하는 방안을 고려해 보세요. NavigationView를 사용하면 자동으로 확장됩니다. 그러나 스트라이프 효과를 방지하려면 여러 아크릴의 가장자리가 맞닿게 배치하지 마세요. 이렇게 배치하면 흐릿한 두 표면 사이에 예상하지 못한 이음새가 생길 수 있습니다. 아크릴은 디자인의 시각적 조화를 위한 도구지만, 잘못 사용할 경우 시각적 혼란을 일으킬 수 있습니다.

다음 사용 패턴을 고려하여 앱에 아크릴을 통합하는 가장 좋은 방법을 결정하세요.

세로 창

앱의 콘텐츠를 분할할 수 있는 세로 창 또는 화면의 경우 아크릴 대신 불투명 배경을 사용하는 것이 좋습니다. NavigationView의 Compact 또는 Minimal 모드처럼 세로 창이 콘텐츠 위에서 열리는 경우, 인앱 아크릴을 사용하여 사용자가 이 창을 열었을 때 페이지의 컨텍스트를 유지하는 것이 좋습니다.

일시적인 화면

상황에 맞는 메뉴, 플라이아웃, 비 모달 팝업 또는 빠른 해제 창이 있는 앱의 경우 특히 이러한 표면이 주 앱 창의 프레임 외부에 그려지는 경우 백그라운드 아크릴을 사용하는 것이 좋습니다.

대부분의 XAML 컨트롤은 기본적으로 아크릴을 그립니다. MenuFlyout, AutoSuggestBox, ComboBox 및 빠른 해제 팝업이 있는 비슷한 컨트롤은 모두 열려 있는 동안 아크릴을 사용합니다.

참고

아크릴 표면을 렌더링하는 작업은 GPU를 많이 소모하며, 이로 인해 디바이스 전력 사용량이 증가하고 배터리 사용 시간이 단축될 수 있습니다. 디바이스가 배터리 절약 모드에 들어가면 아크릴 효과가 자동으로 사용하지 않도록 설정됩니다. 사용자는 설정 >개인 설정> 색에서 투명성 효과를 해제하면 모든 앱에 대한 아크릴 효과를 사용하지 않도록 설정할 수 있습니다.

유용성 및 적응성

아크릴은 다양한 디바이스 및 컨텍스트에 맞춰 자동으로 모양을 바꿉니다.

고대비 모드에서는 아크릴 대신 사용자가 선택한 익숙한 백그라운드 색상이 계속 표시됩니다. 또한 다음과 같은 경우 배경 아크릴과 인앱 아크릴이 모두 단색으로 표시됩니다.

• 사용자가 설정 >개인 설정> 색에서 투명성 효과를 해제하는 경우
• 배터리 절약 모드가 활성화된 경우.
• 앱이 저사양 하드웨어에서 실행되는 경우.

뿐만 아니라 다음과 같은 경우 오직 배경 아크릴만이 투명도 및 질감을 단색으로 대체합니다.

• 바탕 화면에서 앱 창이 비활성화되는 경우.
• 앱이 Xbox, HoloLens 또는 태블릿 모드에서 실행되는 경우

가독성 고려 사항

앱에서 사용자에게 표시하는 모든 텍스트는 명암비를 충족해야 합니다(접근성 있는 텍스트 요구 사항 참조). 텍스트에서 아크릴 기반 명암비를 충족하도록 아크릴 리소스가 최적화되었습니다. 테마 컬러 텍스트를 아크릴 표면에 배치하지 않는 것이 좋습니다. 이러한 조합은 기본 14px 글꼴 크기에서 최소 명암비 요구 사항을 통과하지 못할 가능성이 높기 때문입니다. 되도록이면 아크릴 요소 위에 하이퍼링크를 배치하지 마세요. 또한 아크릴 색조 색 또는 불투명도 수준을 사용자 지정하도록 선택한 경우 가독성에 미치는 영향을 고려합니다.

아크릴 테마 리소스

XAML AcrylicBrush 또는 미리 정의된 AcrylicBrush 테마 리소스를 사용하여 간편하게 앱 표면에 아크릴을 적용할 수 있습니다. 먼저 인앱 아크릴 또는 백그라운드 아크릴 중에 무엇을 사용할지 결정해야 합니다. 이 문서의 앞부분에서 추천 사항으로 설명한 공통 앱 패턴을 검토하세요.

앱 테마를 준수하고 필요한 경우 단색으로 대체하는 백그라운드 및 인앱 아크릴 유형을 위한 브러시 리소스 모음을 만들어 두었습니다. WinUI 2의 경우 이러한 테마 리소스는 microsoft-ui-xaml GitHub 리포지토리의 AcrylicBrush themeresources 파일에 있습니다. 이름에 Background가 포함된 리소스는 백그라운드 아크릴을 나타내고, InApp은 인앱 아크릴을 나타냅니다.

특정 표면을 그리려면 다른 브러시 리소스를 적용할 때처럼 WinUI 2 테마 리소스 중 하나를 요소 백그라운드에 적용합니다.

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

사용자 지정 아크릴 브러시

브랜딩을 표시하거나 페이지의 다른 요소와 시각적으로 균형을 맞추기 위해 앱의 아크릴에 컬러 색조를 추가할 수 있습니다. 회색조 대신 컬러를 표시하려면 다음 속성을 사용하여 사용자 고유의 아크릴 브러시를 정의해야 합니다.

• TintColor: 색/색조 오버레이 계층입니다.
• TintOpacity: 색조 계층의 불투명도입니다.
• TintLuminosityOpacity: 백그라운드의 아크릴 화면을 통해 허용되는 채도의 양을 제어합니다.
• BackgroundSource: 백그라운드 아크릴과 인앱 아크릴 중에서 원하는 것을 지정하는 플래그입니다.
• FallbackColor: 배터리 절약 모드에서 아크릴을 대체하는 단색입니다. 백그라운드 아크릴의 경우 앱이 활성 데스크톱 창에 없거나 앱이 휴대폰 및 Xbox에서 실행 중인 경우 대체 색이 아크릴까지 대체합니다.

아크릴 브러시를 추가하려면 어두운 테마, 밝은 테마, 고대비 테마에 대한 세 가지 리소스를 정의해야 합니다. 고대비에서는 x:Key가 어두운/밝은 AcrylicBrush와 동일한 SolidColorBrush를 사용하는 것이 좋습니다.

참고

TintLuminosityOpacity 값을 지정하지 않으면 시스템에서 TintColor 및 TintOpacity에 따라 이 값을 자동으로 조정합니다.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

다음 샘플은 코드에서 AcrylicBrush를 선언하는 방법을 보여줍니다. 앱에서 여러 OS 대상을 지원하는 경우 사용자의 머신에서 이 API를 사용할 수 있는지 확인해야 합니다.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));

    grid.Fill = myBrush;
}

아크릴을 제목 표시줄로 확장

앱의 창이 끊김 없이 보이게 하려면 제목 표시줄 영역에 아크릴을 사용하면 됩니다. 다음 예제에서는 ApplicationViewTitleBar 개체의 ButtonBackgroundColor 및 ButtonInactiveBackgroundColor 속성을 Colors.Transparent로 설정하여 아크릴을 제목 표시줄로 확장합니다.

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

여기서 보여드리는 것처럼, Window.Activate를 호출한 후 이 코드를 앱의 OnLaunched 메서드(App.xaml.cs)에 배치하거나 앱의 첫 번째 페이지에 배치할 수 있습니다.

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

또한 앱 제목을 그려야 합니다. 앱 제목은 일반적으로 CaptionTextBlockStyle을 사용하는 TextBlock을 통해 제목 표시줄에 자동으로 표시됩니다. 자세한 내용은 제목 표시줄 사용자 지정을 참조하세요.

권장 사항 및 금지 사항

• 일시적인 표면에 아크릴을 사용합니다.
• 앱 주변과 살짝 혼합하여 원활한 환경을 제공할 수 있도록 아크릴을 앱 가장자리 중 하나 이상으로 확장하세요.
• 앱의 큰 백그라운드 표면에 데스크탑 아크릴을 배치하지 않습니다.
• 여러 아크릴 창을 옆으로 나란히 배치하지 않습니다. 이렇게 하면 원치 않는 시각적 이음매가 생성되기 때문입니다.
• 아크릴 표면 위에 테마 컬러 텍스트를 배치하지 마세요.

아크릴 디자인 방식

아크릴의 고유한 모양과 속성이 온전히 유지되도록 아크릴의 핵심 구성 요소를 세밀하게 조정했습니다. 시각적 깊이와 입체감을 추가하기 위해 반투명도, 흐림 및 노이즈 작업을 시작했습니다. 아크릴 배경에 배치된 UI의 대비와 가독성을 보장하기 위해 제외 혼합 모드 레이어를 추가했습니다. 마지막으로, 개인 설정 옵션을 제공하기 위해 컬러 색조를 추가했습니다. 이러한 레이어가 합쳐져서 생생하고 편리한 소재가 완성됩니다.

아크릴 제작법: 배경, 흐림, 제외 혼합, 색/색조 오버레이, 노이즈

샘플 코드 가져오기

• WinUI 2 갤러리 샘플 - 상호 작용형 형식으로 모든 XAML 컨트롤을 확인할 수 있습니다.

관련된 문서

Fluent Design 개요