3-1. Slate 기초 | UE5 UI Deep Dive

01

Slate 선언적 문법

SNew, SAssignNew, 연산자 체이닝의 기본

Slate는 C++에서 UI를 구성하기 위한 선언적(Declarative) 문법을 제공합니다. SNew() 매크로와 operator+, operator[] 를 사용하여 위젯 트리를 코드로 작성합니다.

C++ - Slate 선언적 문법 기본
// SNew로 위젯 생성
TSharedRef<SWidget> MyWidget =
    SNew(SVerticalBox)

    // + 연산자로 자식 슬롯 추가
    + SVerticalBox::Slot()
    .AutoHeight()     // 내용에 맞는 높이
    .Padding(10.f)
    [
        // [] 안에 슬롯의 자식 위젯 배치
        SNew(STextBlock)
        .Text(FText::FromString("제목"))
        .Font(FCoreStyle::GetDefaultFontStyle("Bold", 24))
    ]

    + SVerticalBox::Slot()
    .FillHeight(1.0f)  // 남은 공간 채우기
    [
        SNew(SScrollBox)
        + SScrollBox::Slot()
        [
            SNew(STextBlock)
            .Text(FText::FromString("내용"))
            .AutoWrapText(true)
        ]
    ];

// SAssignNew: 위젯을 변수에 저장하면서 생성
TSharedPtr<STextBlock> MyText;
SAssignNew(MyText, STextBlock)
    .Text(FText::FromString("참조 저장"));

SNew vs SAssignNew

SNew(WidgetType)은 위젯을 생성하여 TSharedRef로 반환합니다. SAssignNew(Var, WidgetType)은 생성과 동시에 TSharedPtr 변수에 할당합니다. 나중에 위젯 속성을 변경해야 한다면 SAssignNew로 참조를 유지하세요.

02

SCompoundWidget

복합 위젯 작성의 표준 패턴

SCompoundWidget은 여러 자식 위젯을 조합하여 새로운 위젯을 만드는 베이스 클래스입니다. 대부분의 커스텀 Slate 위젯은 이 클래스를 상속합니다.

C++ - SCompoundWidget 정의
// .h 파일
class SMyHealthBar : public SCompoundWidget
{
public:
    // Slate 인자 선언 시작
    SLATE_BEGIN_ARGS(SMyHealthBar)
        : _MaxHealth(100.f)
        , _BarColor(FLinearColor::Green)
    {}
        // SLATE_ARGUMENT: 값 인자 (생성 시 1회 전달)
        SLATE_ARGUMENT(float, MaxHealth)

        // SLATE_ATTRIBUTE: 함수/델리게이트로 동적 바인딩 가능
        SLATE_ATTRIBUTE(float, CurrentHealth)

        // SLATE_ATTRIBUTE: 색상도 동적 바인딩
        SLATE_ATTRIBUTE(FLinearColor, BarColor)

        // SLATE_EVENT: 델리게이트 이벤트
        SLATE_EVENT(FOnFloatValueChanged, OnHealthChanged)
    SLATE_END_ARGS()

    // 위젯 생성 함수
    void Construct(const FArguments& InArgs);

private:
    float MaxHealth;
    TAttribute<float> CurrentHealth;
    TAttribute<FLinearColor> BarColor;
};

C++ - SCompoundWidget 구현
// .cpp 파일
void SMyHealthBar::Construct(const FArguments& InArgs)
{
    MaxHealth = InArgs._MaxHealth;
    CurrentHealth = InArgs._CurrentHealth;
    BarColor = InArgs._BarColor;

    // ChildSlot에 위젯 트리 구성
    ChildSlot
    [
        SNew(SOverlay)

        // 배경
        + SOverlay::Slot()
        [
            SNew(SImage)
            .ColorAndOpacity(FLinearColor(0.1f, 0.1f, 0.1f))
        ]

        // 체력바 (Attribute 바인딩으로 자동 업데이트)
        + SOverlay::Slot()
        [
            SNew(SProgressBar)
            .Percent_Lambda([this]()
            {
                return CurrentHealth.Get() / MaxHealth;
            })
            .FillColorAndOpacity(BarColor)
        ]
    ];
}

