최근 퍼즐 게임을 개발할 때 MVVM 패턴을 사용하는 케이스가 많다는 이야기를 들었다.
특히 UI 요소가 많고, 게임 상태와 연출이 분리되어야 하며, 동일한 데이터를 여러 UI가 바라보는 구조가 빈번할 때 유지보수와 확장성이 크게 좋아진다고 한다.
그래서 이번 기회에 "MVVM이 실제로 어떤 구조인지, 왜 퍼즐 장르에서 자주 사용하는지" 알아보려고 한다.
[1. MVVM 패턴이란?]
MVVM은 말 그대로 세 가지 레이어로 구성된다.
- Model
게임의 순수한 데이터, 로직, 상태
(점수, 턴 수, 퍼즐 보드 상태 등)- View
플레이어가 보는 UI/화면 요소
(점수 UI, 셀 애니메이션, 버튼 등)- ViewModel
View와 Model을 이어주는 중간 계층
UI가 직접 Model에 접근하지 않고, ViewModel을 통해 상태를 받아옴.
-> 양방향 바인딩도 가능
구조를 단순하게 표현하면
Model <-> ViewModel <-> View
이런 느낌이다.
Unity에선 보통 View가 MonoBehaviour에 속하고,
ViewModel과 Model은 C# 클래스로 구성되는 경우가 많다.
[2. MVC 패턴과 뭐가 다르고, 왜 MVVM 패턴이 필요할까?]
처음 느낀 의문은
"MVC 패턴이 있는데, 굳이 MVVM 패턴을 사용할 필요가 있나?"
였다.
핵심 차이는 UI 바인딩과 상태 흐름의 책임 분리이다.
<MVC 패턴>
Controller가 View와 Model을 모두 직접 제어한다.
View <-> Controller <-> Model
문제는 UI 변화가 많으면 Controller가 비대해지기 쉽다.
<MVVM 패턴>
View는 ViewModel만 바라본다.
그리고 ViewModel은 Model의 상태를 가공하여 View에 전달한다.
View <-> ViewModel <-> Model
이 구조 덕분에
- UI 갱신 규칙을 ViewModel에 모아둘 수 있음
- View는 데이터를 그리기만 하면 됨
- Model의 변경이 여러 UI에 자동 반영되는 구조를 만들 수 있음
특히 퍼즐 게임이나 캐주얼 게임처럼 UI 갱신 빈도가 높은 장르에서 매우 유용하다
[3. MVVM이 퍼즐/캐주얼 게임에서 자주 쓰이는 이유]
<1. 상태 변화가 많고 UI가 계속 따라붙는 장르>
퍼즐 게임의 특성
- 점수 변함
- 콤보 증가
- 타일이 사라짐
- 게이지 변화
- 이펙트와 UI가 동시에 연동
이러한 요소들을 Controller나 MonoBehaviour에 몰아넣으면 스크립트가 복잡해질 수 있다.
그런데 MVVM 패턴을 사용하면
- Model -> 순수한 데이터 변화
- ViewModel -> 변화 감지, UI에 맞춘 데이터 변환
- View -> 그리기만 함
-> 코드가 자연스럽게 분리된다.
<2. 동일 데이터를 바라보는 UI가 많다>
ex) 콤보
- 상단 UI 콤보 텍스트
- 콤보 이펙트
- 콤보에 따라 점수 배율 변화
Model의 콤보 값이 바뀌면
ViewModel은 이를 기반으로 UI 여러 곳에 자동 반영한다.
<3. 애니메이션 + 연출 지연 + 게임 로직이 섞이면 코드가 복잡해진다.>
퍼즐 장르는 연출이 굉장히 많다.
- 타일 이동
- 매칭 애니메이션
- 점수 팝업
- 콤보 연출
이런 로직들을 MonoBehaviour 하나에서 모두 처리하려고 하면
상태 관리, UI 갱신, 연출 타이밍이 뒤섞여 코드가 금방 복잡해진다.
하지만 ViewModel을 두면
- 턴 진행 -> ViewModel로 상태 업데이트
- ViewModel -> View에게 "해당 연출 보여줘" 전달
- View는 실행만 함
-> 로직과 연출이 자연스럽게 분리되어 유지보수가 훨씬 쉬워진다.
[4. Unity에서 MVVM은 어떻게 구현할까?]
간단하게 퍼즐 셀 상태를 표시하는 예를 들어보자.
// Model public class CellModel { public int value; public bool isMatched; } // ViewModel public class CellViewModel { public readonly ReactiveProperty<int> Value = new(); public readonly ReactiveProperty<bool> IsMatched = new(); public void Bind(CellModel model) { Value.Value = model.value; IsMatched.Value = model.isMatched; } } // View (Unity) public class CellView : MonoBehaviour { [SerializeField] private Text valueText; private CellViewModel viewModel; public void Bind(CellViewModel vm) { viewModel = vm; viewModel.Value.Subscribe(v => { valueText.text = v.ToString(); }); viewModel.IsMatched.Subscribe(isMatched => { // 애니메이션 구현 }); } }
-> Model 값이 바뀌면 ViewModel이 감지하고
-> View는 UI만 바꾼다
-> 게임 로직과 UI 로직이 깔끔하게 분리됨
* 반응형 프로퍼티를 활용하면 더욱 자연스러운 MVVM 구조가 된다.
[5. MVVM의 장점과 단점]
<장점>
- UI 업데이트와 게임 로직 분리
- 테스트 용이
- 대규모 UI에서 유지보수성 증가
- 상태 관리가 명확해짐
- UI가 메인인 장르에 최적
<단점>
- 초기 구조 설계 비용이 큼
- Reactive 시스템이 없으면 구현 난이도가 증가
- 작은 프로젝트에서는 과할 수 있음
[6. 마치며]
퍼즐 게임 쪽에서 MVVM을 많이 쓴다는 이야기를 듣고 "왜 하필 퍼즐 장르에서 많이 사용할까?"가 궁금해서 정리했는데, 정리하고 나니 이유가 명확해졌다.
퍼즐 게임은
상태 변화 -> UI 반영 -> 연출 -> 다시 상태 변화
이 흐름이 반복되는 구조라
UI와 상태를 분리해 관리하는 MVVM이 자연스럽게 잘 맞는 구조였던 것이다.
다음에 퍼즐 시스템을 만들 일이 생기면, 이번에 정리한 MVVM 패턴을 실제로 적용하여 깔끔한 코드 구조를 짜보고 싶다.
