유니티 기초/개념

[Unity 개념] 9. UI (User Interface)에 대하여

갓것걋 2024. 3. 11. 22:05
※참고사항※
해당 포스트는 본업 개발자가 정성껏 포스팅한 포스트가 아닙니다!
평범한 고등학생이 유니티를 배우면서 적어나가는 포스트라는 점을 이해해 주십사 하고 청하는 바입니다.
(잘못된 정보는 댓글로 감사히 받겠습니다!)

이 다음의 포스팅부터는 UI 요소들에 대해서 알아보겠습니다!

 

목차

1. UI에 대하여
2. UI의 사용법

 

1. UI에 대하여

일단 기본적인 UI의 뜻은 정말 간단하게 사용자와 컴퓨터의 상호작용을 할 수 있게하는 매개체를 뜻합니다.

UI의 종류로는 UI, GUI, CUI 등이 있습니다.

아래에서 자세히 알아보겠습니다.

 

종류

  • UI (User Interface)
    • 위에서 설명한 UI입니다
  • CUI (Character User Interface)
    • 사용자에게 "문자"로 정보를 보여주고 사용자 역시 "문자"를 입력해서 상호작용을 해야합니다.
  • GUI (Graphic User Interface)
    • 사용자에게 "이미지"와 "문자"의 혼합된 형태로 정보를 보여주고 사용자는 "마우스"를 이용해서 상호작용을 합니다.
  • UGUI (Unity Graphic User Interface)
    • 유니티에서 사용되는 GUI입니다.

 

캔버스

유니티에서 사용되는 GUI 시스템을 UGUI라고 부르는 것을 알았으니 다음으로 넘어갑시다.

생성할 수 있는 오브젝트들의 종류 중 UI라고 되어 있는 것에 있는 것들이 UI 요소들입니다.

 

UI 요소에는 글자를 표현하는 Text, 그림을 표현하는 Image, 클릭할 수 있는 Button 등 다양한 오브젝트가 있습니다.

 

우선 UI 오브젝트 중 Canvas를 생성해 보겠습니다.

Canvas는 UI - Canvas로 생성합니다.

 

Canvas의 설정은 용도에 따라서 가지각색이지만 금방 생성한 Canvas처럼 Render Mode를 Screen Space - Overlay로 기본 설정 됩니다.

또한 이 설정은 게임 해상도로 표현되는 스크린 스페이스에 UI를 그리는 설정입니다.

이 설정에서의 Canvas의 해상도는 게임의 해상도를 따르게 됩니다.

 

위의 사진들처럼 게임의 해상도와 같이 Canvas의 width와 height도 바뀌게 됩니다.

또한 Screen Space - Overlay는 일반적인 평면 UI에서 주로 사용되는 설정입니다.

 

2. UI의 사용법

Canvas는 모든 UI 오브젝트를 배치하기 위한 영역입니다.

한 마디로 모든 UI 요소들은 Canvas의 자식이여야만 합니다.

그렇지 않으면 UI 요소들이 보이지 않게 됩니다.

물론 UI 요소를 생성하면 EventSystems와 Canvas 생성 및 자식으로 들어가게 됩니다.

(EventSystem은 클릭과 같은 "이벤트"를 처리해야해서 생성된다고 생각하시면 편합니다!)

 

일단 Image와 Text를 생성해보겠습니다.

< 순서를 꼭 지켜주세요! >

 

생성하고 조금만 다듬어주면 아래와 같이 생성되는데요.

< 이미지 크기 및 텍스트의 크기만 바꿨습니다! >

 

이제 하이얼락키 창에서 "순서"를 바꿔보겠습니다.

< 순서의 중요성 >

위의 영상과 같이 순서에 따라 "아래"에 위치한 UI 요소가 앞에 배치되는 것을 보실 수 있습니다.

 

이상으로 포스팅을 마치겠습니다.

다음 포스팅에서는 Text에 대해서 공부해보겠습니다!