📘 TIL - 모닥불 상호작용 관련 UI 디버깅, 리팩토링

📘 TIL - 모닥불 상호작용 관련 UI 디버깅, 리팩토링

배경

오늘은 어제 구현한 모닥불 제작·저장 시스템의 UI가 실제로 의도대로 동작하는지 확인하면서 시작했다.

기능이 "코드상 연결"은 되어 있지만 "실제로 눌리지 않는" 상태였다. 제작 탭에서 레시피를 클릭해도 아무 반응이 없었고, 월드맵은 해상도에 따라 렌더링 영역이 달랐다. 작동하지 않는 원인을 찾는 것, 스타일을 통일하는 것, 하드코딩을 제거하는 것이 오늘의 흐름이었다.

---

1. 제작 레시피 선택 UI 디버깅

제작 탭에서 레시피 엔트리를 클릭해도 시각적 반응이 없고, 선택 상태도 기록되지 않는 문제를 추적했다.

원인은 두 가지였다. 하나는 Arrow 위젯의 위치였다. left: -20 오프셋으로 위젯 경계 밖에 배치되어 있어 ScrollBox가 클리핑해버렸다. 선택 표시 자체가 렌더링되지 않으니 반응이 없는 것처럼 보였다.

또 하나는 Arrow의 visibility 설정이었다. Visible로 설정되어 있어 클릭 이벤트를 흡수하고 있었다.

Arrow 위치: left -20 → left 4 (경계 안으로)
Arrow visibility: Visible → HitTestInvisible (클릭 흡수 제거)

두 번째 문제는 SetSelectedRecipe의 인덱스 비교 오류였다. ScrollBox 자식 순번(Array Index)으로 비교하고 있었는데, 필터가 적용된 경우 DataTable 행 번호와 자식 순번이 달라 엉뚱한 엔트리가 선택됐다. WBP_RecipeEntry에 GetRecipeIndex() 순수 함수를 추가하고, 비교 기준을 엔트리가 직접 들고 있는 RecipeIndex로 교체해 필터 여부와 무관하게 정확히 동작하도록 수정했다.

선택한 레시피가 CurrentRecipeId에 제대로 기록되지 않는 문제도 연계해 수정했다. SetSelectedRecipe가 일치하는 엔트리를 찾으면 그 엔트리의 RecipeId를 읽어 BonfireMenu.CurrentRecipeId에 즉시 동기화하도록 했다.

---

2. 레시피 엔트리 스타일 리팩토링

레시피 목록의 외형을 저장 슬롯 엔트리(WBP_SaveSlotEntry)와 동일하게 통일했다.

WBP_SaveSlotEntry의 구조는 버튼 안에 FRA_Frame_1(FantasyWarrior 프레임 위젯) 배경만 두고, 텍스트 콘텐츠는 버튼 바깥의 오버레이로 분리하는 패턴이었다. 기존 WBP_RecipeEntry는 텍스트가 버튼 내부에 있었다.

재구성 후 루트 위젯도 CanvasPanel에서 SizeBox로 교체됐는데, 여기서 새로운 문제가 발생했다. SizeBox는 내부 콘텐츠의 Desired Size가 없으면 ScrollBox에서 높이가 0으로 계산된다. 스트레치 앵커로 채운 CanvasPanel 내부에서는 어떤 자식도 고정된 Desired Height를 제공하지 않았기 때문이다.

CanvasPanel (스트레치 앵커 자식들)
→ Desired Height = 0
→ SizeBox도 0
→ ScrollBox에서 모든 엔트리가 height=0으로 겹침
→ 첫 번째 항목만 보이는 것처럼 보임

MinDesiredHeight: 120을 활성화해 해결했다. SaveSlotEntry도 동일한 값을 쓰고 있었다.

또 하나의 교훈이 있었다. 빈 CanvasPanel은 Slate가 내부 페인팅을 건너뛰기 때문에 GetCachedGeometry()가 (0, 0)을 반환할 수 있다. 해결책으로 투명한 Image 위젯을 자식으로 추가해 Slate가 반드시 페인팅하도록 강제했다.

---

3. 월드맵 해상도 독립 렌더링

월드맵 텍스처 렌더링 영역이 해상도에 따라 달라지는 버그를 수정했다.

근본 원인은 GetMapViewRect의 fallback 계산이 위젯 전체(AllottedGeometry) 기준 고정 패딩을 쓰고 있었던 것이다. MapViewport(빈 CanvasPanel)의 GetCachedGeometry()가 (0, 0)을 반환하면 fallback이 동작했고, 전체 화면 기준 패딩은 해상도가 달라지면 틀렸다.

수정 방향은 두 단계였다. 먼저 MapViewport 슬롯을 포인트 앵커 + 하드코딩된 픽셀 크기에서 스트레치 앵커 + 오프셋 방식으로 변경해 어느 해상도에서도 올바른 크기를 갖도록 했다. 그 다음 fallback을 수학 계산으로 교체했다. Border_Window의 퍼센트 앵커(0.02~0.98, 0.04~0.96)와 MapViewportPadding 값을 곱해 해상도와 무관하게 항상 올바른 영역을 계산한다.

이전: MapViewport 지오메트리 실패 → 고정 픽셀 fallback (해상도 종속)
이후: MapViewport 지오메트리 실패 → Border_Window 비율 × MapViewportPadding (해상도 독립)

MapWindowAnchorMin, MapWindowAnchorMax 프로퍼티를 추가해 WBP 레이아웃이 바뀌더라도 에디터에서 수치를 직접 조정할 수 있도록 분리했다.

---

4. 인벤토리 패널 리팩토링

세 가지를 정리했다.

재료 탭 버튼(Button_TabMaterial)을 런타임에 C++로 생성하던 EnsureMaterialTabButton()을 제거하고, WBP 디자이너에서 직접 배치하는 방식으로 전환했다. 무기·소모품 탭은 WBP에서 설정하면서 재료 탭만 코드로 생성하던 불일치가 사라졌다.

RefreshInventoryGridLayout()이 Tick마다 모든 자식 위젯의 Alignment를 반복 설정하고 있었다. 그리드 크기가 실제로 바뀐 경우에만 실행하도록 bGridAreaChanged 조건 안으로 이동했다.

PopulateWeaponSkillIcons()에서 텍스처 로드 성공 시 SetDesiredSizeOverride를 중복 호출하던 코드를 제거했다.

---

오늘의 정리

• UI 문제를 해결하는 과정에서 화면 표시와 실제 동작이 다를 수 있다는 점을 확인했고, 지오메트리 갱신과 레이아웃 계산 흐름을 점검하며 원인을 추적했다.
• Slate의 Desired Size 계산 방식과 GetCachedGeometry() 갱신 시점을 이해하면서 UMG 레이아웃 문제를 해결했다.
• 재료 탭 버튼, 입력 처리, 렌더링 영역 계산을 정리하며 코드와 에디터의 책임을 분리했다.
• 전체적으로 디버깅이 쉬운 구조로 리팩토링하면서 유지보수성과 확장성을 개선했다.