25/05/14 | TIL UIMainLobby 기본 구성

✨  1. 툴팁 vs 팝업

툴팁: 특정 UI 요소에 마우스를 올렸을 때 짧게 나타나는 설명.

팝업: 유저 액션(클릭 등)에 반응해 화면 위에 뜨는 독립적인 창. 더 많은 정보나 선택지를 제공.

---

✨ 2. Content Size Fitter 사용법

이전에 사용 해봤으나 할때마다 설정법을 까먹는다😥

Content Size Fitter는 자식 요소 크기에 맞춰 부모 오브젝트의 크기를 자동 조절하는 컴포넌트.

Vertical Layout Group과 함께 사용할 때 Height 방향을 Preferred Size로 설정하면, 자식들이 늘어나면 자동으로 아래로 확장됨.

주의: 부모에 Layout Group, 자식에 ContentSizeFitter를 붙이는 구조는 충돌 날 수 있으므로 Layout 그룹 기준을 분명히 설정해야 함.

---

✨ 3. Layout Element의 역할

자동 레이아웃 그룹에 크기 힌트를 제공하는 설정

 

주요 속성:

Min Width/Height: 최소 크기 보장

Preferred Width/Height: 이 정도 크기가 좋다는 요청

Flexible Width/Height: 남는 공간 차지 비율

Ignore Layout: 레이아웃 계산에서 제외

 

버튼 정렬만 하고 내부는 자유롭게 하고 싶을 때,

버튼 오브젝트에 Layout Element 추가해서 Preferred Height만 지정하면 된다.

---

🔧 오늘 해결한 문제

 

❌ Button Error

UIPopupFirstChargeBenefit 스크립트에서 따로 활성화 시켜줘야함

Popup을 상속받으면, UIChild List 없기때문에 Init()이 빠져서 버튼이 활성화가 안됨;

 

✅ 해결 방법

최상위 UIPopupFirstChargeBenefit 스크립트에서 하위 패널들을 Init을 해줌

protected override void OnInit()
{
    _curPnl = _bottomBtnPnl.PnlNumber;
    
    _detailPnl.gameObject.SetActive(true);
    _detailPnl.Init();
    _detailPnl.SetInfo(_curPnl);
    
    OnPanelButtonClicked = OnclickPanel;
    _bottomBtnPnl.Init();
    _bottomBtnPnl.InitButtons(OnPanelButtonClicked);
}

---

❌ UI 초기화 시점 찾기 - Init 메서드 호출 위치

 

GameManager 에서 전체 mamager들을 Init하지만,

UIManager에서는 UIBase 상속 스크립트에 대한 Init이 없다.

그래서 씬에 미리 올라간 Canvas들은 Init을 하기가 어렵다.

 

UI 초기화 시점 찾기

UIPopup은 Open() 시점에 Init()이 호출되는 구조.

Global.Popup.OpenPopup(int popupID) → 내부적으로 해당 팝업을 가져오며 Init() 호출함.

 

일반 UIBase를 상속받은 UI들은 자동으로 Init()되지 않으며, 직접 Init 호출 필요.

 

✅ 해결 방법

LobbySceneManager 또는 PlaySceneManager 같은 SceneManager에서 관련 UI들을 Init() 호출해주는 구조로 설계함.

 

public class LobbySceneManager : BaseSceneManager<LobbySceneManager>
{
    [SerializeField] private UILobbySceneManager _uiLobbySceneManager;
    protected override void Init()
    {
        _uiLobbySceneManager.Init();
    }
}

---

❌ Vertical Layout Group 사용 시 버튼 깨짐 현상

버튼 내부 요소까지 레이아웃 영향을 받아서 의도치 않은 UI 깨짐이 발생

사이즈가 작아져서 버튼 내부 요소의 Text, Img가 모두 영향을 받는 상태가 되어버림

 

✅ 해결 방법: Button 자체에만 Layout Element 추가.

내부 Text, Image는 Layout Element에서 Ignore Layout 체크하거나, 아예 Layout 요소 적용 안 함.