입력창은 컴포넌트 하나가 아니라 오브젝트 묶음이다

시안에서 입력창은 둥근 사각형 하나에 안내 문구가 들어간 모양입니다. Unity 에서는 이게 오브젝트 여러 개가 겹친 묶음 입니다. 배경, 안내 문구, 입력한 글자, 깜빡이는 커서가 각각 따로 있고 정하는 자리도 다릅니다.

입력창도 두 갈래입니다. 안에서 글자를 그리는 컴포넌트가 무엇이냐에 따라 나뉩니다.

• Text 기반 InputField: 인스펙터에 Input Field 로 적혀 있고, 안의 글자는 예전부터 있던 Text 컴포넌트가 그립니다
• TMP_InputField: 인스펙터에 TMP_Input Field 로 적혀 있고, 안의 글자는 TextMeshPro 가 그립니다

아래에서 볼 값들은 두 쪽이 거의 같습니다. 다른 자리만 따로 적었습니다.

입력창의 구조

• 배경 은 루트 오브젝트의 Image 입니다. 크기가 변하는 입력창이면 늘어나도 모서리가 지켜지도록 아홉 조각으로 나눠 뽑아 주세요
• 안내 문구(Placeholder) 와 입력 글자(Text) 는 서로 다른 오브젝트입니다. 폰트, 크기, 색을 따로 정합니다
• 안쪽 여백 은 배경에 있는 값이 아니라, 글자 오브젝트가 배경 안에서 얼마나 들어와 있는지로 만듭니다. 기본값은 좌우 10, 위 7, 아래 6 입니다. 시안의 패딩 값을 여기에 넣습니다
• 커서는 실행 중에 만들어집니다. 하이어라키에 미리 보이지 않고 시안으로 잡을 수도 없습니다. 색과 두께와 깜빡임은 인스펙터 값으로만 정합니다

안내 문구는 따로 있는 글자입니다

기본으로 만들면 안내 문구는 기울임에 투명도 절반 으로 들어갑니다. 시안에서 안내 문구를 본문과 같은 굵기의 회색으로 그렸다면 그것도 적어 주셔야 합니다. 자동으로 따라가지 않습니다.

• 안내 문구는 입력이 한 글자라도 들어오면 사라집니다. 입력 중에도 남는 라벨이 필요하면 그건 입력창 밖에 따로 두는 글자입니다
• 안내 문구 자리는 글자가 아니어도 됩니다. 아이콘 이미지를 넣을 수도 있습니다
• 안내 문구와 입력 글자의 크기가 다르면 글자가 앉는 높이도 달라집니다. 둘을 같은 크기로 맞추는 편이 안전합니다

인스펙터에서 정해지는 것들

• Character Limit 은 0 이 제한 없음입니다. 제한을 넘긴 글자는 아무 표시 없이 그냥 안 들어갑니다. 한도에 닿았을 때 무엇을 보여 줄지는 시안에서 정해야 합니다
• Content Type 은 입력 종류입니다. 아래에서 따로 봅니다
• Line Type 은 한 줄인지 여러 줄인지입니다. 한 줄은 줄바꿈이 없고 엔터가 확정입니다
• 커서와 선택 색 은 여기서 정합니다. 커서 깜빡임 기본값은 0.85, 두께는 1 픽셀입니다. 두께를 2 이상으로 올리면 굵은 커서가 됩니다

Content Type 하나가 여러 가지를 같이 바꿉니다

고를 수 있는 것은 표준, 자동 교정, 정수, 소수, 영문과 숫자, 이름, 이메일 주소, 비밀번호, 핀 번호, 직접 설정입니다. 하나를 고르면 입력 검증과 모바일 키보드 종류가 함께 정해집니다.

• 비밀번호 는 입력한 글자를 * 로 바꿔서 보여 줍니다. 값이 바뀌는 것이 아니라 보이는 것만 가려집니다
• 핀 번호 는 숫자만 받으면서 가려 줍니다
• 이름 은 단어의 첫 글자를 대문자로 만듭니다. 한글에는 티가 안 나지만 영문 이름 칸에서는 동작합니다
• 숫자만 받아야 하는 칸에 한글 자판이 올라온다면 그 칸의 Content Type 이 표준으로 남아 있는 것입니다

내용과 설정에 따라 보이는 모습

시안에서 입력창은 보통 비어 있는 상태 하나 로 그려집니다. 실제로는 최소한 이 상태들이 있습니다.

• 비어 있을 때 (안내 문구가 보임)
• 입력 중일 때 (커서가 깜빡임)
• 글자가 상자보다 길 때
• 글자 수 제한에 닿았을 때
• 값이 잘못됐을 때 (에러 문구 자리와 색)
• 못 고치게 잠갔을 때 (Read Only)

여섯 개를 다 그려 달라는 말은 아닙니다. 어떻게 보일지만 한 줄씩 적어 주면 그대로 만들 수 있습니다.

모바일에서는 키보드가 화면을 덮습니다

입력창이 화면 아래쪽에 있으면 키보드가 올라올 때 그대로 가려집니다. 확인 버튼도 같이 가려집니다. 그래서 입력이 있는 화면은 키보드가 올라온 상태의 시안 이 따로 필요합니다. 입력창을 위로 올릴지, 화면 전체를 밀어 올릴지, 스크롤로 만들지가 거기서 정해집니다.

키보드 말고도 모바일에서 달라지는 것이 있습니다.

• 입력창을 누르면 기존 글자가 전부 선택됩니다. 그 상태에서 한 글자를 치면 전부 지워지고 새로 시작합니다. 이름을 고치러 들어온 사람이 당황하는 지점이라, 그대로 둘지 커서만 놓을지 정해 두면 좋습니다
• 기기 자판 대신 게임 안에서 만든 자판을 쓸 거라면 기기 자판을 안 띄우는 설정 을 따로 켭니다

시안을 넘길 때 적어 주면 좋은 것

정리

• 입력창은 배경, 안내 문구, 입력 글자, 커서가 각각 다른 오브젝트로 겹쳐 있는 묶음입니다
• 안쪽 여백은 배경이 아니라 글자 오브젝트가 들어와 있는 정도로 만듭니다
• 안내 문구는 따로 있는 글자라 폰트와 색을 따로 정하고, 입력이 들어오면 사라집니다
• 커서는 실행 중에 생겨서 시안으로 못 잡습니다. 색과 두께와 깜빡임은 인스펙터 값으로 정합니다
• Content Type 하나가 입력 검증과 모바일 키보드를 같이 바꿉니다. 비밀번호는 보이는 글자만 가려집니다
• 글자 수 제한을 넘은 글자는 조용히 안 들어갑니다. 한도에 닿았을 때 보여 줄 것을 정해 두세요
• 모바일에서는 키보드가 화면을 덮습니다. 키보드가 올라온 상태의 시안이 따로 필요합니다