📘TIL - 탐색과 상호작용 UX 안정화

📘TIL - 탐색과 상호작용 UX 안정화

배경

오늘은 전날 구현한 모닥불 기반 빠른 이동 시스템을 실제 플레이 흐름에 맞게 확장하고 안정화했다.

작업은 월드맵 패널의 렌더링 버그 수정에서 시작했지만, 월드맵 아이콘 표시 방식, 빠른 이동 좌표 보정, 퀵슬롯 HUD, 저장 슬롯 UI, 제작 시스템까지 이어졌다. 기능을 단순히 추가하는 것보다 서로 다른 시스템이 같은 상태를 바라보도록 연결하고, 플레이어가 현재 상태를 UI에서 명확히 확인할 수 있도록 만드는 데 집중했다.

---

1. 월드맵 패널 렌더링 버그 수정

월드맵 패널을 열었을 때 맵 텍스처가 콘텐츠 영역을 벗어나 타이틀바와 테두리까지 덮는 문제가 있었다.

원인은 GetMapViewRect의 잘못된 fallback 참조였다. MapViewport가 바인딩되지 않은 경우 패널 전체 영역인 HorizontalBox_Body를 맵 영역으로 사용하고 있었다. 이를 제거하고, MapViewport가 없으면 MapViewportPadding을 기준으로 안전하게 계산하도록 수정했다.

또한 NativePaint에서 맵 영역과 위젯 전체 경계의 교집합을 클리핑 영역으로 사용하도록 보완했다.

MapViewport 바인딩 있음
→ 실제 맵 콘텐츠 영역 기준으로 계산

MapViewport 바인딩 없음
→ MapViewportPadding 기준으로 계산

NativePaint
→ 맵 영역 ∩ 위젯 전체 영역으로 클리핑

기준값 오류를 제거하는 것과 최종 렌더링 범위를 제한하는 것은 서로 다른 역할이다. 두 방어선을 함께 두면서 레이아웃이 바뀌더라도 텍스처가 위젯 밖으로 그려지지 않도록 했다.

---

2. 월드맵 아이콘 시스템 재설계와 빠른 이동 안정화

기존 월드맵은 미니맵과 동일한 bShowOnMinimap 플래그를 사용하고 있었다. 하지만 미니맵은 주변 정보를 보여주는 HUD이고, 월드맵은 전체 세계를 탐색하는 도구이므로 표시 정책을 분리할 필요가 있었다.

특히 World Partition 환경에서는 플레이어가 방문하지 않은 지역의 액터가 로드되지 않는다. 런타임 컴포넌트 등록만으로는 언로드된 지역의 아이콘을 표시할 수 없었다.

이를 해결하기 위해 월드맵 아이콘을 DataAsset 기반 정적 데이터로 관리하도록 변경했다.

에디터에서 Refresh From Level 실행
→ 레벨의 아이콘 컴포넌트 수집
→ DA_WorldMapIcons 갱신
→ 월드맵은 DataAsset을 기준으로 전체 아이콘 표시

모닥불도 같은 경로에 통합했다. 모든 모닥불 위치는 월드맵에 표시하되, 빠른 이동은 활성화된 모닥불에서만 가능하도록 역할을 분리했다.

추가로 렌더링과 클릭 판정이 서로 다른 Rect를 사용하면서 아이콘을 눌러도 반응하지 않는 문제가 있었다. NativePaint에서 실제 사용한 좌표를 캐시하고 히트 테스트에서도 동일한 값을 사용하도록 통일했다.

빠른 이동 직후 캐릭터가 바닥이나 지오메트리와 겹치는 현상은 도착 위치에 Z + 50 오프셋을 적용해 완화했다.

---

3. 인벤토리 연동 퀵슬롯 HUD 구현

전투 중 회복 아이템이나 버프 아이템을 빠르게 사용할 수 있도록 인벤토리 슬롯 4, 5를 HUD 퀵슬롯과 연결했다.

퀵슬롯은 별도의 아이템 복사본을 관리하지 않고 InventoryComponent의 상태를 조회한다.

InventoryComponent
→ 슬롯 4, 5의 아이템 ID 보관

QuickSlotBar
→ 슬롯 상태 조회와 엔트리 갱신

QuickSlotEntry
→ 아이콘, 수량, 빈 슬롯 상태 표시

빈 슬롯도 사라지지 않고 배경이 유지되도록 처리했다. 플레이어 입장에서는 현재 어떤 키를 사용할 수 있는지 항상 확인할 수 있어야 하기 때문이다.

