MVC vs MVVM 패턴 비교: 어떤 아키텍처를 선택해야 할까?

소프트웨어 개발에서 아키텍처 패턴을 선택하는 것은 매우 중요하며, 각각의 패턴은 특정한 요구 사항과 상황에 맞게 설계되었습니다.
MVC (Model-View-Controller)와 MVVM (Model-View-ViewModel)은 둘 다 UI 개발에 널리 사용되는 패턴입니다.
이번 글에서는 MVC 와 MVVM 패턴의 특징과 장단점을 비교하여 어떤 아키텍처를 선택해야 할지 알아보겠습니다.

추가로 개발 프레임워크 관련 글은 아래 참조 바랍니다.

1 MVC vs MVVM 패턴 비교: 어떤 아키텍처를 선택해야 할까?

MVC vs MVVM 패턴 비교: 어떤 아키텍처를 선택해야 할까?

MVC (Model-View-Controller)

특징

Model: 애플리케이션의 데이터와 비즈니스 로직을 관리합니다.
View: 사용자 인터페이스 요소를 담당하며, 사용자에게 정보를 표시합니다.
Controller: 사용자 입력을 처리하고, 모델과 뷰를 업데이트하는 역할을 합니다.

장점

분리된 관심사: 모델, 뷰, 컨트롤러가 각각의 역할에 집중할 수 있어 코드의 유지보수가 쉽습니다.
테스트 용이성: 각 컴포넌트가 독립적이므로 단위 테스트가 용이합니다.

단점

복잡성 증가: 대규모 애플리케이션에서는 컨트롤러가 복잡해질 수 있습니다.
데이터 바인딩 부족: 기본적으로 양방향 데이터 바인딩을 지원하지 않습니다.

MVC 예시: 레스토랑 주문 시스템

예시를 추가하면 이해하기 훨씬 쉬울 거예요! 레스토랑 주문 시스템 예시를 통해 설명해보겠습니다.

Model: 메뉴와 주문 데이터를 관리하는 부분입니다. 메뉴에 어떤 음식이 있는지, 가격은 얼마인지 등의 정보를 가지고 있습니다..
View: 레스토랑의 디지털 메뉴판이라고 생각하면 됩니다. 손님이 볼 수 있는 화면입니다.
Controller: 손님이 메뉴에서 음식을 선택하면 그 정보를 받아서 주문을 처리하고, 최종적으로 계산서를 보여주는 역할을 하게 됩니다.

MVC 동작방식

손님이 디지털 메뉴판(View)에서 커피를 선택하면, 그 정보가 컨트롤러(Controller)로 전달됩니다.
컨트롤러는 이 정보를 모델(Model)에 보내서 주문을 업데이트하고, 최종적으로 결제 금액을 뷰(View)에 보여줍니다.

MVVM (Model-View-ViewModel)

특징

Model: 데이터와 비즈니스 로직을 관리합니다.
View: 사용자 인터페이스를 구성하며, ViewModel과 데이터를 바인딩합니다.
ViewModel: 뷰와 모델 사이의 데이터 바인딩을 관리하고, 뷰에 필요한 데이터를 준비합니다.

장점

양방향 데이터 바인딩: 뷰와 ViewModel 간의 자동 데이터 동기화가 가능하여 코드가 간결해집니다.
테스트 용이성: ViewModel은 UI 독립적이므로 테스트가 용이합니다.
유연성: 복잡한 UI 로직을 ViewModel에서 처리할 수 있어 뷰가 더 깔끔해집니다.

단점

초기 학습 곡선: MVVM 패턴을 이해하고 구현하는 데 시간이 걸릴 수 있습니다.
복잡성 증가: 작은 프로젝트에서는 오히려 불필요하게 복잡해질 수 있습니다.

MVVM 예시: 스마트홈 조명 제어 앱

스마트홈 조명 제어 앱 예시를 통해 설명해보겠습니다.

Model: 조명의 상태(켜짐/꺼짐), 밝기 등과 관련된 데이터를 관리합니다.
View: 스마트폰 화면에 보이는 조명 제어 인터페이스야. 여기서 조명을 켜고 끄거나 밝기를 조절할 수 있습니다.
ViewModel: 사용자가 조명 밝기를 변경하면, 그 값을 모델에 전달하고 뷰에 반영되도록 해주는 역할을 합니다. 데이터 바인딩 덕분에 사용자가 밝기를 조절하면 자동으로 화면에 반영이 됩니다.

MVVM 동작방식

사용자가 스마트폰 앱(View)에서 조명 밝기를 변경하면, ViewModel이 그 값을 받아서 모델(Model)에 업데이트 합니다.
그와 동시에 뷰(View)에 변경된 값을 자동으로 반영해 주게 됩니다.

MVC vs MVVM 패턴 비교

MVC 와 MVVM 패턴 모두 장단점이 있지만, 개발자는 두 아키텍쳐의 차이점을 이해하는 것이 중요합니다. 이해하기 쉽도록 테이블로 정리해봤습니다.

비교	MVC	MVVM
역사	MVC는 전통적인 프레임워크입니다.	MVVM은 비교적 새로운 프레임워크입니다.
진입점	컨트롤러가 애플리케이션의 진입점입니다.	뷰가 애플리케이션의 진입점입니다.
참조	뷰는 컨트롤러에 대한 참조를 유지하지 않습니다.	뷰는 뷰 모델에 대한 참조를 유지합니다.
테스트	MVC의 모든 클래스와 객체는 독립적으로 기능하고 테스트됩니다.	MVVM은 비즈니스 로직을 사용자 인터페이스로부터 분리합니다.
난이도	모델을 읽고, 변경하고, 재사용하고 테스트하기 어렵습니다.	복잡한 데이터 바인딩으로 인해 디버깅 과정이 복잡합니다.
분리	비즈니스 로직과 프레젠테이션 레이어가 분리되어 있습니다.	프레임워크가 비즈니스 로직을 사용자 인터페이스로부터 분리합니다.
관계	뷰와 컨트롤러 간의 일대다 관계입니다.	뷰 모델과 뷰 간의 일대다 관계입니다.
사용 사례	거래적이고 분리된 상황에서 잘 작동합니다.	사용자 정의되고 바인딩된 상황에서 잘 작동합니다.
이상적 사용처	대규모 개발자 및 디자이너 그룹을 지원하는 웹 애플리케이션에 적합합니다.	브라우저 실행 기술을 기반으로 한 MVVM 이벤트 중심 아키텍처에 적합합니다.