5-1. UMG 위젯 기초 | UE5 블루프린트 마스터

01

Widget Blueprint 생성

UMG 시스템의 개요와 위젯 블루프린트 생성

UMG(Unreal Motion Graphics)는 UE5의 UI 프레임워크입니다. Widget Blueprint를 생성하여 UI를 비주얼로 디자인하고, 블루프린트로 로직을 작성합니다.

콘텐츠 브라우저에서 우클릭 > User Interface > Widget Blueprint로 생성합니다.

Widget Blueprint 에디터 구성

패널	설명
Designer 탭	위젯을 시각적으로 배치하는 WYSIWYG 에디터
Graph 탭	이벤트 그래프로 UI 로직을 작성
Palette	사용 가능한 위젯 목록 (드래그로 배치)
Hierarchy	위젯의 부모-자식 계층 구조
Details	선택한 위젯의 속성 편집

위젯을 화면에 표시하기

                    Create Widget and Add to Viewport
                    // PlayerController의 BeginPlay에서 HUD 위젯 생성
[Event BeginPlay]
  └──> [Create Widget]
         ├─ Class: WBP_HUD
         ├─ Owning Player: Self
         └─ Return Value ──> [Promote to Variable] (HUDWidget)
                                │
                                └──> [Add to Viewport]
                                       └─ Z Order: 0

// Z Order가 높을수록 위에 표시됨
                

02

레이아웃 위젯

Canvas Panel, Vertical/Horizontal Box, Overlay 등

레이아웃	설명	사용 예시
Canvas Panel	절대/상대 좌표로 자유 배치. 앵커 시스템 지원	HUD 전체 레이아웃
Vertical Box	자식을 세로로 순서대로 배치	메뉴 목록, 채팅 로그
Horizontal Box	자식을 가로로 순서대로 배치	아이템 슬롯 행, 버튼 그룹
Overlay	자식을 같은 위치에 겹쳐서 배치	체력바 + 텍스트 겹치기
Grid Panel	행/열 그리드로 배치	인벤토리 그리드
Uniform Grid Panel	균등 크기 그리드	스킬 슬롯
Wrap Box	가로 공간 초과 시 자동 줄바꿈	태그 목록, 뱃지
Size Box	자식의 크기를 강제 지정	고정 크기 아이콘
Scale Box	자식을 비율에 맞게 스케일링	반응형 이미지

앵커(Anchor) 시스템

Canvas Panel 안의 위젯은 앵커로 화면 크기 변화에 대응합니다.

                    Anchor Presets
                    // 앵커 프리셋 (Details > Slot > Anchors)
좌상 (0, 0)        // 미니맵, 체력바
우상 (1, 0)        // 스코어보드
좌하 (0, 1)        // 채팅
우하 (1, 1)        // 미니 메뉴
중앙 (0.5, 0.5)    // 크로스헤어, 팝업
상단 스트레치 (0-1, 0) // 상단 바
전체 스트레치 (0-1, 0-1) // 전체 배경

// Alignment: 위젯의 피벗 포인트 (0,0=좌상, 0.5,0.5=중앙)
                

DPI Scaling

UMG는 DPI Scaling을 지원합니다. Project Settings > User Interface > Design Screen Size에서 기준 해상도를 설정하세요 (일반적으로 1920x1080). 다른 해상도에서 UI가 자동으로 비율 조정됩니다.

03

기본 위젯

Text, Image, Button, ProgressBar 등 핵심 위젯

위젯	용도	주요 속성/이벤트
Text	텍스트 표시	Text, Font, Color, Justification
Image	이미지/아이콘	Brush (Texture, Tint, Size), Color and Opacity
Button	클릭 가능 버튼	OnClicked, OnHovered, OnUnhovered, Style
Progress Bar	수치 바	Percent (0~1), Fill Color, Fill Type
Text Box	텍스트 입력	OnTextChanged, OnTextCommitted, Hint Text
Check Box	체크 토글	OnCheckStateChanged, Is Checked
Slider	값 슬라이더	OnValueChanged, Min/Max Value
Combo Box	드롭다운 선택	OnSelectionChanged, Options
Scroll Box	스크롤 가능 영역	Orientation, ScrollBar Visibility

