[모바일 UI 디자인 기본 요소 - 텍스트필드] 🏷Vivian's Curating 모바일에서 텍스트필드는 매우 중요한 요소이다. 정보를 얼마나 입력하기 쉽고 간편하게 디자인 하느냐에 따라서 더 나은 이용자 경험을 제공할 수 있다. 요약은 매우 간단한 구조와 기능 정도만 정리하였고, 자세한 내용은 링크된 아티클을 보기를 권장한다. ✍️요약 1. 레이블 기능을 하는 아이콘은 왼쪽 정렬을 권장한다. 2. 텍스트필드의 레이블은 이용자가 입력한 정보보다 더 크거나 강조되지 않아야 한다. 3. 한 유형의 정보를 요청하는 텍스트필드의 입력 필드를 나누지 않아야 한다. 4. 오류 메시지는 필드의 하단에 있어야 한다. ✅ 텍스트필드의 구조 1. 레이블 Label : 입력 필드에 입력할 정보가 무엇인지 사용자에게 설명한다, 2. 입력 필드 Input Field : 레이블 아래에 표시되는 텍스트를 입력할 위치. 3. 플레이스홀더 텍스트 Placeholder Text : 필드 내에 있는 부가적인 내용을 설명하는 짧은 텍스트. 4. 커서 Cursor : 필드 내의 현재 입력 위치를 나타냄. 5. 입력 텍스트 Input Text : 이용자가 입력한 텍스트. 플레이스홀더보다 어두운 색이어야 함. 6. 클리어 버튼 Clear Button : 필드에 입력한 정보를 한꺼번에 삭제할 수 있다. 7. 도움말 텍스트 Helper Text : 정보 입력 중 필드 하단에 입력 정보에 대한 검증 결과 노출. ✅ 필드의 상태 States 1. 디폴트 Default : 텍스트 필드 활성화 상태에서 이용자가 정보 입력하기 전 상태. 2. 호버 Hover : 이용자가 필드 위에 마우스나 손가락을 올렸을 때 상태 변화. 3. 포커스 Focus : 이용자가 입력을 위해 필드를 눌렀을 때의 상태. 4. 타입 Type : 이용자가 키보드를 통해 정보를 입력 중일 때의 상태. 5. 입력됨 Filled : 이용자가 요청한 정보를 입력 완료한 상태. 6. 오류 Error : 이용자가 입력한 정보가 요청한 형식이 아닐 때의 상태. 7. 비활성화 Disabled : 정보 입력을 할 수 없는 상태. 8.성공 Success : 입력한 정보가 요청한 형식에 맞을 때 입력이 성공적으로 완료된 것을 알리기 위한 상태. ✅ 입력 유형과 키보드 유형 1. 기본 키보드 : 문자 입력에 최적화된 형태. 2. 검색 키보드 : 기본 키보드에서 [엔터]키가 [검색]으로 변경. 3. 이메일 키보드 : 기본 키보드에서 [@]과 [.]이 추가되고 [음성입력]키가 빠짐. 4. URL 키보드 : 기본 키보드에서 [.] , [/] , [.com]이 추가되고 [스페이스]키가 빠짐. 5. 숫자 키보드 : 문자는 입력할 수 없고 왼쪽 특수문자 키보드를 통해 특수 문자 입력 가능. 통화 키패드는 여기서 제외됨. ✅ 입력 오류 방지 1. 선택 컨트롤 사용 : 데이트피커, 슬라이더 같은 입력 컨트롤을 사용해 부적절한 값을 입력할 가능성 차단. 2. 입력 거부 : 문자만 요청하는 필드의 경우 숫자 입력 시 입력이 되지 않게 한다. 3. 최적화된 키보드 제공 #UI #디자인 #UI요소 #텍스트필드 #Input