📘 TIL - UI 규격화 및 Common UI 기반 표현 계층 정리

문제

어제까지는 다음 흐름까지 연결된 상태였다.

Actor
→ CommandIds 제공
→ PlayerController
→ 실행
→ 상태 변경
→ Provider
→ Coordinator
→ UI

이 구조가 붙으면서
선택, 명령, Context 전환, Queue 반영까지는 실제로 동작하는 상태가 됐다.

즉,

선택 → 명령 → 실행 → 상태 변경 → UI 갱신

이 흐름은 완전히 살아있는 상태였다.

---

하지만 실제 플레이 기준으로 보면 새로운 문제가 드러났다.

---

구조적 문제

구분	문제
UI 규격	패널마다 크기/간격/정렬 기준이 다름
텍스트	폰트 크기, 정렬, 역할 구분이 통일되지 않음
버튼	Menu / Command 버튼 구조가 서로 다름
레이아웃	Spacer, Canvas, Overlay 사용 기준이 섞여 있음
유지보수	동일 스타일을 위젯마다 반복 설정
확장성	Queue / MultiSelection 확장 시 구조 깨질 가능성 존재

---

기존 상태

기능은 동작하지만 표현 계층은 정리되지 않은 상태였다.

WBP_TopBar
→ 블록별 폭 / 정렬 기준 없음

WBP_SelectionPanel
→ Single / Multi 구조는 있으나 표현 기준 불명확

WBP_CommandPanel
→ 슬롯만 존재, 패널 규격 없음

WBP_MenuPanel
→ 버튼 개별 수작업 구성

WBP_NotificationPanel
→ 불필요한 Canvas 구조

---

분석

문제는 명확했다.

기능은 완성됐지만
UI가 “규칙 없이 붙은 상태”

---

어제까지의 목표가

UI → 게임 흐름 연결

이었다면

오늘 목표는

동작하는 UI
→ 유지 가능한 UI
→ 확장 가능한 UI

로 넘어가는 단계였다.

---

구조 vs 목표

[이전]
기능 동작 ✔
표현 규칙 ✖
확장성 △

[목표]
기능 동작 ✔
표현 규칙 ✔
확장성 ✔

---

해결

---

1. UI 역할 계층 분리

가장 먼저 정리한 건 책임 분리였다.

---

기준

HUDRoot
→ 위치 / 앵커 / 화면 배치

Panel (WBP)
→ 내부 레이아웃 / 크기 규격

Widget
→ 실제 표시 / 스타일

---

의미

부모가 모든 걸 제어
→ 흔들림 발생

부모 = 위치
자식 = 크기
→ 안정적인 구조

---

2. Common UI 도입 범위 제한

전체를 갈아엎는 게 아니라 필요한 부분만 가져왔다.

---

적용

UMG
→ 레이아웃 / 구조 유지

Common UI
→ Text Style
→ Button Style

---

결과

레이아웃 유지
+ 스타일만 통일

---

3. 텍스트 스타일 규격화

기존에는 위젯마다 폰트를 직접 설정했다.

이걸 역할 기준으로 변경했다.

---

스타일 정의

TS_Header
TS_PanelTitle
TS_Label
TS_Value
TS_Button
TS_Caption
TS_Notification

---

변화

직접 스타일 설정
→ 역할 기반 스타일 적용

---

4. SizeBox 기반 크기 규격화

이번 작업 핵심 중 하나였다.

---

규칙

64 / 96 / 128 배수 사용
1920x1080 기준

---

적용

요소	크기
CommandSlot	96 x 96
Portrait	96 x 96
Tile Entry	96 x 96
Minimap	256 x 256

---

의미

가변 UI
→ 흔들림 발생

고정 SizeBox
→ 안정적 UI

---

5. Overlay / Switcher 사용 기준 정리

이전에는 섞여 있었던 부분을 명확히 분리했다.

---

기준

Overlay → 겹침 표현
Switcher → 상태 전환
Box → 정렬

---

적용

아이콘 위 텍스트 → Overlay
상태 전환 → Switcher
리스트 정렬 → Vertical/HorizontalBox

---

결과

레이아웃과 상태 로직 분리

---

6. CommandSlot 상태 구조 정리

상태 표현을 단순화했다.

---

기존

Overlay
→ DisabledOverlay 하나

---

변경

BaseVisual
+ StateSwitcher

---

구조

Overlay
 ├ BaseVisual
 └ StateSwitcher
     ├ Enabled
     ├ Disabled
     └ Pending

---

의미

Visibility 분기
→ Switcher 단일 진입

---

7. SelectionPanel 구조 명확화

Single / Multi 상태를 분리했다.

---

변경

ContentBox
→ SingleStateBox

---

구조

StateSwitcher
├ Empty
├ Single
└ Multi

---

의미

Single → 상세 정보
Multi → 요약 + 리스트

---

8. TileView 기반 Multi Selection 전환

기존 구조는 수동 AddChild였다.

---

변경

TileView 기반 구조

---

효과

항목	개선
성능	Virtualized
구조	단순화
확장성	증가

---

9. MenuPanel 구조 통일

CommandSlot과 동일한 데이터 흐름으로 맞췄다.

---

구조

DataTable
→ ViewModel
→ Widget

---

변화

UI 직접 설정
→ 데이터 기반 UI

---

10. 자동 레이아웃 구조 확립

패널 크기를 수동으로 맞추던 구조 제거

---

변경

패널 크기 = 버튼 총합 + Padding

---

결과

수동 Width 제거
→ 자동 정렬

---

11. HUDRoot 앵커 기준 정리

위치 기준을 명확히 잡았다.

---

예시

TopBar → Top Stretch
Selection → Bottom Left
Command → Bottom Right
Menu → Center Left

---

핵심

Anchor → 기준 위치
Alignment → 기준점
Position → 오프셋

---

결과

이번 작업은 기능 추가가 아니라 구조 정리였다.

---

Before

기능 동작
UI 구조 불안정

---

After

기능 유지
+ 스타일 통일
+ 구조 규격화
+ 확장 기반 확보

---

비교

항목	이전	이후
스타일	개별 설정	공통 스타일
크기	가변	SizeBox 고정
상태 표현	Visibility	Switcher
레이아웃	혼합 사용	규칙 기반
확장성	낮음	높음

---

1. 기능 다음 단계는 표현 정리였다

동작 → 유지 가능

---

2. Common UI는 부분 도입이 맞았다

전체 교체 X
스타일만 적용

---

3. 책임 분리가 핵심이었다

HUDRoot = 위치
Panel = 구조
Widget = 표현

---

4. 규칙이 생기면서 확장이 쉬워졌다

추가 기능
→ 기존 규칙 위에 얹기 가능

---

전체 구조

Actor
→ PlayerController
→ Provider
→ Coordinator
→ ViewModel
→ UI (규격화된 구조)

---

오늘의 정리

• 어제는 UI를 실제 게임 흐름에 연결하는 단계였다.
• 오늘은 그 UI를 규격화하고 표현 계층을 정리하는 단계였다.
• 스타일, 크기, 상태 표현 기준을 통일하면서 이후 확장을 위한 기반을 만들었다.