Unity 3D 엔진 기초 (10) UI(User Interface)

안녕하세요, 연꿈술사입니다. 오늘은 Unity 3D 내부에서 사용하는 UI에 대해 설명해드리겠습니다.

UI는 Canvas라는 오브젝트 위에 배치되는 것들로, Scene 내부에서는 화면상의 오브젝트들과는 위치가 다르게 보입니다.

하지만 Game 내부에서 화면에 어떻게 표시되는지 확인할 수 있습니다.

오늘은 이 UI에 대해서 간단히 설명드리고, UI 컴포넌트에는 어떤 것들이 있는지 알아보겠습니다.

이후 쓰는 글에는 UI 컴포넌트에 대해 각각 자세히 알아보려고 합니다.

 

일단, UI는 User Interface의 약자로, 우리가 게임을 하면서 사용하는 수많은 상호작용 키들입니다. 사용자와 소프트웨어 간의 상호 작용을 가능하게 하는 모든 것을 이야기하고, 사용자에게 관련 정보들을 알려주고 사용자의 명령을 받아들여 표시해줍니다. 

이런 UI에는 게임의 종류에 따라 다양하게 표시되고, 정보, 체력, 마나, 조이스틱, 스킬, 회피등 우리가 클릭해서 사용하거나 화면상으로 볼 수 있게 보여지는 것들입니다. 이 UI는 UX와도 관련이 큰데, UX는 User Experience의 약자로, 유저의 경험과 관련이 있습니다. 우리가 게임을 하다보면 해당 UI의 위치를 대략 알고 있습니다. 체력과 마나는 왼쪽 위에, 조이스틱은 왼쪽 아래, 스킬 등 다양한 공격 관련 버튼은 오른쪽 아래, 등등 다양한 것들은 유저들의 경험을 통해 만들어지고, 유저들이 익숙해지는 것들에 UI를 배치하여 편하게 만들어줍니다. UI에는 어떤 것도 들어갈 수 있고, 사용자에게 필요한 정보라면 들어가는 것이 좋습니다. 하지만 게임을 하는 내내 필요한 정보들은 항상 출력시켜주어야 하겠지만, 그 외에 쉬는 시간에 봐도되는 정보들은 따로 버튼이나 키를 통해 출력시키는 것이 좋겠습니다.

 

그럼 이런 UI들을 Unity에서는 어떻게 사용하고, 어떤 것들이 있는지 알아보겠습니다.

 

1. Canvas : 모든 UI요소들은 Canvas내부에 있어야 UI로 인식되어 출력됩니다. Canvas는 즉 UI 요소들을 화면에 렌더링하는 영역으로 생각하시면 될 것 같습니다.

Canvas는 다양한 렌더모드를 지원하니 UI의 배치와 표시 방식을 개발자의 편의성에 맞게 제작하시면 되겠습니다.

2. EventSystem : UI 상호작용(버튼 클릭, 드래고, 드롭 등)에 필요한 이벤트들의 처리를 관리합니다.

3. UI에서 사용하는 컴포넌트

 (1) Text : 화면에 텍스트를 표시합니다.

 (2) Image : 화면에 이미지나 스프라이트를 표시합니다.

 (3) Button : 사용자의 클릭에 반응하는 버튼을 만듭니다. 버튼을 눌렀을 때 해당 동작을 수행하기 위해 OnClick()에 해당 하는 메서드를 할당해주어야 합니다.

 (4) Toggle : 체크박스나 라디오 버튼 기능을 합니다. 이름에 맞게 활성화/비활성화 두 상태를 가집니다.

 (5) Slider : 값의 범위 내에서 원하는 값을 선택하게 해주는 슬라이더를 생성합니다.

 (6) Scrollbar : 내용이 많을 때 우리가 아는 스크롤바를 추가해줍니다.

 (7) Dropdown : 여러 옵션 중 하나를 선택할 수 있는 드롭다운 메뉴입니다.

 (8) InputField : 사용자로부터 텍스트 입력을 받는 공간입니다.

 (9) Panel : 다른 UI 요소들을 그룹화하거나 배경을 제공합니다. Panel공간 안에 자식 UI 를 생성해 영역을 지정하는데 자 주 사용합니다.

 (10) Scroll Rect : 내부에 다른 UI 요소들을 가질 수 있는 스크롤 가능한 영역을 제공합니다.

 (11) Layout Groups : 자식 UI 컴포넌트들을 특정한 규칙에 따라 자동배열합니다.

4. Rect Transform : 기본 Transform 컴포넌트와 다르게 UI는 Rect Transform을 통해 위치, 크기, 회전 등을 결정하고,

Pivot을 통해 기준점을 잡을 수 있습니다.

 

오늘은 게임의 메뉴, HUD, 인벤토리, 튜토리얼, 알림 팝업, 대화 상자, 설정 메뉴 등 다양하게 사용되는 UI에 대해서 짧게

알아보았습니다. Unity는 이런 UI 요소들도 편하게 관리할 수 있어 매우 좋습니다.

이후에는 각 컴포넌트 내부에는 또 어떤 컴포넌트들이 있는지, 기능은 무엇인지 자세히 알아보겠습니다.

감사합니다. 연꿈술사였습니다.