2026/07/02 TIL

InGame UI

📝 [TIL] 언리얼 엔진 5 UMG 레이아웃 정렬 및 위젯 왜곡 해결기

1. 언리얼 에디터 테마 색상 커스텀

• 배운 점: 검은색 UI 오브젝트가 에디터 배경색에 묻혀 보이지 않을 때는 제작 중인 위젯이 아니라 에디터 자체의 외관 테마를 변경해야 한다.
• 핵심 요약: Editor Preferences(에디터 개인설정) > Appearance에서 기본 테마를 복제(Duplicate)한 뒤, 테마 편집기에서 Window/Panel Background 색상을 밝은 회색(Light Gray) 톤으로 올려주면 UI 식별이 훨씬 수월해진다. (완전한 흰색은 기존 글씨가 묻히므로 중간 톤이 베스트!)

2. UMG 레이아웃 정렬의 절대 법칙: "마우스 드래그 금지"

• 배운 점: UI가 사방으로 삐뚤빼뚤 튀고 정렬 옵션을 바꿔도 꼼짝 안 하던 근본적인 이유는 부모 그릇(Vertical Box 등)의 위치를 마우스로 대충 잡아 그릇 자체가 화면 중앙에서 벗어나 있었기 때문이다.
• 핵심 요약: UI 구조를 중앙 정렬할 때는 절대 수동으로 좌표를 맞추지 말고, 최상위 컨테이너 박스의 Anchor를 정중앙으로 잡은 뒤 Alignment 값을 0.5, 0.5로, Position 값을 0, 0으로 입력해 자석처럼 붙여야 한다. 그 후 내부 자식들의 Horizontal Alignment를 Align Center로 통일하면 완벽한 일직선 정렬이 완성된다.

3. 위젯 픽셀 깨짐과 흐릿함(Blur) 방지

• 배운 점: 크기가 작다고 Render Transform의 Scale을 건드려 확대하면 비트맵 이미지를 강제로 늘리는 꼴이 되어 UI 테두리와 글자가 흐릿하게 깨진다.
• 핵심 요약: 선명함을 칼같이 유지하면서 UI를 키우려면 스케일은 무조건 1.0으로 고정하고, Font Size 자체를 키우거나 Padding 값을 늘려 원천적인 해상도 그릇 크기를 넓혀야 인게임에서도 깨지지 않는다.

4. Rounded Box 테두리가 찌그러지는 현상 해결 (UE5 중요 버그 픽스)

• 배운 점: 세로줄을 만들기 위해 얇은 Border를 Rounded Box로 바꿨을 때 코너 반경이 0인데도 나뭇잎 모양으로 찌그러지는 특이한 현상을 겪었다.
• 핵심 요약: 가로폭이 얇고 세로가 긴 위젯은 높이의 절반을 강제로 깎아버리는 Half Height Radius 옵션 때문에 왜곡이 생긴다. 이를 Fixed Radius (고정 반경)로 변경하고 코너 반경을 2~3 정도로 작게 주어야 반듯하고 예쁜 알약 모양 세로줄이 나온다.

5. UI 컴포넌트 분리(Componentization)의 필요성

• 배운 점: 점수판([텍스트]-[세로줄]-[텍스트]) 같은 공용 UI 요소를 하나의 메인 위젯에 다 때려 박으면 정렬도 꼬이고 재사용이 불가능하다.
• 핵심 요약: 인게임 HUD와 결과 화면 등에서 반복해서 쓰이는 UI는 처음부터 별도의 위젯 에셋(WBP)으로 분리하여 개발하는 것이 레이아웃 관리 측면이나 향후 데이터 연동(유지보수) 측면에서 100% 이득이다.