[유니티 TIPS] UI에 걸맞는 MVC, MVP, MVVM 패턴 | 프로그래밍 디자인패턴

유니티 테크놀로지스 코리아 (Unity Technologies Korea)공식 유튜브 채널입니다.
유니티 개발과 최신 유니티 기술 소개 및 유니티로 만들어진 다양한 콘텐츠를 만나보실 수 있습니다.

Unity Korea

UI 로직 분리를 위한 MVC, MVP, MVVM 패턴은 UI 개발 시 논리, 데이터 분리, 종속성 감소를 목표로 한다.

MVC에서 MVP로 발전하며 모델과 뷰의 분리를 강화하고, MVVM은 데이터 바인딩을 통해 뷰 모델과 뷰의 관계를 더욱 느슨하게 만든다.

유니티 UI 툴킷은 MVVM 패턴을 지원하며, 복잡한 UI 환경에서 데이터 바인딩을 통해 코드 간결성 및 유지보수성을 향상시킨다.

🤔 UI 디자인 패턴 복습: MVC, MVP, MVVM

UI 로직 분리를 목표로 하는 디자인 패턴들(MVC, MVP, MVVM)을 빠르게 복습합니다. 과거에는 UI가 단순했지만, 현재는 복잡해져서 여러 개발자가 협업할 때 구조를 아름답게 만드는 것이 중요해졌습니다. **이러한 필요에 따라 MVC에서 MVP, MVVM으로 발전해왔습니다.**

기존 디자인 패턴은 클래스 간의 관계를 나타냈지만, MV* 패턴들은 레이어 간의 관계를 나타내는 더 큰 개념입니다. 이러한 패턴들은 **관심사 분리(SOC)**를 통해 각 레이어의 역할을 명확히 하고, 코드의 유지보수성을 높이는 데 기여합니다.

이러한 패턴들은 디자인 패턴으로도 분류되지만, 더 나아가 아키텍처 패턴으로도 분류될 수 있습니다. 유니티를 포함한 툴 기반 환경에서 적극적으로 활용되고 있으며, 버전 컨트롤 시스템 등에서도 사용됩니다.

🍝 스파게티 코드 방지 및 UI/UX 중요성

이러한 패턴들의 핵심 목표는 **잠재적인 스파게티 코드를 방지하는 것**입니다. 웹/앱 개발에서는 UI/UX가 중요하지만, 게임 업계에서는 게임 로직이 더 중요하게 여겨지는 경향이 있습니다. 따라서 UI/UX 관련 업무는 신입이나 경력이 낮은 개발자들이 담당하는 경우가 많습니다.

UI/UX 프레임워크는 다양하며, MVC, MVVM 등의 선택은 프레임워크 의존적인 부분이 많습니다. 따라서 **어떤 프레임워크를 사용하느냐에 따라 패턴 선택이 달라질 수 있습니다.**

🏛️ MVC 패턴: 모델, 뷰, 컨트롤러

MVC는 UI 개발에 사용되는 패턴으로, 논리적인 부분과 데이터를 나누는 것이 핵심입니다. 모델은 어플리케이션 데이터를 관리하고, 뷰는 데이터를 사용자에게 표시하는 UI이며, 컨트롤러는 입력 및 로직을 처리합니다. **각 레이어의 기능을 제한하여 단일 책임 원칙을 준수하는 것이 목표입니다.**

하지만 실제로는 뷰와 컨트롤러, 모델과 컨트롤러, 모델과 뷰가 서로 엮일 수밖에 없는 구조입니다. 유니티에서는 주로 MVC 대신 MVP 모델을 채용합니다.

🦸 MVP 패턴: 모델, 뷰, 프레젠터

MVP는 MVC에서 발전된 모델로, 모델은 데이터와 관련된 규칙을 포함하며 뷰에 대한 정보가 없습니다. **프레젠터가 모델과 뷰 사이에서 중재 역할을 하며, 모델과 뷰는 서로 직접 소통하지 않습니다.**

MVP 패턴은 모델과 뷰를 완전히 분리시켜 확장성, 모듈성, 재사용성, 유지 관리성을 높일 수 있습니다.

MVVM은 MVP에서 더 나아가 뷰와 뷰 모델의 관계를 약화시키기 위해 등장했습니다. **데이터 바인딩 시스템을 통해 뷰 모델과 뷰의 종속성을 끊어줍니다.**

MVVM에서 모델은 비즈니스 로직에서 사용되는 데이터를 포함하는 데이터 구조이며, 뷰는 사용자에게 데이터를 표시하고 사용자 상호 작용을 담당하는 UI입니다. 뷰 모델은 뷰와 모델 사이의 중재자 역할을 하며, 데이터 바인딩 기능을 통해 연결되어 있습니다.

