Unity MVVM 패턴

목차

• 복습
• UI Toolkit
• Unity MVVM
• 결론

 

MVVM 패턴

Unity6에서 UI Toolkit이 적극적으로 권장되고, 2024.07.23 유니티 디자인 패턴 책이 업데이트되면서 MVVM패턴이 추가되어 간단하게만 정리합니다.

- MVVM 복습

기존 MVP 패턴(1990)은 쉬워진 입력과 비대해진 View 문제를 해결하기 위해, 복잡한 UI와 입력을 개별 View가 처리하고, Presenter에 입력을 해석하여 Model로 요청해 View를 업데이트하는게 목적이었습니다. 주로 옵저버 패턴을 사용해 구현되며 View가 Model을 직접 구독할 수 있고, Presenter를 통해서 진행될 수 있습니다.

MVVM 패턴은(2005) View Model이라는 View의 추상화를 생성해 View와 View Model을 바인딩해 View가 온전히 UI 로직에 집중해 Visual한 영역과 Non-visual한 영역을 최대한 분리하였고, Model과 View 사이 의존성을 끊고, View Model과도 의존성을 최소화했습니다. 당시 시대상으로는 테스트 주도 개발(TDD, 2003)에 맞춰 테스트하기 힘든 Visual 영역과 Non-Visual 영역을 기존 Presenter를 바인딩으로 자동화하여 최대한 분리시켰다고 생각됩니다.

결국 MVVM을 구현하기 위해서는 데이터 바인딩이 필수 조건이며, Unity에서는 해당 기능을 제공하지 않아 사용하기 힘든 문제점이 있었습니다. 하지만 Unity6에서 UI Toolkit을 바탕으로 runtime data binding system이 추가되었고 그에 맞춰서 이전 디자인 패턴 책이 업데이트 되었습니다.

 

 

- UI Toolkit

Unity6에서 개선하며 적극적으로 밀고 있는 UI 시스템입니다. 웹에서 영감을 받아 성능 최적화를 위해 설계된 UI 방식이라는데 html, css, javascript 각각 uxml, uss, cs에 대응된다고 합니다.

• Panel Settings : UI Document가 게임 내에서 어떻게 인스턴스화될지 정의하는 설정 파일이라고 합니다. 기존 UI, 캔버스에서 지정할 수 있는 세팅을 할 수 있습니다.
• UXML(Unity XML) : UI Toolkit에서 사용하는 XML 기반 파일 형식으로, UI의 구조와 계층을 정의합니다.
• UI Document : UXML파일로  HTML과 유사하게 트리 구조로 UI 요소를 배치할 수 있습니다. UI Builder를 사용해 편집할 수 있습니다.
  

  

  UXML-UI Document

• UI Builder : UXML, Style Sheet(uss) 같은 UI 에셋을 시각적으로 보며 편집하는 창
  

  

• UI Document (Component) : UI Toolkit에서 제공하는 컴포넌트로 UXML 파일(UI Document)을 게임 오브젝트에 연결해 게임 뷰에서 UI를 렌더링합니다.
  

  

• USS(Unity Style Sheets): UI Toolkit에서 사용하는 스타일 시트 파일 형식으로, CSS와 유사하게 UI 요소의 스타일을 정의합니다. 색상, 폰트, 레이아웃 등 스타일 속성을 설정합니다. UXML파일과 함께 사용하여 UI의 외관을 정의합니다.
• CS(C# Scripts) : UI 동작과 로직을 정의하는 스크립트 파일입니다.이벤트 핸들러와 같은 기능을 구현합니다. 

Unity Korea UI Toolkit 완벽정복 캡처

웹개발 경험이 전무해서 웹이랑 비슷한지는 잘 모르지만, 언리얼 UI에 웹이 섞인 듯한 UI라고 느껴졌습니다.

 

 

- Unity MVVM 패턴

MVP 예제에서는 Presenter에서 Model을 호출하고, Model이 변경 후 Action으로 변경을 알려 Presenter는 다시 UI를 변경하는 구조를 가지고 있습니다.

Level up your code ... MVP 패턴 Sequence Diagram?

 

UI Toolkit을 사용한 MVVM 패턴에서는 Model과 View 사이에 View Model이 바인딩을 통해 자동화합니다.
이것이 정확한 해석인지는 모르겠지만, MVP가 명시적으로 옵저버 패턴을 이용했다면 MVVM은 데이터 바인딩으로 자동화 되어 있다고 생각할 수 있을 것 같습니다.

// Level up your code with design patterns and SOLID - MVVM pattern (2024.07.23)
//https://unity.com/kr/blog/game-programming-patterns-update-ebook?utm_source=youtube&utm_medium=social&utm_campaign=kr_asuj2408_discription

// Sets up data bindings between the HealthModel and UI elements, for automatic updates
        private void SetDataBindings()
        {
            // Locate the UI element 
            var healthBar = m_Root.Q<ProgressBar>("health-bar");
            var healthBarProgress = healthBar?.Q<VisualElement>(className: "unity-progress-bar__progress");

            if (healthBarProgress != null)
            {
                // Define an object as a data source on the element (the ScriptableObject in this case)
                healthBarProgress.dataSource = m_HealthModelAsset;

                // Create a new data binding for the health bar background color
                var binding = new DataBinding
                {
                    dataSourcePath = new PropertyPath(nameof(HealthModel.CurrentHealth)),

                    // Bind one-way from the data source to the UI
                    bindingMode = BindingMode.ToTarget,
                };

                // Add a formula to map the int value to a color
                binding.sourceToUiConverters.AddConverter((ref int value) =>
                    new StyleColor(Color.Lerp(Color.red, Color.green,
                        (float)value / (float)m_HealthModelAsset.MaxHealth)));

                // Register the binding to the health bar progress element
                healthBarProgress.SetBinding("style.backgroundColor", binding);
            }
        }

 

 

 

- 결론

Unity6로 오면서 이전보다 더 적극적으로 UI Toolkit 사용을 유도하는 것 같아 써보면 좋을 것 같습니다.

MVVM 패턴의 경우 24.07.23 Unity 디자인 패턴 관련 책이 업데이트 되면서 몇몇 패턴과 같이 추가되었습니다. Unity Korea 디자인 패턴 교육/소개 영상에서 아직 MVP 패턴을 쓰는 게임이 대다수인 것 같고 MVVM인 경우는 많이 보지 못했다고 합니다. Unity도 기능을 지원하고 언리얼도 바인딩 기능이 지원되는만큼 관련 공부를 더 하면 좋을 것 같습니다.

 

* 참고자료

Unity UI Toolkit 기본 사용법_세팅 및 설명 : 네이버 블로그 (naver.com)

Unity UI Toolkit 기본 사용법_세팅 및 설명

https://docs.unity3d.com/Manual/UIElements.html

Unity - Manual: UI Toolkit

https://unity.com/kr/blog/game-programming-patterns-update-ebook?utm_source=youtube&utm_medium=social&utm_campaign=kr_asuj2408_discription

Game programming patterns with Unity 6 | Unity