위젯 블루프린트의 기본 개념

지금까지는 게임의 핵심 로직과 데이터 관리 방법을 다뤘습니다.

이제 플레이어 상호작용과 정보 전달에 필수인 사용자 인터페이스(User Interface, UI)로 넘어갑니다.

언리얼 엔진은 이를 위해 위젯 블루프린트(Widget Blueprint) 시스템을 제공하며, 이번 장에서는 UI 개발의 기본 개념과 활용법을 정리합니다.

UMG 화면 생성과 입력 연결 순서
표시할 Widget Class를 선택해 런타임 인스턴스를 만듭니다. 2 입력과 로컬 상태를 소유할 Player Controller를 연결합니다. 3 화면에 추가하고 UI Only 또는 Game and UI 포커스를 선택합니다. 4 닫을 때 위젯을 제거하고 게임 입력과 마우스 상태를 원래대로 돌립니다.
Create Widget
표시할 Widget Class를 선택해 런타임 인스턴스를 만듭니다.
Owning Player 지정
입력과 로컬 상태를 소유할 Player Controller를 연결합니다.
Viewport와 입력 모드
화면에 추가하고 UI Only 또는 Game and UI 포커스를 선택합니다.
Remove & Restore Input
닫을 때 위젯을 제거하고 게임 입력과 마우스 상태를 원래대로 돌립니다.
위젯 수명 주기 검수 지점
버튼, 텍스트, 패널과 이벤트 연결을 한 에셋에서 관리합니다. UI는 체력, 인벤토리, 메뉴처럼 플레이어가 읽고 조작해야 하는 상태를 화면 규칙으로 바꿉니다. 정보 전달 요소는 갱신 시점, 표시 우선순위, 입력 가능 여부를 함께 설계해야 합니다.

UI란 무엇이며 왜 필요한가?

UI (User Interface)는 사용자가 게임과 소통하고 정보를 얻는 모든 시각적이고 상호작용적인 요소를 의미합니다.

이는 플레이어의 체력 바, 점수 표시, 인벤토리 창, 메인 메뉴 버튼, 설정 화면, 퀘스트 로그 등 게임 화면에 나타나는 거의 모든 요소를 포함합니다.

UI가 중요한 이유는 다음과 같습니다.

정보 전달: 플레이어에게 게임 상태, 목표, 진행 상황 등의 중요한 정보를 명확하게 전달합니다.
상호작용: 플레이어가 게임을 제어하고, 메뉴를 탐색하며, 아이템을 사용하거나 스킬을 발동하는 등의 행동을 가능하게 합니다.
몰입감 향상: 잘 디자인된 UI는 게임의 세계관과 분위기를 강화하여 플레이어의 몰입감을 높여줍니다.
사용자 경험(UX) 개선: 직관적이고 반응성이 좋은 UI는 플레이어가 게임을 쉽게 이해하고 즐길 수 있도록 돕습니다.

위젯 블루프린트란 무엇인가?

언리얼 엔진의 위젯 블루프린트(Widget Blueprint)는 UMG (Unreal Motion Graphics) UI Designer의 핵심 요소입니다.

UMG는 언리얼 엔진에서 UI를 생성, 디자인, 테스트할 수 있도록 해주는 비주얼 UI 도구입니다.

위젯 블루프린트는 다음을 정의하는 특별한 종류의 블루프린트입니다.

시각적 요소 (Layout): 버튼, 텍스트 블록, 이미지, 슬라이더, 스크롤 박스 등 UI 구성 요소들의 배치와 형태.
상호작용 로직 (Logic): 버튼 클릭 시 발생하는 이벤트, 슬라이더 값 변경 시의 동작, 특정 조건에 따라 UI 요소의 가시성을 변경하는 등의 로직.
데이터 바인딩 (Data Binding): 게임 내 변수(예: 플레이어 체력)와 UI 요소(예: 체력 바의 채워진 정도)를 연결하여 데이터가 변경될 때 UI가 자동으로 업데이트되도록 하는 기능.

쉽게 말해, 위젯 블루프린트는 게임 화면에 표시될 창문이나 패널 같은 것을 만드는 설계도이며, 이 설계도 안에 다양한 UI 구성 요소(버튼, 텍스트 등)를 배치하고 그 구성 요소들이 어떻게 작동할지 정의하는 곳입니다.

위젯을 만들 때는 게임 상태를 화면에 표시하는 흐름과 플레이어 입력을 게임 로직으로 전달하는 흐름을 구분해 두면 구조가 훨씬 명확해집니다.

데이터 표시 흐름
display 체력, 점수, 퀘스트 상태를 보관합니다. Text, Percent, Visibility 값으로 옮깁니다. 텍스트, 이미지, Progress 표시가 갱신됩니다.
Game State
체력, 점수, 퀘스트 상태를 보관합니다.
Widget Value
Text, Percent, Visibility 값으로 옮깁니다.
Visual
텍스트, 이미지, Progress 표시가 갱신됩니다.
입력 이벤트 흐름
event 버튼 클릭, 슬라이더 변경이 발생합니다. On Clicked 같은 이벤트 노드가 실행됩니다. 레벨 이동, 설정 저장, 메뉴 닫기를 호출합니다.
Player Input
버튼 클릭, 슬라이더 변경이 발생합니다.
Widget Event
On Clicked 같은 이벤트 노드가 실행됩니다.
Game Logic
레벨 이동, 설정 저장, 메뉴 닫기를 호출합니다.

