UWP 개발, UWP 프로그램 예제

UWP(Universal Windows Platform)는 다양한 Windows 10 장치에서 실행될 수 있는 애플리케이션을 개발하는 플랫폼입니다. 이를 통해 개발자는 PC, 태블릿, Xbox, IoT 장치 등에서 실행되는 앱을 작성할 수 있습니다. UWP는 Microsoft의 새로운 앱 모델로, 모던한 사용자 인터페이스(UI)와 유연한 애플리케이션 구조를 제공합니다.

UWP 개발 환경 설정

UWP 애플리케이션을 개발하기 위해서는 다음의 환경이 필요합니다:

  • Windows 10 운영체제
  • Visual Studio 2019 또는 더 최신 버전
  • Windows SDK

Visual Studio 설치 후, ‘UWP 개발’ 워크로드를 선택하여 설치하면 됩니다.

UWP 애플리케이션 구조

UWP 애플리케이션은 기본적으로 다음과 같은 파일들로 구성됩니다:

  • App.xaml: 애플리케이션의 리소스와 시작 페이지를 정의합니다.
  • MainPage.xaml: 사용자 인터페이스(UI)가 정의되는 페이지입니다.
  • Package.appxmanifest: 애플리케이션의 메타데이터와 권한을 설정하는 파일입니다.

첫 번째 UWP 애플리케이션 만들기

아래 단계에 따라 간단한 UWP 애플리케이션을 만들어 보겠습니다.

  1. Visual Studio를 실행하고, ‘새 프로젝트 만들기’를 선택합니다.
  2. UWP 카테고리에서 ‘빈 응용 프로그램’을 선택한 후, 프로젝트 이름을 입력하고 ‘만들기’를 클릭합니다.

코드 구조

프로젝트가 생성되면, App.xaml과 MainPage.xaml 파일이 생성됩니다. 다음은 MainPage.xaml의 예제입니다:


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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="textBlock" Text="Hello, UWP!" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button Content="클릭하세요" Click="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,50,0,0"/>
    </Grid>
</Page>

위의 코드에서 우리는 간단한 텍스트와 버튼을 추가했습니다. 이제 MainPage.xaml.cs 파일에서 버튼 클릭 이벤트를 처리해 보겠습니다.


using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

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

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            textBlock.Text = "버튼이 클릭되었습니다!";
        }
    }
}

UWP에서 데이터 바인딩

UWP 애플리케이션에서는 MVVM(Model-View-ViewModel) 패턴을 통해 데이터 바인딩을 구현할 수 있습니다. 데이터 바인딩은 UI 요소와 데이터 모델 간의 연결을 자동으로 유지해 줍니다. 아래의 예제에서는 XAML과 C#을 사용한 데이터 바인딩을 소개합니다.

모델 생성


public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

ViewModel 생성


using System.ComponentModel;

public class PersonViewModel : INotifyPropertyChanged
{
    private Person person;

    public PersonViewModel()
    {
        person = new Person() { Name = "홍길동", Age = 30 };
    }

    public string Name
    {
        get => person.Name;
        set
        {
            person.Name = value;
            OnPropertyChanged(nameof(Name));
        }
    }

    public int Age
    {
        get => person.Age;
        set
        {
            person.Age = value;
            OnPropertyChanged(nameof(Age));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

XAML에 바인딩 적용


<Page
    x:Class="YourAppNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourAppNamespace">

    <Grid>
        <TextBlock Text="{Binding Name}" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <TextBox Text="{Binding Age, Mode=TwoWay}" Width="200" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
    </Grid>
</Page>

위의 코드는 Name 속성을 직접 텍스트 블록에 바인딩하고, Age 속성을 텍스트 박스에 양방향으로 바인딩합니다. ViewModel을 페이지의 데이터 컨텍스트로 설정하면, UI에서 데이터가 자동으로 업데이트됩니다.

UWP 앱의 배포

UWP 애플리케이션을 배포하는 방법은 여러 가지가 있습니다:

  • Windows 스토어: 앱을 Microsoft 스토어에 제출하여 더 많은 사용자가 사용하도록 배포할 수 있습니다.
  • 직접 배포: .appx 패키지를 생성하여 사용자에게 직접 배포할 수 있습니다.
  • 로컬 테스트: 개발 환경에서 앱을 실행할 수 있습니다.

결론

UWP 개발은 여러 Windows 장치에서 실행할 수 있는 유연하고 직관적인 애플리케이션을 만드는 좋은 방법입니다. 본 강좌를 통해 UWP 개발의 기초를 배우고, 간단한 애플리케이션을 만들어 보셨길 바랍니다. 더 깊이 있는 내용은 공식 문서나 다양한 커뮤니티를 통해 학습하실 수 있습니다.

참고 자료