유니티 UI

유니티 UI는 GUI(Graphic User Interface)를 만들기 위한 특별한 기능입니다.

GUI란 사용자가 App을 조작하기 위한 메뉴를 의미합니다. 원래 UI(User Interface)는 전자 장치를 조작하기 위한 다양한 기능에서 출발했습니다.

하드웨어 UI의 예

GUI란 말은 원래 컴퓨터를 일반인들도 쉽게 다룰 수 있도록 만들기 위해 노력한 스티브 잡스가 고안한 개념입니다. 하드웨어 UI를 화면에 그래픽으로 표현함으로써 컴퓨터를 마치 기존의 전자 장치처럼 쓸 수 있도록 만드는 것이 GUI의 목표였습니다.

GUI의 디자인은 하드웨어 UI와 유사하다.

GUI는 점차 하드웨어로는 표현할 수 없는 다양한 조작 방식을 보여주며 독자적으로 발전되어 왔습니다.

GUI는 점차 발전되고 있습니다.

이제 소프트웨어 개발에 있어서 사용자 조작을 위한 GUI는 빠질 수 없는 개념이기에 유니티에서도 GUI 개발을 위한 기능을 제공하며 이것을 유니티 UI 혹은 UGUI라 부릅니다.

유니티에서 UI를 만들기 위해서는 Canvas라 부르는 특별한 컴포넌트를 사용해야 합니다. Canvas는 UI가 보여질 화면을 뜻하며, 이곳에 다양한 GUI 요소를 올려놓음으로써 디자인 할 수 있습니다.

유니티 UI 디자인 모습

UI는 2D이므로 Scene에서 2D 모드로 설정하고 편집하는 것이 좋습니다.
Canvas는 다음과 같은 기능을 지원합니다.

오버레이(Overlay) 방식 지원
GUI는 사용자를 위한 조작 메뉴이므로 항상 제일 앞에 놓여져야 합니다. 오버레이는 UI가 다른 어떤 것보다도 우선적으로 위에 놓여지게 하는 방식을 의미합니다.

GUI는 언제든 조작이 가능하도록 앞에 있어야 한다.

다양한 화면 크기에 대응
소프트웨어가 보이는 화면은 기기마다 다릅니다. 그 화면의 크기는 해상도가 될 수도 있고, 실제 디스플레이 장치의 크기가 될 수도 있습니다.

기기마다 화면의 크기는 다르다.

이 기능은 하나의 GUI 디자인으로 여러 기기의 화면에 대응하여 사용자에게 항상 같은 UI를 보여주는데 유리합니다.

3D GUI
유니티는 3D 디자인 도구이므로 당연히 GUI도 3D로 보여주는 것이 가능합니다.
3D GUI는 2가지 방식을 생각할 수 있는데, 첫번째는 회전에 의해 비스듬하게 보여지는 것입니다.

이제 GUI는 평면이 아닌 3D 공간으로 표현된다.

다음 방식으로는 3D 물체에 부착되어 사용자가 공간속에서 GUI를 보게되는 것입니다.

사용자가 공간을 돌아다니며 GUI를 조작할 수 있다.

유니티 UI에서 기본으로 제공하는 GUI요소는 다음과 같습니다.

Label
라벨은 텍스트를 표현하는 기본적인 GUI 중 하나입니다.

텍스트의 다양한 효과를 위해 폰트 지정, 글자 크기, 글자 색, 볼드/이탤릭 체 등의 기능을 지원하고 배치와 관련된 왼쪽/가운데/오른쪽 정렬 등도 가능합니다.

Image
GUI에서 아이콘과 같은 이미지를 보여주는 것은 기본적인 기능입니다.
PNG포맷 이미지를 이용해서 투명 배경을 사용하면 매우 깔끔하게 이미지를 보여줄 수 있습니다. 이미지에 색상을 입힐 수 있기 때문에 흑백 이미지를 사용한다면 하나의 이미지로 여러 이미지 효과를 줄 수 있습니다.

이미지를 이용하면 GUI를 멋있게 표현할 수 있다.

Button
버튼은 사용자가 조작할 수 있는 기본적인 GUI중 하나입니다.
이것은 Label과 Image를 조합하여 사용하기 때문에 이미지를 바꾸거나 폰트를 이용해서 다양한 디자인을 표현할 수 있습니다.

GUI 버튼의 예

Toggle
토글은 On/Off 상태를 전환할 수 있는 GUI입니다.

토글방식 GUI의 예

Slider
슬라이더는 값의 크기를 조절하는데 많이 사용되는 GUI입니다. 오디오 볼륨을 조절할 때 슬라이더 GUI가 주로 사용됩니다.

슬라이더 방식 GUI

슬라이더 GUI는 조금만 응용하면 다양한 모양으로 표현할 수 있습니다.

슬라이더 GUI는 다이얼 형태로 표현할 수 있다.

Dropdown
드롭다운 GUI는 옵션을 설정할 때 많이 사용합니다. 적은 공간에 여러 정보를 표현할 수 있다는 장점이 있습니다.

드롭다운 GUI

이 외에도 다양한 GUI 요소를 유니티 UI를 이용해서 표현할 수 있습니다. 다만, 기본으로 제공하는 것이 아니기에 조합을 통해 응용하거나 에셋 스토어에서 만들어놓은 것을 사용하면 더 훌륭한 디자인의 GUI를 표현할 수 있습니다.

대부분 멋있는 UI는 기본 GUI를 응용한 것입니다.

마지막으로 유니티 UI에서 제공하는 유용한 기능을 소개하겠습니다. 그것은 바로 유니티 이벤트(Unity Event)입니다.
GUI는 사용자와 상호작용해야 하므로 사용자 조작에 대한 반응을 구현해야 합니다. 문제는 이런 GUI 상호작용을 위해 프로그래밍을 해야 하기에 초보자들은 어려울 수 밖에 없습니다.
유니티는 GUI 상호작용 구현에 어려움을 겪는 초보자들을 위해 유니티 이벤트 기능을 만들었습니다.
유니티 이벤트는 Inspector Window에서 볼 수 있으며 유니티 UI관련 컴포넌트가 유니티 이벤트를 가지고 있습니다.

유니티 이벤트 메뉴

유니티 이벤트를 사용하면 해당 GUI에서 발생하는 이벤트에서 지정한 기능을 수행할 수 있습니다. 이 과정은 코딩없이 Inspector Window에 컴포넌트를 드래그하고 실행할 기능을 고르는 것으로 쉽게 해결할 수 있습니다.
유니티 이벤트를 적절히 사용하면 디자인한 GUI가 사용자와 상호작용하는 결과물을 얻을 수 있습니다.