상호작용 UI에 대해 알아 볼 것이다.
상호작용 UI는 상호적이며, 입력을 받는 컨트롤UI 요소로써,
Toggle, Slider, ScrollBar, ScrollView, Button, DropDown, InputField가 존재한다.
(상호작용 UI라는 명칭은 정식 명칭은 아니다.)
차례
Toggle ( + Component)
Slider ( + Component)
Scrollbar ( + Component)
Scroll View
- Scroll Rect (Component)
Mask (Component)
Button ( + Component)
Dropdown ( + Component)
Input Field ( + Component)
https://docs.unity3d.com/kr/2021.3/Manual/UIInteractionComponents.html
Toggle
https://docs.unity3d.com/kr/2021.3/Manual/script-Toggle.html
플레이어의 입력을 통해 On/Off의 상태를 가지는 UI이다.
Toggle 은 기본적으로 배경(Background) + 체크박스(Checkmark) + 텍스트(Label)로 이루어져있다.
Toggle (Component)
Interactable : 체크 가능 여부
Transition : 전환 효과 방식
https://docs.unity3d.com/kr/2021.3/Manual/script-SelectableTransition.html
- None : 전환 효과 없음없음
- Color Tint : 상태에 따라 컬러를 변화시킵니다.
- Target Graphic : 상호작용 컴포넌트에 사용되는 그래픽
- Normal Color : 기본 상태의 컬러
- Highlighted Color : 마우스를 올렸을 때 컬러
- Pressed Color : 클릭 중일 때 컬러
- Selected Color : 선택 상태일 때 컬러
- Disabled Color : Interactable이 꺼졌을 때 컬러
- Color Multiplier : 상태 색상에 추가 배율을 곱해주는 값
- Fade Duration : 상태가 바뀔 때까지 색이 변하는 시간
- Sprite Swap : 상태별로 이미지를 교체한다.
- Target Graphic : 사용할 일반 스프라이트
- Highlighted Sprite : 마우스를 올렸을 때 사용할 스프라이트
- Pressed Sprite : 클릭 중일 때 사용할 스프라이트
- Selected Sprite : 선택 상태일 때 사용할 스프라이트
- Disabled Sprite : Interactable이 꺼졌을 때 사용할 스프라이트
- Animation : Animator를 연결해 상태별 애니메이션 실행 (상태에 따라 Animator Trigger가 자동으로 호출된다.)
- Normal Trigger : 기본 상태의 트리거
- Highlighted Trigger : 마우스를 올렸을 때 사용할 트리거
- Pressed Trigger : 클릭 중일 때 사용할 트리거
- Selected Trigger : 선택 상태일 때 사용할 트리거
- Disabled Trigger : Interactable이 꺼졌을 때 사용할 트리거
Navigation : 다른 UI와의 선택 이동순서 결정 (키보드, 패드 조작시)
Visualize : 선택 가능한 UI요소 사이의 Navigation흐름을 표시한다.
Is On : 토글의 초기 상태를 켜짐으로 할 지 여부
Toggle Transition : 값이 변경될 때, 체크마크가 어떻게 반응할지 결정
Graphic : 체크 표시에 사용되는 이미지
Group : 이 Toggle이 속한 Toggle Group
On Value Changed (Boolean) : 토글이 클릭된 경우 호출되는 Unity 이벤트
Slider
https://docs.unity3d.com/kr/2021.3/Manual/script-Slider.html
플레이어가 마우스를 드래그하여, 미리 정해진 범위상의 숫자 값을 선택할 수 있다.
Slider는 기본적으로, 배경(Background) + 채워진 영역(Fill) + Handle (드래그 가능한 손잡이)로 구성된다.
Fill Area : Fill이 채워질 수 있는 영역 , Handle Slide Area : Handle이 움직일수 있는 영역
Slider (Component)
Fill Rect : 현재 값만큼 채워질 UI 영역 그래픽
Handle Rect : 드래그할 손잡이 그래픽
Direction : 핸들을 드래그 할때, 슬라이더의 값이 증가하는 방향
Min Value : 핸들이 제일 밑에 있을 때의 값 (최솟값)
Max Value : 핸들이 제일 위에 있을 때의 값 (최댓값)
Whole Numbers : 슬라이더 값을 정수로 제한
Value : 현재 슬라이더의 숫자 값
On Value Changed : 슬라이더의 현재 값이 변경되는 경우 호출되는 Unity 이벤트
Scrollbar
https://docs.unity3d.com/kr/2021.3/Manual/script-Scrollbar.html
플레이어가 한 번에 볼 수 없는 이미지나, 다른 보기 화면을 스크롤하여 보도록 할수 있게한다.
기본적으로 Sliding Area(Handle이 움직일수 있는 영역) + Handle(현재 스크롤 위치를 나타내는 손잡이)로 구성된다.
Scrollbar (Component)
Handle Rect : Handle에 사용될 그래픽
Direction : Handle을 드래그 할떄, 스크롤바의 값이 증가하는 방향
Value : 현재 스크롤 위치 (0~1)
Size : Handle의 크기 (전체 콘텐트 대비 화면에 보이는 비율)
Number Of Steps : 스크롤바가 허용하는 Handle의 스크롤 위치 수
On Value Changed : 스크롤 위치가 바뀔 때 호출
Scroll View
화면보다 큰 콘텐츠를 스크롤해서 보여주는 UI 컨테이너
기본적으로, Viewport (화면에 실제로 보이는 영역) + Content (스크롤 되는 콘텐츠, 움직이는 오브젝트) + ScrollBar Horizontal (가로축 스크롤, 선택) + ScrollBar Vertical (세로축 스크롤, 선택) 으로 구성된다.
Scroll Rect (Component)
https://docs.unity3d.com/kr/2021.3/Manual/script-ScrollRect.html
크기가 큰 콘텐츠를 작은 영역에 표시해야 할때 사용한다.
Content : 스크롤될 대상
Horizontal : 수평 스크롤링을 활성화한다.
Vertical : 수직 스크롤링을 활성화한다.
Movement Type : 스크롤이 끝에 도달했을 때 동작 방식
- Unrestricted : 제한 없음 (끝 넘어가도 계속 이동)
- Elastic : 끝에서 늘어났다가 튕겨 돌아옴
- Elasticity : 튕기는 탄성 정도
- Clamped : 끝에서 딱 멈춤
Inertia : 관성 적용 (드래그 후 손떼고 나서의 관성)
Deceleration Rate : 관성 감속 속도
Scroll Sensitivity : 마우스 휠 민감도
Viewport : 마스크 역할을 하는 영역 (보이는 영역)
Horizontal (Vertical) Scrollbar : 수평(수직) 스크롤바 참조 요소
- Visibility : 스크롤바를 사용하지 않는 경우 숨긴다.
- Permanent : 항상 표시
- Auto Hide : 콘텐츠가 Viewport보다 클 때만 보임 (전부 보이면 자동으로 사라짐)
- Auto Hide And Expand View : 스크롤바가 숨겨졌을때, 스크롤바 만큼 보이는 Viewport가 확장된다.
- Spacing : Scrollbar와 Viewport의 간격
Mask (Component)
https://docs.unity3d.com/kr/2021.3/Manual/script-Mask.html
부모 영역기준으로 자식 UI를 잘라내는 기능이다.
Show Mask Graphic : 마스킹 (부모 오브젝트 그래픽)이 화면에 보이는지
Button
https://docs.unity3d.com/kr/2019.4/Manual/script-Button.html
플레이어의 클릭 했을 때, 특정 동작을 실행하는 UI이다.
기본적으로 Button 오브젝트 + Text 오브젝트로 구성된다.
Button (Component)
On Click : 버튼이 클릭되었을 때 호출되는 UnityEvent
버튼을 누르고, 버튼안에서 마우스를 떼야 실행된다. (버튼을 벗어나서 떼면 실행 안됨)
Dropdown
https://docs.unity3d.com/kr/2023.2/Manual/script-Dropdown.html
여러 선택지 중 하나를 선택할 수 있는 UI 컨트롤이다.
클릭 시 목록이 펼쳐지고, 항목을 선택하면 그 값이 바뀌는 구조다.
기본적으로, Label + Arrow + Temlate(목록) 으로 구성되어있다.
Dropdown (Component)
Template : 펼쳐질 목록의 원본 프리팹 구조
Caption Text : 현재 선택된 값을 표시하는 텍스트
Caption Image : 현재 선택된 값를 표시하는 이미지
Item Text : 목록에 표시될 각 항목 텍스트
Item Image : 목록에 표시될 각 항목 이미지
Value : 현재 선택된 인덱스
alpha Fade Speed : 목록이 열리고 닫힐 때, 투명도가 변하는 속도
Options : 선택 가능한 항목 리스트
On Value Changed : 선택이 바뀌면 호출된다.
Input Field
https://docs.unity3d.com/kr/2018.4/Manual/script-InputField.html
플레이어가 텍스트를 입력할 수 있게 하는 UI
기본적으로, Placeholder(안내문구) + Text (입력된 글자) 로 구성된다.
Input Field (Component)
Text Component : Input Field의 콘텐츠로서 사용되는 텍스트 요소
Text : 텍스트
Character Limit : Input Field에 들어갈 수 있는 최대 문자 수
Content Type : 입력 가능한 텍스트 종류
- Standard : 아무거나 입력 가능
- Auto
- Integer Number : 정수만
- Decimal Number : 소수 포함 숫자
- Alphanumeric : 영어 + 숫자
- Name : 이름 형식 (첫글자를 대문자로 자동변환, Delete키로 변환 규칙 무시가능)
- Email Address : 이메일 형식 (영숫자 문자열 입력, 최대 하나의 @ 등)
- Password : 입력시 블라인드 처리 (별표 *)
- Pin : 입력시 블라인드 처리, 정수만 입력
- Custom : 직접 설정
Line Type : 줄 입력 방식 설정
- Single Line : 한줄만
- Multi Line Submit : 여러줄 허용, 엔터를 누르면 제출
- Multi Line NewLine : 여러줄 허용, 엔터를 누르면 줄바꿈
PlaceHolder : 안내문구 요소
Caret Blink Rate : Caret 깜빡임 속도
Caret Width : Caret 너비
Custom Caret Color : Caret 색
Selection Color : 텍스트 선택 부분의 배경 컬러
Hide Mobile Input(iOS 에서만) : 기본 텍스트 입력창 숨기기
Read Only : 입력은 불가능 , 선택/복사 가능
Activeate On Select : InputField가 선택 되었을 때, 자동으로 커서 깜빡임 + 키보드 활성화
On Value changed : 글자가 바뀔때마다 호출
On Submit : 제출시 호출
On End Edit : 입력이 끝났을 때 호출
'Unity > Tutorial' 카테고리의 다른 글
| [Unity] Auto Layout System (0) | 2026.03.05 |
|---|---|
| [Unity] 그래픽 UI (Text, Image, Raw Image, Panel) (0) | 2026.03.02 |
| [Unity] Canvas (UI 시스템) (0) | 2026.03.01 |
| [Unity] Raycast (0) | 2026.02.28 |
| [Unity] Cinemachine (심화) (0) | 2026.02.27 |