HUD 예제: 체력바

                    Health Bar Widget
                    // WBP_HealthBar 구조
Canvas Panel
  └─ Overlay
       ├─ ProgressBar (Name: HealthBar)
       │   ├─ Percent: 1.0
       │   ├─ Fill Color: (0.8, 0.1, 0.1, 1.0) // 빨강
       │   └─ Background: (0.1, 0.1, 0.1, 0.5) // 반투명 어둡게
       │
       └─ Text (Name: HealthText)
            └─ Text: "100 / 100"

// 블루프린트 함수: UpdateHealth(Current, Max)
[Set Percent] (HealthBar, Current / Max)
[Set Text] (HealthText, Format("{0} / {1}", Current, Max))
                

04

위젯 생명주기와 관리

Construct, Destruct, 표시/숨김, Remove

이벤트/함수	시점	용도
Event Pre Construct	디자이너 미리보기	디자인 타임 초기화
Event Construct	위젯 생성 시	런타임 초기화, 바인딩 설정
Event Destruct	위젯 제거 시	바인딩 해제, 정리
Set Visibility	언제든	표시/숨김 전환
Remove from Parent	언제든	위젯을 뷰포트에서 완전 제거

Visibility 옵션

                    Widget Visibility States
                    Visible             // 보이고 상호작용 가능
Collapsed           // 숨김 + 레이아웃 공간도 없음
Hidden              // 숨김이지만 레이아웃 공간 유지
HitTestInvisible    // 보이지만 클릭 안 됨 (자식도)
SelfHitTestInvisible // 자신은 클릭 안 됨, 자식은 가능
                

입력 모드 설정

UI가 표시될 때 마우스 커서와 입력 모드를 설정하세요:
Set Input Mode Game Only - 게임 입력만 (HUD)
Set Input Mode UI Only - UI 입력만 (메뉴)
Set Input Mode Game and UI - 둘 다 (인벤토리)
Set Show Mouse Cursor - 마우스 커서 표시/숨김

SUMMARY

핵심 요약

Widget Blueprint는 Designer(시각 편집)와 Graph(로직)로 구성된다
Create Widget + Add to Viewport로 UI를 화면에 표시하며, Z-Order로 겹침 순서를 제어한다
Canvas Panel은 앵커 기반 배치, Vertical/Horizontal Box는 자동 정렬 배치를 제공한다
앵커와 DPI Scaling으로 다양한 해상도에 대응하는 반응형 UI를 구현한다
Collapsed는 공간까지 숨기고, Hidden은 공간은 유지한 채 숨긴다
UI 표시 시 Set Input Mode로 게임/UI 입력 모드를 적절히 전환해야 한다

PRACTICE

도전 과제

배운 내용을 직접 실습해보세요

실습 1: HUD 위젯 만들기

Widget Blueprint로 WBP_HUD를 생성하세요. Canvas Panel에 ProgressBar(체력바), TextBlock(점수 표시), Image(크로스헤어)를 배치하세요. Anchor를 올바르게 설정하여 다양한 해상도에서 UI 위치가 유지되도록 하세요.

실습 2: 위젯 생성과 뷰포트 추가

PlayerController에서 Create Widget으로 WBP_HUD를 생성하고 Add to Viewport로 화면에 추가하세요. Remove from Parent로 제거하는 로직도 구현하세요. Set Input Mode Game And UI를 사용하여 게임과 UI를 동시에 조작 가능하게 설정하세요.

심화 과제

월드 스페이스 Widget Component를 Actor에 부착하여 머리 위 체력바를 구현하세요. Widget Component의 Draw Size, Space를 설정하고, 카메라를 향해 항상 정면을 보도록 회전 로직을 추가하세요.