MVVM에 대해 알아보고 UE에서 어떻게 적용하는지 알아보고 예제를 만들면서 생긴 이슈와 앞으로의 수정 방향에 대해 이야기해보겠습니다.

1. MVVM 이란 ?
발표자 : 김 학윤

2. 목 차
01 초기 클라이언트의 UI
02
04 MVVM
05 UE 에서 MVVM 구현
06 Q & A
UI 아키텍처 패턴
03 MVC, MVP

3. 1. 초기 클라이언트의 UI
● 초기의 UI 는 간단한 UI 와 UX 를 가지고 있었음 .
● 하지만 현대의 UI 는 양도 많거니와 로직도 복잡해져서
유지관리 및 보수에도 영향을 미침 .
● UI 와 로직의 분리를 위해 아키텍처 패턴을 만듬 .
● Soc ( 관심사 분리 ) 원칙을 이용해 코드별 특정 기능을 관장하도록
함 .
● 이를 적용함으로써 역할 분리 , 유지보수성 , 테스트용이성 을 높임
이미지 출처 :
https://ilyabirman.net/meanwhile/all/ui-museum-norton-commander-5-0/

4. 2. UI 아키텍처 패턴
MVC (Model View Controller)
Controller 가 사용자 입력을 받아 Model 을 업데이트하고 , View 를 갱신하는
전통적인 UI 아키텍처 패턴 .
MVP (Model View Presenter)
Presenter 가 View 와 Model 사이에서 모든 로직을 처리하며 , View 는 Presenter 의
지시에 따라 UI 를 갱신하는 패턴 .
MVVM (Model View ViewModel)
ViewModel 이 Model 과 View 를 중개하며 , 데이터 바인딩을 통해 UI 가 자동
갱신되는 현대적인 UI 패턴 .
UI 와 로직의 분리가 목적인 패턴

5. 3. MVC (Model View Controller)
초기 GUI 애플리케이션과 웹 개발에서 많이 사용 된 패턴
구성 요소와 역할
● Model : 데이터 및 로직 관리
● View : UI 표시 , Model 을 통해 업데이트
● Controller : 사용자의 입력을 받아 Model 을 갱신
데이터 흐름
● View 와 Model 이 소통을 함
● Controller 가 유저의 Action 을 받아 처리
이미지 출처 :
https://www.youtube.com/watch?v=fxlYxhhf83s&list=WL&index=5&ab_channel=Un
ityKorea

6. MVC 에서 M 과 V 의 연결은 분리하기 위해 나온 패턴 . 게임 UI 에서 주로 사용중인 패턴 .
구성 요소와 역할
● Model : 데이터 및 로직 관리
● View : UI 표시 , Presenter 와만 소통 , Model 과의 연결 분리 됨
● Presenter : View 의 요청을 받아 Model 을 제어 , 결과를 View 에 전달
데이터 흐름
● Presenter 가 Model 과 View 의 중재자 역할을 함
● MVC 에 있던 Model 과 View 의 연결이 사라짐
3. MVP (Model View Presenter)
이미지 출처 :
https://www.youtube.com/watch?v=fxlYxhhf83s&list=WL&index=5&ab_channel=Un
ityKorea

7. 4. MVVM (Model View ViewModel)
View Model 이 Model 과 View 를 중개하며 , 데이터 바인딩을 통해 UI 가 자동으로 갱신되는 패턴
구성 요소와 역할
● Model : 데이터 및 로직 관리
● View : UI 표시
● ViewModel : View 와 Model 사이에서 중개 역할 , View 를 위한 Model, 데이터 바인딩
데이터 흐름
● View 는 ViewModel 과 데이터 바인딩
● 사용자 입력이 ViewModel 을 통해 Model 로 전달
특징
● 데이터 바인딩을 통한 UI 와 데이터 동기화
이미지 출처 :
https://www.youtube.com/watch?v=fxlYxhhf83s&list=WL&index=5&ab_channel=Un
ityKorea