매크로	용도	바인딩
`SLATE_ARGUMENT`	생성 시 전달되는 고정 값	값만 (함수 바인딩 불가)
`SLATE_ATTRIBUTE`	동적으로 변할 수 있는 속성	값 또는 TAttribute (함수/람다)
`SLATE_EVENT`	델리게이트 콜백	델리게이트 바인딩
`SLATE_NAMED_SLOT`	이름이 있는 자식 위젯 슬롯	SWidget 슬롯

03

Slate 위젯 사용하기

생성한 커스텀 Slate 위젯의 인스턴스화

C++ - 커스텀 Slate 위젯 사용
// SMyHealthBar 사용 예
TSharedRef<SWidget> Widget =
    SNew(SMyHealthBar)
    .MaxHealth(100.f)
    // Attribute 바인딩: 매 프레임 함수 호출로 값 갱신
    .CurrentHealth_Lambda([this]()
    {
        return PlayerCharacter->GetHealth();
    })
    // 색상도 동적 바인딩
    .BarColor_Lambda([this]()
    {
        float Pct = PlayerCharacter->GetHealthPercent();
        return FLinearColor::LerpUsingHSV(
            FLinearColor::Red, FLinearColor::Green, Pct);
    })
    .OnHealthChanged_Lambda([](float NewValue)
    {
        UE_LOG(LogTemp, Log, TEXT("Health: %f"), NewValue);
    });

TAttribute 성능 고려

SLATE_ATTRIBUTE는 매 프레임 바인딩 함수를 호출하여 값을 폴링합니다. 자주 변하지 않는 속성에는 SLATE_ARGUMENT를 사용하고, 필요할 때만 SetXxx() 메서드로 직접 업데이트하는 것이 더 효율적입니다. UE5의 TSlateAttribute는 Invalidation 시스템과 연동되어 더 나은 성능을 제공합니다.

04

주요 Slate 위젯 카탈로그

가장 자주 사용되는 Slate 위젯들

Slate 위젯	UMG 대응	설명
`STextBlock`	UTextBlock	텍스트 표시
`SImage`	UImage	이미지/브러시 표시
`SButton`	UButton	클릭 가능한 버튼
`SVerticalBox`	UVerticalBox	세로 레이아웃
`SHorizontalBox`	UHorizontalBox	가로 레이아웃
`SOverlay`	UOverlay	겹침 레이아웃
`SCanvas`	UCanvasPanel	자유 배치 캔버스
`SScrollBox`	UScrollBox	스크롤 컨테이너
`SProgressBar`	UProgressBar	진행률 바
`SBorder`	UBorder	배경/테두리 장식

SUMMARY

핵심 요약

Slate는 SNew() 매크로와 operator+, operator[]를 사용한 선언적 C++ 문법으로 UI를 구성합니다
SCompoundWidget은 여러 Slate 위젯을 조합한 커스텀 위젯의 표준 베이스 클래스입니다
SLATE_ARGUMENT(고정값), SLATE_ATTRIBUTE(동적 바인딩), SLATE_EVENT(델리게이트)로 위젯 인터페이스를 정의합니다
TAttribute는 매 프레임 폴링하므로 자주 변하지 않는 속성에는 직접 Set 호출이 더 효율적입니다
대부분의 UMG 위젯은 대응하는 Slate 위젯이 있으며, Slate 수준에서 더 세밀한 제어가 가능합니다

PRACTICE

도전 과제

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

실습 1: SNew 선언적 문법으로 UI 트리 작성

C++에서 SNew(SVerticalBox)를 사용하여 3개의 슬롯(제목 텍스트, 구분선, 설명 텍스트)이 있는 기본 Slate UI를 작성하세요. AutoHeight(), FillHeight(), Padding() 등 슬롯 옵션을 다양하게 실험합니다.

실습 2: SCompoundWidget 커스텀 위젯 제작

SCompoundWidget을 상속하여 SLATE_BEGIN_ARGS로 Label, IconBrush, OnClicked 파라미터를 받는 '아이콘 버튼' 위젯을 만드세요. Construct()에서 ChildSlot에 SOverlay로 이미지 위에 텍스트를 배치합니다.

심화 과제

Slate로 에디터 탭(SDockTab)에 표시되는 커스텀 에디터 유틸리티 패널을 만드세요. SListView로 레벨 내 액터 목록을 표시하고, 선택한 액터의 프로퍼티를 표시/편집하는 기능을 구현합니다.