📘TIL - 멀티플레이 숫자야구게임 UI 구현 및 로직 적용

문제

기존 채팅 기반 숫자야구 게임에 UI를 도입하면서 다음과 같은 문제가 발생했다.

문제 영역	내용
입력 구조	채팅 입력과 UI 입력이 분리되지 않아 라우팅 혼재
상태 동기화	로그인 / 턴 / 게임 상태가 UI에 즉시 반영되지 않음
턴 표시	서버와 클라이언트의 기준 배열이 달라 다른 플레이어 표시
판정 UI	Strike / Ball / Out 결과가 UI에 연결되지 않음
UI 갱신	GameState 값은 바뀌지만 UI가 갱신되지 않음

---

분석

핵심 문제

서버 데이터 → 클라이언트 UI까지 흐름 단절

---

1. 입력 처리 구조 문제

Before	After
채팅 문자열 하나로 모든 처리	기능별 RPC 분리

---

2. 턴 상태 불일치

Server: AllPlayerControllers 기준
Client: GameState.PlayerArray 기준

동일 인덱스를 사용하지만 기준 배열이 달라 서로 다른 플레이어를 가리키는 문제가 발생했다.

---

3. UI 갱신 문제

상태 위치	결과
PlayerState	UI 갱신됨
GameState	UI 갱신 안됨

턴 상태는 GameState에 있지만 UI 갱신 트리거가 없어 반영되지 않았다.

---

4. 판정 결과 전달 단절

GameMode → (중간 전달 없음) → UI

서버에서 계산된 결과가 UI까지 전달되지 않았다.

---

5. UI 구조 문제

ChatPanel / GamePanel 역할 불명확

UI가 단순 출력 구조로 되어 있어 상태 기반 표현이 어려웠다.

---

해결

---

1. 입력 라우팅 구조 분리

[Client Input]
        ↓
PlayerController
        ↓
┌───────────────────────────────┐
│ /register → ServerRPCRegister │
│ /login    → ServerRPCLogin    │
│ 숫자 입력  → SubmitGuess      │
│ 기타 채팅  → SubmitChat       │
└───────────────────────────────┘

입력은 하나의 채널을 사용하지만 내부 로직은 완전히 분리하였다.

---

2. 턴 상태 동기화 구조 개선

변경 전

배열 인덱스 기반 추론

변경 후

GameState에 명시적 값 저장

변수	역할
CurrentTurnPlayerName	현재 턴 플레이어
CurrentTurnPlayerIndex	턴 인덱스
TurnEndServerTime	턴 종료 시간
bTurnInProgress	턴 진행 여부

UI는 더 이상 계산하지 않고 서버에서 확정된 값을 그대로 사용하도록 변경하였다.

---

3. GameState → UI 갱신 흐름

전체 구조

[Server]
GameMode
   ↓
GameState 값 변경

[Client]
GameState (OnRep)
   ↓
PlayerController
   ↓
MainHUD
   ↓
GamePanel / 기타 Panel

---

호출 흐름

OnRep_CurrentTurnPlayerName
→ NotifyTurnStateUpdated
→ PlayerController.HandleTurnStateReplicated
→ MainHUD.RefreshGamePanel

OnRep 기반으로 UI가 자동 갱신되도록 구조를 구성하였다.

---

4. 판정 결과 UI 연결

전체 흐름

[Server]
GameMode (Judge 계산)
        ↓
Client RPC
        ↓
[Client]
PlayerController
        ↓
MainHUD
        ↓
GamePanel
        ↓
SetJudgeResult

---

전광판 처리 로직

SetJudgeResult
→ ResetJudgeBoard
→ Strike 개수 ON
→ Ball 개수 ON
→ Out 개수 ON

---

색상 정책

상태	색상
OFF	(0.12, 0.12, 0.12)
Strike	Red
Ball	Yellow
Out	Blue

상태를 색으로 직관적으로 표현하도록 구성하였다.

---

5. UI 구조 개선

Before

단순 채팅 출력 UI

After

MainHUD
 ├── LoginPanel   (로그인 상태)
 ├── GamePanel    (턴 / 입력 / 전광판)
 ├── ChatPanel    (채팅 로그)
 └── StatusPanel  (전적)

UI를 상태 기반으로 분리하였다.

---

6. 책임 분리 구조

계층	역할
GameMode	게임 로직 (Server Only)
GameState	상태 복제
PlayerController	UI 트리거
MainHUD	UI 관리
Panel	실제 UI 렌더링

각 계층의 역할을 명확히 분리하였다.

---

최종 전체 구조

[Server]
GameMode
   ↓
GameState

[Client]
GameState (OnRep)
   ↓
PlayerController
   ↓
MainHUD
   ↓
Panels

[Panels]
- GamePanel (턴 / 시간 / 전광판)
- ChatPanel (채팅)
- LoginPanel (로그인)
- StatusPanel (전적)

---

인사이트

• UI는 단순 출력이 아니라 상태를 표현하는 레이어이다
• 멀티플레이 환경에서는 배열 인덱스 기반 로직이 쉽게 깨진다
• 서버가 확정한 값을 그대로 사용하는 구조가 가장 안정적이다
• OnRep 기반 UI 갱신은 멀티플레이에서 필수 패턴이다
• 입력, 상태, UI를 분리하면 구조 안정성이 크게 향상된다

---

오늘의 정리

• 채팅 기반 입력 구조를 UI 중심 구조로 확장하면서, GameState(OnRep)와 RPC 흐름을 통해 서버 상태를 클라이언트 UI까지 안정적으로 연결하는 구조를 완성했다.