본문 바로가기
기획자가 알아야 할 UX, UI

유효성 검사, 제대로 이해하고 적용하자!

by 일잘러로 살기 2025. 2. 11.

유효성 검사는 단순히 오류를 막는 게 아니라, 사용자가 올바른 정보를 입력할 수 있도록 도와주는 역할을 해요.
즉, 유저가 입력 실수를 줄이고, 원활한 서비스 이용이 가능하도록 유도하는 것이 핵심이죠.
그렇다면 유효성 검사는 어떤 기준으로 이루어질까요? 대표적인 기준과 예시를 함께 살펴볼게요!


✅ 1. 필수 입력값 검증 (Required Field Validation)

💡 기준: 반드시 입력해야 하는 값이 비어 있을 경우 경고 메시지를 표시해야 한다.

📌 예시

  • 회원가입 시 이름, 이메일, 비밀번호는 필수 입력값
  • 아이디 찾기 시 전화번호 또는 이메일 필수 입력

🚨 오류 메시지 예시
❌ "이름을 입력하세요."
❌ "이메일을 입력하지 않으면 가입할 수 없습니다."


✅ 2. 입력 형식 검증 (Format Validation)

💡 기준: 특정 패턴(정규식)에 맞지 않는 경우 오류를 알려줘야 한다.

📌 예시

  • 이메일: example@email.com 형식이어야 함
  • 전화번호: 010-1234-5678 형식 유지
  • 생년월일: YYYY-MM-DD 형식으로 입력

🚨 오류 메시지 예시
❌ "올바른 이메일 형식을 입력하세요. 예: user@example.com"
❌ "전화번호는 ‘010-XXXX-XXXX’ 형식으로 입력해주세요."


✅ 3. 입력 길이 검증 (Length Validation)

💡 기준: 입력값이 너무 짧거나 긴 경우 제한을 두어야 한다.

📌 예시

  • 비밀번호: 최소 8자 이상 입력
  • 닉네임: 2~10자 이내
  • 휴대폰 번호: 11자리로 제한

🚨 오류 메시지 예시
❌ "비밀번호는 최소 8자 이상 입력해야 합니다."
❌ "닉네임은 2자 이상, 10자 이내여야 합니다."


✅ 4. 값 일관성 검증 (Consistency Validation)

💡 기준: 동일한 값이 일치해야 하는 경우 검사해야 한다.

📌 예시

  • 비밀번호 확인: 입력한 비밀번호와 동일해야 함
  • 이메일 인증번호: 발송된 번호와 동일해야 함

🚨 오류 메시지 예시
❌ "비밀번호가 일치하지 않습니다. 다시 입력해주세요."
❌ "입력한 인증번호가 올바르지 않습니다."


✅ 5. 실시간 피드백 제공 (Real-time Feedback)

💡 기준: 사용자가 입력하는 동안 오류를 빠르게 감지하여 알려줘야 한다.

📌 예시

  • 닉네임 입력 시, 사용 가능한지 즉시 확인
  • 비밀번호 입력 시, 보안 강도를 표시

실시간 피드백 예시
✔️ "사용 가능한 닉네임입니다!"
❌ "이미 사용 중인 닉네임입니다. 다른 이름을 입력해주세요."
🔒 "비밀번호 강도: 약함 → 숫자, 대문자를 포함하세요!"


💡 좋은 유효성 검사의 기준은?

✔️ 필수 입력값을 놓치지 않도록 안내해야 한다.
✔️ 형식이 맞지 않으면, 정확한 예시를 제공해야 한다.
✔️ 입력 길이를 제한하여 불필요한 데이터 입력을 방지해야 한다.
✔️ 일관성이 필요한 입력값은 서로 일치하는지 검사해야 한다.
✔️ 실시간 피드백을 통해 사용자가 실수를 줄일 수 있도록 도와야 한다.

유효성 검사는 사용자 경험을 좌우하는 중요한 요소예요.