안녕하세요 게임 개발자 GamJia 입니다
오늘은 Unity에서 게임과 사용자가 상호작용하기 위한 핵심 요소인
UI (User Interface) 를 만드는 방법을 쉽게 설명해드리려고 합니다!
✍️ 이 글에서 다룰 내용
✅ 게임 UI란 무엇일까요? 왜 중요할까요?
✅ UI의 기본 도화지, Canvas 이해하기
✅ 이미지로 꾸미자! Image 표시하기
✅ 필수 UI 요소: Text 표시하기
✅ 필수 UI 요소: Button 만들기 및 기본적인 상호작용
✅ 화면 어디든 찰싹! Anchor 이해하고 사용하기
게임 UI 는 사용자가 게임과 소통하고
상호작용할 수 있도록 만들어진 모든 시각적인 요소들을 의미합니다.
메뉴 화면에서 게임을 시작하거나 설정을 변경하고,
현재 점수나 남은 시간, 캐릭터의 체력 등을 확인하는 모든 화면 요소들이 UI에 해당합니다.
잘 만들어진 UI는 사용자가 게임을 쉽고 편리하게 이용할 수 있도록 도와주며,
게임의 몰입도와 재미를 높이는 데 매우 중요한 역할을 한답니다.
Unity에서 UI 요소들은 반드시 Canvas 라는 특별한 GameObject 위에 그려져야 합니다.
Canvas는 UI 요소들이 배치되는 공간이자, 어떻게 화면에 표시될지를 결정하는 역할을 해요.
마치 그림을 그리기 위한 도화지라고 생각하시면 됩니다.
Unity Editor를 열고, 작업 중인 Project를 엽니다.
(2주차에서 만들었던 프로젝트를 사용하셔도 좋아요.)
Hierarchy 창의 빈 공간에 마우스 우클릭을 하거나,
Hierarchy 창 상단의 + Create 버튼을 클릭하세요.
나타나는 메뉴에서 UI -> Canvas를 선택해주세요.
Hierarchy 창에 Canvas 라는 이름의 GameObject가 생성된 것을 확인할 수 있습니다.
Scene View 에는 큰 사각형 형태의 Canvas가 나타날 거예요.
🍯팁: Canvas는 기본적으로 Scene View에서는 크게 보이지만,
Game View에서는 실제 화면 크기에 맞춰서 UI 요소들이 표시됩니다.
Canvas를 처음 생성하면 Hierarchy 창에 EventSystem 이라는
GameObject가 자동으로 함께 생성되는 것을 확인할 수 있습니다.
EventSystem은 UI 요소들의 상호작용을 관리하는 핵심 시스템입니다.
사용자의 마우스 클릭, 터치 입력, 키보드 입력 등을 감지하고,
어떤 UI 요소와 상호작용이 발생했는지 판단하여
해당 요소에 이벤트를 전달하는 역할을 합니다.
쉽게 말해, EventSystem이 없다면 버튼을 클릭해도 아무런 반응이 일어나지 않습니다!
UI 요소들이 사용자와 상호작용하기 위해서는 반드시 EventSystem이 존재해야 합니다.
일반적으로 하나의 Scene에는 하나의 EventSystem만 존재해야 합니다.
자, 그럼 이제 직접 UI 요소들을 Scene에 추가해서
어떻게 보이는지 한번 확인해 볼까요?
게임 UI를 더욱 보기 좋게 만들고 정보를
시각적으로 전달하기 위해 Image UI를 사용할 수 있습니다.
로고, 아이콘, 배경 이미지 등을 표시하는 데 유용합니다.
Canvas가 선택된 상태에서 Hierarchy 창의 빈 공간에 마우스 우클릭을 하거나,
Hierarchy 창 상단의 + Create 버튼을 클릭해주세요.
나타나는 메뉴에서 UI -> Image 를 선택해주세요.
Hierarchy 창에 Image 라는 이름의 GameObject가
Canvas의 자식으로 생성된 것을 확인할 수 있습니다.
Scene View에도 기본 Image가 나타날 거예요.
Image Component를 보면 Image Type이라는게 있는데요.
순서대로 Simple,Sliced,Tiled,Filled 입니다
Image Type은 Image가 어떻게 렌더링되고 크기가 조절될 때
어떻게 동작할지를 결정하는 중요한 설정입니다.
| 이름 |
속성 |
| Simple |
Image를 있는 그대로 화면에 보여주는 가장 기본적인 방식입니다.
Image의 크기를 변경하면 전체 Image가 늘어나거나 줄어듭니다. |
| Sliced |
Image를 9개의 조각으로 나누어 처리합니다. 네 귀퉁이 부분은 크기가 변하지 않고, 가운데 부분만 늘어나거나 줄어듭니다. 테두리가 있는 UI 요소를 만들 때 유용합니다. |
| Tiled |
Image를 작은 조각으로 반복하여 채우는 방식입니다. Image의 크기를 늘리면 동일한 Image가 바둑판처럼 반복적으로 그려집니다. 패턴이나 반복되는 배경을 만들 때 좋습니다. |
| Filled |
Image를 특정 방식에 따라 채워나가는 방식입니다. 채우는 방향 (가로, 세로, 원형 등)과 채우는 양, 시작점 등을 조절하여 진행 상태 표시 (HP 바, 게이지 등)나 원형 시계 같은 UI를 만들 수 있습니다. |
게임에서 점수, 설명, 대화 내용 등 다양한
Text 정보를 표시하는 것은 매우 중요하죠.
Unity에서는 Text (TextMeshPro) 라는 UI 요소를
사용하여 Text를 쉽게 표현할 수 있습니다.
Canvas가 선택된 상태에서 Hierarchy 창의 빈 공간에 마우스 우클릭을 하거나,
Hierarchy 창 상단의 + Create 버튼을 클릭해주세요.
나타나는 메뉴에서 UI -> Text 를 선택해주세요.
TextMeshPro를 Project에 처음 넣으면 TMP Importer 설정 창이 뜨는데요.
이 창은 TextMeshPro의 기본적인 리소스를 프로젝트에 추가하는 설정입니다.
Hierarchy 창에 Text (TMP) 라는 이름의 GameObject가
Canvas의 자식으로 생성된 것을 확인할 수 있습니다.
Scene View에도 기본 Text가 나타날 거예요.
Text를 선택하고, Inspector 창을 살펴볼게요.
| 이름 |
속성 |
| Text (TMP) |
이 항목에서 실제 표시할 텍스트 내용을 입력할 수 있습니다.
원하는 Text를 입력해 보세요. (예: "점수: 0") |
| Font Asset |
Text에 사용할 글꼴을 지정할 수 있습니다.
Asset Store에서 다양한 글꼴을 다운로드하여 사용할 수 있습니다. |
| Font Size |
Text의 크기를 조절할 수 있습니다. |
| Color |
Text의 색상을 변경할 수 있습니다. |
| Alignment |
Text의 정렬 방식을 설정할 수 있습니다. |
Inspector 창의 다양한 속성들을 조절하면서
Text의 모양을 원하는 대로 바꿔보세요!
게임에서 사용자의 클릭이나 터치를 감지하여
특정 기능을 실행하는 데 필수적인 요소가 바로 Button 입니다.
Button UI 요소를 통해 간단하게 Button을 만들고 기능을 연결할 수 있습니다.
Canvas가 선택된 상태에서 Hierarchy 창의 빈 공간에 마우스 우클릭을 하거나,
Hierarchy 창 상단의 + Create 버튼을 클릭해주세요.
나타나는 메뉴에서 UI -> Text 를 선택해주세요.
Hierarchy 창에 Button 라는 이름의 GameObject가
Canvas의 자식으로 생성된 것을 확인할 수 있습니다.
Scene View에도 기본 Button이 나타날 거예요.
Button을 선택하고, Inspector 창을 살펴볼게요.
| 이름 |
속성 |
| Image |
버튼의 배경 Image를 설정할 수 있습니다.
Source Image 항목에서 원하는 Sprite를 선택하거나 색상을 변경할 수 있습니다. |
| Button |
버튼의 기본적인 동작을 설정하는 스크립트입니다.
가장 중요한 부분은 On Click (UnityEngine.UI.Button) 리스트입니다.
이 리스트에 함수를 연결하면 버튼이 클릭되었을 때 해당 함수가 실행됩니다. |
간단하게 Button을 클릭했을 때
Console 창에 메시지를 출력하는 기능을 연결해 보겠습니다!
Project 창에서 새로운 Script를 하나 만듭니다.
Script 이름을 ButtonAction 정도로 지어주세요.
ButtonAction Script를 열고 아래와 같이 코드를 작성합니다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ButtonAction : MonoBehaviour
{
public void OnButtonClick()
{
Debug.Log("버튼이 클릭되었습니다!");
}
}
작성한 ButtonAction Script를 Button의 Component로 추가합니다.
Inspector 창의 Button 의 On Click ()
리스트에서 [+] 버튼을 클릭하여 새로운 항목을 추가합니다.
Function 드롭다운 메뉴를 클릭하고,
ButtonAction -> OnButtonClick 함수를 선택합니다.
게임을 실행하고 방금 만든 버튼을 클릭해 보세요!
Console 창에 "버튼이 클릭되었습니다!" 라는
메시지가 출력되는 것을 확인할 수 있을 거예요.
UI 객체들을 Hierarchy 창에서 선택해 보면 Transform이 아닌
RectTransform이라는 Component를 사용하는 것을 확인할 수 있어요.
RectTransform은 UI 요소의 위치, 크기, 회전, 그리고 Anchor와 Pivot 같은
UI Layout 관련 속성을 관리하는 특별한 Component입니다.
다양한 해상도의 화면에서 UI 요소들이 일정한 위치와
비율을 유지하도록 하는 것은 매우 중요해요.
Unity의 Anchor는 UI 요소가 Canvas의 특정 지점에
"붙어 있도록" 설정하여 이러한 문제를 해결해준답니다.
다양한 해상도의 화면에서 UI 요소들이 Canvas의 경계에
어떻게 반응하는지를 결정하는 데에는 Anchor가 중요한 역할을 합니다.
이와 더불어, UI 요소 자체의 중심축을 설정하는 것이 바로 Pivot입니다.
Pivot은 요소가 회전하거나 크기가 조절될 때 기준이 되는 점이며,
Editor의 Scene View에서 작은 원 모양으로 시각적으로 표현됩니다.
위의 이미지를 보면 알 수 있듯이 Pivot이 어디냐에 따라
늘어나는 지점이 다른걸 볼 수 있죠.
순서대로 Default,Alt,Shift,Alt+Shift 입니다
Anchor는 단순히 위치를 고정하는 것 외에도
키를 누른 상태에 따라 다양한 동작 방식을 제공한답니다.
각 Anchor Preset을 선택할 때 어떤 키를 누르고 있느냐에 따라
UI 요소의 앵커와 Pivot, 그리고 위치가 다르게 설정됩니다.
| 이름 |
속성 |
| 그냥 선택 |
Anchor만 이동, UI 위치나 크기 변할 수 있음. |
| Alt 키 |
Anchor 만 이동, 보이는 위치는 그대로 유지. |
| Shift 키 |
Anchor 와 Pivot 함께 이동. |
| Alt + Shift 키 |
Anchor와 Pivot 함께 이동, 보이는 위치도 그대로 유지. |
마지막으로 Anchor의 Stretch 기능을 이용해서
UI 요소들을 Canvas 크기에 맞춰 자동으로 늘어나거나 줄어들도록 설정해 보세요!
특히 아까 배웠던 Image Type의 Sliced 방식을 함께 사용하면,
테두리는 유지하면서 크기가 자유롭게 조절되는 멋진 UI를 만드실 수 있을 겁니다.
오늘은 Unity의 기존 Input Manager (Legacy Input) 방식과
새로운 Input System 방식을 사용하여
Unity Chan을 직접 조작하는 다양한 방법을 배워봤습니다.
이제 여러분은 게임의 인터랙티브성을 높이는 방법을 이해하고,
키보드, UI 버튼을 통해 캐릭터를 제어할 수 있게 되었을 거예요!
앞으로도 Unity를 처음 시작하는 분들을 위해
실전 팁과 초보자용 가이드를 계속 공유할 예정이니,
다음 글도 기대해주세요!
감사합니다!
