[UE5 라이라(Lyra) 샘플로 오버워치 만들기] 8. 설정 UI 바꾸기(2)
Lyra 세팅 UI 커스터마이징 (2) - 패널 텍스트 수정하기
지난 시간에 이어서 이번에는 세팅 패널의 텍스트를 수정해보겠습니다.
기존에는 배경과 텍스트 모두 밝은 색이라,
글자가 잘 보이지 않는 문제가 있었죠.
오늘은 이 문제를 해결해보겠습니다!
1. 리스트 엔트리 백그라운드 수정
먼저 W_SettingsPanel 위젯으로 갑니다.
- ListView_Settings를 확인해보니
- Entry Widget Class가 W_SettingsListEntry_Missing으로 설정되어 있었습니다.
👉 이 W_SettingsListEntry_Missing 위젯을 수정해주겠습니다.
W_SettingsListEntry_Missing 위젯 살펴보기
구조를 보면, 백그라운드는
Background 위젯 안에 있는
W_SettingEntryBackground 위젯으로 관리되고 있습니다.
그래서 바로 W_SettingEntryBackground로 이동합니다.
W_SettingEntryBackground 수정
- AnimBoundEntryBorder의 색깔을 검정색으로 변경
- 그리고 알파 값(Opacity) 를 0으로 설정했습니다.
이러면 백그라운드가 깔끔하게 없어지고, 엔트리만 강조됩니다.
Tip 💡
- 이 위젯은 "네임 슬롯(NameSlot)" 구조를 사용합니다.
- 그래서 W_SettingEntryBackground 위젯을 추가하면
AnimBoundEntryBorder 밑으로 자식 위젯들을 넣을 수 있어요!
2. 리스트 텍스트 색상 변경
다시 W_SettingsListEntry_Missing로 돌아와서
- Text_SettingName
- Text_SettingName1
이 두 텍스트 블록의 폰트 색깔을 하얀색으로 변경했습니다.
W_LyraSettingScreen에서 확인해보면
이렇게 해서 리스트 항목들이 훨씬 잘 보이게 됐어요.
3. 디테일 패널 텍스트 수정
리스트는 해결했으니, 이제 디테일 패널도 수정합니다.
- 다시 W_SettingsPanel로 가서
- Details_Settings를 선택합니다.
확인해보니 이 영역은 W_GameSettingsDetailView 위젯을 사용하고 있네요.
W_GameSettingsDetailView 살펴보기
구조를 보면,
리치 텍스트(RichText) 를 이용해 설명을 출력하고 있습니다.
그래서, 리치 텍스트 스타일을 수정해야 합니다.
리치 텍스트 테이블 수정
사용하고 있는 테이블은:
- SettingsDescriptionStyles
- SettingsDescriptionWarningStyles
이 두 가지였습니다.
두 테이블 모두 컬러를 검정색으로 수정했습니다.
두테이블 컬러를 전부 검정색으로 바꾸겠습니다.
SettingsDescriptionStyles
SettingsDescriptionWarningStyes
최종 확인
변경사항을 적용한 뒤, W_LyraSettingScreen으로 돌아와서 확인해봤습니다.
- 리스트 텍스트: 잘 보임 ✅
- 디테일 텍스트: 깔끔하게 검정색으로 잘 보임 ✅
만약 바로 반영이 안 된다면?
가끔 에디터가 텍스처나 테이블 변경을 바로 인식 못 할 때가 있습니다.
그럴 땐 언리얼 에디터를 재시작하면 정상 적용됩니다!
W_LyraSettingScreen위젯으로 돌아와서 확인해볼게요.
확실히 이제 더 잘보이는거를 알 수 있어요.
이제는 정말 실행시키고 확인해보겠습니다.
실행 화면
변경전
변경후
그런데 적용이 안 된 것 같다?
분명히 List Entry하고, 디테일 패널 텍스트를 변경했는데 적용이 안된거 같네요.
원인 분석과 추가 수정을 다음 시간에 이어서 진행해보겠습니다!
마무리
이번 시간에는
- 리스트 엔트리 백그라운드 수정
- 리스트 텍스트 색상 변경
- 디테일 패널 텍스트 색상 변경