[UE5 라이라(Lyra) 샘플로 오버워치 만들기] 4. 메인 프론트엔드 바꾸기

Lyra 메인 화면 UI를 커스터마이징 해보자

이번 포스팅에서는 Lyra Starter Game의 메인 화면 UI를 커스터마이징해보는 과정을 소개드릴게요.
로비 UI의 구조를 이해하고, 실제로 화면을 바꾸는 데 필요한 설정과 위젯 변경까지 함께 해볼게요

 

메인 UI는 어디서 생성될까?

먼저 B_LyraFrontEnd_Experience 블루프린트를 열어보면,

 

GameState에 B_LyraFrontendStateComponent가 추가된 걸 확인할 수 있어요.

이 컴포넌트를 보면 MainScreenClass라는 UPROPERTY를 가지고 있죠.

 

 UI를 생성하는 함수는?

void ULyraFrontendStateComponent::FlowStep_TryShowMainScreen(FControlFlowNodeRef SubFlow)
{
	if (UPrimaryGameLayout* RootLayout = UPrimaryGameLayout::GetPrimaryGameLayoutForPrimaryPlayer(this))
	{
		constexpr bool bSuspendInputUntilComplete = true;
		RootLayout->PushWidgetToLayerStackAsync<UCommonActivatableWidget>(FrontendTags::TAG_UI_LAYER_MENU, bSuspendInputUntilComplete, MainScreenClass,
			[this, SubFlow](EAsyncWidgetLayerState State, UCommonActivatableWidget* Screen) {
			switch (State)
			{
			case EAsyncWidgetLayerState::AfterPush:
				bShouldShowLoadingScreen = false;
				SubFlow->ContinueFlow();
				return;
			case EAsyncWidgetLayerState::Canceled:
				bShouldShowLoadingScreen = false;
				SubFlow->ContinueFlow();
				return;
			}
		});
	}
}

이 함수가 바로 MainScreenClass 위젯을 푸시(push) 해주는 부분입니다.

 

 

여기서 MainScreenClass가 바로 UI로 띄워지는 클래스이고,

블루프린트에서 확인해보면 W_LyraFrontEnd 위젯이 사용되고 있다는 걸 알 수 있어요.

 

W_LyraFrontEnd 커스터마이징하기

이제 이 위젯을 실제로 커스터마이징해봅시다!

 

1. 사이즈 박스 수정

먼저 PanelWidthSB라는 사이즈박스를 선택해서 아래와 같이 설정해줍니다:

 

 

• 가로 정렬 : 좌측 정렬
• Width Override : 700

이렇게 하면 전체 패널이 정렬돼요.

 

2. 백그라운드 제거

불필요한 배경 효과들을 지워줄게요. 다음 위젯들을 삭제하거나 알파값을 0으로 설정하세요:

• AdditiveBoost
• BackgroundBlur
• RingBorder

이렇게 하면 깔끔하게 백그라운드가 제거됩니다.

 

3. 로고 텍스트로 변경하기

로고 영역인 LogoOverlay 안에는 기존에 로고 관련된 이미지들이 들어가 있는데요, 이걸 제거하고 텍스트로 바꿔보죠.

• 기존 이미지 위젯 삭제
• CommonTextBlock 추가
• 텍스트 크기: 50
• 정렬: 좌측 정렬

깔끔한 타이틀 스타일로 변경되었습니다!

그다음에 텍스트 폰트를 사이즈 50, 좌측정렬, 해주면 완성입니다.

 

마무리

이제 메인 화면 UI가 여러분만의 스타일로 바뀌었을 거예요.
다음 포스팅에서는 메뉴 버튼 커스터마이징도 다뤄볼 예정입니다.