MVVM 패턴은 UI 툴킷의 데이터 바인딩 지원이 필수적입니다. 유니티 6부터 UI 툴킷 런타임 데이터 바인딩을 지원합니다.

유니티 UI 툴킷은 웹 개발에서 영감을 얻어온 시스템으로, UXML 레이아웃, USS 스타일 시트, C# 스크립트로 구성됩니다. 유니티 6부터는 런타임 바인딩을 지원하여 MVVM 패턴 구현이 가능해졌습니다.

UI 툴킷은 UI 빌더를 제공하여 UI 작업 환경을 개선했습니다. 또한, 데이터 바인딩을 통해 스크립터블 오브젝트의 데이터를 UI에 자동으로 연동할 수 있습니다. 예를 들어, 캐릭터 프로필 데이터를 UI에 바인딩하여 이름, 체력, 초상화 등을 쉽게 표시할 수 있습니다.

바인딩 시스템을 사용하면 복잡한 코드를 절약하고 유지 보수를 쉽게 만들 수 있습니다. 컨버터를 사용하여 데이터 값에 따라 UI 요소(색상, 문자 등)를 자동으로 변경할 수도 있습니다.

🆚 MVP vs MVVM: 코드 비교 및 장단점

MVP는 프레젠터가 뷰의 이벤트를 직접 처리하지만, MVVM은 데이터 바인딩을 통해 뷰 모델과 뷰의 의존성을 줄입니다. **MVVM은 코드 간결성을 높이고 유지 보수성을 향상시키는 장점이 있습니다.**

MVVM은 데이터 바인딩 설정에 따른 추가 오버헤드가 있을 수 있으므로, 성능이 중요한 경우에는 적합하지 않을 수 있습니다. 또한, 간단한 UI/UX 환경보다는 복잡한 환경에서 더 효과적입니다.

모든 패턴은 장단점이 있으므로 상황에 맞춰 적용 여부를 결정해야 합니다. 복잡한 UI/UX 환경에서는 MVVM 패턴을 고려해볼 만합니다.

UI 로직 분리 패턴 복습 및 UI 발전 과정

UI 로직 분리 패턴들을 빠르게 훑어보며 복습.

과거 도스 시절과 달리 현재는 UI가 복잡해져 여러 명의 협업이 중요해짐.

MVC, MVP, MVVM 등의 패턴이 만들어지고 UI 프레임워크가 다양해지면서 발전.

이러한 패턴들은 클래스 간의 관계가 아닌 레이어 간의 관계를 나타내는 더 큰 개념.

유니티에서 적극적으로 활용되며, 툴셋 기반에서 이러한 패턴들이 사용됨.

잠재적인 스파게티 코드를 방지하는 것이 주 목표.

UI UX는 웹/앱에서 중요하지만, 게임 산업에서는 UI에 대한 짬 처리가 많음.

UI UX 프레임워크의 다양성으로 MVC/MVVM 선택은 프레임워크 의존적.

MVC는 UI 개발에 사용되는 패턴으로, 논리적인 부분과 데이터를 나눔.

모델은 어플리케이션 데이터 관리, 뷰는 UI 표시, 컨트롤러는 입력 및 로직 처리 담당.

MVC는 뷰와 컨트롤러, 모델이 서로 엮일 수밖에 없는 구조.

유니티 UI는 문제가 없지만, 모델 데이터 변경 사항 수신에 한계 존재.

유니티에서는 MVC보다 발전된 MVP 모델 채용.

모델은 데이터와 규칙을 포함, 뷰에 대한 정보는 없음.

프레젠터가 모델과 뷰 사이에서 중재 역할을 수행.

MVP 패턴에서 뷰와 모델은 상호 작용하지 않음.

모델과 뷰를 완전히 분리시켜 확장성, 모듈성, 재사용성, 유지 관리성 충족.

MVP에서 더 나아가 MVVM 패턴이 등장.

MVVM은 모델, 뷰, 뷰 모델로 구성.

MVP의 뷰와 프레젠터 관계를 약화시키기 위해 바인딩 시스템 도입.

바인딩 시스템을 통해 뷰 모델과 뷰의 종속성을 끊어줌.

데이터 바인딩은 뷰와 뷰 모델 간의 연결을 통해 속성이 자동으로 뷰에 반영.

모델은 비즈니스 로직에서 사용된 데이터를 포함하는 데이터 구조.

