5-3. Thumbnail & Preview | UE5 Editor Tools Deep Dive

01

UThumbnailRenderer

콘텐츠 브라우저 썸네일 렌더링 시스템

기본적으로 커스텀 에셋은 콘텐츠 브라우저에서 클래스 이름만 표시됩니다. UThumbnailRenderer를 구현하면 에셋 내용을 반영하는 커스텀 썸네일을 그릴 수 있습니다.

렌더러 베이스	용도	난이도
`UDefaultSizedThumbnailRenderer`	2D 썸네일 (텍스트, 아이콘, 2D 그래픽)	쉬움
`UThumbnailRenderer`	3D 씬 기반 썸네일	어려움

02

커스텀 썸네일 구현

Dialogue Tree 에셋의 커스텀 썸네일 만들기

                    UDialogueTreeThumbnailRenderer.h
                    #pragma once

#include "ThumbnailRendering/DefaultSizedThumbnailRenderer.h"
#include "UDialogueTreeThumbnailRenderer.generated.h"

UCLASS()
class UDialogueTreeThumbnailRenderer
    : public UDefaultSizedThumbnailRenderer
{
    GENERATED_BODY()

public:
    virtual void Draw(
        UObject* Object,
        int32 X, int32 Y,
        uint32 Width, uint32 Height,
        FRenderTarget* Target,
        FCanvas* Canvas,
        bool bAdditionalViewFamily) override;

    virtual bool CanVisualizeAsset(
        UObject* Object) override;
};
                

                    UDialogueTreeThumbnailRenderer.cpp
                    #include "UDialogueTreeThumbnailRenderer.h"
#include "UDialogueTree.h"
#include "CanvasItem.h"
#include "Engine/Canvas.h"

bool UDialogueTreeThumbnailRenderer::CanVisualizeAsset(
    UObject* Object)
{
    return Object &&
        Object->IsA<UDialogueTree>();
}

void UDialogueTreeThumbnailRenderer::Draw(
    UObject* Object,
    int32 X, int32 Y,
    uint32 Width, uint32 Height,
    FRenderTarget* Target,
    FCanvas* Canvas,
    bool bAdditionalViewFamily)
{
    UDialogueTree* Tree =
        Cast<UDialogueTree>(Object);
    if (!Tree) return;

    // 배경색
    FCanvasTileItem Background(
        FVector2D(X, Y),
        GWhiteTexture,
        FVector2D(Width, Height),
        FLinearColor(0.05f, 0.1f, 0.15f));
    Canvas->DrawItem(Background);

    // 아이콘/헤더 텍스트
    FString HeaderText = TEXT("DLG");
    UFont* Font = GEngine->GetLargeFont();

    float TextWidth, TextHeight;
    StringSize(Font, TextWidth, TextHeight,
        *HeaderText);

    FCanvasTextItem Header(
        FVector2D(
            X + (Width - TextWidth) * 0.5f,
            Y + Height * 0.15f),
        FText::FromString(HeaderText),
        Font,
        FLinearColor(0.0f, 0.8f, 1.0f));
    Header.Scale = FVector2D(1.2f, 1.2f);
    Canvas->DrawItem(Header);

    // 에셋 이름
    FString TreeName = Tree->TreeName.IsEmpty()
        ? Tree->GetName() : Tree->TreeName;
    UFont* SmallFont = GEngine->GetSmallFont();

    FCanvasTextItem NameText(
        FVector2D(X + 4, Y + Height * 0.5f),
        FText::FromString(TreeName),
        SmallFont,
        FLinearColor::White);
    Canvas->DrawItem(NameText);

    // 노드 수 표시
    FString NodeCount = FString::Printf(
        TEXT("Nodes: %d"), Tree->Nodes.Num());
    FCanvasTextItem CountText(
        FVector2D(X + 4, Y + Height * 0.7f),
        FText::FromString(NodeCount),
        SmallFont,
        FLinearColor(0.6f, 0.6f, 0.6f));
    Canvas->DrawItem(CountText);
}
                

03

썸네일 렌더러 등록

모듈에서 커스텀 렌더러 등록 및 해제

                    C++ - 썸네일 렌더러 등록
                    #include "ThumbnailRendering/ThumbnailManager.h"

