UMG | AddUI, SubtractUI | Packaged Build

김여울·2025년 5월 12일

사전캠프

목록 보기

19/24

UMG

Unreal Motion Graphics
언리얼 엔진의 UI 제작 시스템
게임 HUD, 메뉴, 체력바, 미니맵 등 다양한 UI 제작에 사용됨

🌀 자주 사용하는 구성 요소

항목	설명
Widget Blueprint	UI 요소를 시각적으로 설계할 수 있는 블루프린트 에디터
Canvas Panel	위젯을 자유 위치에 배치할 수 있는 기본 UI 컨테이너
Button, Text, Image	가장 기본적인 위젯 구성 요소들 (버튼, 텍스트, 이미지 등)
Bind	UI 값(텍스트 등)을 변수나 함수에 연결해 동적 UI를 구현할 수 있음
Event Construct	위젯이 생성될 때 한 번 실행되는 이벤트 (BeginPlay 느낌)
Event Tick	매 프레임마다 실행되는 로직 처리

🧩 UI 구성창 구조
▶ UI 요소 생성을 위한 위젯 블루프린트 생성
📍 구현 위치 : Widget_Main

1️⃣ Canvas Panel

UI를 배치하는 기본 판
위젯을 자유 위치에 배치할 수 있음
투명한 레이어처럼 작동 ➡ 실제 게임 화면 위에 겹쳐서 UI를 표시하는 용도
캔버스 패널 = UI를 그릴 수 있는 실제 캔버스
(화면 상단·하단, 좌우 등에 원하는 위치 지정 가능)
Canvas Panel 위에 버튼, 텍스트, 이미지 등을 자유롭게 추가하면 HUD나 메뉴 UI 구성 가능

2️⃣ Text

✅ 텍스트 추가 관련

▶ 앵커 (Anchor)
- 텍스트의 기준 정렬 위치 설정
- X 위치는 앵커 기준으로 계산됨
- 앵커의 X:0, Y:0 → 텍스트 블록의 왼쪽 상단이 기준
- 텍스트 정렬값을 0.5로 설정하면 텍스트 중앙이 화면 중앙에 위치
▶ 정렬 (Alignment)
- 텍스트 블록 내에서 내용의 정렬 방식 지정
0 : 왼쪽
0.5 : 가운데
1 : 오른쪽

✅ 스타일 설정
▶ 컬러 및 오파시티 (Color & Opacity)

오파시티는 불투명도 설정 (0 = 완전 투명, 1 = 완전 불투명)
0으로 설정하면 텍스트나 이미지가 보이지 않게 처리됨

3️⃣ Image

✅ 이미지 요소

이미지 위젯에 텍스처 추가 가능
텍스처 넣어서 이미지처럼 사용 가능 (예: 아이콘, 배경 등)

✅ 위치 조정 – 오프셋 & 앵커

오프셋(Offset): 좌/상/우/하단 기준으로 떨어진 거리 설정
앵커 기준 위치와 함께 오프셋으로 세밀하게 위치 조절 가능

✅ UI 요소가 안 보이는 경우

Z 순서(ZOrder) 확인 필요
값이 클수록 화면 위쪽에 렌더링됨
낮은 ZOrder의 텍스트는 다른 UI 요소 뒤에 가려져 보이지 않을 수 있음

4️⃣ Button

✅ 버튼에 변수 할당

버튼 위젯을 그래프에서 사용하려면 변수로 만들어야 함
Details 패널에서 변수 여부(Is Variable) 체크해야 블루프린트에서 접근 가능

✅ 버튼 이벤트 연결

버튼을 선택하고 그래프 탭으로 이동 ➡ 이벤트 바인딩 가능
(예) OnClicked (버튼이 눌렸을 때) 이벤트 생성

✅ 이벤트 실행

이 버튼이 눌렸을 때 원하는 로직 실행 가능
(예) 레벨 열기, UI 전환, 사운드 재생 등

▶버튼 클릭하면 점프하기

위젯을 화면에 추가하는 방법

개요
- UMG로 만든 UI 위젯을 플레이 중 화면에 표시하는 기본 방법
- 보통 플레이어가 특정 행동을 했을 때 UI가 나타나도록 구현
사용 예
- 시작 버튼을 눌렀을 때
- 아이템을 습득했을 때
- 미션 완료 시 결과창 표시 등
구현 위치
- 일반적으로 GameMode 또는 PlayerController에서 처리
  ➡ 전역적 UI 로직이 GameMode에 들어가는 경우가 많음

# UI 위젯 생성 및 제거 로직 정리 (AddUI / SubtractUI)

1️⃣ AddUI

위젯을 화면에 표시하기
AddUI 함수 추가

📍 구현 위치 : BP_GameMode

✅ 노드
Create Widget UI 위젯 인스턴스를 생성함

Promote to Variable 생성한 위젯을 변수(MainWidget)로 저장
➡ 해제하거나 다시 접근하기 위해 꼭 필요

Add to Viewport 화면에 위젯 표시

⚠️ 문제점

AddUI를 반복 호출하면 위젯이 계속 새로 생성됨
➡ 이미 생성된 위젯이 있다면 새로 만들 필요 없음

2️⃣ AddUI 개선

중복 생성을 방지하는 조건 추가

✅ 노드
IsValid MainWidget이 존재하는지 확인

Branch 조건

이미 존재(True) ➡ 아무것도 안 함
없음(False) ➡ 새 위젯 생성 + 추가

3️⃣ SubtractUI

위젯을 화면에서 제거하기

📍 구현 위치: BP_GameMode

✅ 노드
IsValid 로 위젯 존재 확인

존재한다면 ➡ Remove from Parent 노드 실행하여 UI 제거

4️⃣ 캐릭터와의 연동 예

📍 구현 위치: BP_Character > Event BeginPlay

✅ 위젯 표시

캐릭터가 소환 됐을 때 위젯 표시
Get Game Mode ➡ Cast to BP_GameMode ➡ AddUI 호출
▶ 실행 시, 좌측 상단에 버튼 생김

✅ 위젯 제거

같은 방식으로 SubtractUI 호출 시 UI 제거됨

Packaged Build

제품화 : 개발한 게임을 실행 가능한 최종 파일로 빌드하는 과정
Windows로 빌드 가능 ➡ .exe 실행 파일로 생성

🔨 빌드 타입 종류

타입	설명
Shipping	최종 릴리즈용 빌드. 최적화됨, 디버깅 정보 없음
Development	개발용 빌드. 콘솔 활성화, 디버깅용 정보 포함
DebugGame	게임만 디버깅 가능. 개발 중 버그 확인 목적 사용

🎨 프로젝트 아이콘 변경 방법