UI, 유저인터페이스 기본 - 4 Toggles, Sliders, Inputs, and Dropdowns [Unity]

 

그렇다고 인터페이스가 버튼만 있지는 않았으니..

더 있다. 당연하게도

이렇게 더 있다.

토글, 슬라이더, 입력창, 체크박스 등등

 

알아보자

 

 

---

 

먼저 Input Field부터 알아보자

 

 

여기 씬에 Configuration Panel이 있다.

 

굳이 해석하자면.... 구성요소..라고나 할까?? 해석하기 어렵다.

 

아무튼 여기다 Input Field를 넣으려고 한다.

 

 

짠! 생겼다.

 

엥.. 버튼처럼 생겼네 혹시 child처럼 딸려오나??

정답!

 

Placeholder는 우리가 입력을 하고 있지 않을 때 보여지는 텍스트다.

++ 전화번호 ex) 000-0000-0000 이런식으로 입력해야 할 텍스트를 설명할 때 사용한다.

실제 값을 가지진 않는다. 

-> 입력하지 않는다고 해서 placeholder의 값인 000-0000-0000을 입력으로 받지는 않는다.

 

하지만 이렇게 만든다고 자동적으로 사용할 수 있는 것은 아니다.

스크립트를 넣어줘야겠지??

 

Input Field에 스크립트를 넣어준다.

 

그리고 사용할 준비를 하자.

먼저 우리는 입력받는 것이 문자열이라고 할 때

이용해야하므로 

변수선언을 해준다.

 

**public으로 하는 이유는 이 문자열을 다른 스크립트에서도 쉽게 읽게 하기 위함이다.

예를 들어 캐릭터이름이라면.. 캐릭터 위에 이름이 떠야하니까??

 

그리고 하나 더 입력을 받을 수 있게 메서드를 만들어준다.

 

 

즉, InputField로 들어온 text를 받아서 새롭게 nameValue 값을 갱신하겠단 소리지?

 

물론 이렇게 사용하려면 InputField 컴포넌트에 대해 잘 알아야겠다.

 

 

여기서 text라 함은 Play 중에 사용자 입력을 받는 것이 그대로 온다.

 

 

** input에 들어오는 text를 수정하고 싶다?? -> InputField의 child인 text에 들어가서 글꼴, 크기 등을 바꿔주면 된다.

 

하지만 여기서 끝나는게 아니라.. 메서드가 언제 실행될지도 지정해줘야겠지? 버튼처럼??

 

 

On Value Chnaged 는 실제로 값이 바뀌는 순간순간마다 실행되는 것을 의미한다.

123을 치는 동안 1 입력했을 때, 2 입력했을 때, 3입력했을 때 이런 식으로 값이 바뀌면 실행되는 것이다.

 

 

 

hello를 쳤더니 이렇게 되버렸다.

 

 

아.. 점점 쉬워진다.

똑같은 것들의 반복이다.

넘어가자

 

---

 

이번엔 Slider이다.

 

Slider는 약간 옛날 dial 같은 느낌이다. dial이 시계방향, 반시계방향으로 돌리는 거면 얘는 그냥 반대쪽으로 움직이는 것이라고 생각하면 편하다.

이게 바로 Slider이다.

 

 

여기서도 비슷하다. 볼륨 조절을 한 번 만들어보자

 

 

짠 만들었다.

 

 

어김없이 child가 존재한다 ㅎㅎ

Handle이 저 동그라미다.

 

 

 

또한 어김없이 Slider에도 특별한 컴포넌트가 붙어있다.

 

 

저기 Value가 우리가 Handle을 움직여서 값을 변화시키는 것이다.

Min Value와 Max Value에 따라 잘 바꾸면 값도 바꿀 수 있다.

 

그럼 이 값을 받아서 볼륨을 바꾸고 싶다??

당연히 스크립트가 따로 필요하다.

 

 

이런식으로 해야겠지?

 

Slider에서 On Value Change 가 있어서 값을 바꿀 때마다 갱신되게할 수 있다.

 

 

와.. Slider도 별거 없네?

 

---

 

다음은 우리가 심리테스트에 많이 이용하는 체크박스를 만들어보자

**체크박스는 토글의 한 종류라고 생각하면 된다.

1점, 2점, 3점 그런 식이잖아..? ㅎㅎ

토글에서 옵션이 많을 때 이용하면 좋다.

 

 

종류가 이렇게나 많이 있다.

 

 

물론 체크박스는 토글을 이용한다.

 

생긴 거는 이렇게 생겼다.

 

 

역시나  child로 따라오는 것들이 있고?

 

체크박스는 어차피 알다시피

체크가 되어있거나 아니면 비어있거나 2가지 경우 밖에 없다.

 

하지만 이를 이용하기 위해선 또 스크립트가 필요하다.

 

메서드는 이렇게 짰다.

 

역시나 컴포넌트에 대해서 잘 알아야 이용하겠지..? ㅎㅎ

 

이렇게 할당하고

로그를 보면 잘 나온다!!

 

 

쉽다 이것도

 

 

---

다음은 토글이다.

토글이란 우리 전등스위치 같은 것이다.

체크박스랑 비슷한데.. 그냥 기능이 적은 체크박스라고 생각하면 된다.

 

 

 

토글 버튼도 종류가 무지하게 많다.

 

 

 

그니까 우리가 익숙한 것은 딱 이모양이다.

 

 

근데 이걸 이렇게 보면 Slider랑 닮았다.

Value가 2개밖에 없는 Slider라고 생각하면 어떨까??

 

우리가 정말 알던 토글은 슬라이더로 만든다.

 

그렇게 하기위해 저 3가지를 설정해준다.

 

메서드도 똑같은 원리로 만들어준다.

 

 

또 할당해주면 끝!!

 

그냥 흘러가는대로 생각하면 뚝딱 만들어진다.

 

 

---

 

드디어 마지막 Dropdown이다.

이것도 옵션달린 거랑 비슷하다.

다만 이름만 다를뿐

 

짠

 

 

역시나 Child로 따라오고?

몇 번 만지작하면 저기에 있는 것 다 알게된다. 

역시나 컴포넌트에는 유용한 것들이 많이 들어있다.

 

당연히 기능을 수행하려면..

스크립트를 넣어야 하고

하지만 Dropdown에서는 신경 쓸 것이 조금 있다.

 

Play에서도 옵션을 보여주기 위해서는 초기화시키고 할당해줘야 한다는 것이다.

 

그 다음이 이제 옵션 선택이다.

 

단지 왜 index라고 표현했을지 생각해보면 된다.

 

 

와.. 이것도 그렇게까지는 어렵지 않다.