[UE][영상 참고 글]Unreal Engine에서 모듈식 & 확장 가능한 UI 시스템 만들기

원본 영상: https://www.youtube.com/watch?v=v9k-J2GeEKI

 

이 글을 해당 영상과 공식문서를 참조하여 정리한 글입니다. 해당 영상에 나오는 내용과 찾아본 내용들에 대해 정리하였습니다.

해당 영상에 따르면 영상 내용은 패턴, 철학, 설계 철학 중심이며, 구현 예시는 추후 별도 영상으로 제공 예정이라고 합니다.

 

 

UI 시스템이 점점 엉망이 되는 이유

많은 프로젝트에서 UI 시스템이 커지면서:

• 마스터 위젯이 모든 것을 관리.
• 작은 변경이 전체를 깨뜨리는 구조.
• 폰트나 색상 하나 바꾸는 것도 힘듦.

해당 영상은 모듈식, 확장 가능, 최적화된 UI 시스템 구현을 위한 모범 사례를 소개합니다.

---

Tip 1 — 재사용 가능한 Base Widget 만들기

문제점

• 프로젝트 전역 텍스트 색상 바꾸려면 하나하나 찾아야 함
• 누락, 실수 발생

해결

• 버튼, 텍스트, 보더 같은 자주 쓰는 위젯을 Base로 분리
• 인스턴스 속성으로 쉽게 조절 가능
• 변경이 있을 때 전체 위젯이 자동으로 반영됨

---

Tip 2 — Named Slot으로 UI 템플릿 만들기

사례

여러 화면이 비슷한 구조를 가질 때

• 일반적으로 복붙함 → 유지보수 어려움

해결

• 공통 구조(Base Panel) + Named Slot
• Named Slot에는 각 화면마다 다른 내용만 넣기

---

Tip 3 — 레이어별로 UI 관리

문제점

• 예를 들어 인벤토리, 퀘스트, 메뉴, 다이얼로그 등이 하나의 위젯에서 서로 Visibility를 변경→ 복잡도 증가

해결

레이어 구조

레이어 이름 용도

Game Layer	HUD, 항상 보이는 위젯
Game Menu Layer	인벤/퀘/기능 메뉴
Menu Layer	게임 플레이 외 메뉴 (옵션, 인트로)
Modal Layer	팝업/다이얼로그

• UI Manager로 Push/Pop 관리
• 서로를 참조할 필요 없음

---

Tip 4 — UI 데이터를 분리된 객체로 관리

문제 1 — 함수 바인딩

• 매 프레임 호출 → 성능 ↓

문제 2 — 게임 코드와 UI 의존성

• 위젯이 게임컴포넌트를 직접 참조 → 결합도 ↑

해결

• ViewModel 플러그인으로 같은 중간 데이터 객체 생성
• *교육 참고 자료 : https://dev.epicgames.com/community/learning/tutorials/KW0d/unreal-engine-mvvm-ui
• 게임 로직 → Data 변경 → UI는 이벤트로 업데이트

공식 문서 참고 : https://dev.epicgames.com/documentation/ko-kr/unreal-engine/optimization-guidelines-for-umg-in-unreal-engine

 

 

---

UI 최적화 체크 포인트

• 위젯 생성 호출 빈도
• 프레임당 보이는 위젯 수
• 위젯 트리의 깊이
• 사용된 텍스처 크기

항상 프로파일링 먼저 하고 최적화를 적용할 것

---

Tip 5 — InvalidationBox로 캐싱

- 매 프레임 레이아웃 재계산은 비효율.

- 변경이 있을 때만 업데이트

 

InvalidationBox란?

공식 문서 참고 : https://dev.epicgames.com/documentation/ko-kr/unreal-engine/optimization-guidelines-for-umg-in-unreal-engine

 

---

Tip 6 — 머티리얼로 애니메이션 처리

일반 Sequencer 애니메이션 문제점

• CPU 실행
• 복잡 애니메이션 제한적

머티리얼 애니메이션

• GPU에서 실행
• 레이아웃 재계산 제외
• 더 복잡한 시각 효과 구현 가능

공식 문서 참고 : https://dev.epicgames.com/documentation/ko-kr/unreal-engine/optimization-guidelines-for-umg-in-unreal-engine

 

---

Tip 7 — 위젯 생성/제거 vs 숨기기

규칙

UI 사용 빈도 처리 방식. *해당 빈도의 기준 프로젝트마다 다를 것으로 예상.

자주 사용하는 UI	숨기고 유지(load but hidden)
간헐적인 사용 UI	필요 시 생성 후 제거

---

Tip 8 — UI 숨길 때는 Hidden대신 Collapsed 사용하자.

- Hidden: 화면에 숨겨지더라도 레이아웃 계산은 유지됨.

- Collapse: 레이아웃에서 완전히 제외 → 성능 향상

 

---

Tip 9 — NotHitTestable 사용

UMG에서 Hit Test란 마우스 클릭, 터치,터치, 호버 판정 등 을 위해 어떤 위젯이 입력을 받을 수 있는지 계산하는 과정이다.

NotHitTestable 사용시 이 위젯 자체에 대해 입력 판정을 안 한다는 것이다.(시각적인 렌더링은 수행) 

즉 보이기만하고 상호작용 필요 없는 UI에 적용 필요.

