--- title: "입력창은 컴포넌트 하나가 아니라 오브젝트 묶음이다" description: "시안의 입력창은 사각형 하나지만 Unity 에서는 배경, 안내 문구, 입력 글자, 커서가 각각 따로입니다. 구조와 인스펙터 값, Content Type, 글자 수 제한, 모바일 키보드까지 그림으로 봅니다." author: "유니얼" pubDate: 2026-09-17 category: "game-dev/unity/ui" tags: ["Unity", "UI", "uGUI"] canonical: https://blog.unialgames.com/posts/unity-ui-input-field/ --- 시안에서 입력창은 둥근 사각형 하나에 안내 문구가 들어간 모양입니다. Unity 에서는 이게 **오브젝트 여러 개가 겹친 묶음** 입니다. 배경, 안내 문구, 입력한 글자, 깜빡이는 커서가 각각 따로 있고 정하는 자리도 다릅니다. 입력창도 두 갈래입니다. 안에서 글자를 그리는 컴포넌트가 무엇이냐에 따라 나뉩니다. - **Text 기반 InputField**: 인스펙터에 `Input Field` 로 적혀 있고, 안의 글자는 예전부터 있던 `Text` 컴포넌트가 그립니다 - **TMP_InputField**: 인스펙터에 `TMP_Input Field` 로 적혀 있고, 안의 글자는 TextMeshPro 가 그립니다 아래에서 볼 값들은 두 쪽이 거의 같습니다. 다른 자리만 따로 적었습니다. ## 입력창의 구조

배경, 안내 문구, 입력 글자가 각각 다른 오브젝트입니다.

TMP_InputField 는 Text Area 가 한 겹 더 있고 거기서 글자를 잘라 냅니다.

- **배경** 은 루트 오브젝트의 Image 입니다. 크기가 변하는 입력창이면 늘어나도 모서리가 지켜지도록 아홉 조각으로 나눠 뽑아 주세요 - **안내 문구(Placeholder)** 와 **입력 글자(Text)** 는 서로 다른 오브젝트입니다. 폰트, 크기, 색을 따로 정합니다 - **안쪽 여백** 은 배경에 있는 값이 아니라, 글자 오브젝트가 배경 안에서 얼마나 들어와 있는지로 만듭니다. 기본값은 좌우 10, 위 7, 아래 6 입니다. 시안의 패딩 값을 여기에 넣습니다 - **커서는 실행 중에 만들어집니다.** 하이어라키에 미리 보이지 않고 시안으로 잡을 수도 없습니다. 색과 두께와 깜빡임은 인스펙터 값으로만 정합니다 ## 안내 문구는 따로 있는 글자입니다 기본으로 만들면 안내 문구는 **기울임에 투명도 절반** 으로 들어갑니다. 시안에서 안내 문구를 본문과 같은 굵기의 회색으로 그렸다면 그것도 적어 주셔야 합니다. 자동으로 따라가지 않습니다. - 안내 문구는 **입력이 한 글자라도 들어오면 사라집니다.** 입력 중에도 남는 라벨이 필요하면 그건 입력창 밖에 따로 두는 글자입니다 - 안내 문구 자리는 글자가 아니어도 됩니다. 아이콘 이미지를 넣을 수도 있습니다 - 안내 문구와 입력 글자의 **크기가 다르면 글자가 앉는 높이도 달라집니다.** 둘을 같은 크기로 맞추는 편이 안전합니다 ## 인스펙터에서 정해지는 것들

입력창 인스펙터. 커서와 선택 색은 오브젝트가 아니라 이 값으로 정합니다.

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

Content Type 을 바꾸면 보이는 모습과 모바일 키보드가 같이 바뀝니다.

