[Unity 최적화] UGUI 최적화

✍️ 개요

 

이번 글에서는 Unity UGUI와 관련하여 최적화하는 방법을 소개하도록 하겠습니다.

 

주로 현업에서 자주 사용하는 Text 또는 Image와 같은 컴포넌트 최적화에 대해 살펴보고,

 

어떤 컴포넌트는 지양해야 하는 지 등 컴포넌트 관련 최적화 방법을 살펴보겠습니다. 

 

 

 

[ UI 시스템 설계 참고 ]

[Unity 최적화] UI 시스템 설계

 

UI 시스템 설계의 내용을 일부 포함하고 있습니다.

 

이번 포스터에서는 설계보다는 콘텐츠 개발 입장에서 최적화하는 법을 살펴보겠습니다.

 

 

 

 

 

---

📌 Canvas 관련

 

 

Render Mode에서 Overlay가 Camera보다 성능이 더 좋습니다.

 

Camera 모드는 컬링과 깊이 정렬 연산이 추가되기 때문입니다.

 

다만, Overlay는 Camera보다 항상 우선 순위가 높기 때문에 상황에 맞춰 선택하시면 됩니다.

 

 

 

Camera 모드에서 Render Camera을 None으로 두지 마세요.

 

만약 None이라면 내부적으로 Camera.main을 호출하기 때문입니다.

 

이 호출은 전체 씬을 탐색하여 Camera를 탐색하기 때문에 오버헤드가 발생합니다.

 

 

 

 

Pixel Perfect을 선택 해제합니다.

 

Pixel Perfect을 선택하면 픽셀 아트를 선명하고 안정적인 모션을 구현할 수 있습니다.

 

다만, UI 요소의 RectTransform이 변경되면 모든 UI 요소의 정점을 재계산합니다.

 

특히 Slider UI 요소처럼 동적인 요소는 치명적인 성능 하락을 유발할 수 있습니다.

 

 

 

 

사용자 입력이 없는 경우 Graphic Raycaster 컴포넌트를 삭제합니다.

 

Graphic Raycaster 컴포넌트는 모든 UI 요소의 RectTransform 범위를 체크하고,

 

사용자 입력을 입력 이벤트로 변환하는 처리를 수행하기에 오버헤드가 발생합니다.

 

 

 

 

Canvas를 정적인 상태와 동적인 상태의 여러 Canvas로 분할합니다.

 

Canvas 내부의 UI 요소 중 단 하나라도 위치나 크기가 변경된다면 Dirty Flag가 발생합니다.

 

이때, 변경된 UI 요소 뿐만 아니라 모든 UI 요소에 대해 메시를 재구축하는 과정을 거칩니다.

 

따라서 정적인 상태와 동적인 상태로 Canvas를 나누는 것이 성능에 좋습니다.

 

 

 

 

 

---

📌 Text 관련

 

 

태그를 사용하지 않는다면 Rich Text을 선택 해제합니다.

 

Rich Text은 <b>, <color>와 같은 동적 스타일링이 가능하도록 만들어줍니다.

 

하지만 이 기능은 성능에 영향을 미치므로 사용하지 않는다면 끄는 것이 좋습니다.

 

 

 

 

고정된 크기를 가진다면 Auto Size을 선택 해제합니다.

 

Auto Size는 Size 별로 폰트 이미지 아틀라스를 동적으로 생성합니다.

 

따라서 성능이 저하되고 메모리 사용량이 증가할 수 있습니다.

 

 

 

 

사용자 입력을 받지 않는다면 Raycast Target을 선택 해제합니다.

 

Graphic Raycaster의 불필요한 탐색 처리를 생략할 수 있습니다.

 

 

 

 

 

---

📌 Image 관련

 

 

Source Image를 'None'으로 설정하지 않는게 좋습니다.

 

None으로 설정하면 드로우 콜(Draw Call)이 증가합니다.

 

None 대신에 현재 씬에서 사용되는 Sprite Atlas 이미지를 넣어줍니다.

 

 

 

 

사용자 입력을 받지 않는다면 Raycaster Target을 선택 해제합니다.

 

다만, Button 같은 OnClick 입력 이벤트를 받아야 하는 경우에는 선택합니다.

 

 

 

 

 

---

📌 Layout Group 관련

 

 

Layout Group 관련 컴포넌트 사용을 지양합니다.

 

예를 들어, Vertical Layout Group, Horizontal Layout Group, Grid Layout Group 등이 있습니다.

 

Layout Group은 RectTransform이 변경할 때마다 Dirty Flag가 발생합니다.

 

이때, 내부적으로 자식 UI 요소들에 대해 GetComponent를 사용하며 성능에 영향을 줍니다.

 

하지만 Layout Group을 사용하지 않으면 불편한 점이 많기 때문에 쓰지 않을 수 없습니다.

 

그래서 동적으로 움직이는 경우에 컴포넌트를 비활성화/활성화하는 방법을 선택할 수 있습니다.

 

 

 

 

 

---

📌 그 외 관련

 

 

UI에 Animator 컴포넌트를 활용하는 것을 피하는게 좋습니다.

 

Key Frame마다 위 함수가 호출되어 Dirty Flag가 발생하며 메시를 재구축합니다.

 

그렇기 때문에 항상 동적으로 변경되는 UI에만 Animator을 적용하고,

 

이벤트로 반응하는 버튼에는 DoTween 같은 트위닝 시스템을 사용합니다.

 

 

 

Full Scene UI가 Overlay되고 있다면 카메라가 빈 공간을 비추도록 합니다.

 

화면 전체를 UI가 덮는 경우에는 씬 상에 존재하는 오브젝트를 렌더링할 필요가 없기 때문입니다.

 

 

 

Text 대신에 Icon으로 대체하도록 합니다.

 

Text을 Image와 같이 사용하면 Batch가 증가하기 때문입니다.

 

다국어 처리에도 효과적인 방법입니다.

 

 

 

---

📝 정리

 

Unity UGUI 최적화 방법

• Canvas 관련
  • Overlay 모드가 Camera 모드보다 빠름
  • Camera 모드에서 Render Camera 'None' 설정 X
  • Pixel Perfect 필요 없을 시 해제
  • 사용자 입력이 필요 없을 시 Graphic Raycaster 컴포넌트 삭제
  • Canvas 여러 개로 분할 (정적 & 동적)
• Text 관련
  • Rich Text 필요 없을 시 해제
  • Auto Size 필요 없을 시 사용 X
  • Raycast Target 필요 없을 시 해제
• Image 관련
  • Sprite 'None' 설정 X
  • Raycaster Target 필요 없을 시 해제
• Layout Group 사용 관련
  • Layout Group 사용 지양
  • 사용이 불가피한 경우, 동적인 상황에선 컴포넌트 비활성화/활성화 처리
• 그 외 관련
  • Animator 사용 지양
  • Full Scene UI의 경우 카메라 돌리기
  • Text 대신에 Icon으로 대체