UI의 이해와 게임 최적화 이론
개요
UI(User Interface)는 게임의 사용자가 게임에 가장 직접적으로 마주하는 첫 번째 상호작용 요소이다. 게임을 떠나 어떤 프로그램이든 UI가 존재하고, 사용자는 UI에 가장 민감하다고 표현해도 무방하다.
프로그래머로서 우리는 UI가 화면에 그려지는 과정을 이해하고 알맞은 최적화 방법을 추론할 수 있어야 한다. 따라서 유니티에서 UI가 생성될 때 어떤 요소로 구성되어 있고, 이를 적은 연산으로 최대의 효율을 낼 수 있도록 고민을 해야할 것이다.
cf) UGUI / NGUI
UGUI가 없던 시절 NGUI를 통해 오로지 스크립트로만 UI를 구현을 했다. 따라서 적은 리소스를 활용하는 경량화된 게임에서 NGUI를 사용하지만, 대부분의 게임의 경우 현재 Unity에서 제공하는 UGUI를 사용한다.
게임 UI 구성요소
유저는 UI를 통해 프로그램으로부터 원하는 결과를 얻는다. 따라서 UI는 사용 환경에 따라 다양한 해상도에 유연하게 적용되어야하며, 이는 UI를 구성함에 있어 가장 핵심적인 요소이다. 하지만 UI 구조를 효과적으로 설계하고 적용하는 것은 생각보다 어려운 일이며 추후의 유지보수, 업데이트와 같은 확장성을 고려한 객체 지향적 설계가 적용되어야하는 중요한 요소이다.
Canvas
Image나 Text 등의 UI 요소들을 하위 객체로 가지는 기본 요소로 도화지 역할을 한다.
-
Render Mode
- Overray : Canvas가 월드와 별개로 존재하여 별도의 공간을 사용하는 모드
- camera : Main Camera를 기준으로 카메라 앞에 Canvas가 위치하며 월드와 공간을 공유하는 모드
- World Space : Canvas가 월드 상에 존재하며, 게임 오브젝트와 동일하게 다루는 모드
-
UI Scale Mode(Canvas Scaler)
- Constant Pixel Size : pixel의 수로 UI의 크기를 조절하는 모드. 화면 해상도가 달라져도 UI의 크기는 동일하다.(해상도가 커지면 작게 보인다.)
- Scale With Screen Size : Canvas 크기의 일정 비율로 UI의 크기를 조절하는 모드. 화면 해상도에 따라 UI의 크기가 달라진다.(해상도가 커져도 동일하게 보인다.)
-
Graphic Raycaster
Rect Transform
- Width / Height : 가로 / 세로 크기
- Anchor : UI 요소의 위치 기준이 되는 Canvas 월드 좌표 - Canvas의 좌측하단 : (0, 0) / 우측 상단 : (1, 1)
- Pivot : UI 요소의 회전 및 확대/축소 기준이 되는 로컬 좌표 - UI 요소의 좌측하단 : (0, 0) 우측 상단 : (1, 1)
다중 Canvas
Unity에서 UI를 관리할 때는 하나의 Canvas가 아닌 여러 개의 Canvas를 동시에 활용하기도 한다.
1. UI 업데이트 빈도가 다른 경우
Canvas는 내부적으로 UI 요소가 변경될 때 전체 레이아웃을 다시 계산한다. 따라서 자주 변경되는 UI와 잘 바뀌지 않는 UI요소를 분리하여 서로 다른 Canvas로 관리하는 것이 비용을 최소화시킬 수 있다.
2. 화면 우선순위 및 UI 계층 분리
여러 Canvas를 사용할 경우 Sorting Order를 설정해서 UI 계층을 강제할 수 있다. 따라서 렌더링 순서를 조절하여 어떤 UI 요소를 더 위에 위치시킬지를 다중 Canvas를 통해 쉽게 설정이 가능하다.
3. 렌더링 방식이 다른 경우
위에서 설명한 Render Mode가 다른 UI 요소가 함께 존재하는 경우 별도의 Canvas가 필요하다. 따라서 Overray Mode와 World Space Mode를 함께 사용하는 경우 다중 Canvas로 구현한다.
4. 독립적인 UI 시스템
게임 전반적으로 유지되는 UI와 씬에서만 존재하는 UI를 구분하는 경우에도 Canvas를 나누어 관리한다. DontDestroyOnLoad로 유지되는 UI 요소들과 씬에 종속된 UI를 구분하여 서로 다른 Canvas로 구성하는 것이다.
Layout Component
Grid Layout Group
하위 UI 요소들을 더욱 편리하게 배치할 수 있도록 도움을 주는 Layout 컴포넌트이다.
- Padding : 테두리 여백 공간
- Spacing : 하위 UI 요소들 사이 공간
- Cell Size : 하위 UI 요소 크기
Content Size Fitter
하위 UI 요소들에 의해 상위 UI 요소의 크기가 결정되도록 하는 컴포넌트이다.
- Vertival Fit : 상위 UI 요소의 수직 크기를 결정
- Horizontal Fit : 상위 UI 요소의 수평 크기를 결정
Layout Element
하위 UI 요소 중 하나여도 Layout 설정에 대해 예외사항을 설정할 때 사용하는 컴포넌트이다.
- Ignore Layout : 하위 UI 요소들에 대한 Layout 설정을 무시하고 개별적인 크기와 위치를 갖는다.
