범용 UI(Common UI) 는 레이어, 서브 메뉴, 팝업이 있는 메뉴처럼 내비게이션이 복잡한 크로스 플랫폼 UI를 개발하는 데 도움이 됩니다. 원래는 포트나이트(Fortnite) UI를 위해 개발된 이 플러그인은 언리얼 엔진 사용자도 플러그인(Plugins) 메뉴를 통해 이용할 수 있습니다. 이 페이지에서는 범용 UI가 어떤 사용 사례를 다루기 위해 설계되었으며 그러한 설계를 뒷받침하는 주요 개념에 대해 자세히 알아봅니다.
범용 UI로 해결할 수 있는 문제
멀티 레이어 메뉴 탐색
아래 이미지는 복잡한 메뉴의 예시를 보여줍니다.
위의 UI는 백그라운드에서 탭한 UI 상단에 오버레이된 두 개의 블레이드 메뉴를 보여줍니다. 백그라운드 UI는 계속해서 보이지만, 상단 레이어가 있으면 인터랙션할 수 없습니다. 이러한 선택적 인터랙션은 어떻게 구현해야 할까요?
한편, 입력 방법은 플랫폼과 컨트롤러마다 달라질 수 있습니다. PC 사용자는 마우스 커서로 클릭하여 상단의 UI 엘리먼트를 선택합니다. 그러나 콘솔 사용자는 카디널 내비게이션 기능을 사용하거나 버튼을 눌러 UI 엘리먼트를 선택합니다. 콘솔, PC 등 여러 플랫폼에서 작동하는 UI는 어떻게 만들 수 있을까요?
적합한 엘리먼트로 돌아가기
사용자가 위의 이미지와 같은 팝업을 본 다음 닫았다고 가정해 보겠습니다. 이 경우 UI는 카디널 내비게이션에 적합한 엘리먼트로 어떻게 돌아갈 수 있을까요? 팝업 아래의 오버레이 UI가 닫혔다면 다시 돌아갈 곳을 찾아야 합니다. 이 문제의 해결책은 다양한 상황에 적용할 수 있어야 합니다.
콘솔별 UI 엘리먼트
위의 이미지에서 UI는 인터랙션별로 누를 버튼을 표시합니다. 그러나 이러한 버튼 아이콘은 콘솔마다 다릅니다. 콘솔별 UI 엘리먼트와 상관없는 UI는 어떻게 만들 수 있을까요?
범용 UI의 기능
범용 UI의 기능은 위에서 다룬 문제를 해결하기 위해 설계되었습니다. 범용 UI를 활용하면 다음이 지원됩니다.
-
레이어가 많은 다채로운 UI를 쉽게 생성할 수 있는 선택적 위젯 인터랙션
-
멀티플랫폼 콘솔 및 PC 지원
-
콘솔 관리 기능:
-
카디널 내비게이션 관리(브레드크럼브 및 히스토리 포함)
-
콘솔별 UI 엘리먼트 관리
-
핵심 개념
이 섹션에서는 범용 UI의 설계와 주요 기능에 대해 설명합니다.
입력 라우팅
콘솔과 PC에서는 입력에 따라 인터랙션이 결정됩니다. 선택적 인터랙션 을 구현하기 위해 범용 UI는 입력 라우팅(Input Routing) 을 사용합니다. 입력 라우팅을 사용하면 주어진 시간에 특정 위젯만 마우스 입력이나 게임패드 입력을 수신하도록 허용할 수 있습니다.
입력 라우팅을 사용하면 여러 위젯에 입력을 선택적으로 배포할 수도 있습니다. 예를 들어 위의 이미지에서 범퍼 버튼은 항상 상단의 탭 위젯으로 라우팅되지만, 'X' 액션 버튼은 카디널 내비게이션을 통해 현재 선택된 위젯으로 라우팅됩니다.
자세한 내용은 범용 UI 소스 코드의 CommonGameViewportClient.h 및 CommonUIActionRouterBase.h 를 참조하세요.
노드
범용 UI는 시각적으로 렌더링된 상단의 UI 위젯에 입력을 라우팅합니다. 또한 위젯을 노드 로 변환하여 논리적 비주얼 계층구조에 따라 입력 라우팅을 처리합니다.
노드는 몇 가지 예외를 제외하고 슬레이트 계층구조와 일치하는 트리로 구성됩니다. 각 트리는 보통 뷰포트에 직접 배치된 위젯으로 표현되는 루트 노드, 그리고 보통 버튼 같은 개별 UI 엘리먼트로 표현되는 리프 노드로 구성됩니다.
범용 UI는 틱당 한 번씩 다른 트리보다 상단에 페인팅된 노드의 트리를 찾은 다음 해당 트리의 루트 노드로 입력을 보냅니다. 그러면 해당 루트 위젯은 입력을 처리할 수 있는 트리 내의 첫 번째 리프 위젯으로 입력을 전달하고, 이 리프 위젯은 입력을 처리하거나 필요시 재전달합니다.
자세한 내용은 UIActionRouterTypes.h 를 참조하세요.
활성화 가능 위젯
범용 UI 내에서는 특정 위젯만 입력 처리를 위해 노드로 변환되며, 입력을 처리할 수 있는 위젯만 입력을 수신합니다. 이러한 위젯은 활성화 가능 위젯 이라고 하며, 입력을 수신할 수 있을 때 활성 상태 로 간주됩니다.
활성화 가능 위젯:
-
입력을 수신할 수 있는지 여부를 나타내는 활성 상태와 비활성 상태 간에 토글할 수 있습니다.
-
동일한 트리 내의 다른 활성화 가능 위젯으로 입력을 전달할 수 있습니다.
-
뒤로 가기 동작을 처리하는 경우처럼 상황에 따라 자동으로 비활성화될 수 있습니다.
사용자가 현재 입력을 수신하고 있는 오버레이 UI를 닫는 경우 적합한 엘리먼트로 돌아가는 문제는 활성화 가능 위젯으로 쉽게 해결할 수 있습니다. 입력은 최상단에 페인팅된 트리로만 라우팅되므로 하단 UI 레이어에 있는 위젯도 문제없이 활성 상태로 둘 수 있습니다. 상단 레벨 UI가 닫히면 범용 UI는 그다음으로 최상단에 있는 UI 레이어의 활성 상태 위젯으로 입력을 라우팅합니다.
자세한 내용은 CommonActivatableWidget.h 를 참조하세요.
추가 자료
처음 사용할 때 범용 UI를 설정하는 방법에 대한 자세한 정보는 범용 UI 퀵스타트 가이드를 참조하세요.
콘텐츠 예제
범용 UI가 실제 어떻게 사용되는지 보여주는 기본 예시는 범용 UI 콘텐츠 샘플을 참조하세요. 풀 프론트엔드 메뉴를 포함한 고급 예시는 라이라 샘플 프로젝트를 다운로드하여 참조하세요.