[UE5 라이라(Lyra) 샘플로 오버워치 만들기] 7. 설정 UI 바꾸기(1)

Lyra 세팅 UI 커스터마이징 해보기

이번 시간에는 Lyra 샘플 프로젝트의 Setting UI를 커스터마이징해보겠습니다.

 

Setting UI는 어디에 있을까?

먼저, W_LyraFrontEnd 블루프린트를 살펴보면,

"설정" 버튼을 누를 때 W_LyraSettingScreen 위젯이 Push되는 것을 확인할 수 있습니다.

그래서 이번 작업의 메인 대상은 W_LyraSettingScreen 위젯입니다.

 

W_LyraSettingScreen 위젯

 

W_LyraSettingScreen 수정하기

W_LyraSettingScreen 위젯은 대략 이런 구조를 가지고 있습니다.

1. 세팅 탭(Tab) 정렬 변경

• TabSZ를 **좌측 정렬(Left Align)**로 변경했습니다.

 

먼저 세팅 탑 탭을 먼저 수정해보겠습니다.

 

TabSZ을 좌측정렬로 바꿔주시고

 

헤더(Header) 백그라운드 수정

• HeaderBorder의 브러쉬 컬러(Brush Color) 알파 값을 0으로 설정하여, 헤더 배경을 투명하게 만들었습니다.

 

전체 백그라운드 변경

이제 화면 전체 백그라운드도 수정해보겠습니다.

• MenuBorder를 수정해야 합니다.
• 참고로, 기존 머티리얼을 바로 수정하면 다른 곳에 영향이 갈 수 있으니, 항상 복제하는 것을 추천합니다.
  • (Reference Viewer로 어디서 쓰이는지 꼭 확인하세요!)

머티리얼 복제

• 기존 MI_UI_MenuBorder_SoftDarkBlue를 복사하여
• MI_UI_MenuBorder_SoftDarkBlue_HighOpacity_JH 라는 새로운 머티리얼 인스턴스를 만들었습니다.

 

머티리얼 세팅

• 복사한 머티리얼 인스턴스에서 Colors 파라미터 값들을 원하는 색상으로 수정했습니다.

결과적으로, 배경이 고급스러운 톤으로 변경된 걸 확인할 수 있었습니다.

 

 

세팅 패널 수정

이번에는 세팅 리스트가 있는 W_SettingsPanel 위젯을 수정해봅니다.

1. ListBorder 백그라운드 숨기기

• ListBorder의 브러쉬 컬러 알파 값을 0으로 설정해서, 패널의 배경을 투명하게 만들었습니다.

 

2. 결과 확인

• 다시 W_LyraSettingScreen으로 돌아와 확인해보니,
• 전체적으로 깔끔하게 변경된 UI를 볼 수 있었습니다.

 

실행 화면

변경전

변경후

 

 

 

다음시간에 이어서 하겠습니다.