07/22 UI 기초 - 게임 화면 구성 및 스크립팅

Unity UI란?

Unity에서 체력바, 버튼, 인벤토리, 설정창처럼 화면에 표시되는 요소를 만드는 시스템입니다.

Unity에는 크게 두 가지 UI 시스템이 있습니다.

• uGUI(Unity UI): Canvas, GameObject, RectTransform 기반
• UI Toolkit: 웹의 HTML/CSS와 비슷한 UXML, USS, VisualElement 기반

질문하신 Canvas, UI 오브젝트는 uGUI에 해당합니다. 게임의 런타임 UI를 처음 배운다면 uGUI부터 익히는 것이 좋습니다. Unity도 런타임 UI의 기본 선택으로 uGUI를 안내합니다.

전체 구조부터 이해하기

일반적인 UI 계층은 다음과 같습니다.

Canvas
├─ HUD
│  ├─ HealthBar
│  ├─ ScoreText
│  └─ MiniMap
├─ InventoryPanel
│  ├─ ItemSlot
│  └─ CloseButton
└─ PopupPanel

핵심 구조는 다음 한 문장으로 정리할 수 있습니다.

Canvas 안에 UI 오브젝트를 넣고, RectTransform으로 배치하며, EventSystem이 입력을 전달합니다.

Canvas

Canvas는 UI가 그려지는 최상위 공간입니다. Image, Button, Text 같은 uGUI 오브젝트는 원칙적으로 Canvas 아래에 있어야 화면에 표시됩니다.

Render Mode

1. Screen Space - Overlay

• 화면 위에 UI를 바로 표시합니다.
• 카메라가 필요 없습니다.
• HUD, 메뉴, 인벤토리에 가장 많이 사용합니다.

2. Screen Space - Camera

• 지정한 카메라를 통해 UI를 표시합니다.
• 카메라와 UI 사이의 거리 및 정렬을 제어할 수 있습니다.
• 카메라 연출이나 다른 화면 요소와의 정렬이 필요할 때 유용합니다.

3. World Space

• Canvas가 3D 공간의 오브젝트처럼 배치됩니다.
• NPC 머리 위 체력바, 게임 속 컴퓨터 화면, VR UI 등에 사용합니다.

Canvas Scaler

해상도가 달라져도 UI 크기를 적절하게 맞춰 주는 컴포넌트입니다.

일반적인 화면 UI에서는 다음 설정으로 시작하면 좋습니다.

UI Scale Mode: Scale With Screen Size
Reference Resolution: 1920 × 1080
Screen Match Mode: Match Width Or Height
Match: 0.5

세로형 모바일 게임이라면 기준 해상도를 1080 × 1920처럼 설정할 수 있습니다.

RectTransform

일반 오브젝트에는 Transform이 있지만, UI 오브젝트에는 RectTransform이 있습니다.

RectTransform은 위치뿐 아니라 UI의 너비, 높이, 기준점까지 관리합니다.

• Anchor: 부모 UI의 어느 부분을 기준으로 배치할지 결정
• Pivot: 자기 자신의 회전·크기 변경 기준점
• Anchored Position: Anchor를 기준으로 한 실제 위치
• Width / Height: UI 크기
• Stretch: 부모 크기에 맞춰 늘어나도록 설정

예를 들어 체력바를 화면 왼쪽 위에 고정하려면 Anchor를 왼쪽 위로 설정해야 합니다. 단순히 좌표만 옮기면 해상도가 바뀔 때 위치가 틀어질 수 있습니다.

반응형 UI의 핵심은 좌표가 아니라 Anchor 설정입니다.

자주 사용하는 UI 오브젝트

Anchor 핵심

Anchor는 UI 오브젝트가 부모 RectTransform의 어느 지점을 기준으로 배치될지 정하는 값입니다. 해상도나 부모 크기가 바뀌었을 때 UI의 위치와 크기가 어떻게 변할지를 결정합니다.

Anchor가 한 점으로 모여 있으면 UI의 위치 기준점이 되고, Anchor Min과 Max가 떨어져 있으면 그 방향으로 Stretch됩니다.

예를 들어 화면 오른쪽 위에 코인 표시를 만들었다면 Anchor도 오른쪽 위로 설정해야 합니다. 가운데 Anchor인 상태에서 좌표만 오른쪽 위로 옮기면 화면 비율이 바뀔 때 위치가 틀어집니다.

Pivot과의 차이도 중요합니다.

• Anchor: 부모를 기준으로 어디에 붙을지 결정
• Pivot: 자기 자신 내부의 중심점으로, 회전·크기 변경 기준
• Anchored Position: Anchor 기준으로 얼마나 떨어져 있는지
• Size Delta: Anchor가 Stretch일 때 기준 크기와의 차이 또는 여백

