MVVM 디자인 패턴(feat. MVC)

이지수·2023년 5월 28일

디자인패턴

목록 보기

1/1

휴일 저녁에 우연히 본 호주 개발자 구인 영상에 흥미로운 것을 보았다. 해당 회사에서는 기술 과제 주제로 MVVM 디자인 패턴 활용을 요구하고 있었다.

MVVM은 난생 처음 들어보며 MVC랑 뭐가 다른지도 모르겠다 는 무식한 생각이나 하고 있는데, 5년차라면 MVVM 패턴을 모를리가 없다는 말에 괜히 도전의식이 생겼다.

언젠가 디자인 패턴에 대해 질문을 받을지도 모르는 미래의 나를 위해 간단히 정리해보자.

Model, View, View-Model 의 약자다.

익히 알고있는 MVC와 비교해서 이해해보자.

MVC는 View가 Controller를 통해 메세지를 전달하며 Model과 소통할 수 있다.
반면 MVVM은 View-Model가 View, Model끼리 직접 소통할 수 있는 디자인 패턴이다.

Model
MVC의 Model과 비슷하다. 데이터베이스와 소통하며 데이터 CRUD 작업을 한다.
View
역시 MVC의 View와 비슷하다. 사용자에게 데이터를 노출시키는 부분이다. 다만 MVC에서는 View가 Controller와 상호작용 해야만 데이터를 불러오고, 업데이트할 수 있는데 MVVM은 View가 직접 데이터에 접근한다.
View-Model
MVC와의 결정적인 차이점인데, View-Model은 Controller와 달리 View가 Model에 직접 접근할 수 있는 매개체 역할을 한다.

예를 들어, 유저가 View에 데이터 조회를 요청한다고 해보자. MVC에서는 유저가 하이퍼링크를 클릭해 Controller에서 해당 데이터를 조회해 View로 넘겨준다. MVVM은 하이퍼링크 없이 View가 바로 Model에서 데이터를 가져와 보여주는 것이다.

이 View-Model는 View와 1:N 관계를 갖는다. View에 따라 데이터를 선택적으로 보여줄 수도 있다.

MVC는 Controller가 진입점(entry point)가 되는데, MVVM은 View가 그 진입점 역할을 한다.

테스트가 쉽다
특히 유닛테스트에 강하다.
재사용이 쉽다
각 컴포넌트는 서로 느슨하게 결합되어서 재사용, 이동 등이 쉽다. 특정 컴포넌트나 데이터를 General하게 사용하기 좋은 구조다.
사용자 인터페이스가 비즈니스 로직과 다르게 동작한다
무슨 소린고 하니, MVC는 사용자가 하이퍼링크를 클릭해야 작업을 수행하지만 MVVM에서는 사용자가 액션을 취하지 않아도 비즈니스 로직을 수행할 수 있다.
이 때문에 FE와 BE의 완벽한 분리를 원하는 경우에 사용하기도 한다. (백엔드가 죽어도 어떻게든 프론트는 돌아간다)
장기적 성능 향상
MVVM에서는 프론트가 한번에 모든 asset(HTML/CSS/images...)를 가져온다. HTTP 트래픽은 오직 데이터 작업 뿐이다

구축에 오랜 시간이 걸린다
이 부분은 MVP(Model, View, Performer)와 대치되는 차이점이다. FE와 BE가 비즈니스 로직을 중복으로 작성해야 할 가능성이 있다.
복잡도가 높아질 수 있다
느슨한 결합이 장점이자 단점이 될 수도 있는 부분이다. 하나의 간단한 UI를 위해 아주 긴 코드를 요할수도 있는 것이다. 컴포넌트가 서로 효율적으로 상호작용하려면 많은 중간 매개체나 이벤트 시스템이 필요할 수도 있다. 이로 인해 복잡성이 증가하고 오히려 테스트나 디버깅이 어려워질 수도 있다.
초기 페이지 로딩 시간이 길어진다
위에 '장기적 성능 향상'의 사이드 이펙트다. 한번에 모든 asset을 가져오면 초기 로딩 시간이 길어질 수 밖에 없다

MVVM은 주로 몇년에 걸쳐 구축되는 대형 프로젝트에 적합하다. 특히, 모바일 어플리케이션 서비스를 개발할 경우 많이 고려된다.
대표적으로 Window 데스크탑 어플리케이션 개발에 사용되는 WPF의 주요 아키텍처 패턴이다.