🏷 Vivian's curating
모바일에서 텍스트필드는 매우 중요한 요소이다. 

정보를 얼마나 입력하기 쉽고 간편하게 디자인 하느냐에 따라서 더 나은 이용자 경험을 제공할 수 있기 때문이다.

요약은 매우 간단한 구조와 기능 정도만 정리 하였고, 자세한 내용은 링크된 아티클을 보기를 권장한다.

✍️ 요약

1. 레이블 기능을 하는 아이콘은 왼쪽 정렬을 권장한다.

2. 텍스트필드의 레이블은 이용자가 입력한 정보보다 더 크거나 강조되지 않아야 한다.

3. 한 유형의 정보를 요청하는 텍스트필드의 입력 필드를 나누지 않아야 한다.

4. 오류 메시지는 필드의 하단에 있어야 한다.

✅ 텍스트필드의 구조

1. 레이블 Label : 입력 필드에 입력할 정보가 무엇인지 사용자에게 설명하는 제목.

2. 입력 필드 Input Field : 레이블 아래에 표시되는 텍스트를 입력할 위치.

3. 플레이스홀더 텍스트 Placeholder Text : 필드 내에 있는 부가적인 내용을 설명하는 짧은 텍스트.

4. 커서 Cursor : 필드 내의 현재 입력 위치.

5. 입력 텍스트 Input Text : 이용자가 입력한 텍스트. (플레이스홀더보다 어두운 색이어야 함.)

6. 클리어 버튼 Clear Button : 필드에 입력한 정보를 한꺼번에 삭제할 수 있는 X버튼.

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