위젯 블루프린트의 구성 요소

Designer
Canvas / Panel 위젯 배치와 크기 Text / Image 표시할 UI 요소 Expose Variable Graph에서 찾을 이름 지정
Graph
Event Construct 초기 데이터 연결 Button Click 입력 이벤트 처리 Refresh Function 표시 값을 다시 그림

검수	의미
읽는 순서	화면 구조를 먼저 보고 Graph에서 어떤 이벤트가 갱신하는지 본다.
위험	Designer 배치와 Graph 변수명이 어긋나면 갱신이 실패한다.

위젯 블루프린트 에디터를 열면 크게 두 가지 주요 탭을 볼 수 있습니다.

디자이너 (Designer) 탭

팔레트(Palette): 버튼, 텍스트, 이미지, 패널 등 미리 정의된 다양한 UI 위젯(Widgets)들을 모아놓은 곳입니다. 여기서 원하는 위젯을 캔버스 패널로 드래그하여 UI를 구성합니다.
계층 구조(Hierarchy): UI에 추가된 모든 위젯들의 계층적 관계를 보여줍니다. 부모-자식 관계를 통해 위젯들이 어떻게 묶여 있고 배치되는지 시각적으로 파악할 수 있습니다.
캔버스 패널(Canvas Panel) / 위젯 그래프(Widget Graph): 실제 UI 레이아웃을 디자인하는 작업 공간입니다. 팔레트에서 위젯을 드래그하여 배치하거나, 이미 배치된 위젯의 크기, 위치, 정렬 등을 조절할 수 있습니다.
디테일 패널(Details Panel): 선택된 위젯의 속성(크기, 색상, 텍스트 내용, 정렬 방식 등)을 설정할 수 있습니다. 여기서 Is Variable 옵션을 체크하면 해당 위젯에 대한 변수를 생성하여 그래프에서 접근할 수 있게 됩니다.

그래프 (Graph) 탭

이벤트 그래프(Event Graph): UI 위젯과 관련된 로직을 구현하는 곳입니다. 버튼 클릭, 슬라이더 값 변경, 애니메이션 재생 완료 등 UI에서 발생하는 다양한 이벤트에 반응하는 노드들을 연결하여 기능을 만듭니다. 액터 블루프린트의 이벤트 그래프와 유사합니다.
함수, 변수, 매크로: UI와 관련된 로직에 필요한 사용자 정의 함수, 변수, 매크로를 생성하고 관리할 수 있습니다.

위젯 블루프린트는 디자이너 탭에서 보이는 구조와 그래프 탭에서 실행되는 로직이 서로 맞물려 동작합니다.

보이는 계층
Designer Canvas, Panel, Button, Text를 배치하고 Is Variable로 Graph에서 읽을 대상만 노출합니다.
실행되는 로직
Graph Construct에서 초기 값을 넣고 On Clicked 같은 이벤트에서 Controller나 ViewModel 호출을 분리합니다.
Create
PlayerController나 HUD가 위젯 인스턴스를 만들고 소유자를 명확히 둡니다.
Add
to Viewport 뒤 입력 모드, 포커스, Z-order를 함께 맞춥니다.
React
사용자 입력은 이벤트로 받고 게임 상태 변경은 바인딩이나 명시적 갱신으로 반영합니다.

위젯 블루프린트 생성 및 화면에 띄우기

1
Widget Class 선택
표시할 위젯 블루프린트 클래스를 변수나 설정으로 명확히 보관합니다. Class ref
2
Owning Player 지정
컬 플레이어 기준 UI라면 Player Controller를 소유자로 넘깁니다. Owner
3
Viewport 추가
ZOrder와 중복 생성 여부를 확인하며 화면에 붙입니다. Display
4
입력 모드 전환
메뉴 UI는 커서 표시와 입력 모드를 함께 바꿔야 조작이 자연스럽습니다. Input
5
중복 생성
같은 위젯이 여러 번 쌓이지 않도록 인스턴스 변수를 둡니다.
6
포커스
패드와 키보드 사용자가 첫 버튼으로 바로 이동할 수 있어야 합니다.
7
해상도
앵커와 스케일 박스가 다양한 화면비에서 깨지지 않는지 확인합니다.

가장 기본적인 UI인 메인 메뉴 버튼을 만들어 화면에 띄워보는 과정을 간단히 살펴보겠습니다.

위젯 블루프린트 생성

콘텐츠 브라우저에서 마우스 오른쪽 버튼 클릭 > 사용자 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint) 선택.
UserWidget을 선택하고 이름을 WBP_MainMenu와 같이 지정합니다. (일반적으로 WBP_ 접두사를 사용합니다.)

