아크릴 소재

아티클
07/17/2024

영웅 이미지

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

중요 API: AcrylicBrush 클래스, Background 속성, Window.SystemBackdrop 속성, DesktopAcrylicBackdrop 클래스

밝은 테마의 아크릴

어두운 테마의 아크릴

아크릴 및 Fluent 디자인 시스템

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

아크릴 혼합 유형

아크릴의 가장 눈에 띄는 특징은 투명도입니다. 재질을 통해 표시되는 내용을 변경하는 두 가지 아크릴 블렌드 유형이 있습니다.

배경 아크릴 은 사용자의 개인 설정 기본 설정을 축하하면서 응용 프로그램 창 사이에 깊이를 추가, 현재 활성 응용 프로그램 뒤에 바탕 화면 배경 화면과 다른 창을 표시합니다.
인앱 아크릴은 앱 프레임 내부에 깊이감을 더하여 포커스와 계층을 모두 제공합니다.

배경 아크릴

인앱 아크릴

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

아크릴을 사용하는 경우

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

일시적인 화면

임시 UI 요소에 배경 아크릴을 사용합니다.

상황에 맞는 메뉴, 플라이아웃, 모달이 아닌 팝업 또는 밝은 해제 창이 있는 앱의 경우 배경 아크릴을 사용하는 것이 좋습니다. 특히 이러한 표면이 주 앱 창의 프레임 바깥쪽에 그려지는 경우 특히 그렇습니다. 임시 시나리오에서 아크릴을 사용하면 일시적인 UI를 트리거한 콘텐츠와 시각적 관계를 유지하는 데 도움이 됩니다.

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

UI 및 세로 창 지원

스크롤하거나 상호 작용할 때 콘텐츠와 겹칠 수 있는 표면과 같은 UI를 지원하기 위해 앱 내 아크릴을 사용합니다.

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

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

참고 항목

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

유용성 및 적응성

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

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

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

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

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

가독성 고려 사항

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

앱에서 아크릴 적용

Important

배경 아크릴을 적용하는 방법은 WinUI 3과 WinUI 2/UWP 간에 다릅니다.

WinUI 2/UWP: AcrylicBrush 클래스에는 백그라운드 또는 앱 내 아크릴을 사용할지 여부를 지정하는 BackgroundSource 속성이 있습니다. AcrylicBrush를 사용하여 두 가지 유형의 아크릴을 모두 적용합니다. 특정 정보 및 예제는 AcrylicBrush 클래스를 참조하세요. Microsoft.UI.Xaml.Media.AcrylicBrush(WinUI 2), Windows.UI.Xaml.Media.AcrylicBrush(UWP).

WinUI 3: AcrylicBrush 클래스는 앱 내 아크릴만 지원합니다. DesktopAcrylicBackdrop 클래스를 사용하여 배경 아크릴을 적용합니다.

배경 아크릴

WinUI 3 앱에서 배경 아크릴을 적용하려면 요소의 SystemBackdrop 속성을 DesktopAcrylicBackdrop 인스턴스로 설정합니다. 자세한 내용은 Windows 11용 데스크톱 앱에서 Mica 또는 Acrylic 자료 적용을 참조하세요.

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

인앱 아크릴

XAML AcrylicBrush 또는 미리 정의된 AcrylicBrush 테마 리소스를 사용하여 앱 화면에 앱 내 아크릴을 적용할 수 있습니다.

WinUI에는 앱의 테마를 존중하고 필요에 따라 단색으로 대체되는 브러시 테마 리소스 컬렉션이 포함되어 있습니다. 특정 표면을 그리려면 다른 브러시 리소스를 적용하는 것처럼 테마 리소스 중 하나를 요소 배경에 적용합니다.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

참고 항목

이러한 리소스는 AcrylicBrush 테마 리소스 파일의 microsoft-ui-xaml GitHub 리포지토리에서 볼 수 있습니다.

