HOW TO UNITY | ui 용 MVC, MVP, MVVM 패턴

https://www.youtube.com/watch?v=fxlYxhhf83s

UI에 걸맞는 기법

디자인 패턴들은
잠재적 스파게티 패턴을 방지하기 위한 것임

HOW TO UNITY | ui 용  MVC, MVP, MVVM 패턴

mvc
잘 안 씀
그냥 있다는 거만 알아두기

model
데이터 (캐릭터 체력) 담는 박스

view
화면에 표시되는 ui

controller 
계산 함



+


mvp

model 
데이터

presenter
중간 중재자
model 과 view 를 업데이트 함

view
ui

세 개 를 분리하여 이점이 있음

확장 가능
모듈 조립 가능
재사용 가능


+

 

mvvm
mvp 에서 더 발전된 거

model
데이터

viewmodel
중재자

view
ui

user
사용자


view 와 viewmodel 사이 데이터 바인딩 을 씀
자동 반영 이라는 것임
동기화 라는 거임


mvvm 기법은 유니티 6.0 부터 가능하다




+

 

 

UI와 게임 로직
(전투 규칙, 유닛 상태, 턴 시스템)을 명확히 분리하고 싶을 때

유닛 정보판, 스킬창, 턴오더, 인벤토리, 대화창 구현할 때




단, 주의점!

수백개 유닛 나오는 대규모 구현엔 부적합




실 예시로 본 각 속성들

Model : hp mp 스탯, skill, ScriptableObject

ViewModel : 커맨드 명령, INotifyPropertyChanged, 

View : 유닛 표시, HUD

 

 

+

유니티에서의 바인딩 방식

수동 바인딩 — View에서 ViewModel 이벤트/델리게이트를 직접 구독 
Reactive(예: UniRx) — 옵저버블로 바인딩. 상태 변화가 복잡하면 추천.


+

추가 설명


게임에서 일어나는 일

ㅁ 턴이 바뀜
ㅁ 이동 가능 칸이 바뀜
ㅁ 스킬 버튼이 켜짐/꺼짐

이런 게임 로직이 있고,
그걸 화면에 보여주는 UI가 있음

이 두 개를 섞어 쓰면 코드가 난장판이 됨
이 걸 방지 하기 위해서 mvvm 을 씀

 

+


SRPG는 UI가 많음 

ㅁ 유닛 정보창
ㅁ 턴 순서 UI
ㅁ 이동/공격 버튼
ㅁ 스킬 목록
ㅁ 범위 표시

 

하나의 유닛 데이터가 바뀌면
이 여러 UI가 동시에 반응해야 함
MVVM은 이걸 자동으로 연결해줌

 

 

 

+

 

 

추가 실 예시


플레이어가 적에게 맞아서 HP가 100 → 60 이 됨

1) Model: HP = 60 변경
2) ViewModel: "HP 변함!" 이벤트 전송 
3) View(UI): 그 이벤트 듣고 체력바 업데이트

 

+

 

다른 예시

 

 

public int MP;
1) Model: 마나 데이터만 저장

 

 

public class UnitViewModel
{
    public UnitModel model;      
    // 이 ViewModel이 사용할 데이터 저장 변수  
    // 실제 캐릭터 정보(HP 등)를 들고 있는 상자라고 보면 됨  

    public event Action OnHpChanged; 
    // HP가 바뀌었을 때 UI에게 알려주는 알림 이벤트  
    // “HP 변함! UI 업데이트 해!” 라고 호출

    public UnitViewModel(UnitModel m)
    // 생성자: 이 ViewModel이 어떤 Model을 쓸지 설정하는 함수  

	{
        model = m;
        // 전달받은 m(Model)을 이 ViewModel의 model 변수에 저장  
        // "이 ViewModel은 이제 이 모델을 다룬다"라고 연결하는 작업  
    }

    public void SetHP(int value)
    // HP 값을 바꾸는 함수 (입력으로 받은 value를 사용)  
    // 외부에서 "이 HP로 바꿔!"라고 숫자 전달할 때 쓰는 수정 함수  
    {
        model.HP = value;
        // 모델의 HP를 입력받은 값(value)으로 실제 변경  
        // 캐릭터의 실제 체력 수치를 여기서 업데이트함  

        OnHpChanged?.Invoke();  
        // 만약 누군가 이벤트를 듣고 있으면 실행 → UI 갱신  
        // “HP 바뀜! UI야 반응해!”라고 신호를 보내는 부분  
    }

    public int GetHP()
    // 현재 HP 값을 가져오는 함수  
    // 외부(UI 등)가 "지금 HP 몇이야?"라고 물을 때 쓰는 조회 함수  
    {
        return model.HP;
        // 모델에 저장된 실제 HP 숫자를 반환  
        // 캐릭터가 가진 HP를 그대로 돌려준다  
    }
}

2) ViewModel: 변화를 ui 에게 알림

 

 

 

hpText.text = "MP : " + vm.GetMP();

3) View(UI): ui 표시만 함

 

 

+

 

mvvm
유니티 에선 ui toolkit , ui builder
(기본 패키지 매니저에 있음)
을 써야 한다더라

ui builder 는
ui 위주로 작업할 수 있는 환경이 마련됨

 

ui toolkit 의 구성은 3개로 나뉨

Layout 위치
Styling 글꼴
Functionality 버튼기능

 

.uxml 은 칸 크기 조절이다

.uss 는 글자 조정이다

.cs 는 기능 연결이다

 

이렇게 외워두면 됨

 

+

 

 

ui builder 에서

 

우측

ㅣㅇ

이런 모양 누르면

 

데이터 바인딩 가능

체력이나 초상화 이런거 연결하는 거임

 

 

 

Update ( ) 생명 주기를 쓰지 않음

서로 연결 만 해줘서

실시간 반영으로 보이는 거임