고를 수 있는 것은 표준, 자동 교정, 정수, 소수, 영문과 숫자, 이름, 이메일 주소, 비밀번호, 핀 번호, 직접 설정입니다. 하나를 고르면 **입력 검증과 모바일 키보드 종류가 함께** 정해집니다. - **비밀번호** 는 입력한 글자를 `*` 로 바꿔서 보여 줍니다. 값이 바뀌는 것이 아니라 보이는 것만 가려집니다 - **핀 번호** 는 숫자만 받으면서 가려 줍니다 - **이름** 은 단어의 첫 글자를 대문자로 만듭니다. 한글에는 티가 안 나지만 영문 이름 칸에서는 동작합니다 - 숫자만 받아야 하는 칸에 한글 자판이 올라온다면 그 칸의 Content Type 이 표준으로 남아 있는 것입니다 ## 내용과 설정에 따라 보이는 모습 시안에서 입력창은 보통 **비어 있는 상태 하나** 로 그려집니다. 실제로는 최소한 이 상태들이 있습니다. - 비어 있을 때 (안내 문구가 보임) - 입력 중일 때 (커서가 깜빡임) - 글자가 상자보다 길 때 - 글자 수 제한에 닿았을 때 - 값이 잘못됐을 때 (에러 문구 자리와 색) - 못 고치게 잠갔을 때 (Read Only) 여섯 개를 다 그려 달라는 말은 아닙니다. **어떻게 보일지만 한 줄씩 적어 주면** 그대로 만들 수 있습니다. ## 모바일에서는 키보드가 화면을 덮습니다

키보드가 올라오면 화면 아래쪽 입력창이 가려집니다.

입력창이 화면 아래쪽에 있으면 키보드가 올라올 때 그대로 가려집니다. 확인 버튼도 같이 가려집니다. 그래서 입력이 있는 화면은 **키보드가 올라온 상태의 시안** 이 따로 필요합니다. 입력창을 위로 올릴지, 화면 전체를 밀어 올릴지, 스크롤로 만들지가 거기서 정해집니다. 키보드 말고도 모바일에서 달라지는 것이 있습니다. - **입력창을 누르면 기존 글자가 전부 선택됩니다.** 그 상태에서 한 글자를 치면 전부 지워지고 새로 시작합니다. 이름을 고치러 들어온 사람이 당황하는 지점이라, 그대로 둘지 커서만 놓을지 정해 두면 좋습니다 - 기기 자판 대신 게임 안에서 만든 자판을 쓸 거라면 **기기 자판을 안 띄우는 설정** 을 따로 켭니다 ## 시안을 넘길 때 적어 주면 좋은 것 | 항목 | 적어 줄 것 | | --- | --- | | 안내 문구 | 문구, 색, 굵기, 기울임 여부. 입력 글자와 크기가 같은지 | | 안쪽 여백 | 배경에서 글자가 얼마나 들어와 있는지 (좌우와 위아래) | | 입력 종류 | 숫자만, 이메일, 비밀번호 같은 종류. 모바일 키보드도 같이 바뀝니다 | | 글자 수 제한 | 최대 글자 수와, 한도에 닿았을 때 보여 줄 것 | | 줄 | 한 줄인지 여러 줄인지. 여러 줄이면 최대 높이 | | 커서와 선택 | 커서 색과 두께, 글자를 선택했을 때의 색 | | 상태 | 비어 있을 때, 입력 중, 에러, 잠김 상태의 모습 | | 모바일 | 키보드가 올라온 화면에서 입력창과 버튼이 어디에 있는지 | ## 정리 - 입력창은 배경, 안내 문구, 입력 글자, 커서가 각각 다른 오브젝트로 겹쳐 있는 묶음입니다 - 안쪽 여백은 배경이 아니라 글자 오브젝트가 들어와 있는 정도로 만듭니다 - 안내 문구는 따로 있는 글자라 폰트와 색을 따로 정하고, 입력이 들어오면 사라집니다 - 커서는 실행 중에 생겨서 시안으로 못 잡습니다. 색과 두께와 깜빡임은 인스펙터 값으로 정합니다 - Content Type 하나가 입력 검증과 모바일 키보드를 같이 바꿉니다. 비밀번호는 보이는 글자만 가려집니다 - 글자 수 제한을 넘은 글자는 조용히 안 들어갑니다. 한도에 닿았을 때 보여 줄 것을 정해 두세요 - 모바일에서는 키보드가 화면을 덮습니다. 키보드가 올라온 상태의 시안이 따로 필요합니다