WinUI 2의 경우 이름에 Background가 포함된 리소스는 배경 아크릴을 나타내고 InApp은 앱 내 아크릴을 나타냅니다.

WinUI 3에는 호환성을 위한 백그라운드 리소스가 포함되어 있지만 InApp 리소스와 동일하게 동작합니다.

사용자 지정 아크릴 브러시

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

TintColor: 색/색조 오버레이 계층입니다.
TintOpacity: 색조 계층의 불투명도입니다.
TintLuminosityOpacity: 백그라운드의 아크릴 화면을 통해 허용되는 채도의 양을 제어합니다.
BackgroundSource: (WinUI 2/UWP에만 해당) 백그라운드 또는 앱 내 아크릴을 지정할지 여부를 지정하는 플래그입니다.
FallbackColor: 배터리 절약 모드에서 아크릴을 대체하는 단색입니다. 배경 아크릴의 경우 앱이 활성 데스크톱 창에 없을 때 대체 색도 아크릴을 바꿉니다.

밝은 테마 아크릴 견본

어두운 테마 아크릴 견본

색조 불투명도에 비해 광도 불투명도

아크릴 브러시를 추가하려면 어둡고 밝은 테마와 고대비 테마에 대한 세 가지 리소스를 정의합니다. 고대비에서는 어둡고 밝은 AcrylicBrush와 동일한 x:Key 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를 선언하는 방법을 보여줍니다.

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Fill = myBrush;

권장 사항 및 금지 사항

임시 표면에서 아크릴을 사용합니다.
아크릴을 앱의 하나 이상의 가장자리로 확장하여 앱 주변 환경과 미묘하게 혼합하여 원활한 환경을 제공합니다.
앱의 큰 배경 화면에 데스크톱 아크릴을 배치하지 마세요.
아크릴 창을 여러 개 나란히 배치하지 마세요. 이로 인해 바람직하지 않은 볼 수 있는 이음새가 발생하기 때문입니다.
아크릴 표면에 악센트 색 텍스트를 배치하지 마세요.

아크릴 디자인 방식

아크릴의 주요 구성 요소를 미세 조정하여 고유한 모양과 속성에 도달했습니다. 반투명, 흐림 효과 및 노이즈로 시작하여 평평한 표면에 시각적 깊이와 차원을 추가했습니다. 아크릴 배경에 배치된 UI의 대비와 가독성을 보장하기 위해 제외 혼합 모드 레이어를 추가했습니다. 마지막으로, 개인 설정 옵션을 제공하기 위해 컬러 색조를 추가했습니다. 이러한 레이어가 합쳐져서 생생하고 편리한 소재가 완성됩니다.

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

예제

WinUI 3 갤러리 앱을 열고 백그라운드 아크릴의 작동을 확인합니다.

WinUI 3 갤러리 앱을 열고 작동 중인 앱 내 AcrylicBrush를 확인합니다.

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

Fluent Design 개요

다음을 통해 공유

아크릴 소재

아크릴 및 Fluent 디자인 시스템

아크릴 혼합 유형

아크릴을 사용하는 경우

일시적인 화면

UI 및 세로 창 지원

유용성 및 적응성

가독성 고려 사항

앱에서 아크릴 적용

배경 아크릴

인앱 아크릴

사용자 지정 아크릴 브러시

권장 사항 및 금지 사항

아크릴 디자인 방식

예제

피드백

추가 리소스

다음을 통해 공유

아크릴 소재

아크릴 및 Fluent 디자인 시스템

아크릴 혼합 유형

아크릴을 사용하는 경우

일시적인 화면

UI 및 세로 창 지원

유용성 및 적응성

가독성 고려 사항

앱에서 아크릴 적용

배경 아크릴

인앱 아크릴

사용자 지정 아크릴 브러시

권장 사항 및 금지 사항

아크릴 디자인 방식

예제

관련된 문서

피드백

추가 리소스