모바일 UI 디자인 기본 요소 - 텍스트필드

🏷 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

모바일 UI 디자인 기본 요소 - 텍스트 필드

Brunch Story

모바일 UI 디자인 기본 요소 - 텍스트 필드

다음 내용이 궁금하다면?

지금 간편 가입하고 다음 내용을 확인해 보세요!

또는

이미 회원이신가요?

2021년 6월 1일 오전 6:31

 • 

저장 230조회 5,348

댓글 0