[UnrealEngine] Common UI(일반 UI) 플러그인이란?

 

Lyra 프로젝트를 분석해보던 중에 Common UI이라는 플러그인을 기반으로 UI가 구성되어있는것을 확인했다.

이게 뭐고 왜 쓰는지에 대해 궁금해서 찾아보았는데, 에픽게임즈에서 개발하는 '포트나이트'에도 적용되어 있는 프레임워크로서 공식문서를 살펴보면,

https://docs.unrealengine.com/5.0/ko/overview-of-advanced-multiplatform-user-interfaces-with-common-ui-for-unreal-engine/

 

레이어, 서브메뉴, 팝업UI 등 다양한 UI 구조가 생기면서 이를 관리하기 위해 기반이 된것으로 보인다.

 

 

그 외에도, 크로스플랫폼을 지원하는 포트나이트가 입력 방식이 키보드 마우스(KBM)와 게임 패드 등으로 크게 나누어져 있고, 그 사용자 기기에 따라 UI 요소들이 변경되어야 한다고 한다.

 

https://docs.unrealengine.com/5.0/ko/overview-of-advanced-multiplatform-user-interfaces-with-common-ui-for-unreal-engine/

 

 

Common UI의 기능으로 레이어가 많은 다양한 종류의 UI들을 쉽게 생성하고, 선택할수 있고, 멀티 플랫폼에 대응하기 위함으로 보인다.

 

 

입력 라우팅(Input Routing)

핵심 개념 중 하나는 '입력 라우팅(Input Routing)'이라는걸 사용한다. 콘솔이나 pc는 입력에 따라 인터랙션이 결졍되는데, 입력 라우팅를 통해서 특정위젯이 있으면 키보드 마우스(KBM) 일경우에는 표시되는데, 게임패드라면 표시가 불필요한 경우가 있다.

예를 들면 

 

PC로 실행시

 

키보드 마우스(KBM) 일경우에는 "QUIT LYRA"라는 버튼이 필요하다. 마우스를 클릭해서 Lyra를 종료하는 기능인데, 게임패드를 사용하면 해당 버튼은 필요가 없어진다.

 

PS5 패드 입력시

게임패드를 이용하면 종료 옵션이 없어진다. 이 외에도 예를 들면  PS5 옵션에서는 창모드나 해상도 등을 지정할 수 없게 된다.

 

이런식으로 차이가 생기는걸 입력 라우팅을 통한다고 한다.

 

 

노드

https://docs.unrealengine.com/5.0/en-US/overview-of-advanced-multiplatform-user-interfaces-with-common-ui-for-unreal-engine/

 

- 이미지와 같이 Common UI는 틱당 한 번씩 상단에 페인팅된 노드의 트리를 찾은 다음 해당 트리의 루트 노드로 입력을 보냅니다. 그러면 해당 루트 위젯은 입력을 처리할 수 있는 트리 내의 첫 번째 리프(Child) 위젯으로 입력을 전달하고, 이 리프 위젯은 입력을 처리하거나 필요시 재전달한다.

 

 

 

활성화 가능 위젯( Activatable Widgets)

- Common UI 내에서는 특정 위젯만 입력 처리를 위해 노드로 변환되며, 입력을 처리할 수 있는 위젯만 입력을 수신합니다. 이러한 위젯은 활성화 가능 위젯(activatable widgets) 이라고 하며, 입력을 수신할 수 있을 때 활성상태 로 간주됩니다.

- 입력을 수신할 수 있는지 여부를 나타내는 활성 상태와 비활성 상태 간에 토글할 수 있습니다.

- 동일한 트리 내의 다른 활성화 가능 위젯으로 입력을 전달할 수 있습니다.

- 뒤로 가기 동작을 처리하는 경우처럼 상황에 따라 자동으로 비활성화될 수 있습니다.

 

유저가 현재 입력을 수신하고 있는 오버레이 UI를 닫는 경우 적합한 엘리먼트로 돌아가는 문제는 활성화 가능 위젯 (activatable widgets) 으로 쉽게 해결할 수 있습니다. 입력은 최상단에 페인팅된 트리로만 라우팅되므로 하단 UI 레이어에 있는 위젯도 문제없이 활성 상태로 둘 수 있습니다. 상단 레벨 UI가 닫히면 일반 UI는 그다음으로 최상단에 있는 UI 레이어의 활성 상태 위젯으로 입력을 라우팅합니다.

 

 

사용 방법 : https://docs.unrealengine.com/5.0/ko/common-ui-quickstart-guide-for-unreal-engine/

일반 UI 퀵스타트 가이드

 

 

참고자료 : 

https://www.youtube.com/watch?v=u06GAVxyIag&ab_channel=UnrealEngine