매거진 UXUI 스터디

유효성 검증 설계를 하다가, 가장 중요한 걸 놓쳤다

유효성 검증 설정 디자인

by 두블링 한윤석

웹 폼이나 B2B SaaS에서 신청서, 요청서, 결제 폼 등을 설계하다 보면 항상 나오는 고민이 있습니다.

“유효성 검증을 어떻게 설계해야 직관적이고 관리하기 편할까?”

제가 최근 작업하면서 겪은 경험과 깨달음을 공유하려 합니다.



1. 기존 멘탈 모델과의 차이

일반적인 생각에서는 유효성 검증 하면 **“틀린 걸 막는다”**라는 느낌이 강합니다.
예를 들어:

이름 필수 입력 → 입력 안 하면 막기

이메일 형식 틀림 → 막기

즉, **제한(restriction)**의 느낌이 강합니다.

하지만 실제 서비스에서는 이것만으로는 현실의 복잡한 조건을 다 표현하기 어렵습니다.


예를 들어, 한 신청서에서 조건이 이렇게 복합적이라면?

고용 형태 = 정규직 AND 비용 ≤ 100

고용 형태 = 계약직 AND 비용 < 300

고용 형태 = 인턴 AND 비용 ≤ 50


이런 경우 단순히 ‘틀린 값만 막는다’ 방식으로는 관리자가 일일이 조건을 추가하고 확인해야 하는 불편함이 생깁니다.



2. 조건 그룹 기반 설계

그래서 저는 검증을 그룹 단위로 설계했습니다.

검증 = 조건 그룹

그룹 안 조건 = AND

그룹 간 = OR

예외 문구 = 조건 미충족 시 안내


즉, 하나라도 조건 그룹을 만족하면 신청서 요청이 가능하고, 모든 그룹이 실패하면 예외 문구가 노출됩니다.

스크린샷 2026-01-23 오후 5.26.39.png


그룹 내부는 AND → 그룹 내 모든 조건을 충족해야 통과

그룹 간은 OR → 하나라도 만족하면 신청 가능

예외 문구는 통과하지 못할 경우 안내


3. 중요한 UX 포인트

통과 필터 개념으로 이해하기 단순히 틀린 것을 막는 것이 아니라, **‘이 조건을 충족하면 통과’**라는 개념으로 설계합니다.

예외 문구는 자유롭게 각 그룹별로 안내 문구를 자유롭게 입력할 수 있습니다. 자동 생성 예시도 제공하면 관리자가 편리하게 사용할 수 있습니다.

조건 그룹 0개 = 모든 신청자 통과 기본 동작으로는 모든 사용자가 신청 가능 UX상 안내 문구를 넣어 “설정이 없으면 누구나 신청 가능”이라는 것을 명시하면 좋습니다.

조건 그룹 많아질 때 UI 고도화 고려 그룹 접기/펼치기 요약 문장 자동 생성 우선순위 / 정렬


4. 실제 서비스 사례

노코드 폼 빌더: Airtable, Typeform, Jotform 목록형, 숫자형 필드에 조건 그룹을 넣어 “하나라도 조건 충족 → 제출 가능”

B2B SaaS 워크플로우: HR, ERP, 비용 승인 요청 AND/OR 기반 조건 그룹 예외 문구 자유 입력

자동화 툴: Zapier, Make 조건 만족 시 액션 수행 / 불만족 시 안내 메시지

즉, 대부분 실제 웹 빌더와 SaaS에서는 조건 그룹 기반 통과 필터 방식이 표준입니다.



5. 결론

전통적 유효성 검증 = 틀린 값 막기 → 제한형

현실적 신청서 검증 = 통과 조건 정의 → 필터형

조건 그룹 구조를 쓰면 복잡한 조건도 직관적으로 관리 가능

예외 문구, 동적 안내 문구 등을 활용하면 관리자가 실수할 가능성도 최소화


결론적으로, “막는 검증”이 아니라 **“되는 걸 정의하는 필터”**라고 생각하면 설계가 훨씬 명확해집니다



스크린샷 2026-01-23 오후 5.25.47.png








keyword
매거진의 이전글서비스의 아하 모먼트를 찾는 법2