Unity UI 기초: 버튼, 텍스트, 이미지

Unity UI 기초: 버튼, 텍스트, 이미지

Unity의 UI(User Interface) 시스템은 게임에서 필수적인 인터페이스 요소를 쉽게 추가하고 제어할 수 있는 강력한 도구입니다. 버튼, 텍스트, 이미지와 같은 기본 UI 요소를 이해하고 활용하는 것은 플레이어와 게임 간의 상호작용을 디자인하는 데 중요한 첫걸음입니다. 이번 포스팅에서는 Unity UI의 기초 요소들을 살펴보고, 간단한 UI를 구현하는 방법을 배워보겠습니다.

---

1. Unity UI 개요

Unity UI는 Canvas라는 UI 시스템의 기본 객체를 중심으로 작동합니다.

• Canvas: UI 요소를 배치하고 렌더링하는 공간입니다.
• Event System: UI 요소와 상호작용을 처리하는 시스템입니다.

Unity UI는 RectTransform을 사용하여 2D 화면 공간에서의 위치, 크기, 정렬 등을 제어합니다.

---

2. Canvas 생성 및 설정

1) Canvas 생성

1. Hierarchy 창에서 Create > UI > Canvas를 선택합니다.
2. Canvas와 함께 기본적으로 Event System이 생성됩니다.

2) Canvas 종류

• Screen Space - Overlay: 기본 설정. UI가 화면을 기준으로 렌더링됩니다.
• Screen Space - Camera: 특정 카메라를 기준으로 UI가 렌더링됩니다.
• World Space: 3D 공간에서 UI를 배치합니다.

3) UI의 해상도와 비율 설정

Canvas의 Canvas Scaler를 활용해 UI가 다양한 해상도에서 올바르게 표시되도록 설정합니다.

• UI Scale Mode: Scale With Screen Size를 선택하여 화면 크기에 따라 UI 크기를 조정합니다.

---

3. 버튼(Button)

1) 버튼 생성

1. Hierarchy 창에서 Create > UI > Button을 선택합니다.
2. Canvas 안에 Button이 생성됩니다.

2) 버튼 구성 요소

• Text: 버튼의 이름이나 설명을 표시하는 자식 객체.
• Image: 버튼의 배경을 표시하는 컴포넌트.
• Button: 클릭 이벤트를 처리하는 컴포넌트.

3) 버튼 클릭 이벤트 연결

1. 버튼을 선택하고 Inspector 창에서 Button 컴포넌트를 확인합니다.
2. OnClick() 이벤트 목록에 함수를 연결합니다.

4) 버튼 동작 스크립트 예제

using UnityEngine;

public class ButtonExample : MonoBehaviour
{
    public void OnButtonClick()
    {
        Debug.Log("버튼이 클릭되었습니다!");
    }
}

• 스크립트를 Canvas 또는 다른 게임 오브젝트에 추가한 뒤, OnClick() 이벤트에 연결합니다.

---

4. 텍스트(Text)

1) 텍스트 생성

1. Hierarchy 창에서 Create > UI > Text - TextMeshPro를 선택합니다.
2. 텍스트 객체가 Canvas 안에 생성됩니다.

2) 텍스트 설정

• TextMeshPro를 사용하면 더 나은 품질의 텍스트 렌더링이 가능합니다.
• Inspector 창에서 폰트, 크기, 색상 등을 설정합니다.

3) 텍스트 내용 변경

스크립트를 사용해 텍스트 내용을 동적으로 변경할 수 있습니다.

using TMPro;
using UnityEngine;

public class TextExample : MonoBehaviour
{
    public TextMeshProUGUI messageText;

    void Start()
    {
        messageText.text = "Hello, Unity UI!";
    }
}

---

5. 이미지(Image)

1) 이미지 생성

1. Hierarchy 창에서 Create > UI > Image를 선택합니다.
2. Canvas 안에 Image 객체가 생성됩니다.

2) 이미지 설정

• Inspector 창에서 Source Image 필드에 원하는 이미지를 할당합니다.
• Color 설정으로 투명도 및 색상을 조정할 수 있습니다.

3) 동적으로 이미지 변경

using UnityEngine;
using UnityEngine.UI;

public class ImageExample : MonoBehaviour
{
    public Image uiImage;
    public Sprite newSprite;

    void ChangeImage()
    {
        uiImage.sprite = newSprite;
    }
}

 

---

6. UI 요소 정렬 및 배치

1) Anchor(앵커)

RectTransform의 Anchor를 사용해 UI 요소를 부모 Canvas나 다른 요소에 상대적으로 배치합니다.

• 상하좌우 배치: 앵커를 화면 상단, 하단, 중앙 등에 설정.

2) Grid Layout Group

UI 요소를 그리드 형태로 정렬하려면 Grid Layout Group 컴포넌트를 사용합니다.

1. 빈 GameObject를 생성하고 Grid Layout Group을 추가합니다.
2. 자식으로 UI 요소(Button, Image 등)를 추가합니다.

---

7. 간단한 UI 프로젝트 예제

목표: "시작" 버튼을 클릭하면 텍스트 변경

1. UI 구성
   • Canvas 생성.
   • 버튼(Button)과 텍스트(Text - TextMeshPro) 추가.
2. 스크립트 작성

using TMPro;
using UnityEngine;

public class SimpleUI : MonoBehaviour
{
    public TextMeshProUGUI messageText;

    public void OnStartButtonClick()
    {
        messageText.text = "게임이 시작되었습니다!";
    }
}

1. 버튼 이벤트 연결
   • Button의 OnClick() 이벤트에 OnStartButtonClick() 함수 연결.

---

8. 요약

Unity UI 시스템을 사용하면 다음과 같은 작업을 쉽게 구현할 수 있습니다:

• 버튼으로 사용자 입력 처리.
• 텍스트로 메시지 표시.
• 이미지를 활용해 디자인 강화.