void FMyGameEditorModule::StartupModule()
{
    // 썸네일 렌더러 등록
    UThumbnailManager::Get().RegisterCustomRenderer(
        UDialogueTree::StaticClass(),
        UDialogueTreeThumbnailRenderer::StaticClass());
}

void FMyGameEditorModule::ShutdownModule()
{
    if (UObjectInitialized())
    {
        UThumbnailManager::Get().UnregisterCustomRenderer(
            UDialogueTree::StaticClass());
    }
}
                

UObjectInitialized 체크

ShutdownModule에서 UThumbnailManager::Get()을 호출하기 전에 UObjectInitialized()를 확인해야 합니다. 엔진 종료 시 UObject 시스템이 이미 해제된 상태일 수 있습니다.

04

에셋 아이콘 커스터마이징

Slate 스타일로 커스텀 에셋 아이콘 등록

                    C++ - 커스텀 아이콘 등록
                    void FMyGameEditorModule::StartupModule()
{
    // 커스텀 Slate 스타일 세트 생성
    StyleSet = MakeShareable(new FSlateStyleSet(
        "MyGameEditorStyle"));

    // 아이콘 리소스 등록
    FString IconPath = IPluginManager::Get()
        .FindPlugin(TEXT("MyGame"))
        ->GetBaseDir()
        / TEXT("Resources");

    StyleSet->Set(
        "ClassIcon.DialogueTree",
        new FSlateImageBrush(
            IconPath / "DialogueTree_16x.png",
            FVector2D(16.0f, 16.0f)));

    StyleSet->Set(
        "ClassThumbnail.DialogueTree",
        new FSlateImageBrush(
            IconPath / "DialogueTree_64x.png",
            FVector2D(64.0f, 64.0f)));

    FSlateStyleRegistry::RegisterSlateStyle(*StyleSet);
}

void FMyGameEditorModule::ShutdownModule()
{
    FSlateStyleRegistry::UnRegisterSlateStyle(*StyleSet);
}
                

아이콘 네이밍 규칙

스타일 이름	크기	용도
`ClassIcon.ClassName`	16x16	트리 뷰, 작은 아이콘
`ClassThumbnail.ClassName`	64x64	콘텐츠 브라우저 썸네일

클래스 이름은 접두사(U, A)를 제외한 이름입니다. UDialogueTree는 "ClassIcon.DialogueTree"로 등록합니다.

SUMMARY

핵심 요약

UThumbnailRenderer를 상속하여 콘텐츠 브라우저에서 에셋의 커스텀 썸네일을 렌더링합니다
UDefaultSizedThumbnailRenderer가 2D 썸네일의 편리한 베이스 클래스이며, FCanvas로 텍스트와 도형을 그립니다
UThumbnailManager::RegisterCustomRenderer로 에셋 클래스와 렌더러를 연결합니다
커스텀 Slate 스타일 세트로 ClassIcon(16x16)과 ClassThumbnail(64x64) 이미지를 등록합니다
ShutdownModule에서 UObjectInitialized() 체크 후 렌더러를 해제해야 안전합니다

PRACTICE

도전 과제

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

실습 1: 커스텀 에셋 썸네일 렌더러

UThumbnailRenderer를 상속받아 커스텀 에셋의 썸네일을 렌더링하세요. Draw() 함수에서 FCanvas를 사용하여 에셋의 핵심 정보(아이콘, 이름, 상태)를 썸네일에 그리고, 콘텐츠 브라우저에서 확인하세요.

실습 2: 에셋 미리보기 씬 구성

FPreviewScene을 사용하여 커스텀 에셋의 3D 프리뷰를 에셋 에디터에 추가하세요. SViewport와 FEditorViewportClient를 결합하여 에셋 데이터를 기반으로 3D 미리보기를 렌더링하세요.

심화 과제: 인터랙티브 에셋 프리뷰 시스템

에셋 에디터의 프리뷰 뷰포트에서 마우스로 회전/줌, 프로퍼티 변경 시 실시간 업데이트, 애니메이션 재생 등 인터랙티브한 프리뷰 시스템을 구현하세요. 백그라운드, 라이팅, 포스트 프로세스 설정도 커스터마이징 가능하게 만드세요.