유니티 UGUI 기초 정리

Canvas 와 UI 요소

유니티에서는 UI 를 만들때 사용하기 좋은 UI 컴포넌트들을 제공합니다. UI 컴포넌트는 대표적으로 Text, Image, Button 등이 있습니다. 이렇게 제공되는 모든 UI 컴포넌트는 반드시 Canvas 객체 하위에 위치해야 정상적으로 작동합니다.

 

그래서 위와같이 GameObject > UI > Text 를 선택해서 UI 요소를 추가할 때 만약 이미 만들어진 Canvas 객체가 없다면 자동으로 만들어줍니다. Canvas객체는 모든 UI 요소를 배치하기 위한 영역이라고 생각할 수 있는거죠. UI 요소를 만들면 하이어라키에 자동으로 EventSystem 객체가 만들어지는데 UI 의 이벤트를 관리해주는 객체이기 때문에 지우면 안됩니다.

 

UI 요소가 스크린에 그려질때 하위노드로 배치된 순서대로 그려집니다. 때문에 그려지는 순서를 변경하고 싶다면 하이어라키상에서 배치된 순서를 바꾸면 되고 원한다면 코드레벨에서 UI 순서를 바꾸는 함수를 간략하게 제공합니다. Canvas 와 UI 요소의 경우 다른 게임오브젝트들과 다르게 Transform 대신 Rect Transform 컴포넌트를 가지고 있습니다. 

캔버스(Canvas) 의 크기

처음 Canvas가 만들어지면 기본적으로 Canvas의 크기는 디스플레이 화면 기준으로 자동 설정되기 때문에 Scene 영역과 Game 영역에서 표시되는 크기가 다릅니다.

 

캔버스가 가지는 Canvas Scaler 컴포넌트를 보면 캔버스의 사이즈가 결졍되는 기준과 비율, 화면 크기가 변동되었을 때 어떤 방식으로 크기를 조정할지 등을 설정할 수 있습니다.

Rect Transform 설정하기

 

Rect Transform 컴포넌트의 좌측의 사각형 모양을 클릭하면 앵커 프리셋(Anchor Presets)이 나오게 됩니다. 조금은 복잡하게 보이는 이 화면에서는 UI 요소의 3가지 속성 값을 바꿀 수 있습니다.

 

• 앵커(Anchor)
• 포지션(Position)
• 피벗(Pivot)

앵커 프리셋 화면에서 앵커를 변경할 수 있고 시프트를 누르면서 선택하면 피벗을 설정할 수 있고 알트를 누르면서 선택하면 포지션을 변경할 수 있습니다. 개발자가 의도하는 모습으로 UI 를 만들기 위해서 위 세가지를 정확히 이해하는게 중요합니다. 

앵커(Anchor) (뉴스 앵커 아님)

네 개의 삼각형 흰색 모양이 중앙을 가르키고 있는게 앵커입니다. 앵커는 부모 오브젝트의 Rect Transform 에 고정하는데 사용됩니다. 위와 같이 부모 오브젝트 기준으로 중앙에 앵커를 설정하여 버튼이 만들어지는 경우 부모 오브젝트의 크기를 변경하더라도 버튼이 앵커 기준으로 고정되어 움직이게 됩니다.

 

Rect Transform 의 Pos X, Pos Y, Pos Z 값은 앵커 기준으로 설정된다는게 중요합니다.

 

위와같이  Pos Y 값을 200으로 설정해두면 앵커 기준으로 200 만큼 떨어집니다.

 

앵커를 부모 객체 우측 하단으로 설정하면 부모 객체의 사이즈가 변경될 때 우측 하단에 고정되어 이동합니다.

 

앵커의 하얀색 삼각형 네 개가 반드시 모여있을 필요가 없습니다. 원하는 위치로 옮길 수 있으며 이 때 중요한건 네 개의 삼각형의 위치가 각기 다른 곳으로 옮겨졌을 때 UI 요소의 너비와 높이가 앵커 포인트의 사각형 영역에 비례하여 조절된다는 것입니다. 위 스크린샷을 보면 앵커의 영역을 버튼의 너비만큼 만들어 주었고 부모 캔버스의 너비를 늘렸을 때 같은 비율로 버튼이 늘어나게 됩니다. 이를 원하지 않는다면 앵커 포인트 사각영역이 생기지 않게 같은곳에 모아두면 됩니다.

 

포지션(Position)

 

포지션은 말 그대로 UI 요소가 배치될 위치입니다. Rect Transform 컴포넌트를 가지고 있는 부모객체를 기준으로 배치됩니다. 

 

앵커 프리셋 창에서 알트(Alt)를 누른 상태에서 중앙을 선택하면 부모 객체의 중앙 위치로 이동시킬 수 있기 때문에 편리하게 원하는 가장자리 기준의 위치로 옮겨보면서 UI를 설계할 수 있습니다.

 

피벗(Pivot)

피벗은 보통 위 스크린샷의 버튼처럼 Pivot으로 체크되어 있지 않고 Center로 체크되어 있다면 UI 요소의 중앙에 피벗이 표시됩니다. 하지만 Pivot 으로 체크하면 Scene 뷰에서 원하는 위치로 조정할 수 있게됩니다. (인스펙터상에서도 옮길 수 있음)

 

UI 요소를 회전시키거나 크기를 바꿀때 기준이 되는건 피벗입니다. 위 스크린샷을 보면 피벗을 중심으로 회전되고 있는것을 확인할 수 있는데, 파란색 도너츠 모양 원 아이콘으로 표시되어 있는게 피벗의 위치입니다.

 

Rect Transform 의 Pos X, Pos Y, Pos Z 값도 피벗을 기준으로 설정되기 때문에 피벗의 X값과 Pos X를 둘 다 0으로 설정하는 경우 위와같이 앵커 기준 중앙으로 배치되지 않고 버튼의 좌측 피벗기준으로 배치되는것을 확인할 수 있습니다.