[UE5 라이라(Lyra) 샘플로 오버워치 만들기] 5. 메인 메뉴 버튼 바꾸기

[Lyra 커스터마이징] 메인 메뉴 버튼 꾸며보기!

지난 시간에는 메인 프론트엔드 UI의 구조와 스타일을 수정해봤습니다.
이번 포스팅에서는 메인 화면의 메뉴 버튼을 직접 커스터마이징해볼게요.
디자인 변경뿐 아니라 호버(hover) 애니메이션까지 적용해보겠습니다!

 

사용 중인 버튼 위젯은?

Lyra의 메인 메뉴 버튼을 확인해보면 W_LyraMenuButton 위젯이 사용되고 있습니다.

 

 

📌 레퍼런스 뷰어로 확인해보면 이 위젯은 여러 곳에서 사용되고 있기 때문에

직접 수정하지 말고 복사해서 새 위젯으로 작업하는 것이 안전합니다.

 

새 위젯 만들기

W_LyraMenuButton을 복사해서 W_JHMenuButton이라는 새 위젯을 생성합니다.

기본 UI는 아래와 같이 생겼어요:

1. 불필요한 UI 제거

✅ 먼저 PreConstruct 이벤트 제거

PreConstruct는 디자인 데이터를 계속 바꿀 수 있기 때문에
편집 전에 연결을 끊어주는 것이 안전합니다.

 

✅ 배경 요소 제거

다음 이미지 컴포넌트들은 삭제하거나 알파값을 0으로 설정합니다:

 

• ButtonBorder
• TextShadow
• Ring
• Glow

 

배경 효과를 깔끔하게 제거하면 이렇게 변합니다

 

 

2. 텍스트 스타일 커스터마이징

ButtonTextBlock의 폰트 스타일을 변경합니다:

 

• 폰트 크기: 자유롭게 설정
• 폰트 종류: 프로젝트에 맞는 폰트로 변경
• 폰트 머티리얼: 입체감 있는 텍스트 느낌을 주고 싶다면 적용

커스터마이징 결과는 위처럼 변경됩니다:

 

 

3. 마우스 호버 애니메이션 추가

이제 마우스를 올렸을 때 실행되는 애니메이션을 추가해봅시다.

 

🔧 설정 방법:

1. OnHovered 애니메이션 추가
2. ButtonTextBlock에 Transform 트랙 추가
3. Scale 값을 아래처럼 설정:
   • 애니메이션 시간: 0.04
   • Hover 시 Scale:
     • X: 1.08
     • Y: 1.10

이제 마우스를 올렸을 때 살짝 커지는 느낌의 부드러운 애니메이션이 적용됩니다.

 

4. 메인 위젯에 적용하기

이제 W_LyraFrontEnd 위젯으로 돌아가서 변경한 버튼을 적용해볼 차례입니다.

▶ 기존 버튼 제거

기존에 배치되어 있던 W_LyraMenuButton들을 모두 제거해주세요.

 

▶ 새 버튼으로 교체

W_JHMenuButton을 배치한 후, 버튼 텍스트도 원하는 이름으로 변경합니다.

 

결과는 아래와 같이 깔끔하게 반영됩니다:

 

 

실행 화면

 

변경전

변경후

이제 게임을 실행해보면 스타일링된 메뉴 버튼과 애니메이션이 적용된 모습을 확인할 수 있습니다.