[기초]유니티에서 기본으로 제공하는 UI는 어떤 것들이 있을까?

UI의 의미와 종류

UI라는 말을 들어본 적이 있나요? UI는 User Interface의 줄인 말로 말 그대로 유저 인터페이스, 즉 사용자 환경을 의미합니다. 처음 들어보시는 분들한테는 감이 안 오시는 분도 있겠지만, 지금 보고 있는 컴퓨터 화면이나 우리 손에서 떼려야 뗄 수 없는 갤럭시나 아이폰 같은 스마트폰에서도 UI는 쉽게 찾어볼 수 있습니다. 일단 이 글을 보고 있다면 UI 요소 중 하나인 텍스트를 읽고 읽는 것이고 이 글을 보기 위해 UI 요소 중 하나인 버튼을 눌러서 들어왔을 겁니다. 지금 보고 있는 블로그의 레이아웃이나 이미지 역시 UI의 한 영역이며 브라우저에서 벗어나 컴퓨터 바탕화면에 있는 눈에 보이는 프로그램 아이콘들, 모바일에서 나열되어 있는 애플리케이션 아이콘들, 등 사용자인 우리가 보고 있는 화면 구성 자체를 UI라고 생각하시면 되겠습니다. 만약 프로그래밍을 하거나 게임을 만들어 서비스를 하고자 한다면 이런 UI는 반드시 필요한 부분인데, 게임엔진인 유니티에도 UI 기능이 탑재되어 있어서 텍스트를 만들거나 이미지를 만들거나 버튼을 만드는 등 자유롭게 배치를 할 수 있습니다. 유니티에서 기본으로 제공하고 있는 UI 종류에 대해 간략히 알아보겠습니다!

 

 

---

UI 만드는 방법

기본적으로 제공하는 UI 생성 방법은

2가지가 있습니다.

 

 

방법 1. Hierarchy

Hierarchy>UI

Hierarchy에 비어 있는 곳 아무 곳이나

마우스 오른쪽 클릭을 하고

UI를 클릭하면 UI 목록이 표시됩니다.

 

방법 2. GameObject 메뉴

메뉴

상단 메뉴에서 GameObject를 클릭하고

방법 1과 마찬가지로

UI를 클릭하면 됩니다.

 

여기까지 따라왔다면

UI 목록 중 만들고 싶은 UI를

선택합니다.

 

---

UI의 종류

 

캔버스(Canvas)

캔버스는 UI를 사용할 때

반드시 UI의 부모 오브젝트에 캔버스가

있어야 자식 UI들이 그려집니다.

마치 유화로 그림을 그릴 때 캔버스

위에 그린다는 느낌으로

생각하면 될 것 같습니다.

 

텍스트(Text)

Text

우리가 흔히 알고 있는 글자표시로

제목이나 내용, 설명, 등을 쓸 때

사용합니다.

 

이미지(Image)

이미지

png, jpg, 등 우리가 흔히

알고 있는 이미지로

이 글의 섬네일 이미지를

넣어봤습니다.

이미지는 스프라이트를 담고 있어서

Texture2D를 사용한다면 스프라이트

변환 과정이 필요합니다.

프로젝트 안에 이미지를 넣었다면

Texture Type을 스프라이트로

변환 후 사용하세요!

 

로우이미지(RawImage)

표시는 이미지로 표시되지만

안에 담고 있는 내용은

스프라이트가 아닌

Texture를 담고 있어서

변환 과정이 따로 필요 없습니다.

웹에서 이미지를 받아오는

스크립트를 사용하더라도

바로 로우 이미지 텍스처에

넣을 수 있습니다.

 

버튼(Button)

버튼

기능적인 부분에서

아마 가장 많이 사용하게

될 UI 중에 하나가

바로 버튼인데요.

보통 앱에서 페이지 이동이나

기능 동작을 대부분 버튼을 통해서

하기 때문입니다.

 

 

토글(Toggle)

토글

회원가입 시 성별 구분,

동의/비동의 관련,

설문조사 등 토글 UI는

많이 접해보셨을 텐데요.

토글을 클릭하면

체크 표시가 활성화됐다가

비활성화됩니다.

 

 

슬라이더(Slider)

슬라이더

슬라이더는 볼륨, 등

수치로 된 값을 조절하거나

동영상 스트리밍 서비스에서

현재 진행 상태를 표시하거나

이동하는데 유용하게

사용할 수 있습니다.

 

 

스크롤바(Scrollbar)

스크롤바

스크롤바는 언뜻 보기에

슬라이더와 비슷하게 생기긴 했지만

사용하는 기능이 다릅니다.

홈페이지에서 보면 화면이

넘어가면 마우스 휠키를 굴리거나

스크롤바를 사용해서 화면을

이동시키는데 같은 기능을 합니다.

ScrollRect 컴포넌트에

연결하면 작동합니다.

 

드롭다운(DropDown)

드롭다운

생년월일, 캐릭터 선택,

아이템 선택, 등

같은 범주 안에 있지만

화면에 다 담을 수없어서

평상시에는 숨겨뒀다가

누르면 목록이 쫙 나와서

선택할 수 있는

드롭다운도 있습니다.

 

 

인풋필드(InputField)

인풋필드

채팅, 회원가입 관련 입력, 등

내용을 입력할 때 사용하는

기능으로 텍스트(Text)가

보여주기만 하는 용도라면

인풋필드는 그 텍스트를

입력까지할 수 있는

기능까지 있다고

보면 될 것 같습니다.

 

 

스크롤뷰(Scroll View)

스크롤뷰

ScrollRect를 만들어서

사용하실 수 있는 분이라면

잘 안 쓰시겠지만

잘 모르고 그냥 스크롤 기능을

구현하고 싶으신 분들이

사용하시면 좋을 것 같습니다.

탬플릿화 돼서 스크롤 기능이 바로 생성되고,

사이즈 조절하고 안에 내용만 채우면 됩니다.

 

 

이 외에도 TextMeshPro 같은

추가로 설치를 받아서 더 깔끔하게

혹은 더 다양한 효과로 텍스트를

표시할 수 있는 UI도 있지만

텍스트와 기능상 비슷하기도 하고

준비 과정이 복잡하고

어려우실 수 있기 때문에

생략했고 나중에 기회가 된다면

추후에 소개하겠습니다.

 

여기까지 UI의 의미와

유니티에서 많이 사용하는

기본 UI 종류에 대해서

알아보았습니다.

 

기본으로 제공하는 UI이기 때문에

다소 조잡해 보일 수 있지만

이미지를 넣고 폰트를 넣으면

우리가 사용하고 있는 앱 같은

좋은 퀄리티가 나옵니다!

 

처음 하시는 분은

하나씩 배치해보면서

UI를 공부해보시면

빠르게 습득하실 수 있을 거예요!