8. 데이터 변경 시 자동 Notify
Notify 에 해당하는 변수가 View Widget 과 Bind 돼 있을 경우 해당 View Widget 갱신
4. MVVM (Model View ViewModel)

9. 4. MVVM (Model View ViewModel)
View 와 ViewModel 간의 bind 방향성
● 초기화 딱 한 번
● View Model 에서 View 로만 일방통행
● View Model 과 View 간 양방통행
● View 에서 ViewModel 로만 일방통행
필요한 바인딩 방식으로 적용이 가능

10. 데이터 바인딩
● UI 가 아닌 객체의 속성과 UI 요소간의 동기화 보장
● 개발 플랫폼에서 데이터 바인딩을 지원해 줘야 MVVM 적용이 용이
4. MVVM (Model View ViewModel)

11. 5. UE 에서 MVVM 구현
UE 에서는 Plugin 으로 UE 5.1 부터 지원 . 5.3 부터 BP 에서 MVVM Editor UI 를 지원해서 사용하기 편해짐
https://dev.epicgames.com/documentation/en-us/unreal-engine/umg-viewmodel-for-unreal-engine

12. 5. UE 에서 MVVM 구현
1) UMG ViewModel Plugin 설치

13. 5. UE 에서 MVVM 구현
2) 기존바인딩 UI 를 제거하기 위해 Project Setting 변경

14. 5. UE 에서 MVVM 구현
3) 예제 목표 : 이미지
- HP 와 NickName 을 보유한 캐릭터
- HP 와 NickName 의 데이터 변화에 초점
- HP 가 변하면 Bar 와 HP String 변화
- Input Text 에 입력시 표시 예 UI 갱신
- Submit 을 통해 실제 Model 적용 요청
- 공격과 LevelUp 등 HP 변화
- 캐릭터 초기화 시 UI 갱신

15. 5. UE 에서 MVVM 구현
3) View 에 해당하는 UMG 제작

16. 5. UE 에서 MVVM 구현
4) Model 제작

17. 5. UE 에서 MVVM 구현
5) View Model 제작

18. 5. UE 에서 MVVM 구현
5) Binding 에 사용할 Notify Function 구현

19. 5. UE 에서 MVVM 구현
6) Model 에서 값이 변경 될 때 ViewModel 로 notify 를 위해 bind 할 Function 구현

20. 5. UE 에서 MVVM 구현
7) View 에서 ViewModel 을 설정

21. 5. UE 에서 MVVM 구현
8) ViewModel 을 기반으로 View 의 Widget 들을 Binding

22. 5. UE 에서 MVVM 구현
8) ViewModel 을 기반으로 View 의 Widget 들을 Binding

23. 5. UE 에서 MVVM 구현
8) ViewModel 을 기반으로 View 의 Widget 들을 Binding
Immediate Notify 즉시
Delay 가장 끝 프레임 주기에
Tick 구 bind 시스템과 같이 매 프레임 마다

24. 5. UE 에서 MVVM 구현
9) ViewModel 의 Instance 를 생성하고 Model 에 해당하는 DefaultPawn 을 이용해 View Model 초기화
CreateInstance
Widget 생성 시 자동으로 instance 생성 . PreConstruct 와 Construct 사이에서
완료
Manual 초기화는 null 이고 직접 instance 생성해서 넣는 방법
Global View
Model Collection
Global ViewModel Identifier 를 이용해서 어느 Widget 에서든 사용 가능하게 등록
옵션창 같은 내용에 사용시 좋음

25. 5. UE 에서 MVVM 구현
9) Create Instance
Widget 생성 시 자동으로 instance 생성 . PreConstruct 와 Construct 사이에서 완료
Widget 이 RemoveFormParent 가 되면 ViewModel 이 해제되고 Widget 이 해제됨 .

26. 5. UE 에서 MVVM 구현
9) Manual

27. 5. UE 에서 MVVM 구현
9) Global View Model Collection
- Create Instance 시 Global ViewModel 에 자동으로 들어가지 않음
- Global ViewModel 에 도 직접 생성한걸 넣어서 사용하는 방식

