네임드 슬롯 위젯

복잡한 사용자 인터페이스를 생성할 때 대규모로 템플릿이 지정된 위젯을 재사용해야 할 수 있습니다. 예를 들어 사용되는 UI 또는 HUD에 따라 서로 다른 정보 세트와 함께 캐릭터의 상태를 표시할 수 있습니다. 한 가지 버전에서는 커다란 캐릭터 포트레이트가 필요할 수 있고, 다른 버전에서는 더욱 간결한 디스플레이를 위해 이름만 있는 바가 필요할 수도 있으며, 또 다른 버전에서는 캐릭터의 통계에 관한 추가 정보를 표시해야 할 수도 있습니다.

네임드 슬롯 위젯 은 위 예시와 같은 템플릿이 지정된 UI에서 자리표시자 역할을 하는 데 특화되어 있습니다. 네임드 슬롯을 위젯의 계층구조에 추가하면 해당 위젯의 모든 자손 클래스의 계층구조에 표시됩니다. 덕분에 서로 다른 하위 위젯이 주입된 위젯의 여러 버전을 손쉽게 생성할 수 있습니다.

네임드 슬롯 사용의 예시는 동일한 UMG 위젯의 여러 파생 위젯을 생성하는 것입니다.

또는 네임드 슬롯을 사용하여 여러 하위 위젯이 추가된 상태에서 위젯의 프리뷰를 손쉽게 보고, UI에서 표시되는 위치에 따라 런타임에 네임드 슬롯을 채울 수 있습니다. 어느 경우든 네임드 슬롯을 통해 UMG 클래스를 복제할 필요성이 감소합니다.

비헤이비어

네임드 슬롯은 1개의 자손 위젯만 지원하는 컨테이너입니다. 자손이 없는 경우 네임드 슬롯의 가운데에 이름이 표시되고, 바운드 주변에 점선 아웃라인이 있습니다.

이를 통해 네임드 슬롯의 위치와 크기를 손쉽게 시각화하고 여러 네임드 슬롯을 구분할 수 있습니다.

네임드 슬롯의 하위로 위젯을 드래그 앤 드롭하여 UMG 디자이너 보기에 직접 표시할 수 있습니다. 추가로 다른 위젯과 달리 네임드 슬롯은 부모 위젯에서 확장된 모든 위젯의 계층구조에 표시됩니다. 이를 통해 위젯을 쉽게 참조할 수 있고, 위젯 클래스의 계층구조가 얼마나 깊은지와 무관하게 UMG 디자이너(UMG Designer) 탭에서 일관적으로 볼 수 있습니다.

또는 Pre Construct 이벤트를 사용하여 코드를 통해 자손 위젯을 추가할 수 있습니다.

Pre Construct는 위젯이 UMG 디자이너에 표시될 때 실행되므로 이 방법을 통해 자손 위젯의 프리뷰를 볼 수도 있습니다.

네임드 슬롯 위젯을 사용하는 방법

다음 섹션에서는 네임드 슬롯을 위젯에 추가하는 방법과 파생된 위젯에 채우기를 방법을 설명합니다. 이 예시에서는 경고 또는 프롬프트와 같은 팝업 메뉴에 유용한 다이얼로그의 템플릿을 사용합니다.

1. 네임드 슬롯을 사용하여 템플릿 위젯 생성

먼저 2개의 네임드 슬롯을 사용하여 간단한 다이얼로그 위젯을 생성합니다. 하나에는 인터랙티브 엘리먼트가 있고, 다른 하나에는 메시지와 같은 콘텐츠가 있습니다.

1. 콘텐츠 브라우저에서 새 UMG 위젯을 생성합니다. 이름을 UI_DialogBox_Template 으로 지정합니다.

2. UI_DialogBox_Template 을 열고, 화면 크기(Screen Size) 세팅을 커스텀(Custom) 으로 변경합니다. 너비를 750 으로, 높이를 175 로 설정합니다.

   

3. 계층구조에 테두리 를 추가합니다. 외관(Appearance) > 브러시 컬러(Brush Color) 를 검은색(0.0, 0.0, 0.0)으로 설정합니다.

   

4. 테두리 내부에 세로 박스 를 추가합니다.

5. 2개의 네임드 슬롯 위젯을 세로 박스에 추가합니다. 첫 번째 위젯 이름을 Slot_Content 로 지정하고 두 번째 위젯 이름을 Slot_Interaction 으로 지정합니다.

6. 네임드 슬롯 각각에 다음 세팅을 적용합니다.

   • 크기(Size): 채우기(Fill)
   • 세로 정렬(Vertical Alignment): 세로로 채우기(Fill Vertically)
   • 가로 정렬(Horizontal Alignment): 가로로 채우기(Fill Horizontally).

위 지침을 따른 경우 위젯의 모습은 다음과 같습니다.