• 즉 히트 테스트 계산에 대한 비용 절약.

---

Tip 10 — Canvas Panel 남용하지 않기

• Draw Call 증가 원인.
• 대신 Grid + Nudge로 위치 조정.

공식 문서 참고 : https://dev.epicgames.com/documentation/ko-kr/unreal-engine/optimization-guidelines-for-umg-in-unreal-engine

---

Tip 11 — Spacer를 SizeBox 대신

• SizeBox는 복잡한 계산
• Spacer는 가벼운 공간 처리

공식 문서 참고 : https://dev.epicgames.com/documentation/ko-kr/unreal-engine/optimization-guidelines-for-umg-in-unreal-engine

---

Tip 12 — SoftReference 사용

문제

• 배열로 캐릭터 클래스를 직접 UMG UI 클래스 멤버변수로 보관하면 모든 참조 자원 메모리 로딩.

해결

• SoftReference → 필요할 때 로딩

---

Tip 13 — 커스텀 아이콘 폰트 고려

• GDC 사례: 아이콘 텍스처 → 폰트로 대체
• 텍스처 메모리 절약 효과 큼

-> 제작 방법 이론상으로  아이콘 이미지를 폰트로 만든 뒤, 만들어진 TTF(폰트파일)를 언리얼에 임포트 하고 필요한 TextBlock에 해당 폰트를 적용해 glyph를 사용한다.

 

---

Tip 14 — SMeshWidget 활용

일반 Widget Component 단점

• 화면 렌더 → 텍스처 타겟 → 비용 증가

SMesh Widget

• 하나의 Draw Call로 여러 인스턴스 렌더
• UI 효율 크게 향상

 

참고 : https://github.com/YawLighthouse/UMG-Slate-Compendium?tab=readme-ov-file

 

해당 글을 번역하면 

Widget Component는 프로토타이핑이나 월드 공간에 표시되는 VR/AR UI에 매우 유용하다. 하지만 화면 크기, 레이아웃 제어 로직 등을 유지하면서 UI를 월드 안에 배치하려는 경우에는 적합하지 않다.
일반적으로 Widget Component는 텍스처 예산이 충분할 때 사용하는 것이 좋다. 각 Widget Component는 내부적으로 렌더 타깃 텍스처가 적용된 정적 메시 평면(static mesh plane)이며, 슬롯 0의 머티리얼에 해당 텍스처가 적용된다.
Widget Component 하나당:
UMG 위젯 오브젝트가 생성되고 그 위젯이 텍스처로 렌더링되어 월드에 표시된다.
이 때문에 (VR/AR을 제외하고) Widget Component를 과도하게 사용하는 것은 텍스처 메모리 사용량 측면에서 권장되지 않는다.

대안: SMeshWidget
대안으로는 더 복잡하지만, 여러 “위젯”을 한 번에 렌더링하는 커스텀 Slate 위젯을 만드는 방법이 있다. 이때 사용할 수 있는 것이 SMeshWidget이다.
SMeshWidget는 위젯당 1 드로우 콜로 렌더링 가능 단, 여러 UI 요소를 하나의 텍스처처럼 그릴 수 있는 기술 아트 역량이 필요함

SMeshWidget란?
SMeshWidget는 단일 드로우 콜 렌더링이 가능한 Slate 위젯이다. Paragon에서는 화면에 표시되는 상태 바와 아이콘을 그리는 데 사용되었다.
매우 강력하지만 코드로 UI 요소를 직접 그리는 방식에 대한 이해가 필요해 실제 프로젝트에서 자주 사용되지는 않는다

또한 SMeshWidget는:
텍스처나 파티클에만 한정되지 않고 3D 모델, 메시 등 원하는 어떤 렌더링 대상에도 사용 가능하다.

참고 자료
Nick Darnell UE4에서 SMeshWidget로 파티클을 그리는 예제 제공 Dan Treble 해당 예제 프로젝트를 GitHub 저장소로 정리 Carey Hickling Unreal Fest 발표 “Optimizing and Building UI for AAA Games” → SMeshWidget의 장단점 설명


추가로 참고할 만한 예제
Epic의 Lyra 샘플 프로젝트의 Indicator 시스템:
SActorCanvas.h / .cpp
IndicatorLayer.h /. cpp
IActorIndicatorWidget.h /. cpp
IndicatorDescription.h / .cpp
IndicatorLibrary.h / .cpp
LyraIndicatorManagerComponent.h / .cpp

 

적용 예시) 

 

 

1. WidgetComponent 사용시 

출처 : https://www.youtube.com/watch?v=v9k-J2GeEKI

 

2. SMeshWidget 사용시

출처 : https://www.youtube.com/watch?v=v9k-J2GeEKI

 

SlateUI 및 Total의 값이 확연히 줄어든 걸 볼 수 있다.

---

 

요약

모듈식 UI 설계 핵심

• Base Widgets로 공통 UI 추상화
• 레이어 구조로 UI 분리
• 데이터와 UI 의존 분리
• 필요에 따른 위젯 로딩/제거 전략
• 최적화 포인트 체크 및 개선

 

공식문서 : 

https://dev.epicgames.com/documentation/ko-kr/unreal-engine/optimization-guidelines-for-umg-in-unreal-engine