[Unity]16.UI에 대해 알아보자

안녕하세요 유랑입니다.

이번 시간에는 UI에 대해 배워보겠습니다.

게임을 실행하면 시작 버튼과 배경화면 같은 UI들이 보이는데요.

유니티 상에서 UI를 어떻게 처리해야 하는 지 알아보겠습니다.

1. UI

과거 유니티 엔진은 UI 개발의 불편함에 많은 외면을 받기 일쑤였다.

그렇기에 NGUI를 많이 사용하였고, 그런 문제점들을 해결하였다.

지금은 NGUI 개발자가 참여하여 새로운 유니티 UI가 탑재되었고 개발자들이 쉽게 사용가능하도록 바뀌었다.

1-1) 프로젝트 생성 후 설정

프로젝트 이름과 생성 위치를 설정 후 프로젝트를 만들어 주자.

상단 메뉴바 GameObject => UI => Canvas 오브젝트를 생성하자.

1-2) Canvas

Canvas 컴포넌트는 UI 항목을 화면에 배치하고 렌더링하는 역할을 한다.

세 가지 모드가 존재하며 기능은 다음과 같다. 

나머지 기능들은 추후에 사용할 예정이므로 Screen Space - Overlay로 설정하자.

- Screen Space - Overlay => 기본 설정값으로 화면의 해상도에 맞춰 자동으로 스케일이 조절된다.

- Screen Space - Camera => UI 항목을 렌더링하는 별도의 카메라를 설정 가능.

- World Space => 다른 게임오브젝트에 직접 UI 항목을 추가 가능.

게임 뷰에서 화면 해상도를 바꾸면 자동으로 스케일이 조정되는데,

이 방식이 Screen Space - Overlay 방식이다.

대부분 만든 게임을 만든 후 어플로 실행하면 UI 화면이 달라보인다.

그 이유는 Canvas Scaler를 통한 화면 비율 설정을 하지 않아서다.

Canvas Scaler를 Scale With Screen Size X:800, Y:600으로 변경하면

다음 화면크기에서 UI작업이 가능하다.

나머지 모드도 존재하지만 이 부분은 추후 공부해 보겠다.

1-3) EventSystem

Canvas를 생성하면 자동적으로 EventSystem이 생성된다.

EventSystem은 EventSystem, Standalone Input Module 컴포넌트를 포함하고 있다.

만약 Event System 컴포넌트가 없다면 다양한 입력 이벤트에 대한 이벤트 반응을 하지 않는다.

1-4) Image

Canvas 밑으로 Image를 만들어 보자.

상단 메뉴창 GameObject => UI => Image에서 만들 수 있다.

씬뷰에서 2D를 체크하면 UI작업을 위한 작업이 가능해 진다.

여기서 Canvas 오브젝트와 다르게 Rect Transform 설정이 가능하다.

Rect Transform을 이용해 UI의 크기와 위치 등 설정이 가능한데,

이 부분은 배경 이미지를 구성한 후 다시 설명하겠다.

배경으로 쓸 이미지를 구해온 후 Texture Type을 Sprite로 바꾸자.

바꾸지 않을 경우 UI - Image에 적용이 안되니 이 점 유의하자.

이 때 설정을 바꾼 후 꼭 Apply하자.

Image에 가져온 이미지를 드래그앤 드랍하여 적용하면 다음과 같이 배경 이미지가 만들어 진다.

그런데 씬뷰의 크기를 줄이거나 늘리면 해당 이미지의 크기가 변하지 않는다.

이럴 경우 핸드폰 화면 크기에 따라 어색함을 느낄 수 있다.

핸드폰은 큰데 배경이미지가 늘려지지 않는걸 생각해보자.ㅠㅠ

Rect Transform을 다음과 같이 변경하면 해결이다.

씬 뷰에서 앵커 프리셋이 Canvas 끝 부분에 놓여진다.

앵커 프리셋은 각 UI 항목의 정렬과 크기를 미리 정의해놓은 집합으로써

비율에 맞게 크기가 조절되는 걸 도와준다.

1-5) 앵커 프리셋

앵커 프리셋은 마우스를 클릭했을 때와 단축키 Alt와 Shift 키의 조합에 따라 다음과 같이 다르게 표현된다.

- 기본 앵커프리셋 

- 마우스 클릭 후 Alt 키를 눌렀을 때 => 현재 선택된 UI 항목을 선택한 프리셋의 위치로 이동 및 정렬

- 마우스 클릭 후 Shift 키를 눌렀을 때 => 앵커 포인트의 위치와 선택한 UI 항목의 Pivot의 위치만 변경

- 마우스 클릭 후 Alt + Shift 키를 눌렀을 때 => 앵커 포인트에 UI 항목의 Pivot의 위치를 일치시키고 

                                                              해당 앵커 포인트 위치로 이동

1-6) Text

배경 이미지 자식으로 Text를 만들어 주자.

상단 바 GameObject => UI => Text에서 만들수 있다.

Text 컴포넌트에는 텍스트 내용과 Font를 이용해 크기와 글씨체 변경이 가능하며,

Overflow를 설정하면 글자가 범위를 넘어서도 보이게 된다.

글자에 그림자 효과를 넣고 싶으면 Shadow 컴포넌트 속성을 추가해 주고,

Effect Distance를 통해서 그림자의 위치 변경이 가능하다.

2. 마무리

이번 시간에는 유니티에서 제공하는 UI 기능을 이용해 배경과 Text 문구를 만들어 보았습니다.

다음 시간에는 파티클 시스템을 알아보겠습니다.

다양한 플랫폼에 적합한 UI는 오늘 배운 기능들에 의해 만들어 집니다.

앵커 프리셋을 적절하게 적용해 좋은 UI를 만들으셨으면 합니다.

저 또한 실력이 부족하여 UI 연습은 티스토리에 글을 쓰며 중간중간 계속 하겠습니다.

오늘도 고생하셨습니다.

감사합니다.

수업자료: https://github.com/YouRang12/-Tistory-Unity---Basic