필드를 떠날 때 바로 검사

KRDS SP-084 — 입력된 로그인 정보에 대하여 입력 필드가 포커스를 잃었을 때 실시간 유효성 검사를 하고 있다.

0. 들어가며 — 다 입력하고 제출해야 오류를 알면

이번 758편은 입력된 로그인 정보에 대하여 입력 필드가 포커스를 잃었을 때 실시간 유효성 검사를 하고 있게 하라는 규칙입니다.

로그인 정보를 다 입력하고 제출해야 — 오류를 알면 비효율적이죠. 각 필드를 떠날 때(포커스 아웃) 바로 검사하면 그 자리 에서 고칠 수 있습니다. SP-084는 포커스 아웃 실시간 검사를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 포커스 아웃 실시간 유효성 검사

SP-084 (서비스 패턴 > 로그인 > 로그인 정보 입력) “입력된 로그인 정보에 대하여 입력 필드가 포커스를 잃었을 때 실시간 유효성 검사를 하고 있다.”

입력 필드가 포커스를 잃을 때 실시간으로 유효성을 검사하라는 뜻입니다.

정리: 필드 포커스 아웃 시 실시간 유효성 검사를 하라. 이게 SP-084입니다.

2. 왜 포커스 아웃 검사인가

로그인 정보(아이디·비밀번호)의 유효성(형식·필수 등)을, 언제 검사하느냐가 중요합니다. 다 입력하고 제출해야 검사하면 비효율적이죠. SP-084는 각 필드가 포커스를 잃었을 때(다음 필드로 이동·다른 곳 클릭) 검사하라고 합니다.

제출해야 검사할 때의 문제:

뒤늦은 오류 아이디·비밀번호를 다 입력하고 제출 버튼을 눌러야 오류(형식 등)를 알면, 사용자는 거슬러 올라가 고쳐야 합니다. 비효율적이죠.

여러 오류 한꺼번에 제출 시점에 여러 오류가 한꺼번에 뜨면, 사용자가 부담스럽습니다.

그래서 SP-084는 — 포커스 아웃 검사를 요구합니다:

필드 떠날 때 검사 각 입력 필드(아이디·비밀번호)가, 포커스를 잃을 때(blur 이벤트: 다음 필드로 이동, 다른 곳 클릭) 그 필드의 유효성을 검사합니다. 형식·필수 등을요.

즉시 피드백 검사 결과(오류면 오류 메시지)를, 그 자리에서 바로 보여줍니다(인라인 SP-086). 사용자가 그 필드에서 바로 고치게요.

입력 중 성급한 오류 지양 단, 입력 도중(타이핑 중)에는 성급히 오류를 안 띄웁니다. 아직 입력이 끝나지 않았는데 ’형식 오류’를 띄우면 거슬리죠. 필드를 떠날 때(입력 완료 시점) 검사하는 게 적절합니다.

제출 시 최종 검사 포커스 아웃 검사 외에, 제출 시 최종 검사(서버 측 포함 SP-085)도요. 둘 다요.

유효성 검사 타이밍. 폼 — 검증(BP-078)의 타이밍 — 원칙입니다:

너무 이르게(타이핑 중) — 거슬림.

너무 늦게(제출 후만) — 비효율.

적절(포커스 아웃) — 입력 완료 시점에 검사. 그 자리에서 고침.

SP-084는 — 이 적절한 타이밍(포커스 아웃)을 로그인에 적용한 거죠.

BP-078(유효성 검사 피드백)의 로그인 적용. BP-078(입력 유효성 검사 + 피드백)을, 로그인 입력에 적용한 게 SP-084 입니다. 거기에 ’포커스 아웃 시점’이라는 구체 타이밍을 명시했죠.

이 규칙은 로그인(SP)의 ’실시간 입력 검증’을 담당합니다 — 필드 포커스 아웃 시 실시간 유효성 검사를 해(084), 사용자가 그 자리에서 바로 오류를 고치게 하죠. SP-086(인라인 오류·지침)과 함께 갑니다.

정리하면 — 다 입력하고 제출해야 오류를 알면 비효율적이므로, 각 입력 필드가 포커스를 잃을 때 실시간 유효성 검사를 해 그 자리에서 고치게 하되 타이핑 중 성급한 오류는 피해야 합니다.

3. 점검 / 개선

무엇을 점검하나

포커스 아웃 검사 — 필드를 떠날 때(blur) 유효성을 검사하는가.

즉시 피드백 — 검사 결과를 그 자리에서 바로 보여주는가(SP-086).

타이밍 — 타이핑 중 성급한 오류 없이 입력 완료 시점에 검사하는가.

개선 방향

필드 포커스 아웃 시 실시간 유효성 검사 + 인라인 피드백(SP-086).

타이핑 중 성급한 오류 지양. 제출 시 최종 검사(서버 SP-085)도.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
개발	포커스 아웃 검증 구현
QA	검증 타이밍 검증

기관 유형	SP-084 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (로그인 제공 시)

로그인 기능을 제공하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 필드를 떠날 때(blur) 유효성을 검사하나요?

□ 검사 결과를 그 자리에서 바로 보여주나요(SP-086)?

□ 타이핑 중 성급한 오류 없이 입력 완료 시점에 검사하나요?

❓ FAQ

Q1. 제출해야 검사하면 왜 비효율적인가요? 다 입력하고 제출 버튼을 눌러야 오류를 알면 거슬러 올라가 고쳐야 합니다. 포커스 아웃 시 검사하면 그 자리에서 바로 고치죠. Q2. 타이핑 중에 검사하면 안 되나요? 입력 도중에 ’형식 오류’를 띄우면 아직 입력이 안 끝났는데 거슬립니다. 필드를 떠날 때(입력 완료 시점) 검사하는 게 적절하죠. Q3. 제출 시 검사는 안 하나요? 포커스 아웃 검사 외에 제출 시 최종 검사(서버 측 SP-085 포함)도 합니다. 둘 다요. 프론트 빠른 피드백 + 서버 최종 검증입니다.

6. 마무리

SP-084의 메시지:

필드를 떠날 때 바로 검사 — 포커스 아웃 시 실시간 유효성 검사를 하라.

다 입력하고 제출해야 오류를 알면 비효율적입니다. 필드 포커스 아웃 시 검사해 그 자리에서 고치게 하는 게 핵심이죠. 다음 편은 서버 오류 시 비밀번호 지우고 복귀입니다.

다음 편 예고 ▶ 「759. (SP-085) 로그인 폼 제출 시 서버 측 오류가 발생하면 화면을 다시 로드하고 비밀번호 필드를 지운 다음 사용자 이름 입력 필드로 돌려보내고 있다.」

ViewCheck는 로그인 필드 포커스 아웃 시 실시간 유효성 검사를 하는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 로그인 가이드 — https://www.krds.go.kr/html/site/service/service_03.html

WCAG 2.1 SC 3.3.1 Error Identification — https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준