Reward Early Punish Late 전략을 통한 Form Validation UX 최적화

Context

onChange 기반의 즉각적인 에러 표시로 인한 과도한 사용자 피드백과 onBlur/onSubmit의 지연된 피드백 사이의 UX 불균형 발생. 단순한 라이브러리 기본 설정만으로는 입력 중인 사용자와 수정을 완료한 사용자를 구분하여 대응하는 정밀한 제어 불가능.

Technical Solution

• 에러의 생명주기를 생성, 노출, 소멸의 3단계로 분리하여 독립적으로 제어하는 멘탈 모델 도입
• onBlur 시점에 에러를 생성하여 불필요한 초기 경고를 방지하는 'Punish Late' 로직 구현
• 에러 상태가 존재하는 필드에 한해 onChange 시 즉시 에러를 제거하여 수정 피드백을 제공하는 'Reward Early' 메커니즘 설계
• TanStack Form의 validationLogic를 커스텀하여 event type과 field state에 따른 동적 검증 실행 여부 결정
• Zod의 safeParse와 treeifyError를 결합하여 스키마 기반 검증 결과와 UI 에러 메시지를 매핑하는 추상화 계층 구축
• 필드 상태(state)와 실제 화면 노출(screen) 사이의 의도적인 간극을 두어 사용자 시각적 피로도 감소