C YC

IT Dev who working in Republic Of Korea

4 minute read

UGUI의 개념

UGUI는 Unity 엔진에서 제공하는 강력한 UI 제작 도구입니다. 2D 및 3D UI를 모두 제작할 수 있으며, 다양한 컴포넌트와 기능을 제공하여 직관적이고 효율적인 UI 개발을 지원합니다.

UGUI의 특징

  1. WYSIWYG (What You See Is What You Get): UI를 직관적으로 디자인하고 실시간으로 확인할 수 있습니다. 마치 “UI 디자인 캔버스” 처럼, UGUI는 디자인 결과를 즉시 확인할 수 있도록 도와줍니다.
  2. 유연한 레이아웃: 다양한 레이아웃 컴포넌트를 사용하여 UI 요소들을 자유롭게 배치하고 정렬할 수 있습니다. 마치 “UI 배치 마법사” 처럼, UGUI는 UI 요소들을 원하는 위치에 정확하게 배치할 수 있도록 도와줍니다.
  3. 다양한 컴포넌트: 버튼, 텍스트, 이미지, 슬라이더 등 다양한 UI 컴포넌트를 제공하여 다양한 기능의 UI를 제작할 수 있습니다. 마치 “UI 부품 상점” 처럼, UGUI는 UI 개발에 필요한 다양한 부품들을 제공합니다.
  4. 스크립트 연동: C# 스크립트와 연동하여 동적인 UI를 제작하고 UI 로직을 구현할 수 있습니다. 마치 “UI 프로그래머” 처럼, UGUI는 스크립트를 통해 UI에 생동감을 불어넣을 수 있도록 도와줍니다.
  5. 확장성: 사용자 정의 컴포넌트 및 에셋을 추가하여 UGUI의 기능을 확장할 수 있습니다. 마치 “UI 확장팩” 처럼, UGUI는 필요에 따라 기능을 확장하여 사용할 수 있습니다.

UGUI 주요 컴포넌트

  • Rect Transform: UI 요소의 위치, 크기, 회전 등을 제어합니다. 마치 “UI 변신 도구” 처럼,
  • Rect Transform은 UI 요소들의 형태를 자유롭게 변형할 수 있도록 도와줍니다.
  • Image: UI 요소에 이미지를 표시합니다. 마치 “UI 그림 액자” 처럼, Image 컴포넌트는 UI 요소에 다양한 이미지를 표시할 수 있도록 도와줍니다.
  • Text: UI 요소에 텍스트를 표시합니다. 마치 “UI 글자 간판” 처럼, Text 컴포넌트는 UI 요소에 다양한 텍스트를 표시할 수 있도록 도와줍니다.
  • Button: 클릭 이벤트를 처리하는 UI 요소입니다. 마치 “UI 클릭 버튼” 처럼, Button 컴포넌트는 클릭 이벤트를 통해 특정 기능을 실행할 수 있도록 도와줍니다.
  • Slider: 값을 조절하는 UI 요소입니다. 마치 “UI 볼륨 조절기” 처럼, Slider 컴포넌트는 값을 조절하여 다양한 기능을 제어할 수 있도록 도와줍니다.
  • Scrollbar: 스크롤 기능을 제공하는 UI 요소입니다. 마치 “UI 스크롤 막대” 처럼, Scrollbar 컴포넌트는 스크롤 기능을 통해 많은 내용을 표시할 수 있도록 도와줍니다.

Canvas 란?

Canvas 컴포넌트가 있는 게임 오브젝트이며, Canvas 컴포넌트는 UI 항목을 화면에 배치하고 렌더링 하는 역할을 합니다.
Canvas를 생성하는 방법은 Hierarchy창 안에 마우스 우클릭을 하면 아래 사진처럼 창이 뜨는데 UI -> Canvas를 선택하면 생성이 됩니다.

Canvas 특징

  • 모든 UI 요소는 반드시 Canvas 객체 하위에 위치해야 정상적으로 작동합니다.
  • 메뉴 (GameObject> Create UI)에서 UI 요소 개체를 만들 때 장면에 Canvas 개체가 없는 경우 자동으로 생성됩니다.

Canvas 컴포넌트

