[Cocos] 눈으로 보이는 즐거움! UI 시스템 기본부터 활용까지 ✨

안녕하세요 게임 개발자 GamJia 입니다

오늘은 게임과 사용자가 상호작용하기 위한 핵심 요소인

UI (User Interface) 를 만드는 방법을 쉽게 설명해드리려고 합니다!

✍️ 이 글에서 다룰 내용
✅ 게임 UI란 무엇일까요? 왜 중요할까요?
✅ UI의 기본 도화지, Canvas 이해하기

✅ 이미지로 꾸미자! Image 표시하기
✅ 필수 UI 요소: Text 표시하기

✅ 필수 UI 요소: Button 만들기 및 기본적인 상호작용
✅ 화면 어디든 찰싹! Anchor 이해하고 사용하기

---

 

게임 UI 는 사용자가 게임과 소통하고

상호작용할 수 있도록 만들어진 모든 시각적인 요소들을 의미합니다.

 

메뉴 화면에서 게임을 시작하거나 설정을 변경하고,

현재 점수나 남은 시간, 캐릭터의 체력 등을 확인하는 모든 화면 요소들이 UI에 해당합니다.

잘 만들어진 UI는 사용자가 게임을 쉽고 편리하게 이용할 수 있도록 도와주며,

게임의 몰입도와 재미를 높이는 데 매우 중요한 역할을 한답니다.

---

 

UI 요소들은 반드시 Canvas 라는 특별한 GameObject 위에 그려져야 합니다.

Canvas는 UI 요소들이 배치되는 공간이자, 어떻게 화면에 표시될지를 결정하는 역할을 해요.

마치 그림을 그리기 위한 도화지라고 생각하시면 됩니다.

Cocos Dashboard를 열고, 작업 중인 Project를 엽니다.

(2주차에서 만들었던 프로젝트를 사용하셔도 좋아요.)

Hierarchy 창의 빈 공간에 마우스 우클릭을 하거나,

Hierarchy 창 상단의 + Create 버튼을 클릭하세요.

나타나는 메뉴에서 UI Component -> Canvas를 선택해주세요.

Hierarchy 창에 Canvas 라는 이름의 GameObject가 생성된 것을 확인할 수 있습니다.

Scene View 에는 큰 사각형 형태의 Canvas가 나타날 거예요.

🍯팁: Canvas는 기본적으로 Scene View에서는 크게 보이지만,

Game View에서는 실제 화면 크기에 맞춰서 UI 요소들이 표시됩니다.

---

자, 그럼 이제 직접 UI 요소들을 Scene에 추가해서

어떻게 보이는지 한번 확인해 볼까요?

---

게임 UI를 더욱 보기 좋게 만들고 정보를

시각적으로 전달하기 위해 Sprite를 사용할 수 있습니다.

로고, 아이콘, 배경 이미지 등을 표시하는 데 유용합니다.

Canvas가 선택된 상태에서 Hierarchy 창의 빈 공간에 마우스 우클릭을 하거나,

Hierarchy 창 상단의 + Create 버튼을 클릭해주세요.
나타나는 메뉴에서 2D Object -> Sprite 를 선택해주세요.

Hierarchy 창에 Sprite 라는 이름의 Node가

Canvas의 자식으로 생성된 것을 확인할 수 있습니다.

Scene View에도 기본 Sprite가 나타날 거예요.

Sprite Component를 보면 Sprite Type이라는게 있는데요.

순서대로 Simple,Sliced,Tiled,Filled 입니다

Sprite Type은 Sprite가 어떻게 렌더링되고 크기가 조절될 때

어떻게 동작할지를 결정하는 중요한 설정입니다.

이름	속성
Simple	Sprite를 있는 그대로 화면에 보여주는 가장 기본적인 방식입니다. Sprite의 크기를 변경하면 전체 Sprite가 늘어나거나 줄어듭니다.
Sliced	Sprite를 9개의 조각으로 나누어 처리합니다. 네 귀퉁이 부분은 크기가 변하지 않고, 가운데 부분만 늘어나거나 줄어듭니다. 테두리가 있는 UI 요소를 만들 때 유용합니다.
Tiled	Sprite를 작은 조각으로 반복하여 채우는 방식입니다. Sprite의 크기를 늘리면 동일한 Sprite가 바둑판처럼 반복적으로 그려집니다. 패턴이나 반복되는 배경을 만들 때 좋습니다.
Filled	Sprite를 특정 방식에 따라 채워나가는 방식입니다. 채우는 방향 (가로, 세로, 원형 등)과 채우는 양, 시작점 등을 조절하여 진행 상태 표시 (HP 바, 게이지 등)나 원형 시계 같은 UI를 만들 수 있습니다.

---

게임에서 점수, 설명, 대화 내용 등 다양한

Text 정보를 표시하는 것은 매우 중요하죠.

 

Cocos에서는 Label 라는 UI 요소를

사용하여 Text를 쉽게 표현할 수 있습니다.

Canvas가 선택된 상태에서 Hierarchy 창의 빈 공간에 마우스 우클릭을 하거나,

Hierarchy 창 상단의 + Create 버튼을 클릭해주세요.
나타나는 메뉴에서 2D Obejct -> Label 를 선택해주세요.

