[UE5 라이라(Lyra) 샘플로 오버워치 만들기] 2. 로딩화면 바꾸기

언리얼 Lyra 프로젝트 – 로딩 화면 커스터마이징 하기

Lyra 프로젝트를 커스터마이징하면서 처음 눈에 들어온 건 바로 로딩 화면이었습니다.
처음 프로젝트를 실행하면 나오는 이 로딩 UI, 뭔가 내 스타일로 바꿔보고 싶다는 생각이 들었습니다.
그래서 이번에는 Lyra의 로딩 화면을 커스터마이징하는 과정을 간단히 정리해봤습니다.

 

로딩화면을 바꿔보도록 하겠습니다.

 

🔍 로딩 화면 위젯은 어디에 있을까?

먼저 로딩 화면 위젯이 어디서 로드되는지부터 확인해야겠죠.
CommonLoadingScreenSettings라는 클래스를 살펴보면,
이 클래스가 **Config에서 설정된 경로(Path)**를 통해 위젯을 로딩하는 걸 알 수 있습니다.

 

 

DefaultGame.ini를 열어보면 사용 중인 로딩 위젯이
바로 **W_LoadingScreen_Host**라는 걸 확인할 수 있었습니다.

 

🧱 위젯 수정하기

에디터에서 W_LoadingScreen_Host를 열어보면,
그 안에서 W_LyraLogo_LoadingScreen 위젯을 사용 중이에요.

이제 본격적으로 커스터마이징을 해보죠.

 

 

1. Border 머티리얼 색상 바꾸기

먼저 로딩 화면의 배경인 Border 위젯을 수정해봤습니다.
사용된 머티리얼 인스턴스로 가서 Color 파라미터 값들을 전부 하얗게 설정했어요.

👉 이렇게 하면 전체 로딩 화면의 느낌이 확 바뀝니다.

 

2. 로고 위치와 사이즈 조정

다음은 로딩 화면의 중심인 로고입니다.
기본적으로 중앙에 위치해 있는데, 살짝 위로 올리고 사이즈를 조절해줬어요.
로고에 적용된 머티리얼도 교체해서 내가 원하는 스타일로 바꿔줬습니다.

 

3. 텍스트 추가하기

로고 아래에는 텍스트 위젯을 새로 추가했습니다.
원하는 문구를 넣고 위치도 적절히 조정해서 자연스럽게 보이도록 구성했습니다.

 

4. 디버그 텍스트 위치 조정

마지막으로 W_LoadingScreen_Host로 돌아와서
W_LoadingScreenReasonDebugText 위젯의 위치를 살짝 손봤습니다.

 

최종 결과

이런 식으로 해서 나만의 로딩 화면을 완성했습니다!
…그런데 막상 완성하고 나니 색상이 좀 아쉬워서 다시 돌아가서 컬러만 살짝 바꿨네요.

 

 

⏱ 로딩 화면 길이 설정하기

이제 로딩 위젯을 다 꾸몄으니, 실제로 게임을 실행해서 확인해보기 전에 한 가지 더 손봐야 할 게 있습니다.

바로 로딩 화면이 얼마 동안 보여질지 설정하는 부분이에요.

---

📍 시작 레벨 설정: L_LyraFrontEnd

우선 앞으로 사용할 시작 레벨인
L_LyraFrontEnd 레벨로 이동해줍니다.

이 레벨에는 로비 배경을 랜덤으로 보여주는
**B_LoadRandomLobbyBackground**라는 블루프린트가 배치되어 있어요.

이 블루프린트를 열어보면,
로딩 화면이 얼마 동안 보여질지를 설정할 수 있는 부분이 있습니다.

 

🛠 로딩 시간과 텍스트 커스터마이징

처음엔 기본 값으로 **0.5초**로 설정되어 있었는데,
이 값을 **5초**로 늘려줬습니다.

그리고 프로세스 Task 이름도
**"접속 중..."**으로 바꿔줬어요.

 

 

 

실행 결과

 

변경전

 

 

변경 후