🎮 Unity6 UI -Visual, Interaction Components

📌 본 포스팅은 Unity UI 공식 매뉴얼의 내용을 바탕으로 작성되었습니다.

유니티 UI는 게임과 애플리케이션의 사용자 인터페이스를 개발하기 위한 UI 툴킷입니다. 이는 게임 오브젝트(GameObject) 기반의 UI 시스템으로, 컴포넌트(Components)와 게임 뷰(Game View)를 사용하여 사용자 인터페이스를 배치하고, 위치를 조정하며, 스타일을 지정합니다.

---

🔮Visual Components

Text, Image, Raw Image, Mask, Effects

Text

Text 컴포넌트는 '라벨(Label)'이라고도 불리며, 표시될 텍스트를 입력하는 텍스트 영역을 가지고 있어요. 폰트, 폰트 스타일, 폰트 크기를 설정할 수 있고, 리치 텍스트(rich text) 기능을 사용할지 여부도 지정할 수 있습니다.

텍스트의 정렬 방식, 텍스트가 직사각형의 너비나 높이보다 클 경우 어떻게 처리할지 정하는 수평 및 수직 오버플로우(overflow) 설정, 그리고 사용 가능한 공간에 맞춰 텍스트 크기를 자동으로 조절해 주는 'Best Fit' 옵션 등이 제공됩니다.

Image

Image는 Rect Transform 컴포넌트와 Image 컴포넌트로 구성됩니다. Image 컴포넌트의 'Target Graphic' 필드에 스프라이트(sprite)를 적용할 수 있고, 'Color' 필드에서 색상을 설정할 수 있습니다. Material도 적용할 수 있습니다. Image Type 필드는 적용된 스프라이트가 어떻게 표시될지를 정의하며, 다음 옵션들이 있습니다:

• Simple : 스프라이트 전체의 크기를 균등하게 조절합니다.

• Sliced : 3x3 스프라이트 분할을 활용하여, 크기 조절 시 모서리가 왜곡되지 않고 중앙 부분만 늘어나게 합니다.

• Tiled : Sliced와 유사하지만, 중앙 부분을 늘리는 대신 타일처럼 반복해서 채웁니다. 테두리가 전혀 없는 스프라이트의 경우, 스프라이트 전체가 타일링됩니다.

• Filled : Simple과 동일하게 스프라이트를 표시하지만, 정의된 원점과 방향, 방식을 기준으로 스프라이트를 채워 넣습니다.(Simple 또는 Filled가 선택될 때 나타나는 'Set Native Size' 옵션은 이미지를 원래 스프라이트 크기로 되돌립니다.)

이미지는 'Texture Type' 설정에서 'Sprite (2D / UI)'를 선택하여 UI 스프라이트로 가져올 수 있습니다. 스프라이트는 기존 GUI 스프라이트보다 추가적인 가져오기(import) 설정이 있는데, 가장 큰 차이점은 스프라이트 에디터가 추가되었다는 점입니다. 스프라이트 에디터는 이미지를 9-슬라이싱(9-slicing)하는 옵션을 제공하는데, 이는 이미지를 9개의 영역으로 분할하여 스프라이트 크기가 조절될 때 모서리가 늘어나거나 왜곡되지 않도록 합니다.

Raw Image

Image 컴포넌트가 스프라이트를 사용하는 반면, Raw Image는 텍스처를 사용합니다 (테두리 등이 없음). Raw Image는 꼭 필요한 경우에만 사용해야 하며, 대부분의 경우에는 Image 컴포넌트가 적합합니다.

Mask

Mask는 눈에 보이는 UI 컨트롤은 아니지만, 컨트롤의 자식 요소들의 외관을 수정하는 방법입니다. 마스크는 자식 요소들을 부모의 형태에 맞게 제한(즉, "마스킹")합니다. 따라서 자식이 부모보다 크더라도 부모 안에 들어가는 부분만 보이게 됩니다.

Effects

시각적 컴포넌트에는 간단한 그림자나 외곽선 같은 다양한 효과도 적용할 수 있습니다. 더 자세한 정보는 UI 효과(UI Effects) 참조 페이지를 확인.

---

🔮Interaction Components

상호작용 컴포넌트들은 그 자체로는 눈에 보이지 않으며, 올바르게 작동하려면 하나 이상의 시각적 컴포넌트와 결합되어야 합니다.

공통 기능

대부분의 상호작용 컴포넌트는 몇 가지 공통점을 가지고 있습니다. 이들은 모두 '선택 가능(selectable)'하며, 이는 상태 변화(일반, 하이라이트, 눌림, 비활성화)를 시각적으로 보여주는 내장 기능과 키보드 또는 컨트롤러를 사용하여 다른 '선택 가능' 요소로 탐색(navigation)하는 기능을 공유한다는 의미입니다. 이 공유 기능에 대한 자세한 내용은 Selectable 페이지에서 확인할 수 있습니다.

