[UE5 라이라(Lyra) 샘플로 오버워치 만들기] 9. 설정 UI 바꾸기(3)
Lyra 세팅 UI 커스터마이징 - ListEntry와 디테일 패널 텍스트 수정
지난 시간에 List Entry와 디테일 패널 텍스트를 수정했었는데, 적용이 덜 된 부분이 있었습니다.
이번 시간에는 이 부분을 완전히 정리해보겠습니다!
W_SettingsPanel 살펴보기
먼저 W_SettingsPanel 위젯을 열어 어떤 리스트가 표시되는지 확인해봅니다.
- ListView_Settings를 보면,
- GameSettingRegistryVisuals 라는 DataAsset을 사용하는 것을 알 수 있습니다.
즉, 리스트에 표시되는 Entry 위젯들은 이 GameSettingRegistryVisuals에서 관리되고 있습니다.
GameSettingRegistryVisuals 분석
GameSettingRegistryVisuals DataAsset을 열어보면,
오른쪽 Value에 다양한 Entry 위젯이 등록되어 있는 것을 볼 수 있습니다.
👉 이 말은 곧, Entry UI를 바꾸려면 이 각각의 위젯을 직접 수정해야 한다는 뜻입니다.
Entry 위젯 텍스트 컬러 수정하기
각각의 Entry 위젯을 열어 텍스트 색상을 전부 하얀색(White) 으로 변경했습니다.
여기 엔트리 위젯들 텍스트를 전부 하얀색 컬러로 해줍시다.
버튼액션 컬러는
✍️ 참고: 버튼 액션 컬러는 디테일 창에서도 쉽게 수정할 수 있어요!
아쉬웠던 점
Entry 위젯들이 모듈화 되어 있지 않고, 각각 따로따로 되어 있어서,
모든 위젯을 일일이 찾아 수정해야 했던 점은 다소 아쉬웠습니다.
(모듈화 되어 있었으면 한 번에 수정 가능했을 텐데요!)
수정 결과
실행해보니,
- 리스트 Entry들은 전부 하얀색 컬러로 깔끔하게 수정된 것을 확인할 수 있었습니다. 🎉
하지만...
오른쪽 디테일 창을 보면 여전히 하늘색 글자 때문에 잘 안 보이는 부분이 있었습니다.
디테일 창 문제 수정
이제 디테일 창 문제를 해결해봅시다.
1. Extension 살펴보기
다시 GameSettingRegistryVisuals를 보면,
- Extensions 항목에 W_EnumOptionExtension 위젯이 등록되어 있습니다.
W_EnumOptionExtension 수정
W_EnumOptionExtension 위젯을 열고 보면,
- 내부의 EnumOptions 항목에서
- Entry Widget Class로 W_EnumOptionDetailsEntry 를 사용하고 있는 걸 확인할 수 있습니다.
W_EnumOptionDetailsEntry 수정
W_EnumOptionDetailsEntry 위젯으로 이동해서,
- 텍스트 색상을 하얀색(White) 으로 변경했습니다.
최종 수정
하지만 실행해보니, 배경이 하늘색인 상태에서 하얀 텍스트는 보기가 좋지 않았습니다.
그래서:
뭔가 안 어울리는거 같아 백그라운드 없애고 텍스트 컬러를 검정색으로 바꿔줬습니다.
- 배경을 없애고 (Brush Color 알파값 0)
- 텍스트 컬러를 검정색(Black) 으로 바꿔주었습니다.
실행화면
변경전
변경후
최종적으로 실행해보니:
- 리스트도
- 디테일 창도
깔끔하고 보기 쉬운 디자인으로 수정된 것을 확인할 수 있었습니다!
마무리
이번 시간에는
List Entry와 디테일 패널 UI까지 모두 완성해봤습니다.