MVI와 MVVM의 차이는 도대체 무엇일까?

사진: Unsplash의Towfiqu barbhuiya

 

 

면접에서 아키텍처 패턴에 대한 이야기를 할 때, 자주 나오는 질문이 MVI와 MVVM의 차이에 대해 묻는 것입니다. 이번 게시글에서는 이 질문에 대한 저의 답변을 한번 작성해보고자 합니다.

 

지극히 개인적인 생각이므로, 잘못되거나 다른 의견이 있으시다면 댓글로 작성해주시길 바라겠습니다.

---

 

 

두 아키텍처 패턴의 차이에 대해 말하려면, 먼저 각 아키텍처 패턴에 대해 이해하고 있어야 합니다. 그래서 차이에 대해 말하기 전에 각 패턴에 대해 알아보겠습니다.

 

MVVM란?

---

다음은 위키피디아에서 말하는 MVVM의 정의와 이미지 입니다.

위키피디아: Model–View–ViewModel(MVVM)은 컴퓨터 소프트웨어에서 사용되는 아키텍처 패턴으로, 그래픽 사용자 인터페이스(GUI; 뷰)의 개발과 비즈니스 로직 또는 백엔드 로직(모델)의 개발을 분리할 수 있도록 도와준다. 이 패턴을 사용하면 뷰가 특정한 모델 플랫폼에 의존하지 않게 된다.

 

 

 

Model

모델은 UI와 관련이 없는 앱이 다루는 실제 데이터와 그 데이터의 규칙을 다룹니다. 쉽게 말하면, 모델은 "앱이 다루는 진짜 내용물"을 표현한다고 보면 됩니다.

 

예를 들어,

•  DTO (Data Transfer Object) -> 화면이나 서버로 데이터를 주고 받을 때 쓰는 단순한 데이터 클래스
• Entitiy -> DB 테이블과 연결된 객체

이런 것들이 모델 객체의 예입니다.

 

그리고 모델 클래스는 보통 데이터 액세스 및 캐싱을 캡슐화하는 서비스 또는 리포지토리와 함께 사용됩니다.

 

 

ViewModel

MVVM에서 뷰모델은 값 변환기 역할을 합니다. 즉, 모델의 데이터 객체를 노출하여 뷰가 쉽게 관리하고 표현할 수 있도록 만드는 책임을 가집니다. 

이런 점에서 뷰모델은 뷰 보다는 모델에 더 가깝고, 뷰의 표시 로직 대부분을 담당합니다.

 

MVVM의 뷰모델에는 `Binder(바인더)`라는 개념이 있습니다. 이는 뷰와 뷰모델 사이의 "데이터, 명령 연결"을 자동화해 주는 매커니즘입니다. 바인더가 있으므로 뷰와 뷰모델간의 값 전달, 이벤트 -> 명령 변환, UI 업데이트 동기화 같은 반복적인 보일러 플레이트 코드를 직접 쓰지 않아도 됩니다.

 

 

View

뷰는 사용자가 화면에서 보게 되는 구조, 레이아웃, 시각적 표현을 의미합니다. 뷰는 모델의 표현을 표시하고 사용자가의 상호작용을 수신합니다.

 

이러한 상호작용은 바인딩 메커니즘을 통해 뷰모델로 전달됩니다.

 

 

 

MVI란?

---

MVI (Model-View-Intent)는 리액티브 UI 아키텍처 패턴으로 하나의 불변 상태와 단방향 흐름(UDF)를 강제합니다. 

 

이런 구조에서 Intent가 시스템에 입력되고, View는 그에 따라 상태를 업데이트 합니다.

 

• Model: 앱의 상태를 보관합니다..
• View: 상태를 사용자에게 표시합니다.
• Intent: 사용자 상호작용을 스트림 형태로 표현합니다.

 

 

아래의 표현식은 MVI의 구성요소들이 어떻게 얽혀 있고, 서로에게 의존하는지 이해하는데 매우 유용합니다.

 

 

즉, Intent가 Model로 전달되어 새로운 상태를 생성하고, 그 상태가 View에 제공되어 화면에 렌더링되는 과정을 표현합니다.

 

 

 

그래서 MVVM과 MVI의 차이는?

---

제가 생각하는 MVVM과 MVI의 차이는 크게 2가지가 있습니다.

 

 

1. 적용 범위의 차이

MVVM과 MVI의 차이를 이해하는데 가장 큰 문제점은 이 두 패턴이 동일한 범위에 적용된다고 생각한다는 것입니다.

 

MVVM은 각각의 레이어를 상세하게 설명하고 있지는 않지만, Data에서부터 UI 전체 계층까지의 앱 전체의 아키텍처를 설계합니다. 반면 MVI는 UI 상태 관리와 사용자 이벤트에 집중하는 UI 계층에 특화된 패턴입니다.

 

그렇기 때문에 MVVM의 계층 관점안에 MVI가 적용되는 계층을 설명할 수도 있습니다.

 

 

2. Model의 차이

위의 그림에서 MVVM과 MVI의 모델이 서로 다른 계층에 위치한다는 것을 이제 아셨을 겁니다. 

 

다시 한번 각각의 Model의 설명을 가져와 보면 이 둘의 차이를 확연하게 알 수 있습니다.

• MVVM Model: UI와 관련이 없는 앱이 다루는 실제 데이터와 그 규칙을 다룹니다.
• MVI Model: UI의 상태를 보관합니다.

 

즉, MVVM와 MVI의 모델은 서로 완전히 다른 개념입니다. 

 

 

 

마무리

---

MVVM과 MVI는 이름 때문에 많은 곳에서 함께 비교되지만 사실상 View 말고는 완전히 다른 개념입니다. 적용할 수 있는 범위도 다르고, 심지어 MVVM을 사용하면서 MVI을 사용할 수도 있다고 생각합니다.

 

누군가 MVVM과 MVI의 차이에 대해 물어봤을 때, 명확하게 대답하기 어려웠던 이유가 바로 이 둘의 개념 차이가 너무나도 많이 났기 때문이라 생각합니다. (마치 Android와 iOS의 차이가 뭐냐 하는 것 처럼...)

 

이 게시글은 MVVM과 MVI의 차이에 대해 생각한 저의 생각을 설명한 글이기 때문에 잘못 생각한 부분이 있을 수 있습니다. 생각이 다르시거나 잘못된 부분이 있다면 댓글로 지적해주시면 감사하겠습니다.

 

 

 

Reference

Model–view–viewmodel - Wikipedia

Android 프로젝트에 MVI 도입하기 | 찰스의 안드로이드