Unity UI(1) 정리 - Button과 Layout 컴포넌트

Unity UI를 공부하면서 버튼의 상태를 설정하는 방법과 UI 요소를 자동으로 배치하는 레이아웃 컴포넌트들을 정리했다.

1. Button

Button은 사용자의 클릭 입력을 받아 특정 동작을 실행하는 UI 컴포넌트다.

1.1 Interactable

• 버튼과 상호작용할 수 있는지 설정한다.
• 체크를 해제하면 버튼을 클릭할 수 없으며 Disabled 상태로 표시된다.
• GameObject 자체를 비활성화하는 것과는 다르다. 버튼은 화면에 남아 있을 수 있다.

1.2 Transition

버튼에 마우스를 올리거나 클릭했을 때 상태 변화를 어떻게 표현할지 결정한다.

1.3 Target Graphic

• Transition 효과가 적용될 UI 그래픽을 지정한다.
• 보통 버튼에 붙은 Image 컴포넌트를 연결한다.
• Color Tint와 Sprite Swap에서 시각적 전환 대상을 결정한다.

1.4 버튼 상태별 색상

Transition이 Color Tint일 때 설정할 수 있는 색상이다.

Selected는 단순히 마우스를 올린 상태와는 다르다. 키보드나 게임패드 등을 이용한 UI 선택 상태와 관련이 있다.

추가로 Color Multiplier는 색상 효과의 강도, Fade Duration은 색상이 전환되는 시간을 조절한다.

1.5 On Click()

• 버튼을 눌렀다 놓았을 때 실행되는 이벤트다. 일반적인 포인터 클릭의 경우 버튼 위에서 놓아야 클릭으로 인정된다.
• Inspector의 On Click() 목록에 오브젝트와 함수를 연결할 수 있다.
• 코드에서 AddListener()를 사용해 실행할 함수를 등록할 수도 있다.

using UnityEngine;
using UnityEngine.UI;

public class MenuUI : MonoBehaviour
{
    [SerializeField] private Button startButton;

    private void Start()
    {
        startButton.onClick.AddListener(StartGame);
    }

    private void StartGame()
    {
        Debug.Log("게임 시작");
    }
}

1.6 Navigation

키보드나 게임패드를 사용할 때 어떤 UI 요소로 선택을 이동할지 정한다.

• None: 탐색 이동 사용 안 함
• Automatic: 자동으로 이동할 대상 계산
• Horizontal / Vertical: 해당 방향의 이동을 중심으로 설정
• Explicit: 이동할 UI 요소를 직접 지정

2. Layout Group

Layout Group은 자식 UI 요소들의 위치와 크기를 자동으로 배치하는 컴포넌트다. 대표적으로 세 가지가 있다.

2.1 Vertical Layout Group

자식 UI 요소들을 위에서 아래로 배치한다.

활용 예: 설정 메뉴, 세로 버튼 목록, 인벤토리의 항목 리스트

2.2 Horizontal Layout Group

자식 UI 요소들을 왼쪽에서 오른쪽으로 배치한다.

활용 예: 체력 아이콘, 단축키 슬롯, 가로 메뉴

2.3 Grid Layout Group

자식 UI 요소들을 격자 형태로 배치한다. 각 칸의 크기(Cell Size)는 동일하게 설정된다.

활용 예: 인벤토리 슬롯, 아이템 목록, 캐릭터 선택 화면

2.4 Layout Group의 주요 속성

Vertical / Horizontal Layout Group

Grid Layout Group

Grid Layout Group은 Vertical / Horizontal Layout Group과 달리 자식마다 서로 다른 선호 크기를 반영해 셀 크기를 정하지 않는다. 정해진 Cell Size를 사용한다.

3. Content Size Fitter

Content Size Fitter는 자신의 Rect Transform 크기를 콘텐츠에 필요한 크기에 맞춰 조절하는 컴포넌트다.

주요 속성

예를 들어 세로 메뉴에 Vertical Layout Group과 Content Size Fitter를 함께 사용하면, 버튼이 늘어날 때 메뉴 패널의 높이도 함께 늘어나도록 구성할 수 있다.

주의: Content Size Fitter를 붙였다고 모든 자식의 크기를 직접 바꾸는 것은 아니다. 또한 부모 Layout Group이 크기를 제어하는 자식에 Content Size Fitter를 함께 붙이면 크기 제어가 충돌할 수 있다.

4. Layout Element

Layout Element는 자동 레이아웃 안에서 해당 UI 요소가 얼마나 큰 공간을 필요로 하는지 알려주는 컴포넌트다.

예를 들어 세로 버튼 목록에서 특정 버튼의 Preferred Height를 80으로 설정하면, 부모 Layout Group이 선호 크기를 이용하도록 구성된 경우 그 버튼의 높이를 다른 버튼보다 크게 배치할 수 있다.

Layout Element에는 일반적인 Max Width 또는 Max Height 설정이 없다. Flexible은 최대 크기가 아니라 남는 공간을 나누는 기준이다.

5. 세 가지 컴포넌트를 함께 사용하기

버튼 개수에 따라 높이가 자동으로 바뀌는 메뉴를 만든다고 가정해 보자.

• Vertical Layout Group: 버튼들을 위에서 아래로 정렬하고 간격을 설정한다.
• Layout Element: 각 버튼의 최소·선호 높이 등의 정보를 제공한다.
• Content Size Fitter: 메뉴 패널의 높이를 필요한 크기에 맞춰 변경한다.

여기서 배치는 Layout Group, 자식의 크기 정보는 Layout Element, 자기 자신의 크기 조절은 Content Size Fitter가 담당한다고 이해하면 구분하기 쉽다.

기억할 점

1. Layout Group이 있다고 모든 자식의 크기가 항상 똑같아지는 것은 아니다.
2. Grid Layout Group은 Cell Size로 셀 크기를 지정한다.
3. Content Size Fitter는 자기 자신의 크기를 조절한다.
4. 레이아웃 자동 계산 결과는 부모의 설정, 자식의 크기 정보, Rect Transform 설정에 따라 달라질 수 있다.
5. Content Size Fitter의 크기 변경은 Pivot을 기준으로 나타나므로, 메뉴가 어느 방향으로 늘어나야 하는지도 확인해야 한다.

느낀점

Unity UI를 직접 배치할 때는 Rect Transform으로 위치와 크기를 일일이 조절할 수 있지만, 요소가 늘어나거나 줄어드는 화면에서는 레이아웃 컴포넌트를 사용하면 편리한 것 같다. 오늘 해보니까 Unity UI를 다루는데 상당히 재능이 비루한 느낌이다. 좀 더 많이 다뤄봐야하지 않을까 싶다.