Windows 11을 위한 데스크톱 앱에 Mica 또는 Acrylic 재질을 적용하기

Windows 11의 자재는 실제 물체와 유사한 UX 표면에 적용되는 시각 효과입니다. 마이카 및 아크릴과 같은 차폐 재료는 대화형 UI 컨트롤 아래 기본 레이어로 사용됩니다.

Mica는 사용자의 테마와 데스크톱 배경 화면을 통합하여 고도로 개인 설정된 모양을 만드는 불투명 재질입니다. Mica는 배경 배경 화면을 한 번만 캡처하여 시각화를 만들 수 있으므로 특히 제목 표시줄 영역에서 앱의 기본 계층에 사용하는 것이 좋습니다.

아크릴은 반투명 유리의 효과를 복제하는 반투명 재질입니다. 이건 플라이아웃 및 상황에 맞는 메뉴와 같은 일시적으로 조명이 없는 화면에서만 사용됩니다.

이 문서에서는 Mica 또는 Acrylic을 Windows App SDK/WinUI 3 XAML 앱의 기본 계층으로 적용하는 방법을 설명합니다.

비고

Win32 앱에서 배경 자료를 사용하려면 Windows 11Apply Mica> 참조하세요.
창 배경이 아닌 UI 요소에 적용된 앱 내 아크릴은 앱 내 아크릴을 참조하세요.

배경 자료를 사용하는 방법

중요 API: Window.SystemBackdrop 속성, MicaBackdrop 클래스, DesktopAcrylicBackdrop 클래스, SystemBackdropConfiguration 클래스

WinUI 3 갤러리 앱을 열고 작동 중인 시스템 배경을 확인합니다

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

앱에 Mica 또는 Acrylic 재질을 적용하려면 속성을 XAML SystemBackdrop(일반적으로 기본 제공 배경 SystemBackdrop 또는 DesktopAcrylicBackdrop) 로 설정합니다.

이러한 요소에는 다음과 같은 속성이 있습니다.SystemBackdrop

CommandBarFlyoutCommandBar.SystemBackdrop
ContentIsland.SystemBackdrop
DesktopWindowXamlSource.SystemBackdrop
FlyoutBase.SystemBackdrop
메뉴 플라이아웃 프레젠터.시스템 배경
팝업.시스템백드롭
Window.SystemBackdrop (윈도우 시스템 백드롭)

다음 예제에서는 XAML에서 시스템 배경을 설정하는 방법을 보여 줍니다.

미카 (광물)

Mica는 일반적으로 앱 창의 배경으로 사용됩니다.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop/>
    </Window.SystemBackdrop>

</Window>

Mica Alt

Mica Alt 변형을 사용하려면 속성을 Kind.로 설정합니다BaseAlt.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop Kind="BaseAlt"/>
    </Window.SystemBackdrop>

</Window>

Acrylic

바탕 화면 아크릴 창의 배경으로 사용할 수 있습니다.

<Window
    ... >

    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Window.SystemBackdrop>

</Window>

임시 UI에서 사용되는 아크릴

아크릴은 플라이아웃과 같은 일시적인 UI의 배경으로도 일반적으로 사용됩니다. 플라이아웃이 동적으로 만들어지는 경우가 많기 때문에 XAML 또는 코드에서 이를 설정할 수 있습니다.

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>

Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

고급: 시스템 배경 컨트롤러를 사용하는 방법

비고

Windows App SDK 1.3부터 이전 섹션에서 설명한 대로 Window.SystemBackdrop 속성을 XAML SystemBackdrop 설정하여 재질을 적용할 수 있습니다. 대부분의 앱에 자료를 적용하는 것이 좋습니다.

이 문서의 나머지 부분에서는 컴퍼지션 MicaController 및 DesktopAcrylicController API를 사용하여 배경 동작을 보다 자세히 제어하는 방법을 보여 줍니다.

앱에서 배경 자료를 사용하려면 ISystemBackdropController 인터페이스(MicaController 또는 DesktopAcrylicController)를 구현하는 컨트롤러 중 하나를 사용할 수 있습니다. 이러한 클래스는 시스템 배경 자료의 렌더링과 자료에 대한 시스템 정책 처리를 모두 관리합니다.

Mica를 배경 자료로 사용하려면 MicaController 개체를 만듭니다. Acrylic을 사용하려면 DesktopAcrylicController 개체를 만듭니다. 설정 및 지원 코드는 시스템 배경 자료의 각 유형에 대해 동일합니다.

MicaController 만들기

MicaController micaController;

bool TrySetMicaBackdrop(bool useMicaAlt)
{
    if (MicaController.IsSupported())
    {
        ...
        micaController = new MicaController();
        micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
        ...
    }
}

// namespace MUCSB = Microsoft::UI::Composition::SystemBackdrops;

winrt::MUCSB::MicaController m_backdropController{ nullptr };

void SetBackground(bool useMicaAlt)
{
    if (winrt::MUCSB::MicaController::IsSupported())
    {
        ...
        m_backdropController = winrt::MUCSB::MicaController();
        m_backdropController.Kind(useMicaAlt 
            ? winrt::MUCSB::MicaKind::BaseAlt 
            : winrt::MUCSB::MicaKind::Base);
        ...
    }
}

