최근 몇 년 동안 유니버설 Windows 플랫폼(UWP)은 다양한 디바이스에서 일관된 사용자 경험을 제공하는 데 중요한 역할을 해왔습니다. UWP 개발의 핵심 요소 중 하나는 애플리케이션의 데이터 모델을 만드는 것입니다. 데이터 모델은 애플리케이션에서 데이터를 구조화하고 관리하는 방법을 정의하며, MVVM(Model-View-ViewModel) 패턴을 적용하여 데이터와 UI 간의 구분을 명확히 합니다. 이번 글에서는 UWP 애플리케이션에서 데이터 모델을 구성하는 방법에 대해 자세히 알아보겠습니다.
1. UWP와 MVVM 패턴 이해하기
UWP는 다양한 Windows 디바이스에서 실행될 수 있는 앱을 개발하기 위한 플랫폼입니다. MS의 MVVM 패턴은 관리를 쉽게 하고 코드의 재사용성을 높이는 데 유용합니다. MVVM 패턴은 Model, View, ViewModel 세 가지 요소로 구성됩니다:
- Model: 애플리케이션의 데이터 구조를 정의합니다. 데이터베이스와의 상호작용 및 데이터의 제약을 관리합니다.
- View: 사용자 인터페이스(UI)를 구성하는 요소로, 사용자와 상호작용합니다. UWP에서는 XAML을 사용하여 UI를 정의합니다.
- ViewModel: Model과 View 간의 데이터 바인딩을 관리합니다. ViewModel은 UI와 데이터를 연결하는 역할을 하며, UI의 상태를 관리합니다.
2. 데이터 모델 설계하기
데이터 모델을 설계할 때는 필요한 데이터의 구조와 이를 코드로 어떻게 구현할지 고민해야 합니다. 예를 들어, 아래와 같은 간단한 Todo 리스트 애플리케이션을 만들 것이라고 가정해봅시다. Todo 항목은 제목과 완료 여부를 가져야 합니다.
2.1. Todo 모델 클래스 정의
using System;
using System.ComponentModel;
namespace TodoApp.Models
{
public class TodoItem : INotifyPropertyChanged
{
private string title;
private bool isCompleted;
public string Title
{
get { return title; }
set
{
if (title != value)
{
title = value;
OnPropertyChanged("Title");
}
}
}
public bool IsCompleted
{
get { return isCompleted; }
set
{
if (isCompleted != value)
{
isCompleted = value;
OnPropertyChanged("IsCompleted");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}위 코드에서는 TodoItem 클래스를 정의했습니다. 이 클래스는 INotifyPropertyChanged 인터페이스를 구현하여 Property 변경 시 UI에 통지합니다. 이는 MVVM 패턴에서 ViewModel과 UI 간의 데이터 바인딩을 가능하게 합니다.
3. TodoListViewModel 클래스 구현
이제 ViewModel을 구현하여 TodoItem 모델을 관리할 차례입니다.
3.1. TodoListViewModel 클래스 정의
using System.Collections.ObjectModel;
namespace TodoApp.ViewModels
{
public class TodoListViewModel : INotifyPropertyChanged
{
private ObservableCollection<TodoItem> todoItems;
private TodoItem selectedTodo;
public ObservableCollection<TodoItem> TodoItems
{
get { return todoItems; }
set
{
if (todoItems != value)
{
todoItems = value;
OnPropertyChanged("TodoItems");
}
}
}
public TodoItem SelectedTodo
{
get { return selectedTodo; }
set
{
if (selectedTodo != value)
{
selectedTodo = value;
OnPropertyChanged("SelectedTodo");
}
}
}
public TodoListViewModel()
{
TodoItems = new ObservableCollection<TodoItem>();
}
public void AddTodo(string title)
{
TodoItems.Add(new TodoItem { Title = title, IsCompleted = false });
}
public void RemoveTodo(TodoItem todo)
{
if (TodoItems.Contains(todo))
{
TodoItems.Remove(todo);
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}위 코드에서 TodoListViewModel은 ObservableCollection을 사용하여 Todo 아이템 목록을 관리합니다. 또한, Todo 아이템의 추가 및 제거 메서드를 정의하고 있습니다.
4. XAML을 통한 UI 구축
이제 만든 모델과 ViewModel을 바탕으로 사용자 인터페이스를 구현해 보겠습니다. UWP에서는 XAML을 사용하여 UI를 구축할 수 있습니다.
4.1. MainPage.xaml 설정
<Page
x:Class="TodoApp.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TodoApp.ViewModels"
DataContext="{Binding TodoListViewModel, Source={StaticResource Locator}}">
<StackPanel Margin="20">
<TextBox x:Name="TodoInput" Placeholder="Enter a new todo item" />
<Button Content="Add Todo" Click="AddTodo_Click" />
<ListView ItemsSource="{Binding TodoItems}" SelectedItem="{Binding SelectedTodo}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsCompleted}" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
위 XAML 코드에서는 텍스트 박스와 버튼을 통해 Todo 항목을 추가하고, ListView를 통해 리스트를 표시합니다. 아이템마다 체크박스를 두어 완료 상태를 표시합니다.
5. 이벤트 처리 및 기능 구현
이제 UI와 ViewModel을 연결하여 사용자가 Todo 항목을 추가할 수 있도록 버튼 클릭 이벤트를 처리하겠습니다.
5.1. MainPage.xaml.cs 이벤트 처리기 구현
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace TodoApp.Views
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void AddTodo_Click(object sender, RoutedEventArgs e)
{
var viewModel = (TodoListViewModel)this.DataContext;
string title = TodoInput.Text;
if (!string.IsNullOrWhiteSpace(title))
{
viewModel.AddTodo(title);
TodoInput.Text = string.Empty; // 입력 필드 초기화
}
}
}
}위 C# 코드에서는 버튼 클릭 시 Todo 항목을 추가하는 로직을 구현했습니다. 입력란에 제목을 입력하고 버튼을 클릭하면 새로운 Todo 아이템이 ListView에 추가됩니다.
6. 정리 및 최적화
UWP 애플리케이션에서 모델을 만드는 과정은 데이터를 구조화하고 관리하는 데 필수적입니다. MVVM 패턴을 통해 데이터와 UI 간의 분리를 유지하면서도 효율적으로 상호작용할 수 있습니다. 이번 예제를 통해 간단한 Todo 리스트 애플리케이션을 구현해 보았고, 이를 통해 UWP 애플리케이션의 구조와 동작을 더 깊이 이해할 수 있었습니다.
앞으로 더욱 복잡한 애플리케이션을 개발하게 될 것이며, 모델과 ViewModel을 발전시키고 최적화하는 과정이 필요할 것입니다. 가장 중요한 것은 사용자 경험을 고려하여 직관적이고 사용하기 쉬운 UI를 만드는 것입니다.
7. 추가 자료
더 깊이 있는 내용을 원하시면 아래의 링크들을 참조하시기 바랍니다:
이 글을 통해 UWP 개발에 대한 기초를 확립하고, 데이터 모델을 어떻게 설계하고 구현할 수 있는지를 확실히 이해하셨기를 바랍니다.