오류는 그 자리에, 해결법까지

KRDS SP-086 — 로그인 오류가 발생한 경우 인라인 메시지 등의 방식을 활용하여 오류를 표시하고 사용자가 문제를 해결하는 방법에 대한 명확한 지침을 제공하고 있다.

0. 들어가며 — 로그인 정보 입력 서브섹션의 마지막

이번 760편은 로그인 오류가 발생한 경우 인라인 메시지 등의 방식을 활용하여 오류를 표시하고, 문제 해결 방법에 대한 명확한 지침을 제공하라는 규칙입니다. ‘로그인 정보 입력’ 서브섹션(SP-076~086)의 마지막이죠.

로그인 오류를 — 어디 있는지 모를 곳에 표시하거나 해결법이 없으면 사용자가 막히죠. SP-086은 인라인 오류 표시 + 해결 지침을 규정합니다. 오류 그룹(BP-061~066)의 종합 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 인라인 오류 표시 + 해결 지침

SP-086 (서비스 패턴 > 로그인 > 로그인 정보 입력) “로그인 오류가 발생한 경우 인라인 메시지 등의 방식을 활용하여 오류를 표시하고 사용자가 문제를 해결하는 방법 에 대한 명확한 지침을 제공하고 있다.”

로그인 오류를 인라인으로 표시하고 해결 방법을 명확히 안내하라는 뜻입니다.

정리: 로그인 오류를 인라인으로 표시하고 해결 지침을 제공하라. 이게 SP-086입니다.

2. 왜 인라인 오류 + 해결 지침인가

로그인 오류(SP-081·084·085)가 났을 때, 어떻게 표시하고 어떻게 해결하게 하느냐가 SP-086입니다. 오류를 엉뚱한 데 표시하거나, 해결법이 없으면 사용자가 막히죠.

오류 표시·해결이 부실할 때의 문제:

오류 위치 모름 오류를 화면 상단·구석에만 표시하면, 어느 항목이 문제인지 모릅니다(BP-080 정신).

해결법 없음 ’아이디 또는 비밀번호가 일치하지 않습니다’만 있고, 어떻게 해결하는지(찾기·재설정) 안내가 없으면, 사용자는 막막하죠.

그래서 SP-086은 — 인라인 표시 + 해결 지침을 요구합니다:

인라인 메시지 오류를 인라인(해당 입력 필드 옆·아래)으로 표시합니다. 어느 항목이 문제인지 위치로 알게요 (BP-061·080 정신). 형식 오류는 해당 필드에, 자격 오류는 폼 상단·근처에요.

명확한 해결 지침 문제를 어떻게 해결하는지 명확히 안내합니다(BP-063 정신). ‘아이디·비밀번호를 확인하세요’, ‘비밀번호를 잊으셨다면 [비밀번호 찾기]’, ’계정이 잠겼다면 [잠금 해제]’처럼요. 해결 경로(찾기 SP-080 링크 등)를 함께요.

인라인 방식의 장점 오류를 발생 지점 가까이 인라인으로 표시하면, 사용자가 바로 그 자리에서 보고 고치죠. 멀리 떨어진 오류보다 효과적입니다.

접근성 인라인 오류를, 스크린 리더에도 전달합니다(aria-describedby로 필드↔오류 연결, aria-invalid, aria- live BP-080·SP-046 정신). 시각 표시만으론 안 되죠.

오류 그룹(BP-061~066)의 로그인 종합. SP-086은 — 오류 그룹의 종합 적용입니다:

인지(BP-061) — 오류를 눈에 띄게.

설명(BP-062·081) — 무엇이 잘못됐는지.

해결(BP-063) — 어떻게 고치는지 ← SP-086 핵심.

위치(BP-080) — 인라인 표시 ← SP-086 핵심.

로그인 — 오류에 — 이를 종합 적용했죠.

해결 경로 제공이 핵심. 로그인 실패는, 자주 발생하고 사용자를 막히게 합니다. 그래서 ‘해결 방법’(찾기·재설정· 잠금 해제 등 경로)을 제공하는 게 특히 중요하죠. 막힌 사용자를 다음으로 안내합니다(SP-080 찾기 링크 연계).

이 규칙은 로그인(SP)의 ’로그인 오류 해결’을 담당합니다 — 오류를 인라인으로 표시하고 해결 지침을 제공해(086), 사용자가 어디가 문제인지 알고 해결 경로로 — 막힘을 풀게 하죠. 로그인 정보 입력 서브섹션의 마무리입니다.

정리하면 — 로그인 오류를 엉뚱한 데 표시하거나 해결법이 없으면 사용자가 막히므로, 인라인 메시지로 위치를 알리고 문제 해결 방법(찾기·재설정 경로)에 대한 명확한 지침을 (접근성 포함) 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

인라인 표시 — 오류가 해당 필드 옆·아래 인라인으로 표시되는가(BP-080).

해결 지침 — 해결 방법(찾기·재설정·잠금 해제 경로)이 안내되는가(BP-063).

접근성 — 인라인 오류가 스크린 리더에 전달되는가(aria-describedby/invalid/live).

개선 방향

오류 인라인 표시(해당 필드 근처). 해결 지침·경로(SP-080 찾기 링크).

aria-describedby/invalid/live로 스크린 리더 전달(BP-080·SP-046).

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

역할	책임
UX 라이터/기획	오류·해결 문구
개발/접근성	인라인 오류·aria 구현

기관 유형	SP-086 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 로그인을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 오류가 해당 필드 옆·아래 인라인으로 표시되나요(BP-080)?

□ 해결 방법(찾기·재설정·잠금 해제 경로)이 안내되나요(BP-063)?

□ 인라인 오류가 스크린 리더에 전달되나요(aria-describedby/invalid/live)?

❓ FAQ

Q1. 인라인 메시지가 뭔가요? 오류를 화면 상단·구석이 아니라 해당 입력 필드 옆·아래(인라인)에 표시하는 것입니다. 어느 항목이 문제인지 위치로 알고 바로 그 자리에서 고치죠(BP-080). Q2. 해결 지침은 어떻게 제공하나요? ‘아이디·비밀번호를 확인하세요’, ‘비밀번호를 잊으셨다면 [비밀번호 찾기]’, ’계정이 잠겼다면 [잠금 해제]’처럼 해결 경로(SP-080 찾기 링크)를 함께 줍니다. Q3. 오류 그룹(BP)과 같나요? 오류 인지(BP-061)·설명(BP-062)·해결(BP-063)·위치(BP-080)를 로그인 오류에 종합 적용 한 것입니다. 특히 해결 경로 제공이 핵심이죠.

6. 마무리

SP-086의 메시지:

오류는 그 자리에, 해결법까지 — 인라인으로 오류를 표시하고 해결 지침을 제공하라.

오류를 엉뚱한 데 표시하거나 해결법이 없으면 사용자가 막힙니다. 인라인으로 위치를 알리고 해결 경로를 제공해 막힘을 풀게 하는 게 핵심이죠. ‘로그인 정보 입력’ 서브섹션이 끝났습니다. 다음 편부터는 ‘로그인 완료’ 서브섹션입니다.

다음 편 예고 ▶ 「761. (SP-087) 로그인 플로에 진입하기 전의 사용자 여정이 단절되지 않도록 로그인이 완료된 후 상황에 적합한 화면으로 이동하고 있다.」

ViewCheck는 로그인 오류가 인라인으로 표시되고 해결 지침이 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 3.3.3 Error Suggestion — https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html

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

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