위의 지침에 따라 처리한 UI_DialogBox_Template 위젯. 2개의 네임드 슬롯이 테두리 내 세로 박스에 위치합니다.

이는 위젯의 다른 버전에 대한 베이스 역할을 합니다.

2. 드래그 앤 드롭을 사용하여 네임드 슬롯 채우기

다음으로 파생된 위젯을 생성하고 경고 프롬프트에 대해 필요한 엘리먼트로 채웁니다. 이 프롬프트는 다음 작업을 수행합니다.

• 사용자가 수행하는 작업에 관한 경고를 표시합니다.
• 사용자가 작업을 계속할지 여부를 선택할 수 있도록 확인 및 취소 버튼을 제공합니다.

예를 들어 사용자가 화면 해상도를 변경하는 경우에 이러한 유형의 프롬프트를 사용하고 변경사항을 유지하거나 버릴지 여부를 물을 수 있습니다. 이 섹션에서는 네임드 슬롯에서 드래그 앤 드롭 작업을 사용하여 이러한 유형의 위젯에 대한 레이아웃 빌드를 안내합니다.

1. UI_DialogBox_Template 에서 파생된 새 블루프린트를 생성합니다. 이름을 UI_DialogBox_Warning 으로 지정합니다.

2. UI_DialogBox_Warning 의 디자이너(Designer) 탭을 엽니다.

3. 가로 박스 를 Slot_Content 에 추가합니다.

4. 이름이 Content_Image 인 이미지 위젯을 Slot_Content 의 가로 박스에 추가합니다. 세팅을 다음과 같이 설정합니다.
   • 크기(Size): 자동(Auto)
   • 가로 정렬(Horizontal Alignment): 왼쪽(Left)
   • 세로 정렬(Vertical Alignment): 상단
   • 이미지 크기(Image Size): 64 x 64

   표시된 이미지에서는 이 튜토리얼을 위해 생성된 아이콘을 예시로 사용합니다. 엔진에 포함되어 있지 않고, 이 튜토리얼의 필수 정보를 따를 필요는 없으며, 자신만의 아이콘을 만들어 Content_Image 에 적용할 수 있습니다.

5. 이름이 Content_Text 인 텍스트 위젯을 Slot_Content 의 가로 박스에 추가합니다. 세팅을 다음과 같이 설정합니다.
   • 크기(Size): 채우기(Fill)
   • 가로 정렬(Horizontal Alignment): 가로로 채우기(Fill Horizontally)
   • 세로 정렬(Vertical Alignment): 세로로 채우기(Fill Vertically)
   • 폰트(Font) > 크기(Size): 18

6. Content_Text 의 텍스트(Text) 필드를 "변경사항을 유지하시겠습니까?(Do you want to keep these changes?)"로 설정합니다.

7. Content_Image 와 Content_Text 사이에 스페이서(Spacer) 를 두고 너비를 10 으로 설정합니다.

8. 위젯을 컴파일하고 저장합니다. 다음과 같은 모습일 것입니다.

   경고 아이콘과 텍스트가 포함된 UI_DialogBox_Warning. 템플릿의 원본 세로 박스는 숨겨져 있지만 네임드 슬롯은 모두 표시됩니다.

3. Pre Construct 이벤트를 사용하여 네임드 슬롯 채우기

마지막으로 경고 다이얼로그에 대한 버튼을 제공하기 위해 버튼이 2개인 하위 위젯을 생성하고, UI_DialogBox_Warning에 대한 Pre Construct 이벤트에 이를 추가합니다.

3a. 바이너리 프롬프트 버튼 생성

프롬프트의 버튼에는 텍스트 라벨이 추가된 2개의 버튼이 포함되어 있습니다. 다음 단계에서는 프롬프트의 중앙에 맞춰 정렬되는 방식으로 이를 구성하는 방법을 안내합니다.

1. 이름이 UI_BinaryPromptButtons 인 새 사용자 위젯 을 생성하고 엽니다.

2. 화면(Screen) 유형을 커스텀(Custom) 으로 변경하고, 너비(Width) 를 500 으로, 높이(Height) 를 75 로 설정합니다.

   

3. 가로 박스 를 추가하고, 2개의 크기 박스 위젯을 안에 추가합니다. 이름을 SizeBox_Button_Left 와 SizeBox_Button_Right 로 지정합니다.

4. SizeBox_Button_Left 와 SizeBox_Button_Right 사이에 스페이서 를 추가합니다. 너비를 40 으로 설정합니다.

5. SizeBox_Button_Left 와 SizeBox_Button_Right 의 세팅을 다음과 같이 설정합니다.

   • SizeBox_Button_Left
     • 크기(Size): 채우기(Fill)
     • 가로 정렬(Horizontal Alignment): 오른쪽(Right)
     • 세로 정렬(Vertical Alignment): 중앙(Center)
   • SizeBox_Button_Right
     • 크기(Size): 채우기(Fill)
     • 가로 정렬(Horizontal Alignment): 왼쪽(Left)
     • 세로 정렬(Vertical Alignment): 중앙(Center)
   • 2개의 크기 박스 위젯 모두
     • 너비 오버라이드(Width Override): 150
     • 높이 오버라이드(Height Override): 50

   이를 통해 두 박스 모두 프롬프트 가운데로 중심이 맞춰집니다.