28. 5. UE 에서 MVVM 구현
9) Property Path
- 코드 작업을 최소화
- 위젯 내의 특정 함수를 통해 ViewModel Get

29. 5. UE 에서 MVVM 구현
9) Resolver
- ViewModel Resolver 를 상속 받아 구현
- Resolver 에 할당 시 CreateInstance 라는 함수를 Override 하고 호출하여 내부 로직 수행

30. 5. UE 에서 MVVM 구현
9) ViewModel 의 Instance 를 생성하고 Model 에 해당하는 DefaultPawn 을 이용해 View Model 초기화

31. 5. UE 에서 MVVM 구현
9) ViewModel 의 Instance 를 생성하고 Model 에 해당하는 DefaultPawn 을 이용해 View Model 초기화

32. 5. UE 에서 MVVM 구현
9) Model 에서 ViewModel 로 Notify 를 위한 Event Bind

33. 5. UE 에서 MVVM 구현
9) ViewModel 의 초기값을 Model 값을 이용해 초기화

34. 5. UE 에서 MVVM 구현
10) 적용 화면

35. 5. UE 에서 MVVM 구현
11) 현재 확인 중인 이슈 : ViewModel 의 생명 주기
- 현재 사용한 Manual 의 경우 직접 Instance 를 해제 해 줘야 됨 .
- 이 Manual 을 선택 했다는 뜻은 내가 다른데 에서도 쓸 수 있으니 알아서 처리하겠다 를 뜻 하는걸 의미 .
- 그렇기 때문에 Creation Type 을 자기 자신이 직접 사용하고 관리하겠다는 Instance 로 설정하지 않을
경우 모두 직접적으로 메모리 해제를 해야 됨 .
- 그런데 BP 상 이 생성한 ViewModel 의 Instance 를 어떻게 지워야 되는지 모르겠음…
- 코드로도 Widget 은 UserWidget 상속받아서 구현하는데 해당 class 에는 ViewModel 이 없음 .

36. 5. UE 에서 MVVM 구현
11) 현재 확인 중인 이슈 : Reset 시 Input Field 초기화 불가능
Input Field 가 View Binding 을 통해서 연결 돼 있기
때문에 Input Field Text 를 수정해버리면 Player
NickName 이 변경 되고 해당 Notify 로 인해 User
Name Display 쪽도 공백이 되 버림 .
Notify 없이 Text 를 설정하는게 분명 있을 것
같긴한데 현재까지는 발견 못한 상태

37. 5. UE 에서 MVVM 구현
11) 현재 확인 중인 이슈 : ViewModel 에서 Model 로의 업데이트
현재 ViewModel 과 Model 의 바인딩하는 기능은
없음 .
의도된 사항인지 beta 여서 인지 모르겠어서 일단
Model 과 View Model 의 데이터 바인딩을 delegate
를 통해 event 형식으로 구현함 .
정확한 의도가 어떻게 되는지 조금 더 확인 해 볼 예정 .

38. 5. UE 에서 MVVM 구현
12) 앞으로 진행 계획
- 오늘 발표는 개념 위주와 바로 적용을 위해 BP 로 간단하게 적용함 .
- 조금더 코드 기반으로 작업하고 실제 내부가 어떻게 되는지 더 분석 예정 .
- 앞에서 언급한 문제들을 어떻게 해결하면 좋은지 더 고민해서 다음 발표 때 공유하겠음 .

39. Q & A

40. 참고 자료 출처
https://redchiken.tistory.com/392
https://dev.epicgames.com/documentation/en-us/unreal-engine/umg-viewmodel-for-unreal-engine
https://harrisbarra.medium.com/ue5-mvvm-36907bdb34d9
https://miltoncandelero.github.io/unreal-viewmodel
https://kkadalg.tistory.com/103
https://www.youtube.com/watch?v=fxlYxhhf83s&list=WL&index=13&t=1632s&pp=gAQBiAQB
Sample Git
https://github.com/yoon20002000/MVVM