[Unity] 게임 UI를 관리하기 위한 Stack 시스템

게임 UI ( User Interface )

: 게임과 유저 사이의 의사소통을 위해 제공하는 물리적 가상적 매개체로 가시적으로 보이는 화면 ( 버튼, 스크롤 등)과 터치, 드래그와 같은 조작 방법을 이야기 한다.

▶ 터치, 드래그와 같은 사용자의 조작은 Unity 시스템적으로 처리가 되고 기본적인 버튼,  스크롤과 같은 UI 요소들도 Unity UGUI를 통해 제공되고 있다.

▶ 개발자는 Unity가 제공하는 요소들을 통해 유저에게 어떻게 UI를 보여줄지, 시스템적으로는 어떻게 관리해야 될 지를 생각해야한다.

▶ UI 요소들을 조합하여 하나의 장면으로 만들 때 2가지 상태로 정의할 수 있다.

1. 풀 화면 

: 하나의 장면이 스크린에 꽉 채워지는 형태를 말한다.

[ 브롤스타즈 풀 화면 ]

2. 팝업 화면 ( 팝업 : 갑자기 툭 튀어 나오는 이라는 뜻을 가짐 )

: 하나의 장면이 기존 화면 위에 팝업으로 뜨는 형태를 말한다.

[ 브롤스타즈 팝업 화면 ]

▶ 게임에서는 화면 단위로 UI를 제공하고 컨트롤 함으로써 유저와의 상호작용이 일어난다.

: 타이틀 화면에서 게임 스타트 버튼을 눌러서 게임에 들어가는 것, 로비 화면에서 버튼을 눌러서 게임을 시작하는 것 등 게임의 시작부터 끝까지 모두 화면으로 시작해서 화면으로 끝나는 것을 알 수 있다.

어떻게 게임에서는 이런 화면 단위를 관리해야하는가?

: Android에서 Activity를 관리하는 방식을 생각한다면 쉽게 UI를 어떻게 관리할지 알 수 있다.

[ https://developer.android.com/guide/components/activities/tasks-and-back-stack?hl=ko ]

: Android에서는 Activity ( = 하나의 화면이라고 할 수 있는데) 를 관리할 때에 Stack 구조를 사용하여 관리한다.

● Stack 이란?

: Last-In-First-Out 형태의 데이터 구조

: 위의 그림에서 볼 수 있듯이 Activity 1이 있는 상태에서 Activity 2가 들어오면 Activity 1 위에 쌓이고, Activity 3이 들어오면 Acivitiy 2 위에 쌓이는 형태에서, Back 버튼을 누르면 가장 위에 있는 Activity3 이 없어지는 것을 볼 수 있다.

● 게임 UI에 Stack 구조를 적용 한다면 어떤 모습이 되는가. 

: 예를 들어 킹오파 익스트림 매치의 플로우를 본다면

1. 로비 화면 ( 풀 화면 )

2. 로비에서 스테이지 버튼 클릭 -> 스테이지 화면 ( 풀 화면 )

3. 스테이지 화면에서 스테이지 선택 -> 스테이지 정보 화면 ( 팝업 화면 )

4. 스테이지 정보 화면에서 순위 버튼 선택 -> 순위 화면 ( 팝업 화면 )

5. 순위 화면을 닫은 경우 ( 3번 화면으로 이동 )

6. 스테이지 정보 화면을 닫은 경우 ( 2번 화면으로 이동 )

7. 스테이지 화면을 닫은 경우 ( 1번 화면으로 이동 )

: 위의 플로우를 도식화 한다면 다음과 같다.

: 유저의 상호작용에 의해 변화되는 화면이 안드로이드의 Activity 관리 ( Stack )와 동일함을 알 수 있다. 

● 모든 화면을 Stack으로만 관리한다면 UI를 쉽게 관리할 수 있을까.

▶ Stack만으로는 게임의 로직에 맞는 화면 구성을 할 수 없다. 

▶ 위에서 정의한 풀 화면 또는 팝업 화면에 따라 관리하는 방식에 약간의 차이가 있기 때문에 해당 부분을 처리해 주어야 한다.

: 풀 화면이 2개 이상 쌓여있는 경우, 가장 최상단의 풀 화면만을 볼 수 있기 때문에 하위의 풀화면은 최적화를 위해 숨김 처리를 해주어야 한다.

: 팝업 화면이 2개 이상 쌓여있는 경우도 팝업 화면의 집중도를 위해 최상단의 팝업 화면을 제외한 하위의 팝업 화면은 최적화를 위해 숨김 처리를 해주어야 한다.

: 킹오파 익스트림 매치, 브롤스타즈 등의 게임에서 화면이 어떻게 처리되고 있는지를 보면 위와 같이 처리됨을 알 수 있다.

참고자료 : https://developer.android.com/guide/components/activities/tasks-and-back-stack?hl=ko

작업 및 백 스택 이해  |  Android 개발자  |  Android Developers