MVC와 MVP, MVVM와 같은 아키텍처 패턴은 코드의 분리와 유지보수성, 협업 효율을 높이는 데 목표를 두고 있기에 복잡한 UI 설계에서 자주 사용된다. 이들은 모두 UI와 비즈니스 로직, 데이터 간의 역할을 명확히 구분하여 Separation of Concern(관심사 분리)를 실현하고 있다.
관심사 분리
시스템의 서로 다른 요소들이 각각 다른 책임을 갖도록 코드를 분리하는 것이다.
시스템을 더 모듈화하여 각 부분을 독립적으로 수정 및 확장할 수 있게 한다. (SOLID원칙)
각 패턴의 개념과 함께, 게임에서는 어떤 방식으로 각 패턴들을 구현할 수 있을지 공부해보자.
MVC (Model View Controller)
Model, View, Controller라는 세 레이어를 가지며 시스템의 논리적인 부분을 데이터와 프레젠테이션에서 분리한다. 각 레이어의 기능을 제한하여 단일책임원칙을 보장한다.
Model : 데이터와 관련된 로직을 처리한다. 데이터베이스나 네트워크에서 받아온 데이터, 게임의 상태 등을 포함한다.
View : 데이터를 사용자에게 시각적으로 표시하는 인터페이스(UI)이다. 유니티의 경우 버튼이나 텍스트, 이미지 등이 View에 해당한다.
Controller : 사용자의 입력을 처리하며 Model을 업데이트하거나 View를 변경하는 일을 담당한다.
유저가 전장에 배치할 캐릭터 카드를 3장 선택하면 Controller는 사용자의 입력을 감지하고 해당하는 캐릭터의 ID를 Model의 선택된 카드 목록에 업데이트하도록 요청한다. 그리고 View에게는 Model이 업데이트 되었으니 화면 갱신을 요청하게 되는데, 이로써 UI에 선택한 카드 목록 3장이 나타나 유저가 자신이 선택한 카드들을 확인할 수 있게 되는 것이다.
이를 통해 MVC패턴의 관심사 분리가 이루어진다. Controller는 사용자 입력을 받아 이를 처리하고, Model은 데이터 처리를 View는 화면 갱신만 담당한다.
그렇지만 MVC에서는 Model의 구조가 변경되면 View도 수정이 필요해진다. View가 UI 갱신을 위해서 Model의 값 변경 이벤트 등을 활용하여 상태를 관찰하거나 직접 참조하기 때문이다.
MVP (Model View Presenter)
위에서 설명한 MVC의 단점을 약간 개선한 것으로 MVP가 있다. 기존의 Controller의 역할을 Presenter가 함께 수행하지만 여기엔 큰 차이가 있다. MVC와 달리 MVP는 Model과 View가 직접 상호작용하는 것을 막는다.
Model과 View : 각각 데이터 처리, UI를 담당하며 이는 기존과 같다.
Presenter : Model과 View 사이를 중재하며 사용자 입력을 처리한다. 하지만 Presenter는 Controller와 다르게 Model와 View을 동기화하는 책임이 있다.
사용자가 UI에서 버튼을 클릭하면 View가 이 이벤트를 감지해 Presenter에게 보고하면 Presenter는 작업을 수행하는데 여기서 Model에게 직접 데이터를 요청하거나 업데이트한다. 이후, Model이 Presenter의 요청에 맞춰 데이터를 처리하고 그 결과를 Presenter에게 보고한다. 마지막으로 Presenter가 View에게 데이터를 전달해서 View가 결과를 사용자에게 보여주게 된다.
MVP는 Model과 View 사이의 의존성을 해결했지만 Presenter가 View의 모든 로직을 처리하므로 Presenter의 규모가 매우 커짐과 동시에 View와 Presenter 사이의 의존성이 높아지는 단점이 있다.
MVVM (Model View ViewModel)
MVVM 패턴은 기존의 MVP에서 View와 Presenter의 의존성을 개선했다. View와 ViewModel 간 데이터바인딩을 통해 ViewModel의 속성 변경이 자동으로 View에 반영된다.
Model과 View : 각각 데이터 처리, UI를 담당하며 이는 기존과 같다.
ViewModel : View와 Model 사이의 중재자 역할을 하지만 ViewModel과 View는 데이터바인딩으로 연결되어있다. 데이터바인딩은 UI가 아닌 개체의 속성과 UI 요소간 동기화를 보장하는데 바인딩을 활용하여 두 요소 간의 상호작용을 간소화하며, 각 UI 업데이트에 대해 수동으로 이벤트 핸들러를 작성할 필요가 없어진다.
