[Unity] 유니티 기초 탈출기 - Part.02 - UI 편 ( Input Field )

---

---

✔ 유니티 기초 탈출기

UI - Input Field 활용편

---

---

이번 포스트는 사용자의 입력을 받을 수 있는 Input Field에 대해서 알아보고 활용해보도록 하겠습니다.

Input Field는 우리가 흔히 사용하는 네X버 포탈에서 검색하기 위해 필드에 검색어를 입력하죠?

그 검색어를 입력할 수 있도록 해주는 것이 Input Field 입니다.

Input Field는 로그인, 검색 등 여러 기능에서 활용될 수 있죠.

먼저 Input Field 만드는 방법부터 알아볼게요.

 

● Input Field 생성

Hierarchy 창에서 마우스 우 클릭 -> UI -> Input Field 클릭

아래 그림처럼 Hierarchy에 Input Field가 생성됩니다.

Rect Tool을 이용하여 (단축키 T) 위치 크기를 조정합니다.

<그림> Input Field 생성 화면

● Input Field 편집

Input Field를 자기 입맛대로(?) 바꾸고 싶다면 먼저 어떤 속성이 있는지를 알아야 합니다.

먼저 Input Field의 구조 부터 살펴볼게요

Input Field를 생성하고 나면 하위로 Placeholder, Text가 있는 것을 볼 수 있어요

( 위 Input Field 생성화면 그림 참조 )

---

Placeholder : 사용자가 어떠한 입력을 하지않은 상태에서 표시되는 내용입니다.

( 예 : 입력하시려면 여기를 클릭해주세요.. )

Text : 사용자가 입력한 값을 표시할때 사용됩니다.

( Input Field에서 제어를 하고 있기 때문에 실제로 이것을 수정할 일은 없습니다 )

---

그럼 Placeholder를 수정해봅시다.

<그림> 수정 전

<그림> 수정 후

그럼 이제 사용자는 '입력하시려면 여기를 클릭해주세요'를 가장 먼저 보게 됩니다.

 

● Input Field 이벤트 

Input Field의 가장 중요한 기능중에 하나입니다.

이전 포스트에서 Button편에서 이벤트 추가하는 기능과 비슷합니다.

Input Field는 두가지의 이벤트를 관리하고 있습니다.

On Value Changed (String) : 입력이 발생될때마다 해당 이벤트를 실행

On End Edit (String) : 입력이 모두 완료 되었을때만 해당 이벤트를 실행

 

● Input Field 활용 예제 - 로그인 화면 만들기

<그림> 로그인 화면구성

앞에서 배운 내용을 바탕으로 위와 같은 화면을 구성할 수 있을 겁니다. (모르면 복습을...)

ID의 경우에는 특별할 것없이 생성만 하고 기본 기능을 사용하였습니다.

Password의 경우 비밀번호를 **** 형태로 표현하고 싶다면 Input Field의 속성에서 아래와 같이 변경

<그림> 암호화 형태로 변경

자 이제 실행하고 입력해보겠습니다.

<그림> 실행화면

잘하셨습니다~~~~~~

이제 로그인 기능 버튼만 만든다면 완벽해집니다.

원래 로그인 기능은 복잡하게 설계되어야 하지만 지금은 간단하게 테스트로만 사용할게요.

지금은 기초탈출기 UI 편이니까 UI에 초점을 맞추며...

스크립트를 하나 생성합니다.

using UnityEngine.UI;
using UnityEngine;

public class LoginManager : MonoBehaviour
{
	//로그인 화면 Root 
    public GameObject LoginView;
    
    public InputField inputField_ID;
    public InputField inputField_PW;
    public Button Button_Login;

    //Test를 위해 임의로 사용자 변수를 추가했음
    private string user = "User";
    private string password = "1234";

    /// <summary>
    /// 로그인 버튼 클릭시 실행
    /// </summary>
    public void LoginButtonClick()
    {
        if(inputField_ID.text == user && inputField_PW.text == password)
        {
            Debug.Log("로그인 성공");
            //로그인 성공시 로그인 창 닫음
            LoginView.SetActive(false);
        }
        else
        {
            Debug.Log("로그인 실패");
        }
    }
}

생성된 스크립트를 추가한다. ( 최상단 부모에 추가하는 것을 추천 ) 

오브젝트 클릭 -> AddComponent -> LoginTest 추가

이후 드래그 해서 넣음..

다음은 로그인 버튼에 이벤트 추가하기

이제 완료되었습니다!!!!

<그림> 실행화면 (회원가입 기능은 한번 만들어보세요~)

실행하고 로그인 해보세요~

Console 창에서 "로그인 성공", "로그인 실패" 가 잘나오는지 보세요~

 

감사합니다 ~ 다음번에는 Toggle 편으로 돌아올게요.

2022.01.19 - [Programming/Unity 기초탈출기] - [Unity] 유니티 기초 탈출기 - Part.02 - UI 편 ( Toggle)

[Unity] 유니티 기초 탈출기 - Part.02 - UI 편 ( Toggle)