🎮 Unity 개발/Unity
유니티 UGUI (Unity UI) 컴포넌트
gameuiux
2025. 6. 2. 23:19
728x90
반응형
📦 1. 기본 렌더링 컴포넌트
| 컴포넌트 | 설명 |
Canvas |
UI 렌더링의 root. 모든 UGUI는 이 안에 존재한다. |
CanvasRenderer |
UI를 그리기 위한 필수 컴포넌트 Image, Text 등에 자동으로 포함된다. |
| Graphic (추상 클래스) | UGUI 시스템에서 모든 시각 요소의 핵심 기반 클래스 Image, Text, RawImage, TextMeshProUGUI 같은 UI 요소들은 전부 이 Graphic을 상속한다. |
CanvasGroup |
투명도 조절, 상호작용 차단, 일괄 Fade 처리 가능 |
🧱 Graphic이란?
Graphic은 추상 클래스이며, 색상 처리, 클릭 감지 여부, 머티리얼 제어, 캔버스 렌더 같은 공통 기능을 제공합니다.
| 기능 | 설명 |
| 색상 (color) | 텍스트, 이미지 등 공통으로 색상 지정 가능 |
| 레이 캣칭 (raycastTarget) | UI 요소가 클릭/터치 등 입력 이벤트를 받을지 여부 |
| 마테리얼 지정 | 커스텀 셰이더를 적용해 효과 변경 가능 |
| 캔버스 렌더링 통합 | CanvasRenderer와 함께 작동하여 UI를 배치하고 그리기 |
| SetAllDirty() | 레이아웃, 머터리얼, 베지어 업데이트 요청 (내부에서 씀) |
📚 주요 상속 구조
Graphic (추상)
ㄴ MaskableGraphic(마스킹을 지원하는 그래픽 요소를 위한 서브클래스)
ㄴ Image
ㄴ RawImage
ㄴ Text
ㄴ TextMeshProUGUI (실제로는 외부에서 연결)
🎨 2. UI 요소 (시각적 요소)
| 컴포넌트 | 설명 |
| Image | 스프라이트 이미지 표시 (9-slice 등 가능) |
| RawImage | 텍스처(Texture) 직접 표시 |
| Text (Legacy) | 레거시 UI 텍스트 (권장 ❌) |
| TextMeshProUGUI | 선명한 텍스트 표시 (권장 ✅) |
| Mask | 자식 UI를 잘라냄 (Rect 기준 마스킹) |
| RectMask2D | RectTransform 기준 마스킹 (스크롤뷰용 추천) |
🧱 3. 레이아웃 시스템
| 컴포넌트 | 설명 |
| RectTransform | UGUI에서 위치/크기 제어용 Transform |
| Layout Element | 레이아웃에 대해 min/preferred/flexible 사이즈 지정 |
| ContentSizeFitter | 자식 콘텐츠 크기에 따라 자동 크기 조정 (주의) |
| Horizontal Layout Group | 가로 정렬 자동 배치 |
| Vertical Layout Group | 세로 정렬 자동 배치 |
| Grid Layout Group | 격자 형태로 자식 배치 |
| Aspect Ratio Fitter | 비율 유지하며 크기 조정 (ex: 정사각형 유지 등) |
🖱️ 4. 인터랙션 (버튼/입력)
| 컴포넌트 | 설명 |
| Button | 클릭 이벤트 처리 |
| Toggle | 체크박스 또는 On/Off 스위치 |
| Slider | 드래그 가능한 슬라이더 |
| Scrollbar | 스크롤바 |
| Dropdown | 선택 가능한 드롭다운 목록 |
| InputField | 텍스트 입력 (기본 버전) |
| TMP_InputField | 텍스트 입력 (TextMeshPro 버전) ✅ |
| Selectable | 위의 컴포넌트들의 공통 부모, 포커스/상태 제어 |
| EventTrigger | 다양한 이벤트 직접 연결 (PointerEnter 등) |
🧭 5. 스크롤/마스크/패널
| 컴포넌트 | 설명 |
| Scroll Rect | 스크롤 가능한 콘텐츠 영역 |
| Scrollbar | 수동으로 스크롤바 만들 때 사용 |
| Mask / RectMask2D | 스크롤뷰나 클리핑용 마스크 |
| Panel (실제 컴포넌트는 아님) | 단순 빈 Image 오브젝트로 쓰는 그룹 UI 컨테이너 |
🎛 6. 기타 유틸리티
| 컴포넌트 | 설명 |
| Graphic Raycaster | UI 클릭 감지를 위한 이벤트 처리기 |
| EventSystem | UGUI 입력을 전역 관리하는 시스템 |
| Standalone Input Module | 마우스, 키보드 입력 지원 |
| Touch Input Module | 터치 입력 처리 |
📌 참고 흐름 (일반 팝업 구조)
Canvas
ㄴ Panel (Image + VerticalLayoutGroup + ContentSizeFitter)
ㄴ Text (TextMeshProUGUI)
ㄴ Button
ㄴ ...
728x90
반응형