DesktopAcrylicController 만들기

DesktopAcrylicController acrylicController;

bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
    if (DesktopAcrylicController.IsSupported())
    {
        ...
        acrylicController = new DesktopAcrylicController();
        acrylicController.Kind = useAcrylicThin 
            ? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
        ...
    }
}

// namespace MUCSB = Microsoft::UI::Composition::SystemBackdrops;

winrt::MUCSB::DesktopAcrylicController m_backdropController{ nullptr };

void SetBackground(bool useAcrylicThin)
{
    if (winrt::MUCSB::DesktopAcrylicController::IsSupported())
    {
        ...
        m_backdropController = winrt::MUCSB::DesktopAcrylicController();
        m_backdropController.Kind(useAcrylicThin 
            ? winrt::MUCSB::DesktopAcrylicKind::Thin 
            : winrt::MUCSB::DesktopAcrylicKind::Base);
        ...
    }
}

controller는 기본적으로 시스템 밝은 테마 및 어두운 테마에 반응합니다. 이 동작을 재정의하려면 컨트롤러에서 다음 속성을 설정할 수 있습니다:

비고

컨트롤러의 네 가지 속성을 사용자 지정한 후에는 연결된 SystemBackdropConfiguration.Theme 가 변경될 때 더 이상 기본 밝게 또는 어둡게 값이 적용되지 않습니다. 새 테마와 일치하도록 해당 속성을 수동으로 업데이트해야 합니다.

앱에서 배경 자료를 사용하려면 다음 항목이 필요합니다.

시스템 지원

앱이 실행되는 시스템은 배경 자료를 지원해야 합니다. 해당 MicaController.IsSupported 또는 DesktopAcrylicController.IsSupported 메서드를 호출하여 런타임에 배경 자료가 지원되는지 확인합니다.
유효한 대상

해당 ICompositionSupportsSystemBackdrop 인터페이스를 구현하는 대상을 제공해야 합니다. XAML 앱에서 XAML 창 은 이 인터페이스를 구현하고 배경 대상으로 사용됩니다.
SystemBackdropConfiguration 개체

이 SystemBackdropConfiguration은 시스템 배경 컨트롤러에 앱별 정책 정보를 제공하여 시스템 배경 자료를 제대로 구성합니다.
DispatcherQueue 개체

기본 XAML 스레드에서 사용 가능한 Windows.System.DispatcherQueue가 필요합니다. 하나가 있는지 확인하기 위해 호출 DispatcherQueue.EnsureSystemDispatcherQueue() 합니다.

예: WinUI 앱에서 컨트롤러와 함께 Mica 사용

이 예제에서는 XAML 앱에서 컨트롤러를 사용하여 Mica 배경 자료를 설정하는 방법을 보여줍니다.

팁 (조언)

또한 GitHub 다음 예제 프로젝트를 참조하세요.

C#: WinUI 갤러리의SampleSystemBackdropsWindow.

C++/WinRT: Windows App SDK Mica 예제.

using Microsoft.UI.Composition;
using Microsoft.UI.Composition.SystemBackdrops;
using Microsoft.UI.Xaml;
using WinRT; // required to support Window.As<ICompositionSupportsSystemBackdrop>()

public sealed partial class MainWindow : Window
{
    MicaController micaController;
    SystemBackdropConfiguration configurationSource;

    public MainWindow()
    {
        this.InitializeComponent();

        TrySetMicaBackdrop(false);
    }

    bool TrySetMicaBackdrop(bool useMicaAlt)
    {
        if (MicaController.IsSupported())
        {
            DispatcherQueue.EnsureSystemDispatcherQueue();

            // Hooking up the policy object.
            configurationSource = new SystemBackdropConfiguration();
            Activated += Window_Activated;
            Closed += Window_Closed;
            ((FrameworkElement)Content).ActualThemeChanged += Window_ThemeChanged;

            // Initial configuration state.
            configurationSource.IsInputActive = true;
            SetConfigurationSourceTheme();

            micaController = new MicaController
            {
                Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base
            };

            // Enable the system backdrop.
            // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
            micaController.AddSystemBackdropTarget(
                this.As<ICompositionSupportsSystemBackdrop>());
            micaController.SetSystemBackdropConfiguration(configurationSource);
            return true; // Succeeded.
        }

        return false; // Mica is not supported on this system.
    }

    private void Window_Activated(object sender, WindowActivatedEventArgs args)
    {
        if (configurationSource != null)
            configurationSource.IsInputActive = 
                args.WindowActivationState != WindowActivationState.Deactivated;
    }

    private void Window_Closed(object sender, WindowEventArgs args)
    {
        // Make sure any Mica/Acrylic controller is disposed
        // so it doesn't try to use this closed window.
        micaController?.Dispose();
        micaController = null;
        Activated -= Window_Activated;
        configurationSource = null;
    }