UI 디자인 (디자이너 탭)

WBP_MainMenu를 더블클릭하여 에디터를 엽니다.
팔레트에서 Button을 캔버스 패널로 드래그하여 배치합니다.
버튼을 선택한 후 디테일 패널에서 Contents 섹션의 Text를 버튼 안으로 드래그하여 배치합니다. (버튼의 자식이 됩니다.)
텍스트 위젯을 선택하고 디테일 패널에서 Text 속성을 게임 시작으로 변경합니다.
버튼 위젯을 선택하고 디테일 패널에서 Is Variable 옵션을 체크하여 변수 이름을 StartGameButton으로 지정합니다. (나중에 그래프에서 이 버튼에 접근할 수 있게 됩니다.)

UI 로직 구현 (그래프 탭)

그래프 탭으로 이동합니다.
좌측 변수(Variables) 패널에서 StartGameButton 변수를 찾아 선택합니다.
디테일 패널을 아래로 스크롤하여 이벤트(Events) 섹션을 찾습니다. On Clicked 이벤트 옆의 + 버튼을 클릭합니다.
On Clicked (StartGameButton) 이벤트 노드가 생성됩니다.
이벤트 노드 뒤에 Print String 노드를 연결하여 게임 시작 버튼 클릭됨! 메시지를 출력하도록 합니다.
추가적으로, Open Level (by Name) 노드를 연결하여 다른 레벨로 이동하는 로직을 추가할 수도 있습니다.

UI를 화면에 추가

레벨 블루프린트 (또는 BP_PlayerController)를 엽니다.
Event BeginPlay 노드 뒤에 다음 노드들을 연결합니다.
- Create Widget: Widget Class에 WBP_MainMenu를 선택합니다. Owning Player는 Get Player Controller로 가져옵니다.
- Add to Viewport: Create Widget의 Return Value를 Target 핀에 연결합니다.
- Set Input Mode UIOnly: UI와의 상호작용을 위해 입력 모드를 UI 전용으로 변경합니다. Player Controller를 Target 핀에 연결합니다.
- Show Mouse Cursor: 마우스 커서를 보이게 합니다. Player Controller를 Target 핀에 연결하고 bShowMouseCursor를 체크합니다.
컴파일하고 저장합니다.

테스트: 게임을 플레이하면 화면에 "게임 시작" 버튼이 나타나고, 클릭하면 메시지가 출력되는 것을 확인할 수 있습니다.

1
Create Widget
WBP_Menu 인스턴스 생성
2
Add to Viewport
화면 레이어에 붙임
3
Set Input Mode
UI Only 또는 Game and UI
4
Show Cursor
마우스 커서 표시
5
Remove
닫을 때 Viewport에서 제거

점검	기준
검수	열기와 닫기 양쪽에 입력 모드 복구 경로가 있어야 한다.
흔한 실수	위젯은 만들었지만 Add to Viewport를 빼먹는다.

위젯 블루프린트는 단순한 UI 요소들을 넘어, 복잡한 사용자 인터페이스와 상호작용 시스템을 구축하는 데 핵심적인 도구입니다.

다음 절에서는 위젯 블루프린트의 레이아웃 구성에 사용되는 다양한 패널 위젯에 대해 자세히 알아보겠습니다.

이번 절에서는 위젯 블루프린트의 기본 개념과 UI를 생성하여 화면에 띄우는 간단한 방법에 대해 알아보았습니다.

UI 개발은 플레이어가 게임을 경험하는 방식에 큰 영향을 미치므로, 이 기본 개념을 잘 이해하는 것이 중요합니다.

마지막으로 위젯을 생성해 화면에 올릴 때 소유자, 초기화, 중복 생성 방지 기준을 정리합니다.

위젯은 생성 위치와 소유자가 중요
Player Controller에서 Create Widget으로 만들고 Owning Player를 지정하면 입력, 포커스, 로컬 플레이어 기준이 명확해집니다. 01 Canvas Panel, TextBlock, ProgressBar처럼 보이는 요소의 계층과 앵커를 먼저 정리합니다. 02 Event Construct에서 초기 텍스트, 체력바 값, 버튼 이벤트 바인딩을 한 번만 연결합니다. 03 Add to Viewport 뒤에는 필요하면 Z Order를 정하고, 중복 생성 방지를 위해 위젯 참조를 저장합니다.
위젯은 생성 위치와 소유자가 중요
Player Controller에서 Create Widget으로 만들고 Owning Player를 지정하면 입력, 포커스, 로컬 플레이어 기준이 명확해집니다.
Widget Tree
Canvas Panel, TextBlock, ProgressBar처럼 보이는 요소의 계층과 앵커를 먼저 정리합니다.
Graph 초기화
Event Construct에서 초기 텍스트, 체력바 값, 버튼 이벤트 바인딩을 한 번만 연결합니다.
화면 추가
Add to Viewport 뒤에는 필요하면 Z Order를 정하고, 중복 생성 방지를 위해 위젯 참조를 저장합니다.