[TIL] 2026-01-26 | UE UI 위젯 설계

C++와 Unreal Engine으로 3D 게임 개발 4-1,2

HUD (Heads-Up-Display)

👉 게임 내에서 플레이어에게 정보를 제공하기 위한 화면

👉 플레이어가 현재 게임 상황을 이해하는 데 필요한 체력, 미니맵, 퀘스트 업데이트와 같은 데이터를 제공

- Canvas기반 HUD

• AHUD 클래스를 상속하여 구현
• 기본적인 2D 그리기 작업(텍스트, 이미지 등) 가능
• 레거시 방식으로 간주되며, 간단한 HUD에 적합

- UMG(Unreal Motion Graphics)

• 언리얼 엔진의 Widget Blueprint를 이용한 UI 시스템
• 더 직관적이고 강력한 HUD 디자인 가능
• 다양한 위젯(Text, Button, Image 등)을 사용하여 HUD를 제작

 

Widget Blueprint

👉 UI (User Interface)를 시각적으로 설계할 수 있도록 제공되는 에디터용 블루프린트

📌생성 - WBP_'이름'

User Interface - Widget Blueprint를 선택하고 부모 클래스로 User Widget을 선택한다.

• Designer 탭: UI를 배치하는 공간
• Graph 탭: 블루프린트 이벤트 그래프(로직)을 작성하는 공간

 

UI 요소 (UI Elements)

👉 언리얼 엔진에서 제공하는 다양한 UI 구성 요소를 말한다. 왼쪽 상단 Palette 탭에서 확인 가능하다.

예를 들어, Text Block (텍스트 표시용), Button (버튼), Progress Bar (게이지 표시) 등이 있다.

- Text Block: 캐릭터 체력, Score(점수), Time(남은 시간) 등 텍스트를 보여줄 때
- Button: “Start Game”, “Quit Game” 등 클릭 이벤트가 필요한 메뉴 버튼
- Progress Bar: 체력 게이지나 로딩 게이지 등을 시각적으로 표시할 때
- Canvas Panel: UI 요소들을 자유롭게 배치할 수 있는 가장 기본적인 레이아웃 패널

 

오른쪽 상단에 Screen Size를 결정할 수 있는 부분이 있다.

가장 대중적인 화면 크기인 1920 x 1080 (16:9) 사이즈로 설정하기 위해서 21.5-24” monitor를 선택해준다.

 

Widget을 생성해 화면에 표시

위젯을 어디서 만들고 관리할지는 프로젝트마다 다른데, 일반적으로 PlayerController가 UI를 다루기 좋다.
게임 모드도 가능하지만, 멀티플레이를 고려하면 PlayerController가 UI 담당이 좀 더 자연스러운 편이다.

- UMG 모듈 빌드 설정

코드를 빌드하기 위해 UMG 모듈을 빌드 설정에 추가해야한다.

'프로젝트명'.Build.cs 에서 UMG 모듈을 추가한다.

using UnrealBuildTool;

public class SpartaProject : ModuleRules
{
	public SpartaProject(ReadOnlyTargetRules Target) : base(Target)
	{
		PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;
	
		PublicDependencyModuleNames.AddRange(
			new string[] { 
				"Core", 
				"CoreUObject", 
				"Engine", 
				"InputCore", 
				"EnhancedInput",
        "UMG" // UMG 모듈 추가
			}
		);

		PrivateDependencyModuleNames.AddRange(new string[] {  });
	}
}

- #include

#include "Blueprint/UserWidget.h"

- TSubclassOf<UUserWidget>

UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "UI")
TSubclassOf<UUserWidget> HUDWidgetClass;

에디터에서는 어떤 위젯을 만들지 “종류”만 지정

- CreateWidget<>

// CreateWidget<생성될 타입>(월드 컨텍스트, 위젯 클래스)
UUserWidget* HUDWidget = CreateWidget<UUserWidget>(this, HUDWidgetClass);

실제 UI 인스턴스

- AddToViewport()

HUDWidget->AddToViewport();

화면에 UI 표시

 

SetText 방식 위젯 갱신

- UTextBlock 헤더 포함

#include "Components/TextBlock.h"

SetText()는 UTextBlock 클래스 함수

- 위젯 인스턴스 접근 구조

APlayerController
 → UUserWidget (HUDWidget)
   → UTextBlock

📌 항상 “인스턴스 → 자식 위젯” 순서

- HUD 위젯 가져오기

UUserWidget* HUDWidget = SpartaPlayerController->GetHUDWidget();

- GetWidgetFromName (이름 기반 접근)

if (UTextBlock* TimeText =
    Cast<UTextBlock>(HUDWidget->GetWidgetFromName(TEXT("Time"))))

UWidget* 으로 반환 > Cast 필요

- SetText 갱신 최소 패턴

if (UUserWidget* HUD = PC->GetHUDWidget())
{
    if (UTextBlock* Text =
        Cast<UTextBlock>(HUD->GetWidgetFromName(TEXT("TextName"))))
    {
        Text->SetText(
            FText::FromString(
                FString::Printf(TEXT("Value: %d"), Value)
            )
        );
    }
}

SetText()는 FText만 받는다.

- 타이머 값 갱신 함수

GetWorldTimerManager().GetTimerRemaining(LevelTimerHandle);

Tick() 대신 Timer + UpdateHUD 구조

 

게임 메뉴 UI 디자인

1. 플레이 버튼을 누르면 Menu UI가 가장 먼저 뜨기
2. 게임 시작 시 자동으로 HUD를 띄우기
3. 메뉴가 나타날 때마다, UI 입력 모드로 전환하여 버튼 클릭에 집중하게 만드는 방식으로 수정
4. 게임이 종료되면 메뉴가 다시 뜨도록 만들기

• 게임 입력 vs UI 입력
  • 게임 플레이 중 메뉴가 활성화되면, UI만 입력을 받도록 하거나, UI + 게임 둘 다 입력을 받도록 할 수 있습니다.
  • 이때 UI에 마우스 포커스가 가도록 만들려면 SetInputMode 계열 함수를 사용해야 합니다. SetInputMode 계열 함수를 통해 PlayerController가 어느 입력을 우선으로 처리할지 결정합니다.
  • UI 전용 입력 모드로 전환하면, 플레이어의 마우스 입력과 키 입력이 먼저 UI로 전달됩니다. 캐릭터 이동이나 시야 회전 등 게임 월드 입력은 잠시 비활성화되고, 버튼 클릭에 집중할 수 있습니다.
  • FInputModeUIOnly 구조체 생성 → SetWidgetToFocus로 포커스할 UI 위젯 지정
  • SetInputMode(InputMode) 호출 → 이제 마우스 클릭이나 키 입력이 UI를 먼저 처
  • bShowMouseCursor = true로 마우스 커서를 보이게 설정
• 빌드한 후, BP_SpartaPlayerController 에서 MainMenuWidgetClass에 WBP_MainMenu 를 할당해줍니다.

- 버튼 클릭 이벤트에 함수 바인딩

Is Variable에 체크하면 맨 하단에 Events 들이 활성화되는 것을 볼 수 있다.

Details 패널에서 하단에 Events 목록 중 On Clicked 옆에 +를 클릭한다.

그래프 탭이 열리면서 OnClicked(StartButton) 이벤트 노드가 자동 생성되고 로직을 구현한다.