    private void Window_ThemeChanged(FrameworkElement sender, object args)
    {
        if (configurationSource != null)
            SetConfigurationSourceTheme();
    }

    private void SetConfigurationSourceTheme()
    {
        if (configurationSource != null)
            configurationSource.Theme = 
                (SystemBackdropTheme)((FrameworkElement)Content).ActualTheme;
    }
}

// pch.h
...
#include <winrt/Microsoft.UI.Composition.SystemBackdrops.h>
#include <winrt/Windows.System.h>
#include <dispatcherqueue.h>

// MainWindow.xaml.h
...
namespace winrt
{
    namespace MUC = Microsoft::UI::Composition;
    namespace MUCSB = Microsoft::UI::Composition::SystemBackdrops;
    namespace MUX = Microsoft::UI::Xaml;
    namespace WS = Windows::System;
}
...
struct MainWindow : MainWindowT<MainWindow>
{
    winrt::MUCSB::SystemBackdropConfiguration m_configuration{ nullptr };
    winrt::MUCSB::MicaController m_backdropController{ nullptr };
    winrt::MUX::Window::Activated_revoker m_activatedRevoker;
    winrt::MUX::Window::Closed_revoker m_closedRevoker;
    winrt::MUX::FrameworkElement::ActualThemeChanged_revoker m_themeChangedRevoker;
    winrt::MUX::FrameworkElement m_rootElement{ nullptr };
    winrt::WS::DispatcherQueueController m_dispatcherQueueController{ nullptr };

    MainWindow::MainWindow()
    {
        InitializeComponent();

        SetBackground();

        m_closedRevoker = this->Closed(winrt::auto_revoke, [&](auto&&, auto&&)
        {
            if (nullptr != m_backdropController)
            {
                m_backdropController.Close();
                m_backdropController = nullptr;
            }

            if (nullptr != m_dispatcherQueueController)
            {
                m_dispatcherQueueController.ShutdownQueueAsync();
                m_dispatcherQueueController = nullptr;
            }
        });
    }

    void SetBackground()
    {
        if (winrt::MUCSB::MicaController::IsSupported())
        {
            // We ensure that there is a Windows.System.DispatcherQueue on the current thread.
            // Always check if one already exists before attempting to create a new one.
            if (nullptr == winrt::WS::DispatcherQueue::GetForCurrentThread() &&
                nullptr == m_dispatcherQueueController)
            {
                m_dispatcherQueueController = CreateSystemDispatcherQueueController();
            }

            // Setup the SystemBackdropConfiguration object.
            SetupSystemBackdropConfiguration();

            // Setup Mica on the current Window.
            m_backdropController = winrt::MUCSB::MicaController();
            m_backdropController.SetSystemBackdropConfiguration(m_configuration);
            m_backdropController.AddSystemBackdropTarget(
                this->m_inner.as<winrt::MUC::ICompositionSupportsSystemBackdrop>());
        }
    }

    winrt::WS::DispatcherQueueController CreateSystemDispatcherQueueController()
    {
        DispatcherQueueOptions options
        {
            sizeof(DispatcherQueueOptions),
            DQTYPE_THREAD_CURRENT,
            DQTAT_COM_NONE
        };

        ::ABI::Windows::System::IDispatcherQueueController* ptr{ nullptr };
        winrt::check_hresult(CreateDispatcherQueueController(options, &ptr));
        return { ptr, take_ownership_from_abi };
    }

    void SetupSystemBackdropConfiguration()
    {
        m_configuration = winrt::MUCSB::SystemBackdropConfiguration();

        // Activation state.
        m_activatedRevoker = this->Activated(winrt::auto_revoke,
            [&](auto&&, MUX::WindowActivatedEventArgs const& args)
            {
                m_configuration.IsInputActive(
                    winrt::MUX::WindowActivationState::Deactivated != args.WindowActivationState());
            });

        // Initial state.
        m_configuration.IsInputActive(true);

        // Application theme.
        m_rootElement = this->Content().try_as<winrt::MUX::FrameworkElement>();
        if (nullptr != m_rootElement)
        {
            m_themeChangedRevoker = m_rootElement.ActualThemeChanged(winrt::auto_revoke,
                [&](auto&&, auto&&)
                {
                    m_configuration.Theme(
                        ConvertToSystemBackdropTheme(m_rootElement.ActualTheme()));
                });

            // Initial state.
            m_configuration.Theme(
                ConvertToSystemBackdropTheme(m_rootElement.ActualTheme()));
        }
    }

    winrt::MUCSB::SystemBackdropTheme ConvertToSystemBackdropTheme(
        winrt::MUX::ElementTheme const& theme)
    {
        switch (theme)
        {
        case winrt::MUX::ElementTheme::Dark:
            return winrt::MUCSB::SystemBackdropTheme::Dark;
        case winrt::MUX::ElementTheme::Light:
            return winrt::MUCSB::SystemBackdropTheme::Light;
        default:
            return winrt::MUCSB::SystemBackdropTheme::Default;
        }
    }
    ...
};
...

피드백

이 페이지가 도움이 되었나요?

Last updated on 2026-03-11