📘TIL-RTS 기본 UI 레이아웃 설계 및 WBP 구성 정리

문제

이번 작업의 목적은 단순한 UI 구현이 아니라
RTS 장르에서 실제 플레이에 맞는 HUD 레이아웃 구조를 설계하고, 데이터 흐름이 안정적으로 반영되는지 검증하는 것이었다.

초기에는 좌하단 / 우하단으로 패널을 분리하는 구조를 고려했지만,
구조를 실제 플레이 기준으로 다시 검토하면서 다음과 같은 문제가 있었다.

• 선택 정보와 명령 UI가 분리되면 시선 이동이 많아짐
• 하단 UI가 여러 덩어리로 나뉘어 직관성이 떨어짐
• 확장 시 UI 간 간격과 정렬 유지가 어려움

그래서 레이아웃을 다시 정리할 필요가 있었다.

---

분석

---

1. RTS UI 레이아웃 기준 재정의

RTS 장르에서 가장 중요한 UI 영역은 하단 컨트롤 영역이다.

상단        → 자원 / 시간
하단 전체   → 선택 정보 + 명령 UI + 추가 UI

즉 하단을 하나의 영역으로 묶는 것이 더 자연스럽다.

---

2. 하단 일렬 구조로 변경

기존 분리 구조 대신
하단을 하나의 컨테이너로 보고 내부를 나누는 방식으로 변경했다.

---

전체 구조 다이어그램

┌────────────────────────────────────────────┐
│                  TopBar                    │
│                                            │
│              NotificationPanel             │
│                                            │
│                                            │
│                                            │
│                                            │
│                                            │
│ [Selection] [CommandPanel] [Queue/Minimap] │
└────────────────────────────────────────────┘

---

3. 하단 컨테이너 내부 구조

하단을 하나의 패널로 보고 내부를 나눴다.

BottomPanel
 └ HorizontalBox
    ├ SelectionPanel
    ├ CommandPanel
    └ ExtraPanel (Minimap / ProductionQueue)

이 구조의 장점:

• 시선 이동 최소화
• UI가 한 덩어리로 묶여 안정적
• 확장 시 위치 흔들림 없음

---

4. Anchor 전략 재정의

기존에는 패널별로 Anchor를 따로 줬지만
이제는 하단 컨테이너 기준으로 통일했다.

영역	Anchor
TopBar	Top Stretch
Notification	Top Center
BottomPanel	Bottom Stretch

하단은 개별 패널이 아니라
BottomPanel 하나로 관리

---

5. 레이아웃 계층 구조

구조를 다음처럼 명확히 분리했다.

CanvasPanel (위치 배치)
 ├ TopBar
 ├ Notification
 └ BottomPanel
     └ HorizontalBox
         ├ Selection
         ├ Command
         └ Extra

이 구조로 바꾸면서

• Canvas 사용 범위를 최소화하고
• 내부는 Box 레이아웃으로 통일했다

---

6. 마진 시스템 유지

기존 기준은 유지했다.

기본 Margin = 16

적용 방식:

• BottomPanel 좌우 여백
• TopBar 여백
• 패널 간 간격 (HorizontalBox Slot Padding)

---

WBP 레이아웃 구성

---

1. WBP_RTSHUDRoot 구조

WBP_RTSHUDRoot
└ CanvasPanel
   ├ TopBar
   ├ NotificationPanel
   └ BottomPanel
      └ HorizontalBox
         ├ SelectionPanel
         ├ CommandPanel
         └ ExtraPanel

---

2. Canvas Slot 설정

TopBar

• Anchor: Top Stretch
• Margin: Left 16 / Right 16 / Top 16
• Height: 64

---

NotificationPanel

• Anchor: Top Center
• Position Y: 92
• Size: 420 x 48

---

BottomPanel

• Anchor: Bottom Stretch
• Left: 16
• Right: 16
• Bottom: 16
• Height: 220

---

3. BottomPanel 내부 구성

HorizontalBox 구조

[SelectionPanel]   [CommandPanel]   [ExtraPanel]

---

Slot 비율 설정

패널	Size Rule	비율
SelectionPanel	Fill	0.3
CommandPanel	Fill	0.5
ExtraPanel	Fill	0.2

이렇게 나누면 해상도에 따라 자연스럽게 늘어난다.

---

Slot Padding

각 슬롯 Padding = 8

---

4. 내부 패널 구조 유지

각 패널 내부는 기존과 동일하게 유지했다.

Border → SizeBox → Box Layout

이 구조를 유지하면서

• 내부 정렬 안정성 확보
• 확장 용이성 유지

---

WBP 값 할당 구조

---

1. 데이터 흐름

Provider
 → Coordinator
 → HUDRoot
 → BottomPanel 내부 각 패널
 → TextBlock

---

2. HUDRoot 역할

HUDRoot는 BottomPanel 내부 패널을 직접 참조하고
데이터를 전달만 한다.

SetTopBarData
SetSelectionData
SetCommandData
ShowNotification

---

3. 패널에서 값 반영 방식

각 패널은 받은 ViewModel을 그대로 출력한다.

---

TopBar

TextWood ← Wood 값
TextGas ← Gas 값
TextPopulation ← Population 값
TextGameTime ← Time 값

---

SelectionPanel

Switcher Index 변경
→ Name / Type / HP / Description 출력

---

CommandPanel

Command 리스트
→ Slot0 ~ Slot5 매핑

---

4. UI 내부 로직 제한

WBP에서는 다음을 하지 않는다.

• 데이터 계산
• 상태 판단
• 시스템 접근

오직

값 출력만 수행

---

결과

---

1. 레이아웃 구조 단순화

기존:

좌하단 / 우하단 분리 구조

변경:

하단 통합 구조

---

2. UI 일관성 확보

• 하단 UI가 하나의 영역으로 묶임
• 시선 이동 감소
• 구조 직관성 증가

---

3. 해상도 대응 개선

• BottomPanel Stretch 구조
• 내부 Fill 기반 분할
• 비율 유지

---

4. 확장 용이성 확보

• ExtraPanel 영역으로 확장 가능
• Minimap / ProductionQueue 쉽게 추가 가능

---

오늘의 정리

• UI 레이아웃은 단순히 배치가 아니라
  플레이 흐름과 정보 전달을 기준으로 구조를 재정의하는 작업이었다.
• 하단을 분리된 패널이 아니라 하나의 컨트롤 영역으로 묶으면서
  UI 전체 구조가 훨씬 안정적이고 확장 가능한 형태로 정리되었다.