Lee Jeongan

Development & Study Blog

작업 효율을 높이기 위한 유니티 UI 제작 프로그래밍 패턴들

본 내용은 아래 유니티 코리아의 영상를 보고 작성했습니다.

UI 네비게이션

게임에서 사용되는 UI의 경우 다양한 상황에서 사용되기 때문에 효율적인 UI 패턴을 사용해야 한다.

인게임의 UI들과 상호 연결되는 UI는 큰 차이점이 있다.

게임의 UI 구조

기본적으로 3가지 형태로 나뉘게 되는데

  • 계층
  • 플랫
  • 콘텐츠주도

으로 나뉜다.

계층

가장 기본적인 형태로 한가지 root에서 아래로 뻗어나가는 형태이다.

PopUp UI형태..

플랫

여러가지 기본 페이지가 존재하고 페이지를 이동해도 이전 페이지의 스택이 날아가지 않음

기본적인 어플리케이션 형태..

콘텐츠주도

root 페이지가 따로 존재하지 않고 콘텐츠에 따라 유동적으로 움직임

구현 방법

기본적으로 UI 네비게이션이 가능하게 하려면 UINavigation, UIView라는 클래스를 만들어서 사용한다.

UIView somePage = UIView.Create("SomePage");

somePage.show();

UIVIew는 클래스의 정적메서드를 호출하여 해당 프리팹을 꺼내온다.

Resource나 어드레서블오브젝트를 활용..!

모든 UI는 기본적으로 show나 hide를 구현하고 이를 직접실행하지 않고 UINavigation을 통해 실행한다.

var newPage = UINavigation.Push("PageName");
var previousPage = UINavigation.Pop();

즉, 게임씬에 3가지 UIView가 있다고 가정할 때 UINavigation을 통해 Push를 하게 되면 해당 페이지가 UINavigation에 있는지 검사하고 가장 위로 올리고 show를 실행, 직전의 페이지는 hide를 실행한다.

검사과정에서 존재하지 않는다면 Create를 통해 생성하고 show를 실행한다.

문제점 root가 하나이기 때문에 플랫을 표현하기 어려움

생각보다 구조가 간단해서.. 신기..

해결 방법

플랫형태의 UI를 구현하기 위해서는 UINavigation을 관리하는 UINavigationController를 구현한다.

따라서 스택의 상위 개념으러 스택이 여러개 존재하는 방식이라고 생각하면된다.

구현 또한 마찬가지

layer 계층이 가장 높은 PopUpUI프리팹을 만들고 큐로 관리한다.

PopUp.GetPrefab("SomePopUp");

var popUp = PopupManager.Equeue(PopUp.GetPrefab("SomePopUp"));

popUp.SetText("messgeField", message);
popUp.SetButtonData(
  new ButtonData{
    text = "No",
    (button) => Debug.Log("No Button Clicked")},
  new ButtonData{
    text = "Yes",
    (button) => Debug.Log("Yes Button Clicked"),
  }
);

작업 플로우

UI View관리를 위해 프리팹으로 만들어 작업

작업 전용씬을 만들어 프리팹 단위로 관리한다..

MVVM 패턴

유니티 UI의 작업은 아티스트와 작업하다 보면 코드의 레퍼런스를 잃어버리는 경우가 매우 잦다..

여기서 말하는 레퍼런스란, 하이어라키에 드래그 앤 드롭으로 넣어둔 경우

이러한 문제 때문에 프로그래머가 레이아웃을 수정하게 되어버림

새로운 UI를 부담없이 추가하고 싶고, 이벤트를 잃어버리고 싶지 않음

즉, 디자이너가 유니티에서 직접 작업할 수 있도록 해야함

MVVM 패턴이란?

MVVM 패턴은 Model, View, ViewModel로 나뉜다.

여기서 View와 viewModel은 1:1로 매칭되어야 한다.

view와 viewModel은 직접적인 연결이 아닌 데이터 바인딩을 통해 연결된다.(간접)

viewModel이 망가질 때 view는 망가지지 않는다.

그에 반해 viewModel과 model은 직접적으로 연결되어 있다.(직접)

데이터를 전달하고 갱신하는 작업이 연결되어 있다.

장점

플레이 로직과 뷰의 구성 사이의 결합이 약해지고, 아티스트가 직접 유니티에서 작업이 가능하다.

프로그래머와 아티스트가 비동기로 작업이 가능해지면서 충돌이 줄어든다.

참조

https://www.youtube.com/watch?v=_jW_D2vF9J8&ab_channel=UnityKorea

댓글남기기

참고