유니티의 UI 시스템(uGUI)에 대해 조금 알아보기

서론

어느 VR 게임의 프로젝트를 최적화 작업을 하던 도중, UI가 무겁다는 사실을 알게 되었다

(무거운 이유는 기회가 있다면 따로 작성하려고 한다)

 

하지만 문제는 필자 자신이 아직 유니티의 UI에 대해서 잘 모른다는 것!

…사실 UI 자체를 잘 모른다는 느낌도 든다

아무튼 최적화 작업을 위해 우선 유니티의 UI 시스템에 대해 공부하기로 했다

 

참고로 Unity에는 UI 툴킷, Unity UI 패키지(uGUI), IMGUI라는 3개의 UI 시스템이 있다고 한다

사용자 인터페이스(UI) 생성 - Unity 매뉴얼

사용자 인터페이스(UI) 생성 - Unity 매뉴얼

UI 툴킷이 Unity의 최신 UI 시스템이라고 하지만, 여기서 공부할 것은 Unity UI 패키지(uGUI)이다

이유는 현재 작업 중인 프로젝트가 Unity UI 패키지(uGUI)이기 때문…

그리고 Unity(2021.3)에서의 UI 툴킷은 World-space rendering를 아직 지원하지 않는다는 점도 있다

---

캔버스(Canvas)

캔버스는 모든 UI 요소가 있어야 하는 영역이다

UI 요소는 이러한 캔버스의 자식으로 설정해야 한다고 한다

Canvas | Unity UI | 1.0.0

Canvas | Unity UI | 1.0.0

 

예를 들어 GameObject > UI > Image로 UI를 만들 때, 캔버스가 없다면 자동으로 캔버스가 생성되고, 자식으로 Image 컴포넌트를 지닌 UI가 생성된다

(EventSytem도 없으면 생성된다)

 

캔버스에는 Rect Transform, Canvas, Canvas Scaler, Graphic Raycaster와 같은 컴포넌트가 디폴트로 붙어있다

Rect Transform는 일반적인 Transform 컴포넌트 대신에 사용되는 UI 시스템 전용 트랜스폼 컴포넌트라고 생각하면 될 것 같다

앵커와 피벗 같은 기능도 있지만 이미 좋은 글들이 많기도 하고, 지금 작업과 크게 관련이 없어서 생략

 

Canvas는 캔버스의 본체(?)이며, Render Modes를 변경할 수 있다

참고로 일반적인 3D 게임(2D는 말할 것도 없고)의 대부분의 UI는 Screen Space - Overlay 모드로 충분하지만, VR 게임에서는 World Space 모드로 설정하는 경우가 대부분이다

 

Canvas Scaler는 Canvas 내의 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하기 위해서 사용하는 컴포넌트라고 한다

이것도 일단 생략

 

Graphic Raycaster는 캔버스에 대해 레이캐스트하는 데 사용하기 위한 컴포넌트이다

---

Image

GameObject > UI > Image로 만들 수 있는 UI 요소 중 하나이다

이름 그대로 이미지를 표시하는 UI이며, Texture Type이 Sprite인 이미지를 설정할 수 있다

그 외에도 Color나 Material를 설정할 수 있고, Mask 컴포넌트를 이용해서 특정 부분만 보이도록 설정할 수도 있다

---

TextMeshPro(TMP) UI

UI에 텍스트를 표시하기 위해 주로 사용되는 컴포넌트 중 하나이다

(없으면 Package Manager에서 추가할 수 있다)

---

EventSytem

이벤트 시스템은 키보드, 마우스, 터치 등의 입력을 UI 오브젝트 등에게 이벤트를 전송해주는 시스템이다

Event Sytem은 캔버스를 생성할 때 같이 생성되며, 하나의 씬에 하나만 존재해야 한다

(강제로 추가할 경우 경고가 발생함)

 

일반적으로 Event Sytem에는 Input System UI Input Module라는 컴포넌트가 있고, Canvas에는 Graphic Raycaster라는 컴포넌트가 붙어 있으며, 이 컴포넌트들이 입력과 UI에 대한 상호작용을 처리한다

 

다만 VR에서는 입력이 특수하기 때문에 SDK의 컴포넌트로 대체하는 경우도 있다

Oculus의 경우에는 각각에 대응하는 컴포넌트로 OVR Input Module하고 OVR Raycaster 등이 있다

 

물론 커스텀으로 구현하는 경우도 있다

예를 들어 Tracked Pose Driver 컴포넌트와 Input Action 등으로 입력을 받고, 라인과 콜라이더를 이용해서 UI와 상호 작용하는 등…

---

마무리

많은 부분을 생략하긴 했지만 최적화 작업에 필요한 부분만 정리해봤다

다행히 좋은 글이 많았기 때문에 실제로 필요할 때 다시 조사해서 사용하면 될 것 같다

다음은 시간이 된다면 VR에서의 UI 최적화에 대해서 정리해보고자 한다

---

참고 사이트

Unity UI: Unity User Interface | Unity UI | 1.0.0

Unity UI: Unity User Interface | Unity UI | 1.0.0

Unity C# > UI 캔버스

Unity C# > UI 캔버스