초기에는 WBP_QuickSlotEntry 내부가 빈 CanvasPanel뿐이라 Desired Size가 0x0으로 계산되어 HUD에 표시되지 않았다. Image_Icon과 Text_Count를 배치한 뒤 각 엔트리가 64x64 크기로 정상 생성되는 것을 PIE에서 확인했다.

이후 장식 프레임, 슬롯 번호, 상태 표시를 별도 레이어로 나눠 기능 코드를 수정하지 않고도 HUD 스타일을 확장할 수 있도록 정리했다.

---

4. 모닥불 저장 시스템과 멀티슬롯 구조 개선

모닥불 메뉴의 저장 버튼이 반응하지 않는 문제를 추적한 결과, InventoryComponent를 찾지 못하면 저장 로직 전체가 중단되고 있었다.

저장의 핵심 데이터인 위치와 HP는 인벤토리 유무와 관계없이 저장하고, 인벤토리 데이터만 컴포넌트가 있을 때 선택적으로 기록하도록 책임을 분리했다.

모닥불 활성화 시 자동 저장이 생성되지 않는 문제도 수정했다. Standalone 환경에서는 권한 체크 때문에 흐름이 막히지 않도록 분기하고, 멀티플레이 확장 시에는 서버 RPC로 교체할 수 있는 지점을 남겼다.

기존에는 모든 저장이 RetrieveSave_Slot0 하나를 덮어쓰는 구조였다. 이를 월드 상태와 플레이어 수동 저장으로 분리했다.

RetrieveSave_WorldState
→ 모닥불 활성화 상태 자동 저장

RetrieveSave_Slot0 ~ RetrieveSave_Slot4
→ 플레이어 수동 저장

각 슬롯에는 슬롯 번호, 저장 시각, 모닥불 이름을 기록했다. UI에서는 동적으로 슬롯 목록을 생성하고, 선택된 슬롯을 표시하며, 기존 데이터가 있는 슬롯을 덮어쓸 때 확인 패널을 노출하도록 개선했다.

---

5. 제작 시스템과 UI 피드백 완성

제작 탭에서 레시피 목록이 표시되지 않는 문제는 CraftRecipeTable이 할당되지 않아 발생했다. 제작 UI가 필요한 데이터 테이블을 직접 참조하도록 연결해 의존성을 명확히 했다.

각 레시피 엔트리에는 RefreshDisplay()를 추가해 제작 가능 수량과 제작 가능 여부를 즉시 보여주도록 했다.

제작 가능
→ 강조 색상으로 표시

제작 불가
→ 흐린 색상으로 표시

제작 버튼 클릭
→ 수량 선택 다이얼로그 표시
→ 선택한 수량만큼 제작

레시피가 많아졌을 때를 대비해 검색과 “제작 가능한 항목만 보기” 필터도 추가했다. 저장 슬롯에는 선택 화살표를 표시하고, 덮어쓰기 전에는 확인 다이얼로그를 노출해 실수를 방지했다.

인벤토리에는 재료 탭을 확장했고, UI 자동 구성 과정에서 남은 TRASH_ 위젯은 개별 제거와 위젯 트리 재구성으로 정리했다.

---

오늘의 정리

-오늘 작업의 공통점은 기능 구현보다 상태의 기준을 하나로 통일하고, 플레이어에게 그 상태를 명확히 보여주는 것이었다.

• 월드맵은 미니맵과 목적이 다르므로 별도 아이콘 정책이 필요했고, World Partition 환경에서는 런타임 액터만 믿지 않고 정적 데이터 경로를 준비해야 했다. 렌더링과 히트 테스트처럼 같은 화면을 다루는 로직은 반드시 같은 좌표계를 사용해야 한다는 점도 다시 확인했다.
• 저장 시스템에서는 필수 데이터와 선택 데이터를 분리하면서 일부 컴포넌트가 없어도 핵심 기능이 중단되지 않도록 만들었다. 단일 슬롯을 멀티슬롯 구조로 전환하고 월드 상태와 플레이어 저장을 분리하니 기능 확장도 자연스러워졌다.
• UI는 보이는 장식이 아니라 기능의 일부였다. 빈 퀵슬롯, 저장 슬롯 선택 표시, 덮어쓰기 확인, 제작 가능 여부, 검색과 필터처럼 작은 피드백이 모여 실제로 사용할 수 있는 흐름을 만든다.
• 결국 오늘은 빠른 이동, 저장, 제작, HUD를 각각 따로 구현한 것이 아니라, 플레이어가 탐색하고 준비하고 다시 이어서 플레이할 수 있는 하나의 경험으로 연결한 날이었다.