WPF와 MVVM의 개념정리

4월 29, 2026

1) WPF란?

WPF(Windows Presentation Foundation) 는
윈도우 데스크톱 애플리케이션을 만들기 위한 .NET 기반 UI 프레임워크입니다.

핵심 특징

  • XAML 기반 UI 설계
  • 버튼, 텍스트박스, 리스트 등 풍부한 UI 구성
  • 데이터 바인딩 지원
  • 스타일, 템플릿, 애니메이션 지원
  • Windows 데스크톱 앱 개발에 적합

즉, 화면을 만드는 기술이라고 보면 됩니다.


2) MVVM이란?

MVVM(Model-View-ViewModel) 은
WPF에서 많이 사용하는 화면 설계 아키텍처 패턴입니다.

목적은:

  • UI와 로직을 분리
  • 유지보수 쉽게
  • 테스트 쉽게
  • 코드 복잡도 감소

즉, WPF 앱을 구조적으로 잘 만들기 위한 설계 방식입니다.

3) MVVM의 구성

1. Model

데이터와 비즈니스 로직 담당

예:

  • 사용자 정보
  • 상품 정보
  • DB 조회/저장
  • 계산 로직
public class User
{
    public string Name { get; set; }
    public int Age { get; set; }
}

2. View

사용자가 보는 화면(XAML)

역할:

  • 버튼, 텍스트박스, 리스트 표시
  • ViewModel에 바인딩
<Window x:Class="Demo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Margin="20">
        <TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" />
        <Button Content="저장" Command="{Binding SaveCommand}" Margin="0,10,0,0"/>
        <TextBlock Text="{Binding Message}" />
    </StackPanel>
</Window>

3. ViewModel

View와 Model 사이를 연결

역할:

  • 화면에 보여줄 데이터 제공
  • 버튼 클릭 같은 동작 처리
  • 바인딩 대상 속성 제공
  • Command 제공
using System.ComponentModel;
using System.Windows.Input;

public class MainViewModel : INotifyPropertyChanged
{
    private string _userName;
    private string _message;

    public string UserName
    {
        get => _userName;
        set
        {
            _userName = value;
            OnPropertyChanged(nameof(UserName));
        }
    }

    public string Message
    {
        get => _message;
        set
        {
            _message = value;
            OnPropertyChanged(nameof(Message));
        }
    }

    public ICommand SaveCommand { get; }

    public MainViewModel()
    {
        SaveCommand = new RelayCommand(Save);
    }

    private void Save()
    {
        Message = $"{UserName} 저장 완료";
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

4) WPF에서 MVVM을 쓰는 이유

WPF는 데이터 바인딩, Command, DataTemplate 같은 기능이 강해서 MVVM과 매우 잘 맞습니다.

장점

  • 코드비하인드 최소화
  • UI와 로직 분리
  • 재사용성 증가
  • 테스트 용이
  • 협업 쉬움
    • 디자이너: View 작업
    • 개발자: ViewModel/Model 작업

5) 동작 흐름

사용자가 화면에서 버튼을 누르면:

  1. View 에서 버튼 클릭
  2. 버튼이 바인딩된 Command 실행
  3. ViewModel 이 로직 수행
  4. 필요하면 Model 호출
  5. 결과가 ViewModel 속성에 반영
  6. View 가 자동 갱신

즉: View ↔ ViewModel ↔ Model

단, 보통 ViewModel이 Model을 알고,
View는 ViewModel에 바인딩만 합니다.

6) WPF + MVVM에서 중요한 개념

데이터 바인딩

UI와 ViewModel 속성을 연결

<TextBox Text="{Binding UserName}" />

INotifyPropertyChanged

속성 값 변경 시 화면 자동 갱신

public event PropertyChangedEventHandler PropertyChanged;

ICommand

버튼 클릭 같은 사용자 동작 처리

<Button Content="저장" Command="{Binding SaveCommand}" />

ObservableCollection

리스트 UI 자동 갱신용 컬렉션

public ObservableCollection<string> Items { get; set; }

7) 코드비하인드와 차이

MVVM을 안 쓰면 버튼 클릭 로직을 MainWindow.xaml.cs 에 많이 작성합니다.

예:

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("저장");
}

이 방식은 작은 프로젝트는 빠르지만,
규모가 커지면:

  • 화면 코드와 로직이 섞임
  • 테스트 어려움
  • 유지보수 어려움

MVVM은 이를 분리합니다.

8) 실무에서 자주 쓰는 구성 예시

보통 폴더를 이렇게 나눕니다:

/Models
/ViewModels
/Views
/Commands
/Services

예:

  • Models: User, Product
  • ViewModels: MainViewModel, LoginViewModel
  • Views: MainWindow, LoginView
  • Commands: RelayCommand
  • Services: DB, API, 파일 처리

9) 한 줄 요약

  • WPF = Windows 데스크톱 UI를 만드는 프레임워크
  • MVVM = WPF 앱을 깔끔하게 구조화하는 설계 패턴

즉, WPF는 도구, MVVM은 설계 방식입니다.

10) 처음 배울 때 핵심만 기억하면

처음엔 아래 4개만 이해하면 됩니다:

  1. View = 화면
  2. ViewModel = 화면용 로직/상태
  3. Binding = 화면과 데이터 연결
  4. Command = 버튼 동작 연결

댓글 쓰기 · 수정

0 댓글