상호작용 컴포넌트들은 사용자가 컴포넌트와 특정 방식으로 상호작용할 때 호출되는 하나 이상의 UnityEvent를 가지고 있습니다. UI 시스템은 UnityEvent에 연결된 코드에서 발생하는 모든 예외를 포착하고 기록합니다.

버튼 (Button)

Button은 클릭되었을 때 수행할 작업을 정의하는 OnClick UnityEvent를 가지고 있습니다.

Button 컴포넌트 사용에 대한 자세한 내용은 Button 페이지를 참조하세요.

토글 (Toggle)

Toggle은 현재 켜져 있는지 꺼져 있는지를 결정하는 Is On 체크박스를 가지고 있습니다. 이 값은 사용자가 토글을 클릭할 때 전환되며, 시각적인 체크마크도 그에 따라 켜지거나 꺼질 수 있습니다. 또한, 값이 변경될 때 수행할 작업을 정의하는 OnValueChanged UnityEvent를 가지고 있습니다.

Toggle 컴포넌트 사용에 대한 자세한 내용은 Toggle 페이지를 참조하세요.

토글 그룹 (Toggle Group)

Toggle Group은 상호 배타적인(mutually exclusive) 토글들을 그룹화하는 데 사용될 수 있습니다. 같은 그룹에 속한 토글들은 한 번에 하나만 선택될 수 있도록 제한됩니다. 즉, 하나를 선택하면 다른 모든 토글들이 자동으로 선택 해제됩니다.

Toggle Group 컴포넌트 사용에 대한 자세한 내용은 Toggle Group 페이지를 참조하세요.

슬라이더 (Slider)

Slider는 사용자가 최소값과 최대값 사이에서 드래그할 수 있는 십진수 Value(값)를 가지고 있습니다. 수평 또는 수직 형태가 될 수 있습니다. 또한, 값이 변경될 때 수행할 작업을 정의하는 OnValueChanged UnityEvent를 가지고 있습니다.

Slider 컴포넌트 사용에 대한 자세한 내용은 Slider 페이지를 참조하세요.

스크롤바 (Scrollbar)

Scrollbar는 0에서 1 사이의 십진수 Value(값)를 가지고 있습니다. 사용자가 스크롤바를 드래그하면 그에 따라 값이 변경됩니다.

스크롤바는 종종 Scroll Rect 및 Mask와 함께 사용하여 스크롤 뷰를 만듭니다. 스크롤바는 0에서 1 사이의 Size(크기) 값을 가지고 있으며, 이는 전체 스크롤바 길이에서 핸들(드래그 가능한 부분)이 차지하는 비율을 결정합니다. 이 값은 스크롤 뷰에서 콘텐츠의 어느 정도 비율이 보이는지를 나타내기 위해 다른 컴포넌트에서 제어하는 경우가 많습니다. Scroll Rect 컴포넌트가 이 작업을 자동으로 수행할 수 있습니다.

스크롤바는 수평 또는 수직 형태가 될 수 있습니다. 또한, 값이 변경될 때 수행할 작업을 정의하는 OnValueChanged UnityEvent를 가지고 있습니다.

Scrollbar 컴포넌트 사용에 대한 자세한 내용은 Scrollbar 페이지를 참조하세요.

드롭다운 (Dropdown)

Dropdown은 선택할 수 있는 옵션 목록을 가지고 있습니다. 각 옵션에 대해 텍스트 문자열과 선택적으로 이미지를 지정할 수 있으며, 이는 인스펙터에서 설정하거나 코드에서 동적으로 설정할 수 있습니다. 현재 선택된 옵션이 변경될 때 수행할 작업을 정의하는 OnValueChanged UnityEvent를 가지고 있습니다.

Dropdown 컴포넌트 사용에 대한 자세한 내용은 Dropdown 페이지를 참조하세요.

입력 필드 (Input Field)

Input Field는 텍스트 요소(Text Element)의 텍스트를 사용자가 편집할 수 있도록 만드는 데 사용됩니다. 텍스트 내용이 변경될 때 수행할 작업을 정의하는 UnityEvent와, 사용자가 편집을 마쳤을 때 수행할 작업을 정의하는 또 다른 UnityEvent를 가지고 있습니다.

Input Field 컴포넌트 사용에 대한 자세한 내용은 Input Field 페이지를 참조하세요.

스크롤 렉트 (Scroll Rect / Scroll View)

Scroll Rect는 많은 공간을 차지하는 콘텐츠를 작은 영역에 표시해야 할 때 사용될 수 있습니다. Scroll Rect는 이 콘텐츠를 스크롤할 수 있는 기능을 제공합니다.

일반적으로 Scroll Rect는 Mask와 결합되어 스크롤 뷰를 만드는데, 이 스크롤 뷰에서는 Scroll Rect 내부의 스크롤 가능한 콘텐츠만 볼 수 있습니다. 또한, 수평 또는 수직으로 스크롤하기 위해 드래그할 수 있는 하나 또는 두 개의 Scrollbar와 추가적으로 결합될 수도 있습니다.

Scroll Rect 컴포넌트 사용에 대한 자세한 내용은 Scroll Rect 페이지를 참조하세요.