[UE5 라이라(Lyra) 샘플로 오버워치 만들기] 6. 플레이 선택 UI 바꾸기

 

플레이 버튼 UI 커스터마이징하기

오늘은 언리얼 엔진 프로젝트에서 플레이 버튼을 눌렀을 때 등장하는 UI를 커스터마이징해보겠습니다.

 

플레이 버튼을 누르면 어떤 UI가 나올까?

플레이 버튼을 클릭하면,

 

W_ExperienceSelectionScreen 위젯이 UI.Layer.Menu에 Push되는 구조로 되어있습니다.

따라서 우리가 수정할 대상은 W_ExperienceSelectionScreen 위젯입니다.

 

 

W_ExperienceSelectionScreen 위젯

 

W_ExperienceSelectionScreen 위젯은 다음과 같은 구조로 되어 있습니다.
전체적인 구성은 이미 완성되어 있기 때문에, 이번에는 텍스트와 폰트 스타일 위주로 변경을 진행합니다.

 

수정 사항

메인 메뉴 텍스트 변경

• 기존 메인 메뉴 텍스트를 "플레이"로 변경했습니다.
• 폰트 색깔도 흰색으로 변경했습니다.

 

 

하단 버튼 텍스트 변경

• 하단에 나열된 버튼들의 텍스트를 모두 수정했습니다.

• 버튼을 클릭하면 디테일 창에서 텍스트,텍스처를 쉽게 변경할 수 있습니다.

위와같이 변경하였습니다.

 

 

이번에는 플레이 메뉴의 배경을 커스터마이징해보겠습니다.

MenuBorder 이미지 살펴보기

 

플레이 메뉴의 배경은 MenuBorder 이미지로 설정되어 있습니다.
조금 더 깊게 살펴보면, MenuBorder는 MI_UI_MenuBorder_SoftDarkBlue 머티리얼 인스턴스를 사용하고 있습니다.

 

 

레퍼런스 뷰어 활용하기

여기서 중요한 팁!
항상 레퍼런스 뷰어를 활용해서 구조를 먼저 파악하는 걸 추천합니다.

• 원본 머티리얼이나 에셋을 직접 수정하면 프로젝트 전체에 영향을 줄 수 있습니다.
• 그러므로, 항상 복제본을 만들어 사용하는 게 안전합니다.

 

 

새로운 머티리얼 인스턴스 만들기

기존 머티리얼을 복사해서 새 인스턴스를 만들었습니다.

• 원본: MI_UI_MenuBorder_SoftDarkBlue
• 복제본: MI_UI_MenuBorder_SoftDarkBlue_JH

이제 복제한 MI_UI_MenuBorder_SoftDarkBlue_JH에서 색상을 수정해보겠습니다.

복제한 머티리얼 인스턴스에서 Color 파라미터를 조정하여
회색 느낌의 배경으로 변경했습니다.

필요에 따라 원하는 색상으로 자유롭게 커스터마이징할 수 있습니다.

 

최종 적용

마지막으로 MenuBorder에 적용된 머티리얼을
MI_UI_MenuBorder_SoftDarkBlue_JH로 변경해주면 완료입니다.

 

 

추가 스타일 변경

버튼 내부의 폰트 스타일이나 폰트 사이즈는
W_LyraTileButton 위젯에서 조정할 수 있습니다.

• W_LyraTileButton 위젯을 열어 원하는 폰트 스타일로 변경했습니다.
• 폰트 색깔과 폰트 사이즈도 함께 조정하여 더 깔끔한 UI를 완성했습니다.

 

최종 실행 화면

 

변경전

변경후

변경한 내용이 정상적으로 적용된 것을 확인할 수 있습니다.