Unreal UI - 범용 버튼 UI 컴포넌트 구축기

서론

게임 개발에서는 반복적으로 사용되는 UI 요소의 재사용성과 커스터마이즈 가능성이 매우 중요합니다. 이번 글에서는 디자이너의 편의성, 런타임 유연성, 성능 최적화를 모두 고려한 범용 C++ 커스텀 버튼 위젯 시스템 구축 과정을 공유합니다. 해당 시스템은 블루프린트와 C++ 간의 경계를 효과적으로 넘나들며, 실시간 디자인 반영과 성능 최적화를 모두 만족합니다.

---

✅ 전체 작업 요약: C++ 커스텀 버튼 위젯 시스템 구축

1️⃣ UCustomButtonWidget 클래스 생성

• 부모 클래스: UUserWidget
• 위젯 바인딩: ButtonMain, TextMain
• 기본 틀 구성: 디자이너가 시각적으로 작업할 수 있도록 최소한의 바인딩 요소 구성

2️⃣ 핵심 사용자 설정 변수 설계

디자이너와 런타임 모두 대응 가능한 구조를 위해 모든 변수는 EditAnywhere, ExposeOnSpawn=true 설정:

UPROPERTY(EditAnywhere, BlueprintReadWrite, ExposeOnSpawn)
FText ButtonText;

UPROPERTY(EditAnywhere, BlueprintReadWrite, ExposeOnSpawn)
bool bShowText;

UPROPERTY(EditAnywhere, BlueprintReadWrite, ExposeOnSpawn)
FSlateColor TextColor, ButtonColor;

UPROPERTY(EditAnywhere, BlueprintReadWrite, ExposeOnSpawn)
int32 FontSize;

UPROPERTY(EditAnywhere, BlueprintReadWrite, ExposeOnSpawn)
ETextJustify::Type TextJustification;

UPROPERTY(EditAnywhere, BlueprintReadWrite, ExposeOnSpawn)
FSlateBrush NormalStyle, HoveredStyle, PressedStyle;

UPROPERTY(EditAnywhere, BlueprintReadWrite, ExposeOnSpawn)
USoundBase* ClickSound;

UPROPERTY(EditAnywhere, BlueprintReadWrite, ExposeOnSpawn)
USoundBase* HoverSound;

3️⃣ 위젯 초기화 함수

• ApplyText(): 텍스트, 폰트 크기, 색상, 정렬 적용
• ApplyStyle(): 슬레이트 브러시 기반 버튼 스타일 설정
• HandleClicked() / HandleHovered(): 사운드 재생 및 디스패처 호출

4️⃣ 버튼 디스패처 이벤트 설계

외부에서 이벤트 바인딩이 가능한 구조:

UPROPERTY(BlueprintAssignable)
FOnButtonClickedEvent OnCustomClicked;

5️⃣ NativePreConstruct() 활용

디자이너가 위젯 에디터 상에서 실시간으로 설정값 확인 가능:

virtual void NativePreConstruct() override
{
    Super::NativePreConstruct();
    ApplyText();
    ApplyStyle();
}

6️⃣ 블루프린트 확장: WBP_CustomButton

• C++ 기반 위젯을 상속받은 블루프린트 생성
• 디자이너가 Details 패널에서 직접 텍스트/색상/폰트/정렬/이미지/사운드 설정
• 다른 UI에 드래그&드롭으로 손쉽게 배치 가능

---

🎯 결과 요약 테이블

항목 상태

디자이너 실시간 적용	✅ NativePreConstruct() 반영 완료
런타임 커스터마이즈	✅ ExposeOnSpawn 완비
재사용성	✅ 완전 범용 위젯 구조
사운드 반응	✅ 클릭/호버 별도 설정 가능
텍스트 설정	✅ 정렬/색상/폰트 크기 모두 지원
성능	✅ C++ 기반 최적화 설계 완료

---

마무리

이번에 제작한 커스텀 버튼 시스템은 반복적인 UI 작업을 획기적으로 단순화하고, 런타임과 디자인 타임 모두에서 유연성을 제공하는 구조입니다. 이 방식을 기반으로 다양한 범용 위젯 시스템으로 확장해 나갈 수 있으며, 프로젝트의 UI 퀄리티와 생산성 향상에 큰 도움이 될 것입니다.

 

https://youtu.be/rpNmIc_qZPg