효과 및 경험 조정

WinUI는 다양한 아름다운 효과, 애니메이션 및 차별화를 위한 수단을 제공합니다. 그러나 성능 및 사용자 지정 가능성에 대한 사용자 기대치를 충족하는 것은 여전히 성공적인 애플리케이션을 만드는 데 필요한 부분입니다. Windows 앱 SDK 앱은 다양한 기능과 기능이 있는 다양한 Windows 디바이스 및 구성 제품군에서 실행할 수 있습니다. 모든 사용자에게 포괄적인 환경을 제공하려면 애플리케이션이 디바이스 간에 확장되고 사용자 기본 설정을 준수해야 합니다. UI 조정은 디바이스의 기능을 활용하고 쾌적하고 포괄적인 사용자 환경을 보장하는 효율적인 방법을 제공할 수 있습니다.

UI 조정은 다음 영역과 관련하여 성능이 좋은 아름다운 UI에 대한 작업을 포괄하는 광범위한 범주입니다.

효과에 대한 사용자 설정 존중 및 적응
애니메이션에 대한 사용자 설정 수용
지정된 하드웨어 기능에 대한 UI 최적화

여기서는 위의 영역에서 시각적 계층을 사용하여 효과와 애니메이션을 조정하는 방법을 설명하지만, 뛰어난 최종 사용자 환경을 보장하기 위해 애플리케이션을 조정하는 다른 많은 방법이 있습니다. 다양한 기기에 맞춰 UI를 조정하고 반응형 UI를 만드는 방법에 대한 지침 문서를 사용할 수 있습니다.

사용자 효과 설정

사용자는 애플리케이션이 존중하고 적응해야 하는 다양한 이유로 Windows 환경을 사용자 지정할 수 있습니다. 최종 사용자가 제어할 수 있는 한 가지 영역은 시스템 전체에서 사용되는 효과 유형을 변경하는 것입니다.

투명도 효과 설정

사용자가 사용자 지정할 수 있는 이러한 효과 설정 중 하나는 투명도 효과를 켜거나 끄는 것입니다. 이 기능은 Windows 설정의 개인 설정 > 색 또는 설정 > 접근성 표시를 통해 > 찾을 수 있습니다.

설정의 투명도 옵션

이 옵션을 설정하면 투명도를 사용하는 모든 효과가 예상대로 표시됩니다. 이는 Acrylic, HostBackdropBrush 또는 완전히 불투명하지 않은 사용자 지정 효과 그래프에 적용됩니다.

끄면 XAML의 아크릴 브러시가 기본적으로 이 이벤트를 감지하기 때문에 아크릴 재질이 자동으로 단색으로 돌아갑니다. 여기서는 투명도 효과를 사용하지 않을 때 계산기 앱이 제대로 단색으로 되돌아가는 것을 볼 수 있습니다.

아크릴이 있는 계산기 및 아크릴이 있는 계산기 는 투명도 설정에 응답합니다

그러나 사용자 지정 효과의 경우 애플리케이션은 UISettings.AdvancedEffectsEnabled 속성 또는 AdvancedEffectsEnabledChanged 이벤트에 응답하고 효과/효과 그래프를 전환하여 투명도가 없는 효과를 사용해야 합니다. 이 예제는 다음과 같습니다.

public MainPage()
{
   var uisettings = new UISettings();
   bool advancedEffects = uisettings.AdvancedEffectsEnabled;
   uisettings.AdvancedEffectsEnabledChanged += Uisettings_AdvancedEffectsEnabledChanged;
}

private void Uisettings_AdvancedEffectsEnabledChanged(UISettings sender, object args)
{
    // TODO respond to sender.AdvancedEffectsEnabled
}

애니메이션 설정

마찬가지로 애플리케이션은 UISettings.AnimationsEnabled 속성을 수신 대기하고 응답하여 설정 접근성 표시의 > 사용자 설정 > 에 따라 애니메이션이 켜지거나 꺼지도록 해야 합니다.

설정에서 애니메이션 옵션

public MainPage()
{
   var uisettings = new UISettings();
   bool animationsEnabled = uisettings.AnimationsEnabled;
   // TODO respond to animations settings
}

기능 API 활용

