UWP 개발, Transition - 라이브스마트

UWP(Universal Windows Platform) 는 Windows 10 및 그 이상에서 실행되는 애플리케이션을 개발할 수 있는 플랫폼입니다.
UWP의 강력한 기능 중 하나는 앱의 시각적 요소와 사용자 상호작용을 매끄럽게 만들어주는 ‘전환(Transition)’ 효과입니다.
전환 효과는 앱 내에서 화면 전환, 요소의 상태 변화 및 사용자 피드백을 더욱 직관적이고 재미있게 만들어줍니다.
이번 강좌에서는 UWP에서의 전환 효과의 개념, 다양한 전환 효과의 종류, 그리고 이들을 실제로 적용하는 방법에 대해 자세히 알아보겠습니다.

전환 효과의 중요성

전환 효과는 사용자 경험(UX)의 중요한 요소로 작용합니다. 사용자에게 시각적으로 정보를 전달하고,
앱에서 어떤 변화가 일어나는지 이해하도록 돕습니다. 예를 들어, 화면 전환 시 애니메이션을 사용하면
사용자는 어떤 요소가 어디에서 어디로 이동했는지를 쉽게 추적할 수 있습니다.
이는 사용자 친화적인 인터페이스를 구현하는 필수적인 방법입니다.

UWP에서의 기본 전환 효과

UWP에서는 다양한 전환 효과를 사용할 수 있습니다. 대표적인 몇 가지 전환 효과는 다음과 같습니다:

FadeInTransition: 요소가 점점 나타나는 효과
FadeOutTransition: 요소가 점점 사라지는 효과
SlideInTransition: 요소가 특정 방향에서 슬라이드하여 나타나는 효과
SlideOutTransition: 요소가 특정 방향으로 슬라이드하여 사라지는 효과
ScaleTransform: 요소의 크기를 조정하는 효과

UWP에서 전환 효과를 적용하는 방법

이제 UWP에서 전환 효과를 어떻게 적용하는지 단계별로 살펴보겠습니다.
Visual Studio를 사용하여 새로운 UWP 프로젝트를 생성하고 아래의 예제 코드를 따라 작성해 보세요.

1. 프로젝트 생성

Visual Studio에서 새로운 UWP 앱 프로젝트를 생성합니다. 프로젝트 이름은 “TransitionDemo”로 설정합니다.

2. XAML 파일 설정

MainPage.xaml 파일을 열고, 기본 UI 요소를 추가합니다. 전환 효과를 적용할 요소를 Grid 내부에 배치합니다.

<Page
    x:Class="TransitionDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TransitionDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot">
        <Button x:Name="FadeButton" Content="Fade In" Click="FadeButton_Click"></Button>
        <Rectangle x:Name="MyRectangle" Width="200" Height="200" Fill="Blue" Opacity="0" 
                    VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Page>

3. 전환 효과 코드 작성

MainPage.xaml.cs 파일을 열고 FadeButton의 Click 이벤트 핸들러를 추가합니다.
이 핸들러에서는 전환 효과를 적용하여 블루 사각형이 서서히 나타나는 효과를 구현합니다.

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;

namespace TransitionDemo
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void FadeButton_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation fadeInAnimation = new DoubleAnimation();
            fadeInAnimation.From = 0; // 초기 투명도
            fadeInAnimation.To = 1;   // 최종 투명도
            fadeInAnimation.Duration = new Duration(TimeSpan.FromSeconds(2)); // 애니메이션 지속 시간

            Storyboard storyboard = new Storyboard();
            storyboard.Children.Add(fadeInAnimation);
            Storyboard.SetTarget(fadeInAnimation, MyRectangle); // 애니메이션 대상 설정
            Storyboard.SetTargetProperty(fadeInAnimation, "Opacity"); // 애니메이션 속성 설정

            storyboard.Begin(); // 애니메이션 시작
        }
    }
}

4. 앱 실행