6. 두 크기 박스 모두에 버튼 위젯 을 추가합니다. 왼쪽 버튼의 이름은 ConfirmButton , 오른쪽 버튼의 이름은 CancelButton 으로 지정합니다.

7. 텍스트 위젯 을 두 버튼 모두에 추가합니다. 두 위젯 모두에 다음 세팅을 설정합니다.
   • 폰트 크기(Font Size): 16
   • 컬러(Color): 블랙(Black) ( 0.0, 0.0, 0.0 )

8. ConfirmButton의 텍스트는 "확인(Confirm)" 으로 설정하고, CancelButton의 텍스트는 "취소(Cancel)" 로 설정합니다.

9. 위젯을 컴파일하고 저장합니다. 다음과 같은 모습일 것입니다.

3b. Pre Construct를 사용하여 바이너리 프롬프트 버튼 추가

1. UI_DialogBox_Warning 의 Pre Construct 이벤트에 바이너리 프롬프트 위젯의 인스턴스를 생성하고, 이를 Slot_Interaction의 자손으로 추가합니다.

2. UI_DialogBox_Warning 을 열고, 그래프(Graph) 탭을 열어 블루프린트 그래프를 편집합니다.

3. Create Widget 노드를 추가합니다. 위젯 클래스(Widget Class) 를 UI_BinaryPromptButtons 로 설정하고 Pre Construct 함수에 연결합니다.

4. Get Owning Player 노드를 추가하고 Create Widget 노드의 Owning Player 핀에 연결합니다.

5. Output 핀에서 드래그하고 변수로 승격 합니다. 이름을 PromptButtonWidget 으로 지정합니다.

6. Slot_Interaction 의 Get 노드를 생성합니다. 핀에서 드래그하고 Add Child 노드를 생성합니다.

7. PromptButtonWidget 을 Add Child 노드에 연결합니다.

   위 지침에 사용된 전체 블루프린트 코드.

8. 위젯 블루프린트를 컴파일 및 저장한 다음 디자이너(Designer) 탭으로 돌아갑니다.

   완료된 UI_DialogBox_Warning 위젯.

콘텐츠가 계층구조에 추가되었다면 버튼 위젯이 네임드 슬롯을 대신하여 표시됩니다.

인스턴스에서만 노출

인스턴스에서만 노출(Expose on Instance Only) 세팅은 false 가 기본입니다. true 로 설정하면 코드를 통해 위젯에서 임의의 인스턴스에 있는 네임드 슬롯에 액세스할 수 있지만 파생된 위젯의 계층구조에서는 표시되지 않습니다.

예를 들어 위에서 자세히 설명한 UI_DialogBox_Template 위젯에서 Slot_Interaction 의 인스턴스에서만 노출(Expose on Instance Only) 프로퍼티를 true 로 설정한 경우 일반적으로 베이스 위젯 블루프린트의 네임드 슬롯에 액세스할 수 있습니다. 하지만 UI_DialogBox_Warning 과 같이 파생된 클래스에서는 Slot_Interaction 이 디자이너(Designer) 탭의 계층구조(Hierarchy)에 표시되지 않습니다.

하지만 여전히 코드를 통해 Slot_Interaction에 액세스할 수 있습니다. 이는 네임드 슬롯 채우기를 위해 특정 함수, 이벤트 또는 콜백을 실행할 때 유용할 수 있습니다.

이미 파생된 클래스에서 사용되고 있는 네임드 슬롯 위젯에서 인스턴스에서만 노출(Expose on Instance Only)을 True로 설정한 경우 추가한 위젯은 추가한 위치에 그대로 남지만 네임드 슬롯은 계층구조에서 표시되지 않습니다.

직접 해보기

네임드 슬롯의 유틸리티를 자세히 알아보려면 UI_DialogBox_Template 에서 파생된 위젯을 직접 생성해 보세요. 다음 스크린샷은 메시지와 1개의 "계속(Continue)" 버튼이 포함된 프롬프트의 예시입니다. 이를 통해 사용자에게 게임 저장과 같은 작업이 완료되었음을 알릴 수 있습니다.

또는 슬롯을 의도적으로 비워 두고 자손 클래스로 나중에 채울 수 있습니다. 예를 들어 한 번에 경고 프롬프트를 생성하는 대신 Slot_Interaction 에 취소 및 확인 버튼이 포함된 바이너리 프롬프트를 생성하되 Slot_Content 슬롯을 비워 둘 수 있습니다. 나중에 다른 메시지 레이아웃으로 Slot_Content 를 채우는 파생형을 생성할 수 있습니다.