[UI] MVVM 패턴 / 언리얼 엔진의 ViewModel

MVVM 패턴?

 

[디자인패턴] MVC, MVP, MVVM 비교

 

 

View (i.e. UI) 와 Model (i.e. 게임플레이 로직) 간 의존성을 없애기 위한 디자인 패턴 중 하나이다.

View 는 화면에 보여주는 것, Model 은 로직을 수행하는 것에만 집중하도록 하기 위해,

ViewModel 에서 등록된 프로퍼티가 업데이트되는 시점에 View 를 업데이트 하거나 Model 의 로직을 수행한다.

따라서 ViewModel의 프로퍼티는 View의 특정 요소와 데이터 바인딩을 통해 연결되며,

프로퍼티가 변경될 때 해당 View 를 업데이트하도록 Notify 하는 방식이다.

이로써 View와 Model은 서로에 대한 정보 없이 사용자 입력 또는 게임플레이 로직에 따른 특정 프로퍼티의 변경에 반응한다.

 

예1) 플레이어 체력 변경

- 플레이어 스테이트에서 체력이 변경됨

- ViewModel 의 체력 프로퍼티를 변경하도록 체력 변경 로직에 포함

- ViewModel 의 체력 프로퍼티에 바인드된 모든 UI 요소에 Notify

- UI 업데이트

 

예2) 그래픽 설정 변경

- 사용자가 UI에 입력으로 특정 해상도 선택

- ViewModel 의 해상도 프로퍼티가 변경

- ViewModel 의 해상도 프로퍼티에 바인드된 로직 요소 (e.g. 해상도매니절~) 에 Notify

- 해상도 변경 로직 수행

 

즉, 등록된 데이터 변경에 따라 바인드된 델리게이트에 브로드캐스트를 보내는 이벤트들의 wrapper 라고 볼 수 있다.

알아두어야할 점은 MVVM 을 사용한다는 것에는 데이터와 커맨드 바인딩이 함축되어 있다는 것이다.

언리얼 엔진에서 MVVM 패턴을 위해 활용할 수 있는 ViewModel 의 경우에도 이러한 바인딩을 implicit 하게 구현하고 있다.

 

언리얼 엔진의 ViewModel

(공식 도큐멘테이션) https://dev.epicgames.com/documentation/en-us/unreal-engine/umg-viewmodel-for-unreal-engine

(소개 영상) https://dev.epicgames.com/community/learning/talks-and-demos/pw3Y/unreal-engine-umg-viewmodels-building-more-robust-and-testable-uis-using-mvvm-unreal-fest-2023

UE5 & MVVM

Model View ViewModel for Game Devs

 

 

[UI] UMG ViewModel

UMG ViewModel 플러그인의 경우 현재 베타 버전으로, shipping 시 주의가 필요합니다.