📘 TIL - 커서/드래그 UI 좌표계·입력·렌더링 디버깅

📘 TIL - 커서/드래그 UI 좌표계·입력·렌더링 디버깅

문제 상황

어제까지는

UI 구조 / 데이터 흐름 / Command 처리

를 정리하면서

동작하는 UI → 연결된 UI

까지 맞춘 상태였다.

---

오늘은 그 위에

커서 UI / 드래그 선택 / 입력 상태 표시

를 추가하면서,
플레이어 입력을 직접 시각적으로 피드백하는 레이어를 붙이는 작업을 진행했다.

---

구현 목표는 다음과 같았다.

커서 → 현재 입력 상태 표현
드래그 → 선택 영역 표시
Command → 입력 상태 (Move / Attack) 시각화

---

하지만 구현 과정에서 다음과 같은 문제가 발생했다.

---

발생 증상

• 커서가 특정 영역에서 사라짐
• 엣지 스크롤 후 커서가 복귀되지 않음
• 전체화면에서 우측/하단만 엣지 스크롤 동작 안 함
• 드래그 박스가 커서 위치와 맞지 않음
• 드래그 UI가 점선처럼 깨짐
• 커맨드 패널 hover 시 기본 커서가 다시 나타남

---

공통점은

입력은 정상인데
→ 화면 표현이 어긋난 상태

즉

입력 / 좌표 / UI 렌더링 기준이 서로 다르게 동작하고 있었다

---

분석

---

1. 좌표계 혼용 문제 (핵심)

현재 시스템에는 두 가지 좌표가 존재했다.

Raw Mouse Position (Viewport 기준)
Scaled Mouse Position (DPI 보정된 UMG 기준)

문제:

• 커서는 Scaled 좌표
• 드래그는 Raw 좌표
• 엣지 스크롤도 일부 혼용

결과:

커서 위치 ≠ 드래그 시작/끝 위치

→ 드래그 박스가 어긋남

---

2. 엣지 스크롤 판정 불일치

전체화면에서만 발생한 문제:

MousePosition (Scaled)
vs
ViewportSize (Raw)

비교 기준이 달라서

• 좌측/상단 → 정상
• 우측/하단 → 조건 불만족

---

3. 커서 렌더링 문제

증상:

• 커서가 우측/하단에서 사라짐
• 화면 밖 나갔다가 복귀 안 됨

원인:

커서 위젯이 좌상단 기준으로 배치됨

즉

마우스 위치 = 위젯의 좌상단

→ 우측/하단에서 화면 밖으로 밀림

---

4. 엣지 스크롤 상태 복귀 문제

엣지 상태 진입 후 복귀 안 되는 이유:

진입 조건 == 해제 조건

→ 경계값 근처에서 상태가 고착됨

---

5. 드래그 박스 렌더링 문제

처음 방식:

이미지 기반 Border (9-slice)

문제:

• 프레임 텍스처가 반복됨
• stretch 시 점선처럼 깨짐

즉
UI 프레임 이미지 ≠ 드래그 박스 용도

---

6. UMG Cursor 충돌 문제

커맨드 패널 위에서:

• 기본 커서 다시 나타남

원인:

Button / Widget이 Cursor를 요청

→ 소프트웨어 커서와 충돌

---

해결

---

1. 좌표계 분리

커서 / 드래그 → Scaled (DPI 좌표)
엣지 스크롤 → Raw (Viewport 좌표)

GetMousePositionScaledByDPI() → UI용
GetMousePosition() → 입력 판정용

---

2. 엣지 스크롤 기준 통일

MousePosition (Raw)
vs
ViewportSize (Raw)

좌표계를 완전히 동일하게 맞춤

---

3. 커서 위치 보정

Position = MousePos - (CursorSize * 0.5f)

• Clamp 추가

Clamp(0 ~ ViewportSize - CursorSize)

→ 화면 밖으로 나가지 않게 수정

---

4. 엣지 스크롤 히스테리시스 적용

EnterMargin ≠ ExitMargin

진입: 10px
복귀: 20px

→ 상태 고착 방지

---

5. 드래그 박스 방식 변경

이미지 기반 Border → 폐기

새 구조:

Canvas
 ├ Top Line
 ├ Bottom Line
 ├ Left Line
 └ Right Line

Border 4개로 직접 박스 구성

→ stretch / 반복 문제 완전 제거

---

6. Cursor 충돌 해결

SlotButton Cursor = None

• 장식 위젯

Not Hit-Testable

→ 기본 커서 재등장 제거

---

7. 드래그 좌표 정합성 확보

DragStart = Scaled
Current = Scaled

→ 커서와 동일 기준 사용

---

구조 정리

---

입력 → UI 흐름

Mouse Input
→ PlayerController

→ (Raw 좌표)
   엣지 스크롤

→ (Scaled 좌표)
   CursorOverlay
   DragOverlay

---

UI 레이어 분리

CursorOverlay
→ 현재 입력 상태 표시

DragSelectionOverlay
→ 선택 영역 표시

CommandPanel
→ 실행 가능한 명령

---

역할 분리

PlayerController
→ 입력 처리 / 좌표 분리

PlayerUIBridge
→ UI 상태 전달

CursorOverlay
→ 커서 표시

DragOverlay
→ 드래그 표시

---

발생 원인 정리

---

1. 좌표계 혼용

가장 큰 원인

Raw vs Scaled 혼용

---

2. UI와 입력 기준 불일치

입력 판정
≠
UI 표현

---

3. 잘못된 UI 자산 사용

액자 프레임 → 드래그 박스

→ stretch 구조와 충돌

---

4. UMG 기본 동작 간과

Widget Cursor 기본값 존재

---

5. 상태 전이 조건 설계 부족

Enter == Exit

---

배운 점

---

1. 입력 시스템은 좌표계부터 분리해야 한다

Raw = 입력 판정
Scaled = UI 표현

---

2. UI는 “그리는 방식”이 중요하다

이미지로 해결 → 실패
구조로 해결 → 안정

---

3. 드래그 박스는 단순할수록 좋다

복잡한 프레임보다

라인 4개 구조

가 가장 안정적이다.

---

4. 엣지 기반 로직은 히스테리시스가 필수다

경계 기반 시스템은 항상

진입 / 복귀 분리

가 필요하다.

---

5. UMG는 기본 동작을 항상 의심해야 한다

Cursor
HitTest
Visibility

이 세 가지가 의도치 않은 동작을 만든다.

---

6. UI는 “레이어”로 나눠야 한다

Cursor
Drag
HUD
World UI

각각 독립적으로 관리해야 한다.

---

오늘의 정리

오늘 문제는 단순한 UI 구현 문제가 아니라
입력 좌표계, UI 렌더링, UMG 기본 동작이 서로 다른 기준으로 동작하면서 발생한 문제였다.
이를 해결하면서 “입력은 Raw, UI는 Scaled”라는 기준과
“이미지가 아닌 구조로 UI를 만든다”는 원칙을 정리할 수 있었다.