Unity의 Anchor Presets를 사용할 때는 Alt를 누른 채 선택하면 위치까지 함께 맞추고, Shift를 누르면 Pivot도 함께 맞춥니다.

한마디로 정리하면:

고정할 곳은 Anchor로 지정하고, Anchor로부터의 간격은 Anchored Position으로 조절합니다.

Pivot 핵심

Pivot은 UI 오브젝트 자기 자신 내부의 기준점입니다. 회전, 확대·축소, 크기 변경이 어느 지점을 중심으로 일어날지 결정합니다. 값은 0~1 범위이며, (0, 0)은 왼쪽 아래, (0.5, 0.5)는 정중앙, (1, 1)은 오른쪽 위입니다.

예를 들어 체력바의 Pivot을 왼쪽 중앙 (0, 0.5)으로 설정하면 너비를 변경했을 때 왼쪽은 고정되고 오른쪽 방향으로 늘어나거나 줄어듭니다. Pivot이 중앙이면 양쪽 방향으로 동시에 크기가 변합니다.

Pivot이 영향을 주는 대표적인 동작은 다음과 같습니다.

• 회전: Pivot을 중심으로 회전
• Scale: Pivot을 중심으로 확대·축소
• 크기 변경: Pivot의 반대 방향으로 주로 늘어나거나 줄어듦
• 위치 계산: RectTransform의 위치는 Pivot 지점을 기준으로 계산

Anchor와의 차이는 간단합니다.

• Anchor: 부모의 어느 위치를 기준으로 배치할지 결정
• Pivot: 자기 자신의 어느 지점을 기준으로 움직이거나 변형할지 결정

Anchor는 부모 기준, Pivot은 자기 자신 기준입니다.

Audio Mixer 핵심

Audio Mixer는 게임의 여러 소리를 종류별로 묶어서 볼륨과 효과를 관리하는 에셋입니다. 각 AudioSource의 Output에 원하는 Mixer Group을 연결해서 사용합니다.

일반적으로 다음처럼 구성합니다.

Master
├─ BGM
├─ SFX
├─ Voice
└─ UI

예를 들어 배경음 AudioSource의 Output을 BGM 그룹에 연결하면, BGM 그룹의 볼륨만 조절하여 모든 배경음을 한 번에 제어할 수 있습니다.

설정창에서 볼륨을 조절하려면 Mixer의 Volume을 우클릭해 Expose to script로 공개한 뒤 사용합니다.

audioMixer.SetFloat("BGMVolume", decibel);

주의할 점은 Mixer의 볼륨 단위가 0~1이 아니라 데시벨(dB)이라는 것입니다.

• 0dB: 원래 음량
• -20dB: 작은 음량
• -80dB: 사실상 음소거
• 양수: 원래보다 증폭

슬라이더 값이 0.0001~1이라면 다음처럼 변환할 수 있습니다.

float decibel = Mathf.Log10(sliderValue) * 20f;

Snapshot은 상황별 Mixer 설정을 저장하는 기능입니다. 일시정지할 때 BGM과 효과음을 줄이거나, 물속에 들어갔을 때 모든 소리에 Lowpass 효과를 적용하는 식으로 활용합니다.

AudioSource는 소리를 재생하고, Audio Mixer는 여러 소리를 분류하고 통합 제어합니다.

HUD란?

HUD(Heads-Up Display)는 플레이 중 화면에 계속 보여주는 정보 UI를 뜻합니다. Unity의 특정 컴포넌트 이름이 아니라 UI의 용도를 나타내는 말입니다.

Canvas
└─ HUD
   ├─ HealthBar
   ├─ StaminaBar
   ├─ MiniMap
   └─ AmmoText

체력, 점수, 미니맵, 탄약처럼 플레이어가 즉시 확인해야 하는 정보를 HUD 아래에 묶어 관리합니다.

Canvas Group이란?

Canvas Group은 부모 UI와 그 아래의 모든 자식 UI를 한꺼번에 제어하는 컴포넌트입니다. HUD 전체를 숨기거나 팝업을 서서히 나타낼 때 유용합니다.

예를 들어 HUD 전체를 숨기려면 다음처럼 설정합니다.

hudGroup.alpha = 0f;
hudGroup.interactable = false;
hudGroup.blocksRaycasts = false;

중요한 점은 Alpha = 0만 설정하면 눈에 보이지 않아도 클릭을 막을 수 있다는 것입니다. 완전히 비활성화하려면 Interactable과 Blocks Raycasts도 함께 꺼주는 것이 안전합니다.

• 잠깐 숨기거나 페이드 효과 사용 → Canvas Group
• 오브젝트 자체를 완전히 끄기 → SetActive(false)

HUD는 화면 정보 UI의 묶음이고, Canvas Group은 그 묶음을 한꺼번에 제어하는 컴포넌트입니다.