Hierarchy 창에 Label라는 이름의 Node가

Canvas의 자식으로 생성된 것을 확인할 수 있습니다.

Scene View에도 기본 Text가 나타날 거예요.

Label을 선택하고, Inspector 창을 살펴볼게요.

이름	속성
String	이 항목에서 실제 표시할 텍스트 내용을 입력할 수 있습니다. 원하는 Text를 입력해 보세요. (예: "점수: 0")
Font	Label에 사용할 글꼴을 지정할 수 있습니다.
Font Size	Label의 크기를 조절할 수 있습니다.
Color	Label의 색상을 변경할 수 있습니다.
Alignment	Label의 정렬 방식을 설정할 수 있습니다.

 

Inspector 창의 다양한 속성들을 조절하면서

Label의 모양을 원하는 대로 바꿔보세요!

---

 

게임에서 사용자의 클릭이나 터치를 감지하여

특정 기능을 실행하는 데 필수적인 요소가 바로 Button 입니다.

Button UI 요소를 통해 간단하게 Button을 만들고 기능을 연결할 수 있습니다.

Canvas가 선택된 상태에서 Hierarchy 창의 빈 공간에 마우스 우클릭을 하거나,

Hierarchy 창 상단의 + Create 버튼을 클릭해주세요.
나타나는 메뉴에서 UI Component -> Button 를 선택해주세요.

Hierarchy 창에 Button 라는 이름의 Node가

Canvas의 자식으로 생성된 것을 확인할 수 있습니다.

Scene View에도 기본 Button이 나타날 거예요.

 

Button을 선택하고, Inspector 창을 살펴볼게요.

이름	속성
Sprite	버튼의 배경 Image를 설정할 수 있습니다. Sprite를 선택하거나 색상을 변경할 수 있습니다.
Button	버튼의 기본적인 동작을 설정하는 스크립트입니다. 가장 중요한 부분은 On Click (UnityEngine.UI.Button) 리스트입니다. 이 리스트에 함수를 연결하면 버튼이 클릭되었을 때 해당 함수가 실행됩니다.

---

간단하게 Button을 클릭했을 때

Console 창에 메시지를 출력하는 기능을 연결해 보겠습니다!

Project 창에서 새로운 Script를 하나 만듭니다.

Script 이름을 ButtonAction 정도로 지어주세요.

ButtonAction Script를 열고 아래와 같이 코드를 작성합니다.

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ButtonAction')
export class ButtonAction extends Component {

    private OnButtonClick()
    {
        console.log("버튼이 클릭되었습니다!");
    }
}

작성한 ButtonAction Script를 Button의 Component로 추가합니다.

Inspector 창의 Button 의 On Click ()

리스트에서 [+] 버튼을 클릭하여 새로운 항목을 추가합니다.

Function 드롭다운 메뉴를 클릭하고,

ButtonAction -> OnButtonClick 함수를 선택합니다.

게임을 실행하고 방금 만든 버튼을 클릭해 보세요!

Console 창에 "버튼이 클릭되었습니다!" 라는

메시지가 출력되는 것을 확인할 수 있을 거예요.

---

UI 객체들을 Hierarchy 창에서 선택해 보면 

UI Transform이라는 Component를 확인할 수 있어요.

 

UI Transform은 UI 요소의 크기, Pivot 같은

UI Layout 관련 속성을 관리하는 특별한 Component입니다.

다양한 해상도의 화면에서 UI 요소들이 일정한 위치와

비율을 유지하도록 하는 것은 매우 중요해요.

 

Cocos의 Widget는 UI 요소가 Canvas의 특정 지점에

"붙어 있도록" 설정하여 이러한 문제를 해결해준답니다.

---

다양한 해상도의 화면에서 UI 요소들이 Canvas의 경계에

어떻게 반응하는지를 결정하는 데에는 Anchor가 중요한 역할을 합니다.

 

이와 더불어, UI 요소 자체의 중심축을 설정하는 것이 바로 Pivot입니다.

Pivot은 요소가 회전하거나 크기가 조절될 때 기준이 되는 점이며,

아까 나왔던 UI Transform에서 값을 변경할 수 있답니다.

 

위의 이미지를 보면 알 수 있듯이 Pivot이 어디냐에 따라

늘어나는 지점이 다른걸 볼 수 있죠.

마지막으로 Widget의 Stretch 기능을 이용해서

UI 요소들을 Canvas 크기에 맞춰 자동으로 늘어나거나 줄어들도록 설정해 보세요!

 

특히 아까 배웠던 Sprite Type의 Sliced 방식을 함께 사용하면,

테두리는 유지하면서 크기가 자유롭게 조절되는 멋진 UI를 만드실 수 있을 겁니다.

---

오늘은 Cocos Creator에서 게임 UI를 만들기 위한 기본적인 요소들을 배우고,
Widget과 Pivot을 통해 UI 배치를 유연하게 관리하는 방법까지 익혔습니다.
이 기초를 바탕으로 더욱 멋지고 편리한 UI를 게임에 구현해 보시길 바랍니다.

앞으로도 Cocos Creator를 처음 시작하는 분들을 위해
실전 팁과 초보자용 가이드를 계속 공유할 예정이니,

다음 글도 기대해주세요!

 

 

감사합니다!