👨‍💻 [Unreal] 언리얼 엔진에서 Widget 이란 무엇이며, 어떻게 활용할 수 있나요?

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

언리얼 엔진에서 Widget 이란 무엇이며, 어떻게 활용할 수 있는지 간략히 알아보았습니다.

---

질문 >

언리얼 엔진에서 Widget 이란 무엇이며, 어떻게 활용할 수 있나요?

답변 >

언리얼 엔진에서 Widget은 UMG(Unreal Motion Graphics) 시스템을 통해 생성되는 사용자 인터페이스(UI) 요소를 의미합니다. 위젯은 게임 내 HUD(Head-Up Display), 메뉴, 인벤토리, 대화 창 등 사용자와 상호작용하는 화면 요소를 만드는 데 사용됩니다.

---

1. Widget의 개념

• Widget은 UI 요소의 기본 단위입니다.
• 버튼, 슬라이더, 텍스트 박스와 같은 개별 요소부터 복잡한 레이아웃까지 다양한 구성 가능.
• Blueprint 또는 C++로 제작하며, 게임플레이와 직접 연결되어 동적인 UI를 구현.

---

2. Widget의 주요 구성 요소

(1) Widget Blueprint

• UMG 기반의 UI를 디자인하고 로직을 설정하는 에디터 도구.
• 드래그 앤 드롭 방식으로 UI를 설계 가능.
• 이벤트 그래프에서 UI 동작을 정의.

(2) Widget Class

• UUserWidget 클래스를 상속하여 C++ 또는 블루프린트에서 UI를 정의.
• 게임플레이와 UI 간 상호작용을 구현.

(3) Widget Tree

• 위젯 내부의 계층 구조를 나타냄.
• 모든 UI 요소는 부모-자식 관계로 구성.

---

3. Widget의 활용 방법

(1) Blueprint로 위젯 생성

1. Widget Blueprint 생성:
   • Add New > User Interface > Widget Blueprint 선택.
2. 디자인:
   • 캔버스 패널에 버튼, 텍스트, 이미지 등의 UI 요소를 배치.
3. 로직 추가:
   • 이벤트 그래프를 통해 UI 상호작용 정의.

(2) C++로 위젯 생성

1. UUserWidget 클래스 생성:
   • UUserWidget을 상속하여 커스텀 위젯 클래스 구현.
2. UI 구성:
   • 위젯에 필요한 컴포넌트(Button, Text 등) 추가.
3. 게임 내 위젯 표시:
   • 플레이어 화면에 위젯을 추가.

예제:

// 헤더 파일
#include "Blueprint/UserWidget.h"
#include "MyWidget.generated.h"

UCLASS()
class MYGAME_API UMyWidget : public UUserWidget
{
    GENERATED_BODY()

public:
    UFUNCTION(BlueprintCallable)
    void UpdateScore(int32 NewScore);
};

// CPP 파일
#include "MyWidget.h"void UMyWidget::UpdateScore(int32 NewScore)
{
    // 텍스트 업데이트 로직 구현
}

(3) 게임 내 위젯 추가

1. 위젯 생성:
   • UMG 위젯을 생성하여 인스턴스화.
2. 화면에 추가:
   • 플레이어의 화면에 위젯을 추가.

Blueprint 예제:

• Create Widget 노드를 사용해 위젯 생성.
• Add to Viewport 노드로 화면에 추가.

C++ 예제:

// 위젯 생성 및 추가
UMyWidget* MyWidget = CreateWidget<UMyWidget>(GetWorld(), MyWidgetClass);
if (MyWidget)
{
    MyWidget->AddToViewport();
}

---

4. Widget의 활용 사례

(1) HUD(Head-Up Display)

• 체력바, 탄약 수, 미션 정보 등 게임의 실시간 정보를 표시.

(2) 메뉴 시스템

• 메인 메뉴, 설정 화면, 게임 오버 화면 등.

(3) 인벤토리 시스템

• 게임 내 아이템을 표시하고, 드래그 앤 드롭으로 상호작용 구현.

(4) 대화 시스템

• 캐릭터 간의 대화를 표시하고 사용자 입력을 처리.

(5) 미니맵 및 퀘스트 추적기

• 플레이어가 게임 정보를 쉽게 파악할 수 있도록 지원.

---

5. Widget 시스템의 장점

1. 사용자 친화적:
   • Blueprint 기반의 시각적 설계로 비프로그래머도 쉽게 활용 가능.
2. 다양한 상호작용 지원:
   • 클릭, 드래그, 키보드 입력 등 다양한 입력 처리 가능.
3. 유연한 커스터마이징:
   • UMG와 C++을 결합하여 고급 UI 동작 구현.
4. 다양한 디바이스 지원:
   • 해상도와 화면 비율에 따라 UI 자동 조정 가능.

---

6. Widget 사용 시 유의점

1. 퍼포먼스 고려:
   • 복잡한 위젯은 렌더링 비용이 높으므로 최적화 필요.
2. 반응형 디자인:
   • 다양한 화면 크기와 비율에 맞는 레이아웃 설계.
3. 플레이어 경험:
   • UI 배치와 상호작용이 직관적이고 명확해야 함.

---

7. 확장 기능

• Animation:
  • 위젯에 애니메이션을 추가하여 동적인 UI 구현.
• Dynamic Widget Loading:
  • 필요할 때만 위젯을 로드하여 메모리 최적화.
• Slate Integration:
  • Slate를 사용해 UMG를 확장하여 커스텀 위젯 구현.

---

8. 결론

언리얼 엔진의 Widget 시스템은 게임에서 직관적이고 상호작용 가능한 UI를 구축하는 강력한 도구입니다. Blueprint와 C++을 활용해 간단한 HUD부터 복잡한 UI 시스템까지 제작 가능하며, 다양한 해상도와 디바이스에 대응할 수 있습니다. 위젯은 사용자 경험을 향상시키는 데 중요한 역할을 하므로, 게임 디자인에서 필수적으로 활용됩니다.

---

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---