[UX 스터디] 입력 필드 UI를 만들어 보자 (입력 전/중/후 상태를 고려하여)

입력 필드는 모바일 앱 또는 웹 서비스에서 가장 중요한 UI 요소 중 하나입니다.
회원가입, 로그인, 본인인증에서부터 송금, 구매, 배송, 주식 매수/매도 등 다양한 거래를 처리하기 위해서, 사용자가 직접 특정한 값을 입력해줘야 합니다.
ID는 무엇인지, 얼마를 보내고 싶은지, 주소지는 어디인지, 카드 번호는 무엇인지 등등
이렇게 다양한 값을 적는 입력 필드를 만들기 위해서는 입력 전-중-후의 각 단계별로 고려해야 할 사항들이 있습니다.
 
저와 함께 하나씩 살펴봅시다.

Generated using DALLE

---

입력 전 (기본값)

 
입력 필드에 값이 입력되기 전 상태는 어떤 모습일까요?

이 예시를 보시면 기본 상태에서의 입력 필드는 사용자에게 내가 앞으로 어떤 것들을 입력해야 하는지에 대한 힌트를 줍니다.
순서대로 하나씩 보시면,

1. 레이블: 어떤 정보를 입력해야 하는지 명확히 알 수 있도록 합니다.
2. 플레이스 홀더: 입력값에 대한 더 자세한 힌트로써 플레이스 홀더를 사용합니다.
3. 안내 메시지 (옵션): 필요한 경우 입력값의 제약 사항에 대한 추가 안내 메시지를 제공할 수 있습니다.
4. 필수/선택 여부: 반드시 입력해야 하는지, 생략할 수 있는지 여부를 명시적으로 표시합니다.
5. 단위 표기 : 원, 달러, 포인트(P) 등 특정 단위가 있는 입력값인 경우 표기해줍니다.

 

TIP! 기본 입력값
DB 등에 이미 저장된 정보가 있다면 기본값으로 제공해주어 입력의 수고를 덜어줄 수도 있습니다.

 

---

입력 중 (실시간 피드백)

 
이제 사용자가 입력 필드를 선택하여 입력을 시작했을 때의 상태를 보여드리겠습니다.

 
우선 입력 필드를 선택하면, 그 부분이 선택되었다는 걸 알 수 있게 테두리를 강조하는 등 시각적 효과를 줍니다.
 
번호 순서대로 살펴보면,

1. 에러메시지 : 숫자, 문자, 특수문자 제한 등과 같은 제약 사항을 고려하여 사용자가 유효하지 않은 값을 입력했을 때 안내해 줍니다.
2. 삭제 버튼 : 입력한 값을 한번에 삭제할 수 있도록 편의를 제공할 수도 있습니다.
3. 가리기 on/off : 비밀번호는 보통 입력할 때 ***로 마스킹 처리되는데, 제대로 입력하고 있는지 확인할 수 있게 ‘가리기’ 옵션을 비활성화하는 방법도 제공할 수 있습니다.

 

TIP! 키패드
사용자가 적합한 값을 입력할 수 있도록 입력 필드에 따라 적절한 키패드를 제공합니다.
ex. ID 입력 시 - 영문 키패드
ex. 금액 입력 시 - 숫자 키패드

 
 

---

입력 후 (결과)

 
입력을 모두 마치고 난 후에는 올바른 값이 입력되었는지 체크한 후 명확한 피드백을 전달해야 합니다.
 

 
1. 버튼의 활성화 유무 : 사용자가 입력한 정보가 모두 유효할 때 결과를 제출할 수 있는 버튼을 활성화합니다.
2. 에러 메시지: 유효한 값이 모두 입력되었지만, 제출하기를 눌렀을 때 추가적으로 제출 불가한 사유가 발견될 수도 있습니다.
이때는 모달 등으로 에러 메시지를 보여주고, 에러 메시지를 닫으면, 에러가 발생한 바로 그 입력필드에 포커스 해주세요.
 

---

 
오늘은 이렇게 입력 필드를 구성하는 방법에 대해 단계별로 파악해보았습니다.
사용자가 원활하게 정보를 입력하고 결과를 제출할 수 있도록 각 단계별 UI 설계 원칙을 준수해 보세요!
 
그럼 오늘도,
나를 위한 일하기였습니다.
 
 

 
 
💡 입력필드 유효성 검증 UI가 궁금하시다면?

[UX 스터디] 텍스트 입력 필드 UI의 유효성 검증 플로우

 💡에러메시지 작성 예시가 궁금하시다면?

모바일앱 에러 메시지의 종류와 예시 문구