[UX 스터디] 텍스트 입력 필드에서 에러 메시지 표시하기

안녕하세요, 여러분!
오늘은 텍스트 필드에 입력한 값의 유효성 검증 시점과 그 결과에 따라 어떤 피드백을 줄 것인지 자세히 살펴보는 시간을 갖겠습니다. 

텍스트 필드란?
텍스트 필드는 사용자가 이름, 이메일, 주소 등 텍스트 정보를 입력할 수 있도록 하는 기본적인 UI 요소입니다. 일반적으로 입력 전, 입력 중, 입력 후의 상태를 갖고 있으며, 각 상태에 따라 시각적 표현이 달라집니다.

유효성 검증이란?
입력 필드 유효성 검증은 사용자가 입력한 값이 규칙에 맞는지 확인하는 기능입니다. 유효성 검사를 통해 잘못된 데이터를 입력하지 못하게 하고, 오류가 발생하면 사용자에게 알려줄 수 있습니다. 

---

텍스트 필드의 상태 정의

먼저 텍스트 입력 필드의 상태에 대한 정의부터 해보겠습니다.

텍스트 입력 필드의 상태 구분

1. Enabled (Default) : 페이지에 처음 진입했을 때의 텍스트 필드는 모두 Enabled 및 default 상태입니다. 아직 사용자가 값을 입력하기 전인, 초기 상태이지요.
2. Focused : 사용자가 텍스트 필드를 터치 or 클릭하면 해당 필드는 Focused 상태로 바뀌고, 이때부터 값을 입력할 수 있습니다.
3. Enabled (After focus) : 값을 입력한 후 다른 영역을 선택하게 되면 Focused 상태는 해제되고 다시 Enabled 상태로 돌아가지만, 이미 한번 Focused 되었으므로 초기 상태와는 다릅니다. 이러한 상태를 구분하기 위해 after focus라는 임의의 명칭을 부여해 보겠습니다.

---

유효성 검증

이제 유효성 검증 시점 및 결과에 따라 각 상태의 텍스트 필드에서 어떻게 피드백을 주는지 정리해 볼까요?

 
유효성 검증 시점

사용자가 입력한 값이 정상적인지 검증하는 시점은 아래와 같은 3가지 경우로 나눠볼 수 있습니다.

1. Focused : 사용자가 텍스트를 입력중일 때 실시간으로
2. Enabled (After focus) : 입력을 마치고 포커스를 해제한 시점에
3. 다음 버튼 등을 눌러 입력값을 제출할 때 일괄적으로

 

유효성 검증 시점에 따른 UI 변화

각 시점별로 유효성 검증 결과에 따라 다음과 같이 보여줄 수 있습니다.

1. Focused 상태에서 실시간 검증

• 사용자가 값을 입력하는 동시에 유효성 검사가 진행되며, 결과에 따라 즉시 피드백을 제공합니다.
• 보통 정상 입력인 경우 별도의 피드백은 없고, 유효하지 않은 값을 입력하면 에러 메시지를 표시합니다.

예시) 토스의 이체 금액 입력 (더보기 참고)

 

토스 계좌이체

 

2. Focus 해제 시점에 검증

• 사용자가 입력을 마치고 다른 영역을 선택하면 유효성 검증을 실시하여 결과에 대한 피드백을 제공합니다.
• 역시 잘못된 값을 입력한 경우에 한해 에러 메시지를 표시합니다.

예시) 쿠팡의 주소 입력 (더보기 참고)

예시) 쿠팡의 주소 입력

쿠팡 주소 입력

 

3. 입력값을 제출할 때 검증

• 확인 또는 다음 버튼을 눌러 입력값을 제출할 때 유효성 검증을 합니다.
• 이때, 입력값이 유효하다면 별도 피드백 없이 다음 단계로 이동하고,
• 잘못된 값이 입력된 경우 에러 다이얼로그를 띄웁니다. 이때 사용자가 다음 단계로 넘어갈 수 없는 이유를 설명합니다.
• 다이얼로그를 닫으면 잘못된 값을 입력한 필드에 포커스를 자동으로 이동시키고, 에러메시지도 함께 표기합니다.

예시) 케이뱅크의 계좌 입력 (더보기 참고)

케이뱅크 계좌이체

 

---

결론

이렇게 텍스트 입력 필드의 유효성 검증을 언제 실시할지, 그리고 그 결과에 대한 피드백을 어떻게 줄 지 촘촘하게 설계하면, 고객이 잘못된 값을 입력할 때 적시에 피드백을 주어 빠르게 오류를 인지하고 수정할 수 있도록 도와줄 수 있습니다. 이를 통해 입력 과정의 불편 최소화하고 사용자 경험의 완성도를 높일 수 있겠죠?
고객의 마이너한 불편함까지 살펴보는 UI/UX를 만드시길 바라며, 
오늘도 나를 위해 일하는 하루 되시길 바랍니다 :)