MVVM 패턴이란 무엇인가
MVVM 패턴이란 무엇인가?
Model-View-ViewModel의 약자로 소프트웨어 아키텍처 ‘디자인 패턴’ 중 하나입니다. 알고리즘 개념이 아닌 코드를 구성하는 말그대로 디자인 패턴입니다.
특히 WPF나 Xamarin 같은 플랫폼에 이 MVVM 패턴을 적용할 수 있도록 구성이 갖춰져 있습니다. 아래는 간단하게 각 구성의 설명입니다.
1. 모델(Model)
데이터와 비즈니스 로직을 나타냅니다. 데이터의 상태를 저장하고 이를 관리하는 역할을 합니다. 주로 데이터베이스, 웹 서비스, 파일 등과 같은 외부 데이터 공급원과 상호 작용합니다.
2. 뷰(View)
사용자에게 정보를 표시하는 역할을 합니다. 화면의 레이아웃 및 디자인을 담당하며, 사용자가 상호 작용하는 인터페이스를 제공합니다. 사용자 입력을 ViewModel로 전달하고, ViewModel로부터 받은 데이터를 표시합니다.
3. 뷰모델(ViewModel)
사용자 인터페이스의 비즈니스 로직 및 표현을 담당합니다. View와 Model 사이의 중간 역할을 수행하여, 두 컴포넌트 간의 직접적인 의존성을 피합니다. View에 표시할 데이터를 관리하고, 사용자 입력을 처리하여 필요한 Model의 변경을 조정합니다. 데이터 바인딩을 통해 View와 양방향으로 통신하면서 데이터의 동기화를 유지합니다.
MVVM 패턴의 목표
사실 위의 설명만으로는 이 디자인 패턴을 가져갈 명분이 떠오르지 않을 수 있는데요.
MVVM 패턴을 이용하는 이유의 가장 큰 핵심은 ‘디자인과 로직(Logic)의 분리’입니다. 다르게 표현하자면, 뷰어 뒷단, MainWindow.xaml 뒤의 MainWindow.xaml.cs에 코드가 아무것도 없는 것입니다.
제가 C#이 메인이 아니다 보니 윈폼(Winform)의 GUI를 조금 경험해본게 다 입니다. 그래서 뷰어의 뒤로 이벤트와 여러 코드가 뒤섞인게 디폴트로 알고 있는데, 이 뷰어 뒷단의 로직을 없어야 한다는 이론은 제법 신선한 충격이었습니다.
물론 이에 대한 갑론을박이 있습니다. 굳이 MVVM 패턴을 쓸 필요가 있는가, MVVM 패턴을 일부 채택하되 굳이 xaml 뒤의 코드를 모두 없앨 필요가 있는가 등이 대표적인 것 같습니다.
앞의 의견도 이해가 가는게 웹 개발과 C#과 관련한 분야/직군에서 디자이너(프론트엔드)와 로직 개발자(백엔드)의 구분이 명확히 구분될 상황이 잘 없지 않나 싶습니다.
MVVM 패턴을 적용해서 프로퍼티들과 이벤트들을 하나씩 분리해보면 배보다 배꼽이 커지는 듯한 코드가 다른 곳에서 비대해지는 걸 경험해봅니다. 아직 저도 구조를 조금씩 이해하고 적용하는 단계라 모르는 부분이 많기도 할테니 말인데요.
거기에 다른 동료들도 새로운 구조 이해를 요구해야 하는지라 이를 다 지켜가면서 MVVM 패턴을 가져간다는게 시간과 상황에 따라 타협해야 하는 경우가 생기는 것 같습니다.
그러니 위의 목표를 상기하고 상황에 따라 동료들과 유용하게 협업할 수 있는 중간 지점을 찾아야할 것으로 보입니다.
스파게티 코드에서 벗어난 코드 분리
저는 개인적으로 MVVM 패턴을 활용하는 쪽에 손을 듭니다. MVVM 패턴으로 적용하려고 코드를 분리하고, UI 관련 프로퍼티와 이벤트는 또 분리하고, 이렇게 분리가 선행되면 필요한 상황에 맞게 묶는게 더 유연하게 접근될 수 있다고 볼 수 있어서 활용하기 나름인 것 같습니다.
거기다 xaml의 코드도 잘 분리되면, xaml 코드도 긁어서 그대로 활용할 수도 있는지라 구조 이해와 활용도를 살펴봐야할 듯 합니다.
저도 아직 공부 중이라 한참 부족하지만 몇 가지 추천 사이트를 알려드리면서 마무리 해보겠습니다.
공부에 도움되는 사이트 추천
- 네이버 블로그
👉에로로님의 네이버 블로그(개인적으로 에로로님의 WPF 관련 글 정독 추천드립니다)
👉[골드러쉬님의 네이버 블로그(
- Github 자료
