데스크톱 앱에서 시각적 개체 레이어 사용

  • 아티클

이제 비 UWP 데스크톱 애플리케이션의 Windows 런타임 API를 사용하여 WPF, Windows Forms 및 C++ Win32 애플리케이션의 모양, 느낌 및 기능을 향상시키고, UWP를 통해서만 사용할 수 있는 최신 Windows UI 기능을 활용할 수 있습니다.

대부분의 시나리오에서는 XAML islands를 사용하여 최신 XAML 컨트롤을 앱에 추가할 수 있습니다. 그러나 기본 제공 컨트롤을 능가하는 사용자 지정 환경을 만들어야 할 때 시각적 개체 레이어 API에 액세스할 수 있습니다.

시각적 개체 레이어는 그래픽, 효과 및 애니메이션에 대한 고성능, 유지 모드 API를 제공합니다. 이 레이어는 Windows 디바이스에서 UI의 기반이 됩니다. UWP XAML 컨트롤은 시각적 개체 레이어를 토대로 작성되었으며, 밝기, 깊이, 동작, 재료 및 크기와 같은 Fluent 디자인 시스템의 다양한 측면을 사용할 수 있습니다.

Short video showing a user interface created with the visual layer.

시각적 개체 레이어로 만든 사용자 인터페이스

모든 Windows 앱에서 시각적으로 매력적인 사용자 인터페이스 만들기

시각적 개체 레이어를 사용하면 사용자 지정 그린 콘텐츠(시각적 개체)를 간단하게 합성하고 애플리케이션에서 해당 개체에 강력한 애니메이션, 효과 및 조작을 적용하여 매력적인 환경을 만들 수 있습니다. 시각적 개체 레이어는 기존 UI 프레임워크를 대체하지 않습니다. 대신 이러한 프레임워크에 대한 중요한 보완 기능입니다.

시각적 개체 레이어를 사용하여 애플리케이션에 고유한 모양과 느낌을 제공하고 다른 애플리케이션과는 분리되는 ID를 설정할 수 있습니다. 또한 애플리케이션을 더 쉽게 사용할 수 있도록 디자인된 흐름 디자인 원칙을 통해 사용자의 더 많은 참여를 이끌 수 있습니다. 예를 들어, 화면에서 항목 간의 관계를 표시하는 시각적 개체의 신호 및 애니메이션 효과를 적용한 화면 전환을 만드는 데 사용할 수 있습니다.

시각적 개체 레이어 기능

브러시

컴퍼지션 브러시를 사용하여 단색, 그라데이션, 이미지, 비디오, 복잡한 효과 등을 사용하여 UI 개체를 그릴 수 있습니다.

An egg created with Material Creator

Material Creator 데모 앱으로 만든 계란

효과

컴퍼지션 효과는 조명, 그림자 및 필터 효과 목록을 포함합니다. 애니메이션을 적용하고, 사용자 지정하고, 연결한 다음, 시각적 개체에 직접 적용할 수 있습니다. SceneLightingEffect를 컴퍼지션 조명과 결합하여 분위기, 깊이 및 재료을 만들 수 있습니다.

Lights and material

Windows UI 컴퍼지션 샘플 갤러리에 표시되는 조명 및 재료

애니메이션

컴퍼지션 애니메이션은 UI 스레드와는 독립적으로 Compositor 프로세스에서 직접 실행됩니다. 이렇게 하면 많은 수의 명시적인 동시 애니메이션을 실행할 수 있으므로 매끄럽게 확장 및 축소될 수 있습니다. 시간이 지남에 따라 속성 변경을 구동하기 위한 친숙한 KeyFrame 애니메이션 외에도 식을 사용하여 사용자 입력을 비롯한 다양한 속성 간의 수학적 관계를 설정할 수 있습니다. 입력 구동 애니메이션을 사용하면 동적이면서 유연하게 사용자 입력에 응답하는 UI를 만들 수 있으며, 이로 인해 사용자 참여가 더 높아질 수 있습니다.

Short video of another user interface created with the visual layer.

Windows UI 컴퍼지션 샘플 갤러리에 표시되는 동작

기존 코드베이스를 유지하고 점진적으로 채택

기존 애플리케이션의 코드는 손실하고 싶지 않은 상당한 투자에 해당합니다. 시각적 개체 레이어를 사용하고 나머지 UI는 기존 프레임워크에 유지하기 위해 콘텐츠의 islands를 마이그레이션할 수 있습니다. 즉, 기존 코드베이스를 광범위하게 변경하지 않아도 애플리케이션 UI를 획기적으로 업데이트하고 개선할 수 있습니다.

샘플 및 튜토리얼

샘플을 실험하여 애플리케이션에서 시각적 개체 레이어를 사용하는 방법을 알아봅니다. 이러한 샘플과 튜토리얼은 시각적 개체 레이어 사용을 시작하고 기능의 작동 방식을 보여 줍니다.

Win32

Windows Forms

WPF

제한 사항

대부분의 시각적 개체 레이어 기능은 UWP 앱에서와 같이 데스크톱 애플리케이션에서 호스트될 때 동일하게 작동하나, 일부 기능에는 제한이 있습니다. 다음과 같은 몇 가지 제한 사항에 유의하십시오.

  • 효과 체인은 효과 설명에 Win2D를 사용합니다. Win2D NuGet 패키지는 데스크톱 애플리케이션에서 지원되지 않습니다. 그러므로 소스 코드에서 다시 컴파일해야 합니다.
  • 적중 테스트를 수행하려면 시각적 개체 트리를 직접 이동하면서 범위를 계산해야 합니다. 이 방식은 UWP의 시각적 개체 레이어와 동일합니다. 단, 이 경우에는 적중 테스트를 위해 쉽게 바인딩할 수 있는 XAML 요소가 없습니다.
  • 시각적 개체 레이어에는 텍스트를 렌더링하기 위한 기본 형식이 없습니다.
  • WPF 및 시각적 개체 레이어와 같은 두 가지 UI 기술을 함께 사용하는 경우 각 화면에서 고유한 픽셀을 그리며 픽셀을 공유할 수 없습니다. 따라서 시각적 개체 레이어 콘텐츠는 항상 다른 UI 콘텐츠 위에 렌더링됩니다. (이것은 에어스페이스 문제로 알려져 있습니다.) 호스트 UI를 사용하여 시각적 개체 레이어 콘텐츠 크기를 조정하고 다른 콘텐츠를 가리지 않도록 하려면 추가적인 코딩 및 테스트를 수행해야 할 수도 있습니다.
  • 데스크톱 애플리케이션에서 호스트되는 콘텐츠는 DPI에 맞게 자동으로 크기 또는 규모가 조정되지 않습니다. 콘텐츠가 DPI 변경을 처리하도록 하려면 추가 단계가 필요할 수 있습니다. (자세한 내용은 플랫폼별 튜토리얼을 참조하세요.)

추가 리소스

API 참조