일반 UI 개요

일반 UI는 어떤 문제를 해결하도록 설계되었으며 어떻게 문제를 해결하는지에 대해 알아봅니다.

Choose your operating system:

Windows

macOS

Linux

일반 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.hCommonUIActionRouterBase.h 를 참조하세요.

노드

일반 UI는 시각적으로 렌더링된 상단의 UI 위젯에 입력을 라우팅합니다. 또한 위젯을 노드 로 변환하여 논리적 비주얼 계층구조에 따라 입력 라우팅을 처리합니다.

노드는 몇 가지 예외를 제외하고 슬레이트 계층구조와 일치하는 트리로 구성됩니다. 각 트리는 보통 뷰포트에 직접 배치된 위젯으로 표현되는 루트 노드, 그리고 보통 버튼 같은 개별 UI 엘리먼트로 표현되는 리프 노드로 구성됩니다.

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

입력 라우팅 로직을 보여주는 흐름도

자세한 내용은 UIActionRouterTypes.h 를 참조하세요.

활성화 가능 위젯

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

활성화 가능 위젯:

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

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

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

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

자세한 내용은 CommonActivatableWidget.h 를 참조하세요.

추가 자료

처음 사용할 때 일반 UI를 설정하는 방법에 대한 자세한 정보는 일반 UI 퀵스타트 가이드를 참조하세요.

콘텐츠 예제

일반 UI가 실제 어떻게 사용되는지 보여주는 기본 예시는 일반 UI 콘텐츠 샘플을 참조하세요. 풀 프론트엔드 메뉴를 포함한 고급 예시는 라이라 샘플 프로젝트를 다운로드하여 참조하세요.