Image

  • Rect transform 일반 Transform 컴포넌트 대신 모든 UI 요소에 사용되는 새로운 Transform 컴포넌트입니다. 이 컴포넌트의 주요 속성 3가지에 대해서 간단하게 정리했습니다.

  • 위치(Pos) 앵커를 기준으로 한 사각형의 피벗 포인트 포지션입니다. 즉, 앵커와 피벗을 기준으로 결정한 실제 좌표입니다.

  • 앵커(Anchor) 씬 뷰에 네 개의 작은 삼각형 손잡이 모습으로 표시되며 앵커 정보 역시 인스펙터에 나타납니다. 사각 트래스폼의 부모 역시 사각 트랜스폼인 경우, 자식 사각 트랜스폼은 여러 방식으로 부모 사각 트랜스폼에 고정될 수 있습니다. 예를 들어, 자식은 부모의 중심 또는 네 코너 중 하나에 고정될 수 있습니다.

  • 피벗(Pivot) 회전, 크기, 스케일 수정은 피벗을 중심으로 일어나며 따라서 피벗의 포지션은 회전, 크기 조절, 스케일의 결과에 영향을 미칩니다. 툴바 피벗 버튼이 피벗 모드로 설정되어 있으면 씬 뷰에서 사각 트랜스폼의 피벗을 이동할 수 있습니다.

Canvas 구성요소

Image

캔버스에는 스크린 공간 또는 월드 공간에 렌더링 하도록 하기 위해 사용되는 Render Mode 설정이 있습니다. 설정을 누를 경우 위 사진처럼 세 가지 모드를 선택할 수 있는 창이 보이며, 세 가지 모드의 특징은 다음과 같습니다.

  1. 스크린 공간 - 오버레이(Screen Space - Overlay)
    • UI 요소가 화면에서 씬의 위에 렌더링 됩니다.
    • 스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경합니다.
  2. 스크린 공간 - 카메라(Screen Space - Camera)
    • 캔버스가 특정 Camera에서 주어진 거리만큼 앞쪽에 위치합니다.
    • UI 요소는 카메라에 의해 렌더링 되며, 카메라 설정에 따라 UI의 모습에 영향을 줍니다.
    • 카메라가 Perspective으로 설정되어 있으면 UI 요소는 원근감이 있게 렌더링 되며 원근 왜곡의 정도는 카메라 Field of View에 의해 조절될 수 있습니다.
    • 스크린의 크기가 조절되거나 해상도가 변경되거나 카메라 절 두체가 변경되면 캔버스 역시 여기에 맞춰 자동으로 크기를 변경합니다.
  3. 월드 공간(World Space)
    • 이 모드에서는 캔버스는 씬에 있는 다른 오브젝트처럼 동작합니다.
    • 캔버스의 크기는 사각 트랜스폼을 사용하여 수동으로 설정할 수 있으며 UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링 됩니다.
    • 이 방식은 월드의 일부를 이루도록 의도된 UI에 유용합니다.

Canvas 구성요소

Image

Canvas Scaler 구성 요소는 Canvas에서 UI 요소의 전체 크기 및 픽셀 밀도를 제어하는 ​​데 사용됩니다. 이 크기 조정은 글꼴 크기 및 이미지 테두리를 포함하여 캔버스 아래의 모든 것에 영향을 줍니다. UI Scale Mode : 캔버스의 UI 요소 크기를 조정하는 방법을 설정하며, 3가지 모드가 존재합니다.

  1. Constant Pixel Size
    • UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지되는 상태
  2. Scale With Screen Size
    • 화면이 커질수록, UI 요소도 커지는 상태, 즉 화면비율에 따라서 UI도 맞춰지는 상태
  3. Constant Physical Size
    • 화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지되는 상태.

Canvas 랜더링 순서

Image
캔버스에 있는 UI 요소는 계층 구조에 나타나는 것과 동일 순서로 그려집니다.
첫 번째 자식이 처음으로 그려지고, 두 번째 자식이 그다음으로 그려지는 식입니다. 두 UI 요소가 겹쳐지면 나중에 그려지는 것이 먼저 그려진 것의 위에 나타나게 됩니다.

어떤 요소가 다른 요소의 위에 겹쳐지는지 여부를 변경하고 싶으면 간단히 드래그하여 계층 구조에서 요소의 순서를 변경하면 됩니다.

이 순서는 Transform 컴포넌트에서 SetAsFirstSibling, SetAsLastSibling, SetSiblingIndex 메서드를 사용하여 오브젝트의 랜더링 순서를 바꿀 수 있습니다.

Top

You May Also Enjoy