오늘은 플레이어와 게임이 소통하는 창구인 UI(User Interface) 시스템에 대해 정리해 보겠습니다.
1) UGUI
UGUI(Unity Graphical User Interface)는 유니티에서 기본으로 제공하는 컴포넌트 기반의 UI 시스템입니다. 게임 화면 위에 체력 바, 버튼, 텍스트 등을 배치하여 정보를 전달하고 입력을 받는 역할을 합니다.
생성 가능한 대표적인 UI 오브젝트는 다음과 같습니다.
- Canvas : 모든 UI 요소가 그려지는 거대한 도화지입니다. 유니티의 모든 UI(버튼, 텍스트, 이미지...)는 반드시 이 캔버스의 자식으로 있어야 화면에 나타납니다.
EventSystem : 버튼 클릭과 같은 UI 입력 처리를 위해 필요한 오브텍트로 Canvas를 생성하면 자동 생성됩니다.
-
Panel : UI 요소들을 그룹화하거나 배경을 만들 때 사용하는 컨테이너입니다. 투명도를 조절하여 팝업창의 배경 등으로 자주 쓰입니다.
-
Text : 화면에 글자를 표시하는 요소입니다. 점수 표시, 대화창 등에 사용됩니다.
Text / TextMeshPro 로 구/신이 나뉘며, TMP가 표준으로 사용됩니다. -
Image : 스프라이트 이미지를 화면에 보여줍니다. 아이콘, 체력 바의 배경, 테두리 등을 표현합니다.
-
Button : 사용자의 클릭 입력을 받는 요소입니다. 클릭 시 특정 함수를 실행하는 OnClick 이벤트를 핵심으로 가집니다.
Unity에서는 Button 컴포넌트의 On Click() 기능을 통해 클릭시 실행할 함수를 연결할 수 있습니다. -
Slider : 일정 범위 내의 수치를 조절하거나 보여주는 막대입니다. 캐릭터의 HP 바나 설정창의 음량 조절 바 등에 필수적으로 사용됩니다.
Value (0 ~ 1)을 통해 Slider의 UI를 표시할 수 있습니다.(ex. 체력바)
2) Anchor, Pivot
UI는 다양한 해상도의 기기에서 동일한 위치에 보여야 하므로 배치 기준이 매우 중요합니다.
- Anchor : 부모 오브젝트(주로 캔버스) 내에서 해당 UI 요소가 고정될 기준점을 의미합니다. 화면 해상도가 변하더라도 앵커를 기준으로 상대적인 위치를 유지하므로 반응형 UI 제작의 핵심입니다.
- Pivot : UI 요소 자기 자신의 중심점을 의미합니다. 회전이나 크기 조절을 할 때 이 피봇을 중심으로 변화가 일어납니다. (0,0)은 왼쪽 하단, (1,1)은 오른쪽 상단을 뜻합니다.
즉, Anchor는 화면의 어디에 붙일 것인지, Pivot는 오브젝트의 어느 지점을 기준으로 둘 것인지를 정하는 것입니다.
3) ContextMenu
ContextMenu는 스크립트에서 작성한 함수를 유니티 에디터의 인스펙터 창에서 수동으로 실행할 수 있게 해주는 속성(Attribute)입니다. 게임을 실행하지 않고도 특정 로직을 테스트하거나, 에디터 상에서 데이터를 초기화해야 할 때 유용하게 사용됩니다.
인스펙터의 컴포넌트 이름 위에서 우클릭을 하거나 우측의 점 세 개 메뉴를 누르면 우리가 정의한 명령어가 나타납니다.
<style>
using UnityEngine;
public class UIController : MonoBehaviour
{
public float health = 100f;
// 인스펙터 메뉴에 "Reset Health" 추가
[ContextMenu("Reset Health")]
public void ResetHealth()
{
health = 100f;
Debug.Log("체력이 초기화되었습니다.");
}
// 슬라이더 값을 조절하는 함수 예시
public void OnHealthChanged(float value)
{
health = value;
Debug.Log("현재 설정된 수치: " + health);
}
}
</style>
오늘은 UI의 기초를 학습하였습니다.
개인적으로 각각의 오브젝트마다 다양한 옵션을 통해 설정할 수 있다보니 숙달해서 작성하려면 많은 노력이 필요하겠다는 생각을 하였습니다.