뷰는 사용자에게 데이터를 표시하고 상호 작용하는 UI.

뷰 모델은 뷰와 모델 사이의 중재자 역할, 데이터 바인딩으로 연결.

데이터 바인딩은 UI 요소 간의 동기화를 보장.

유니티 6부터 UI 툴킷 런타임 데이터 바인딩 지원.

MVC는 모델, 뷰, 컨트롤러가 서로 엮여 있음.

MVP는 프레젠터가 모델과 뷰를 분리.

MVVM은 뷰 모델과 뷰 사이의 관계도 약화.

UI 시스템 프레임워크는 의존성을 약화시키기 위해 발전 중.

MVVM은 아직까지 게임 업계에서 많이 쓰이지 않음.

MVVM 패턴은 웹 개발에서 정용화되었음.

시뮬레이션 장르 게임처럼 UI가 복잡한 경우 MVVM 패턴이 유용.

MVVM은 UI 툴킷을 써야만 구현 가능한 환경.

유니티는 UI 툴킷과 UI 빌더를 제공하여 UI 작업 환경을 개선.

UI 툴킷은 레이아웃(UXML), 스타일 시트(USS), C# 스크립트로 구성.

UI 툴킷은 웹 개발에서 영감을 얻어온 시스템.

지스타 세션에서 진행했던 UI 툴킷 시스템 소개 내용을 간단하게 설명.

샘플 프로젝트를 통해 UI 툴킷 사용법 설명.

UI 빌더 창에서 USS, UXML을 사용하여 스타일과 구조를 기술.

C# 코드에서 UI 요소에 접근하여 기능을 연결.

Q 함수를 사용하여 UI 요소를 간편하게 쿼리.

유니티 6부터 바인딩 런타임 바인딩이 추가되어 MVVM 핵심 기능 제공.

스크립터블 오브젝트의 데이터 변경 시 UI가 자동으로 연동.

UI 툴킷 바인딩 시스템을 통해 코드 절약 가능.

UI 툴킷 런타임 바인딩 사용법 예시

K0 상의 샘플 기준으로 런타임 바인딩 사용법 설명.

캐릭터 목록 UI에서 각 캐릭터의 속성을 자동으로 바인딩하는 샘플 시연.

캐릭터 프로필은 스크립터블 오브젝트로 구성.

UI 빌더에서 바인딩 설정을 통해 UI 요소와 데이터 연결.

파티 스크립터블 오브젝트를 사용하여 여러 캐릭터 프로필 관리.

C# 코드에서 UI 도큐먼트와 리스트 뷰를 연결하여 자동 바인딩 구현.

바인딩 시스템을 통해 복잡한 코드를 절약하고 유지 보수 용이성 확보.

MVVM 패턴 구현 가능, 헬스 값 변경 시 UI 자동 업데이트.

바인딩 설정 후 업데이트 로직 없이 데이터와 UI 동기화.

컨버터를 사용하여 UI 스타일(색상, 문자) 변경 자동화.

모델은 스크립터블 오브젝트 상속, 데이터 자체에 집중.

레지스터 컨버터를 통해 모델과 UI 스타일 연결.

UI 빌더에서 바인딩 설정 및 에디터에서 확인.

UI 빌더 시연 및 MVVM 패턴 구현 예시

UI 빌더를 통해 UXML 파일 편집 및 UI 요소 배치.

데이터 소스와 바인딩 정보 확인.

바인딩 에디터를 통해 게임 오브젝트와 속성 연결.

UXML 파일에서 바인딩 정보 텍스트로 확인 가능.

헬스 뷰 모델에서 UI 요소 연결 및 컨버터 설정.

MVP는 이벤트 핸들러를 직접 추가하여 프레젠터가 뷰를 중재.

MVVM은 바인딩만 처리하면 업데이트 로직 불필요.

MVVM은 바인딩 시스템을 통해 코드 간결화 및 유지보수 용이.

MVVM은 뷰 모델과 뷰의 의존성 감소.

MVP는 모델 구독 및 뷰 업데이트 반복, MVVM은 자동 업데이트.

MVVM은 데이터 바인딩 시스템을 통해 코드 양 감소 및 UI 일관성 향상.

MVVM은 바인딩 설정에 따른 추가 오버헤드 및 복잡한 설정 필요.

MVVM은 복잡한 UI UX 환경에 적합.

간단한 환경에서는 MVVM 적용이 오버 엔지니어링일 수 있음.

복잡한 UI UX 환경의 게임에 MVVM이 적합.

모든 패턴은 장단점이 있으므로 상황에 맞춰 적용 여부 결정.