UI Systems
Unity UI 스택은 고전 Unity UI(uGUI)와 최신 UI Toolkit, Canvas·CanvasScaler·EventSystem을 아우릅니다. 메뉴·HUD·화면 구성과 다중 해상도 스케일, 클릭·터치 입력 처리의 기초를 한눈에 배우는 실전 입문 가이드입니다.
상상해 보세요...
Canvas는 화면 앞의 빈 도화지——모든 UI 요소가 그 위에 삽니다. CanvasScaler는 해상도가 바뀔 때(1080p → 폰) 그 도화지를 줄이거나 키우는 자입니다. EventSystem은 어느 요소가 클릭됐는지 고르는 가상 마우스입니다. 셋 중 하나라도 없으면 UI가 안 보이거나, 안 스케일되거나, 안 클릭됩니다.
개념 자세히
Canvas는 모든 UI의 루트 컨테이너입니다. 렌더 모드
셋:
Screen Space - Overlay
(게임 위에 항상, 카메라 무관),
Screen Space - Camera
(특정 카메라로 렌더, depth/포스트프로세스 영향),
World Space
(씬 속 3D 오브젝트——월드 스크린, 캐릭터 위 HP 바).
CanvasScaler가 다중 해상도를 해결합니다.
Scale With Screen Size
가 보통 모드입니다: Reference Resolution(1920×1080)으로 디자인하고 스케일러가 실제 화면에
맞춥니다. Match(0=너비, 1=높이, 0.5=평균)로 우선 축을 고릅니다.
EventSystem은 모든 UI 입력(클릭, 터치, 게임패드)을 처리하는 싱글톤입니다. Raycaster(Canvas의 GraphicRaycaster, World Space용 PhysicsRaycaster)로 호버/선택 요소를 찾습니다. 씬에는 EventSystem이 정확히 하나여야 합니다——둘 이상이면 충돌합니다.
Unity 2021+부터 UI Toolkit은 웹 아이디어(UXML 레이아웃, HTML/CSS 같은 USS 스타일) 기반의 새 스택입니다. 복잡한 UI에서 uGUI보다 빠르지만 3D 게임플레이 통합은 더 어렵습니다. 인게임 런타임 UI에는 여전히 uGUI가 흔합니다.
표준 Unity UI 계층
uGUI (Scene Hierarchy)
📁 Canvas(+ CanvasScaler)
├ 📁 Panel
├ Image(background)
├ Text (TMP)
└ Button
└ Text (TMP)
└ 📁 HUD
├ Slider(health)
└ RawImage(minimap)
📁 EventSystem
Render Modes
Screen Space - Overlay
UI가 항상 씬 위에 그려집니다. HUD, 인벤토리, 메인 메뉴. 카메라 영향을 받지 않음.
Screen Space - Camera
특정 Camera를 통해 렌더. UI에 포스트프로세싱(blur, bloom) 가능.
World Space
UI가 3D 오브젝트. 체력바, 인게임 화면, VR UI. EventSystem + camera raycast 필요.
실습 단계
기본 Canvas 만들기
GameObject → UI → Canvas. Unity가 Canvas + CanvasScaler + GraphicRaycaster + EventSystem을 추가합니다.
CanvasScaler 설정
UI Scale Mode → Scale With Screen Size. Reference Resolution → 1920×1080(또는 타깃). Match → 0.5.
RectTransform 사용
UI는 Transform 대신 RectTransform을 씁니다. Anchor 프리셋(우상단, 전체 스트레치…)이 반응형 레이아웃의 핵심입니다.
여러 Canvas의 Sorting Order
Canvas → Sort Order: 숫자가 클수록 위에 그립니다. 인벤토리 위 툴팁, HUD 위 다이얼로그.
Canvas를 나눠 리배칭 줄이기
캔버스마다 따로 배칭됩니다. 정적 UI(배경)를 별도 Canvas에 두면 동적 UI가 전체 배치를 더럽히지 않습니다.
인터랙티브 시뮬레이터
CanvasScaler 동작을 확인——화면을 리사이즈하며 UI 스케일을 보세요.
Game Menu
Scale: 1.00 | Reference: 1920×1080
코드 예제
기본스크립트로 UI 갱신——HP 바, 점수 텍스트, 패널 표시/숨김.
using UnityEngine;
using UnityEngine.UI;
using TMPro;
public class HUDController : MonoBehaviour
{
[Header("Health")]
public Slider healthSlider;
public TMP_Text healthText;
[Header("Score")]
public TMP_Text scoreText;
[Header("Panels")]
public GameObject menuPanel;
public GameObject hudPanel;
public void UpdateHealth(float current, float max)
{
healthSlider.value = current / max;
healthText.text = $"{Mathf.RoundToInt(current)}/{Mathf.RoundToInt(max)}";
// Tint when HP is low
healthSlider.fillRect.GetComponent<Image>().color =
current / max < 0.3f ? Color.red : Color.green;
}
public void ShowMenu(bool show)
{
menuPanel.SetActive(show);
hudPanel.SetActive(!show);
Time.timeScale = show ? 0f : 1f; // Pause while the menu is open
}
public void UpdateScore(int score)
{
scoreText.text = score.ToString("N0"); // "1,280" format
}
}코드 예제
고급World Space UI——항상 카메라를 향하는 캐릭터 위 HP 바.
using UnityEngine;
using UnityEngine.UI;
// Attach to a World Space Canvas — HP bar over a character
public class WorldSpaceHealthBar : MonoBehaviour
{
public Slider slider;
public Vector3 offset = new Vector3(0, 2.5f, 0);
public Transform target;
Camera cam;
void Start() => cam = Camera.main;
void LateUpdate()
{
if (target == null) return;
// Follow the character + offset
transform.position = target.position + offset;
// Always face the camera (billboard)
transform.LookAt(transform.position + cam.transform.rotation * Vector3.forward,
cam.transform.rotation * Vector3.up);
}
public void SetHealth(float current, float max)
{
slider.value = current / max;
// Hide when HP is full
gameObject.SetActive(current < max);
}
}📌 빠른 정리
- ▸Canvas Overlay: 카메라 영향 없음
- ▸CanvasScaler: Scale With Screen Size → Reference 1920×1080
- ▸씬에 EventSystem은 하나만——많으면 버그
- ▸정적/동적 Canvas를 나눠 비싼 리배칭 회피
- ▸World Space UI는 LateUpdate로 물리 이후 추적
⚠️ 흔한 실수
❌ Button이 클릭을 받지 않음
EventSystem 없음, 또는 GraphicRaycaster가 꺼짐
✅ EventSystem이 있고 Canvas에 GraphicRaycaster가 있는지 확인
❌ PC와 폰에서 UI가 다르게 보임
CanvasScaler가 설정되지 않음
✅ Scale With Screen Size + Reference 1920×1080 + Match 0.5