CompositionCapabilities API를 활용하여 지정된 하드웨어에서 사용 가능하고 성능이 뛰어난 컴퍼지션 기능을 감지하고 최종 사용자가 모든 장치에서 성능이 뛰어난 아름다운 환경을 얻을 수 있도록 디자인을 조정할 수 있습니다. API는 다양한 폼 팩터에서 정상적인 효과 크기 조정을 구현하기 위해 하드웨어 시스템 기능을 확인하는 수단을 제공합니다. 이렇게 하면 애플리케이션을 적절하게 조정하여 아름답고 원활한 최종 사용자 환경을 쉽게 만들 수 있습니다.

이 API는 애플리케이션 UI에 대한 크기 조정 결정을 내리는 데 사용할 수 있는 메서드와 이벤트 수신기를 제공합니다. 이 기능은 시스템이 복잡한 컴퍼지션 및 렌더링 작업을 얼마나 잘 처리할 수 있는지 감지한 다음 개발자가 활용할 수 있도록 사용하기 쉬운 모델의 정보를 반환합니다.

구성 기능 사용

CompositionCapabilities 기능은 이미 아크릴 소재와 같은 기능에 활용되고 있으며, 여기서 재료는 시나리오 및 하드웨어에 따라 성능이 더 뛰어난 효과로 대체됩니다.

API는 몇 가지 간단한 단계로 기존 코드에 추가할 수 있습니다.

애플리케이션의 생성자에서 기능 개체를 가져옵니다.
```
_capabilities = new CompositionCapabilities();
```
앱에 기능 변경 이벤트 수신기를 등록합니다.
```
_capabilities.Changed += HandleCapabilitiesChanged;
```
이벤트 콜백 메서드에 콘텐츠를 추가하여 다양한 기능 수준을 처리합니다. 이는 아래의 다음 단계와 유사할 수도 있으며 그렇지 않을 수도 있습니다.

효과를 사용하는 경우 기능 개체를 먼저 확인합니다. 효과를 조정하려는 방법에 따라 조건부 검사를 사용하거나 제어 문을 전환하는 것이 좋습니다.

if (_capabilities.AreEffectsSupported())
{
    // Add incremental effects updates here

    if (_capabilities.AreEffectsFast())
    {
        // Add more advanced effects here where applicable
    }
}

전체 예제 코드는 Windows UI GitHub 리포지토리에서 찾을 수 있습니다.

빠른 효과와 느린 효과 비교

제공된 AreEffectsSupported 및 AreEffectsFast 메서드의 피드백에 따라 CompositionCapabilities API를 사용하여 애플리케이션은 디바이스에 최적화된 선택된 다른 효과로 비용이 많이 들거나 지원되지 않는 효과를 교체할 수 있도록 결정할 수 있습니다. 일부 효과는 일관되게 다른 효과보다 리소스를 더 많이 소모하는 것으로 알려져 있어 절약해서 사용해야 하며, 다른 효과는 더 자유롭게 사용할 수 있습니다. 그러나 모든 효과의 경우 일부 시나리오 또는 조합이 효과 그래프의 성능 특성을 변경할 수 있으므로 연결 및 애니메이션 효과를 적용할 때는 주의해야 합니다. 다음은 개별 효과의 대략적인 성능 특성입니다.

성능에 큰 영향을 미치는 것으로 알려진 효과는 가우스 흐림 효과, 그림자 마스크, BackDropBrush, HostBackDropBrush 및 레이어 비주얼입니다. 저예산 장치에는 (기능 수준 9.1-9.3)권장되지 않으며, 고급 디바이스에서 신중하게 사용하는 것이 좋습니다.
중간 성능 영향을 주는 효과로는 Color Matrix, 특정 Blend Effect BlendModes(광도, 색, 채도 및 색조), SpotLight, SceneLightingEffect 및 BorderEffect(시나리오에 따라 다름)가 포함됩니다. 이러한 효과는 저사양 장치의 특정 시나리오에서 작용할 수도 있지만, 체인 연결과 애니메이션을 사용할 때는 주의해야 합니다. 사용을 2개 이하로 제한하고 전환에만 애니메이션 효과를 주는 것이 좋습니다.
다른 모든 효과는 성능에 미치는 영향이 낮으며 애니메이션 효과를 적용하고 연결할 때 모든 합리적인 시나리오에서 작동합니다.

피드백

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

Last updated on 2026-03-17