이제 앱을 실행하고 “Fade In” 버튼을 클릭하면 사각형이 서서히 나타나는 것을 확인할 수 있습니다.
이렇게 UWP에서 전환 효과를 적용하는 방법을 배웠습니다. 추가로 다른 전환 효과도 간단히 구현해보겠습니다.

다양한 전환 효과 구현하기

이제 SlideInTransition과 SlideOutTransition을 추가하여 더 다양한 전환 효과를 구현해 보겠습니다.

<Button x:Name="SlideButton" Content="Slide In" Click="SlideButton_Click"></Button>
<Button x:Name="SlideOutButton" Content="Slide Out" Click="SlideOutButton_Click"></Button>

5. SlideIn Transition

private void SlideButton_Click(object sender, RoutedEventArgs e)
{
    MyRectangle.RenderTransform = new TranslateTransform { X = -200 }; // 초기 위치 설정
    DoubleAnimation slideInAnimation = new DoubleAnimation();
    slideInAnimation.From = -200; // 슬라이드 시작 위치
    slideInAnimation.To = 0; // 최종 위치
    slideInAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));

    Storyboard slideInStoryboard = new Storyboard();
    slideInStoryboard.Children.Add(slideInAnimation);
    Storyboard.SetTarget(slideInAnimation, MyRectangle);
    Storyboard.SetTargetProperty(slideInAnimation, "RenderTransform.(TranslateTransform.X)");

    MyRectangle.Opacity = 1; // 보이도록 설정
    slideInStoryboard.Begin();
}

6. SlideOut Transition

private void SlideOutButton_Click(object sender, RoutedEventArgs e)
{
    DoubleAnimation slideOutAnimation = new DoubleAnimation();
    slideOutAnimation.From = 0; // 슬라이드 시작 위치
    slideOutAnimation.To = -200; // 최종 위치
    slideOutAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));

    Storyboard slideOutStoryboard = new Storyboard();
    slideOutStoryboard.Children.Add(slideOutAnimation);
    Storyboard.SetTarget(slideOutAnimation, MyRectangle);
    Storyboard.SetTargetProperty(slideOutAnimation, "RenderTransform.(TranslateTransform.X)");

    slideOutStoryboard.Completed += (s, a) => { MyRectangle.Opacity = 0; }; // 애니메이션 완료 후 투명하게 설정
    slideOutStoryboard.Begin();
}

고급 전환 효과

기본적인 전환 효과 외에도 UWP는 다양한 고급 전환 효과를 지원합니다.
예를 들어, VisualStateManager를 이용하여 복잡한 상태 전환을 관리할 수 있습니다.
VisualStateManager는 앱의 상태에 따라 여러 개의 비주얼 상태를 정의하고 이러한 상태 간의 전환을 관리할 수 있도록 해줍니다.

VisualStateManager를 이용한 상태 전환

다음 예제에서는 VisualStateManager를 이용하여 버튼 클릭 시 다른 상태로 전환되는 기능을 구현합니다.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="PointerOver">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Opacity" To="1" Duration="0.2"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Opacity" To="0" Duration="0.2"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

위 코드는 버튼의 상태에 따라 사각형의 투명도를 변화시키는 예제입니다.
버튼의 상태가 Normal, PointerOver, Pressed인 경우 각각의 트랜지션을 VisualStateManager를 통해 정의합니다.

결론

UWP에서 전환 효과는 사용자 경험을 개선하는 중요한 요소입니다.
애플리케이션 내에서 매끄러운 시각적 전환을 통해 자연스럽게 사용자로 하여금 다양한 상태 변화와 상호작용을 인지하게 할 수 있습니다.
이번 강좌를 통해 UWP에서 전환 효과를 적용하는 기초부터 고급 개념까지 배운 내용을 바탕으로,
보다 혁신적인 애플리케이션을 개발할 수 있는 기반을 마련해보시기 바랍니다.

감사합니다! UWP 개발과 전환 효과에 대한 궁금증이 있다면 댓글로 남겨주세요.
앞으로의 개발 여정에 많은 성취가 있기를 기원합니다.