일반 UI 퀵스타트 가이드

이 페이지에서는 프로젝트에 일반 UI(Common UI) 를 구성하는 방법을 알아봅니다. 이 가이드에서는 다음을 학습합니다.

• 입력 라우팅(Input Routing) 을 지원하도록 뷰포트 구성하기
• 컨트롤러 버튼을 UI 액션에 매핑하는 입력 액션 데이터 테이블(Input Action Data Tables) 을 생성하는 방법
• 글로벌 클릭과 뒤로 버튼 기능을 지원하는 디폴트 내비게이션 액션(Default Navigation Actions) 을 구성하는 방법
• 컨트롤러 데이터 에셋(Controller Data Assets) 을 생성하고 특정 플랫폼의 특정 컨트롤러 타입에 할당하는 방법.

1. 뷰포트 입력 라우팅 구성

뷰포트(Viewport) 는 일반 UI에서 모든 입력 라우팅의 기반입니다. 일반 UI가 입력을 캡처하면 먼저 뷰포트로 보내고, 뷰포트는 이를 상단에 드로된 루트 노드로 전송합니다. 이 기능을 지원하려면 다음 구성 단계를 수행합니다.

1. 편집(Edit) > 프로젝트 세팅(Project Settings) > 엔진(Engine) > 일반 세팅(General Settings) 을 엽니다.

2. 게임 뷰포트 클라이언트 클래스(Game Viewport Client Class) 를 CommonGameViewportClient 로 설정합니다.

   

자체 커스텀 게임 뷰포트 클래스가 필요한 경우, 일반 UI를 사용하려면 CommonGameViewportClient에서 확장해야 합니다.

2. 입력 액션 데이터 테이블 생성하기

일반 UI는 입력 액션 데이터 테이블을 사용하여 여러 플랫폼별 입력에 연결될 수 있는 명명된 액션을 생성합니다. 예시는 일반 UI의 콘텐츠 폴더에 있는 GenericInputActionDataTable 또는 콘텐츠 예시 프로젝트에 있는 NavigationInputActionDataTable 을 참고하세요.

일반 UI의 입력 액션 데이터 테이블은 프로젝트 세팅(Project Settings)이나 고급 입력(Advanced Input) 시스템에 사용되는 입력 액션과 무관하고, 오직 UI 입력 관리에만 사용됩니다.

1. 콘텐츠 브라우저(Content Browser) 에서 우클릭한 다음 기타(Miscellaneous) > 데이터 테이블(Data Table) 에셋을 클릭합니다.

2. 행 구조로 CommonInputActionDataBase 를 선택한 다음 OK 를 클릭하여 새 입력 액션 데이터 테이블을 생성합니다.

   

3. 새 입력 액션 행을 추가하려면 상단 바에서 추가(Add) 를 클릭합니다.

   

4. 입력 액션에 이름과 활성화할 키에 대한 정보를 채워 넣습니다.

입력 액션은 다음 파라미터로 구성됩니다.

일반 UI 위젯은 이러한 추상적 액션을 실제 입력에 매핑합니다. 예를 들어 데이터 테이블과 열 이름 레퍼런스를 CommonButtonBase 위젯의 입력 액션 트리거(Triggering Input Action) 에 추가할 수 있습니다. 그런 다음 해당 액션과 연결된 버튼을 누르면 일반 UI 버튼이 활성화됩니다.

버전 관리 상충을 줄이려면 관련된 액션 세트를 자체 데이터 테이블로 그룹화합니다. 예를 들어 모든 메뉴 이동 액션을 한 테이블로 모으고, 보다 특수한 메뉴들을 각각 자체 테이블로 모은 다음 이 데이터 테이블들을 참조하는 단일 컴포짓 데이터 테이블을 생성합니다.

3. 디폴트 내비게이션 액션 구성

기본적인 내비게이션은 언리얼 엔진에서 네이티브로 지원됩니다. 그러나 일반 UI는 일반 UI 입력 데이터(Common UI Input Data) 에셋을 사용하여 모든 플랫폼에서 사용되는 범용 클릭(Click) 및 뒤로(Back) 입력을 정의합니다.

1. 콘텐츠 브라우저에서 새 블루프린트 클래스(Blueprint Class) 를 생성합니다.

2. CommonUIInputData 를 검색하고 선택(Select) 을 클릭하여 새 블루프린트를 생성합니다.

3. 디폴트 클릭(Click) 및 뒤로(Back) 액션을 포함하는 적절한 데이터 테이블을 할당합니다.

   

4. 이 에셋을 프로젝트 세팅(Project Settings) > 게임(Game) > 일반 입력 세팅(Common Input Settings) > 입력 데이터(Input Data) 에 할당합니다.

   

일반 UI가 위에서 지정된 에셋을 로드하여 디폴트 내비게이션에 사용할 것입니다. 지정된 클릭(Click) 버튼은 버튼이나 기타 상호작용 가능한 엘리먼트를 하이라이트할 때 마우스 클릭을 대체하며, 지정된 뒤로(Back) 버튼은 현재 메뉴에서 이전 메뉴로 이동할 때 공통으로 사용됩니다.

4. 컨트롤러 데이터 바인딩(플랫폼별 UI 요소)

컨트롤러 데이터 에셋(Controller Data Asset) 은 키-액션을 UI 요소와 연결합니다. 각 컨트롤러 데이터 에셋은 입력 타입, 게임패드, 플랫폼과 연결됩니다. 일반 UI는 이 정보를 사용하여 현재 플랫폼과 입력 타입을 기반으로 자동으로 올바른 플랫폼별 UI 요소를 사용합니다. 선택 사항으로, 다수의 입력 타입이나 고유한 게임패드를 지원하는 플랫폼의 경우 사용자의 입력을 사용하여 올바른 게임패드를 찾거나 런타임에 UI 요소를 교체할 수 있습니다.

