[Unity] UI를 위한 UGUI 최적화 방안

Unity UI에서 사용하는 UGUI의 최적화 방안과 성능 향상을 위한 방안에 대해 알아보자.

 

Unity에서 UI 구성시 아직까지는 UGUI를 이용하여 UI 요소를 화면에 배치하고 화면을 구성하는 것이 일반적이다.

게임이나 앱이 대규모일수록 UI 구성도 많아지고 복잡해진다. 이럴 경우 디자이너와의 커뮤니케이션도 상당히 중요하다. 

디자이너와의 협업을 위해서는 반드시 유니티에서의 UI 최적화 방안에 대해 알고 커뮤니케이션하는 게 좋다.

 

UI 최적화의 가장 기본이 되는 것은 Unity Graphics의 Batches 및 SetPass calls 수치 값을 낮추는 게 중요하다.

Unity Statistics

Batches는 하나의 랜더링 돼야 하는 항목이 늘어날수록 하나씩 추가되며 SetPass calls는 같은 이미지라도 메터리얼이 달라질 경우 늘어나는 개념으로 생각하면 쉽다.

저사양 모바일 기기에서도 괜찮은 퍼포먼스로 랜더링 하려면 Batches가 100 이하로 유지하는 게 좋다.

 

1. Unity 공식 UI 최적화 Tip 활용하기

유니티 공식 페이지에서 제공하는 UGUI 최적화 방안을 우선적으로 참고하는 게 좋다.

UGUI 최적화 팁 바로가기

Unity UI optimization tips

 

요약하자면.

 - Canvas는 사용 항목에 맞게 잘 나눠야 한다. (팝업, 상점, 메인 UI 등 기능 별 구분하여 분리)

 - 물리 계산이 필요 없는 컴포넌트의 Graphic Raycast 항목 비활성 하기 ( Text, Image 컴포넌트의 Raycast Target 비활성)

 - Camera.Main 사용하지 않기 (카메라는 캐싱해서 사용하거나, SceneSpace -Overlay 사용 권장)

 - Layout Group Component 사용 최소화

 - UI도 오브젝트 풀링 활용하기

 - Canvas 비활성화 시 GameObject를 비활성화하는 것보다 컴포넌트를 비활성화하는 것을 추천

 - Animator 컴포넌트 사용 시 항상 변화하는 동적 요소에만 사용할 것

 

2. Mask 사용은 Shader로 대체하기

UI 구성에 있어 Masking을 사용해야 하는 경우가 상당히 많다. 이미지가 넘어가게 하지 않거나 특정 이미지 모양으로 나오게 하고 싶을 경우 Mask 컴포넌트를 통해 구현하는 것이 일반적이다. 하지만 Mask 컴포넌트는 SetPass calls를 상당히 많이 소모한다.

아래 그림을 보면 Mask 컴포넌트가 활성화 시 : Batches : 4, SetPass calls : 4 = 16 소모

Mask 컴포넌트 비활성 시 : Batches : 3, SetPass calls : 1 = 4 소모

약 4배의 퍼포먼스 저하가 발생한다.

01

Batches 변화 효과

따라서 Mask 사용을 최소화하고, 최대한 shader를 통한 Mask효과를 줄 수 있도록 개선해야 한다. shader로 mask를 할 경우 메터리얼을 공유하기 때문에 setpass call 수치를 줄일 수 있으며, 이미지도 2장 -> 1장만 사용하면 되기 때문에 Batches 수치 값도 줄일 수 있다.

Mask Shader를 구현하는 방법은 아래 글을 통해 예제를 볼 수 있다.

2D Circle Mask Shader 바로가기

[unity] 2D Circle Mask Shader

 

3. SpriteAtlas 사용하기

이미지는 항목별로 폴더를 만들고, 해당 폴더 안에 있는 UI 요소들을 SpriteAtlas를 사용하여 한 장의 이미지로 만들어 준다.

아래 이미지를 보면 4개의 이미지를 배치했을 때 Batches 값은 7이다.

Unity Image Batches

그럼 위에서 사용한 4장의 이미지를 SpriteAtlas로 한 장의 이미지로 만들어 준 후 테스트해보겠다.

Project 탭에서 마우스 우클릭 -> Create -> Sprite Atlas를 생성한 후 Image가 들어있는 폴더를 Drag 해서 넣어준다.

Sprite Atlas 설정

Project Settings의 Editor 항목의 Sprite Packer Mode를 Always Enable로 변경해준다.

Unity Sprite Packer 모드 설정

유니티에서 Play를 해보면, 스프라이트가 아틀라스 이미지로 Pack 진행되며 Batches가 7 -> 4로 내려가는 모습을 볼 수 있다.

즉 이미지 4장 그리는 부분을 1장으로 대체할 수 있게 된다.

Unity Sprite Atlas 결과 화면

 

4. Text 사용 시 TextMeshPro 사용하기

Unity에서 Text 구성 시 기본 Text와 Text-TextMeshPro를 선택할 수 있다.

TextMeshPro는 폰트 이미지를 Bake 하여 사용하는 개념으로 SpriteAtlas처럼 한 장의 폰트 이미지를 공유하여 텍스트를 랜더링 할 수 있다. 또한 자간 설정, Outline 처리, 해상도 저하 없음 등 기본 Text 대비 효율이 좋기 때문에 TextMeshPro의 사용을 권장한다.

사용 설치는 PackageManager에 TextMeshPro를 검색하여 설치할 수 있다.

 

5. Canvas 내에서 Instantiate 사용 최소화

Unity에서 UI Item을 동적으로 생성할 때 Instantiate 함수를 사용하여 캔버스 내 아이템들을 생성하는 경우가 많다. 이럴 경우, 캔버스가 다시 랜더링 되면서 순간 멈춤 현상 등이 발생할 수 있으며, Instantiate 함수는 비용이 큰 함수라 최대한 Canvas 내에서 사용을 자제해 주는 것이 좋다. 

필요시 항상 오브젝트 풀링 기법을 통해서 최소한으로 생성한 후 공유해서 사용하는 것이 좋다.

UI에서 오브젝트 풀링은 이전 포스팅 글을 참고하면 좋다.

2022.06.10 - [unity3d/Class] - [Unity] UI 재사용 스크롤뷰 제작

[Unity] UI 재사용 스크롤뷰 제작