1. 콘텐츠 브라우저(Content Browser) 를 우클릭한 다음 새 블루프린트 클래스(Blueprint Class) 를 생성합니다.

2. CommonInputBaseControllerData 를 검색하고 선택(Select) 을 클릭하여 새 컨트롤러 데이터 에셋(Controller Data Asset)을 생성합니다.

3. 지원 예정인 컨트롤러 중 하나에 대한 에셋 및 정보로 컨트롤러 데이터 에셋을 채웁니다.

   파라미터	설명
   입력 타입(Input Type)	게임패드, 마우스, 키보드, 터치 중 하나로 설정합니다.
   게임패드 이름(Gamepad Name)	컨트롤러가 게임패드인 경우 이 게임패드가 대응할 플랫폼입니다. 디폴트 게임패드는 Generic 이라고 합니다.
   입력 브러시 데이터 맵(Input Brush Data Map)	UI 요소 및 아이콘에 대한 키 매핑입니다.
   입력 브러시 키 세트(Input Brush Key Sets)	단일 UI 요소에 대한 다수의 키 매핑입니다. D-패드 및 기타 여러 축에 매핑될 가능성이 있는 입력에 유용합니다.

4. 지원할 모든 입력에 대한 컨트롤러 데이터를 생성한 뒤 이 클래스들을 프로젝트 세팅(Project Settings) > 게임(Game) > 일반 입력 세팅(Common Input Settings) > 플랫폼 입력(Platform Input) 에서 관련된 플랫폼에 추가해야 합니다.

디폴트 게임패드 이름(Default Gamepad Name) 은 컨트롤러 데이터 에셋 중 하나에 있는 게임패드 이름(Gamepad Name) 필드와 정확히 일치해야 합니다. 일치하지 않으면 인식되지 않고 아이콘이 나타나지 않습니다.

각 게임패드의 데이터를 해당 플랫폼의 컨트롤러 데이터(Controller Data) 배열에 할당합니다. 단일 플랫폼에 다수의 게임패드를 연결할 수 있습니다. 예를 들어 PC 게임은 일반적으로 마우스와 키보드 컨트롤러 데이터, 일반 게임패드 데이터를 지원합니다. 그러나 특정 게임패드 모델을 위한 컨트롤러 데이터를 추가할 수도 있습니다.

5. 일반 UI 위젯 라이브러리 및 위젯 스타일링

UMG 팔레트(Palette)의 일반 UI 플러그인(Common UI Plugin) 섹션에 일반 UI의 위젯 라이브러리가 있습니다. 그중 상당수는 다음과 같이 많은 게임 및 애플리케이션에 흔히 사용되는 UI 기능의 일부입니다.

• 날짜/시간 및 숫자 값을 위한 전용 텍스트 블록
• 캐러셀 및 애니메이션 스위치 와 같은 내비게이션 및 비저빌리티 지원 요소
• 로딩 가드 및 하드웨어 비저빌리티 보더 와 같은 플랫폼 지원 요소
• 버튼과 텍스트처럼 기본적인 기능을 제공하지만, 스타일 데이터 에셋으로 스타일을 적용하는 위젯

이러한 위젯에는 상응하는 베이스 UMG 위젯의 스타일링 옵션이 없습니다. 그 대신 일반 스타일 에셋(Common Style Assets) 을 참조하여 다수의 메뉴와 HUD에 일관된 스타일을 적용할 수 있습니다. 스타일 에셋을 변경하면 이를 사용하는 모든 일반 UI 위젯에서 효과가 나타납니다.

일반 스타일 에셋을 만드는 방법은 다음과 같습니다.

1. 콘텐츠 브라우저(Content Browser) 를 우클릭하고 블루프린트(Blueprint) 를 생성한 다음 일반 스타일(Common Style) 클래스 중 하나를 베이스로 선택합니다.

   

2. 일반 UI 위젯에 적용하고자 하는 스타일링 정보로 디테일(Details) 을 채웁니다. 이는 보통 표준 UMG 위젯의 스타일링 옵션과 같습니다.

3. 이를 적절한 타입의 일반 UI 위젯에 할당합니다. 예를 들어 일반 텍스트 스타일(Common Text Style) 에셋을 생성하는 경우, 일반 텍스트 위젯의 스타일(Style) 필드에 할당합니다.

   프로젝트 세팅(Project Settings) > 플러그인(Plugins) > 일반 UI 에디터(Common UI Editor) 의 템플릿 스타일(Template Styles) 에 할당할 수도 있습니다.

수동으로 스타일을 할당하지 않은 일반 UI 위젯은 알맞은 템플릿 스타일을 사용할 것입니다. 이를 통해 손쉽게 애플리케이션의 글로벌 디폴트 스타일을 생성할 수 있습니다.

프로젝트 세팅(Project Settings) > 플러그인(Plugins) > 일반 UI 프레임워크(Common UI Framework) 메뉴에는 글로벌 에셋이 몇 가지 더 있습니다. 로딩 화면에 사용되는 디폴트 쓰로버 머티리얼(Default Throbber Material) , 로드되지 않은 UI 에셋의 자리표시자로 표시되는 디폴트 이미지 리소스 오브젝트(Default Image Resource Object) 등입니다.