오류가 났으면 한눈에 보이게

KRDS BP-061 — 오류 발생 정보를 빠르게 인지할 수 있도록 메시지의 크기, 색상, 위치 등을 표현하고 있다.

0. 들어가며 — 오류 그룹의 시작

이번 627편부터 오류(Error) 그룹(BP-061~066)입니다. 폼 입력·작업 중 발생하는 오류를 어떻게 안내할지의 규칙들 이죠. 첫 편은 — 오류를 빠르게 인지하도록 메시지의 크기·색상·위치 등을 표현하라는 규칙입니다.

오류 메시지가 — 작거나, 눈에 안 띄거나, 엉뚱한 곳에 있으면, 사용자는 오류가 난 줄도 모르죠. BP-061은 오류 메시지의 시각적 인지성을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 오류 메시지 시각 표현

BP-061 (기본 패턴 > 오류) “오류 발생 정보를 빠르게 인지할 수 있도록 메시지의 크기, 색상, 위치 등을 표현하고 있다.”

오류를 빠르게 인지하도록 메시지의 크기·색상·위치 등을 적절히 표현하라는 뜻입니다.

정리: 오류 메시지를 크기·색상·위치로 눈에 띄게 표현하라. 이게 BP-061입니다.

2. 왜 오류 메시지 인지성인가

사용자가 폼을 작성하거나 작업을 하다 보면, 오류가 납니다(필수 항목 누락, 형식 오류 등). 이때 오류가 났다는 사실을, 사용자가 빠르게 인지해야 대응하죠. 오류 메시지가 눈에 안 띄면, 사용자는 왜 안 되는지 모른 채 헤맵니다. BP-061은 메시지의 시각적 인지성을 요구합니다.

오류 메시지가 눈에 안 띌 때의 문제:

오류 인지 못 함 메시지가 작거나, 본문 색과 비슷하거나, 화면 구석에 있으면, 사용자는 오류가 난 줄도 모릅니다. ‘제출’ 버튼을 계속 눌러도 안 되는데 왜인지 모르죠.

위치 못 찾음 어디서 오류가 났는지 메시지 위치가 동떨어져 있으면, 사용자는 해당 항목을 못 찾습니다.

좌절·이탈 오류를 인지·해결 못 하면, 사용자는 좌절하고 떠나죠. 신청·민원이 미완으로 끝납니다.

그래서 BP-061은 — 메시지를 크기·색상·위치로 표현하라고 합니다:

크기 오류 메시지를 충분히 읽을 만한 크기로요. 너무 작으면 놓치죠.

색상 오류임을 색으로 알립니다. 보통 빨강·주황 계열(주의·경고 색)로요. 단, 색만으로 전하지 않고(색맹 고려, WCAG 1.4.1) 아이콘(⚠)·텍스트(‘오류’)도 함께요. 색은 보조 단서죠.

위치 메시지를 오류가 난 곳 가까이(해당 입력 필드 옆·아래)에 둡니다. 사용자가 어느 항목이 문제인지 바로 알게요. 전체 오류는 폼 상단에 요약(오류 N건)을 함께 주면 좋죠.

색만으로 전하지 않기. 오류를 빨간색만으로 표시하면, 색각 이상 사용자는 못 알아챕니다. 그래서 색 + 아이콘 + 텍스트로요(WCAG 1.4.1 색의 사용). ’빨간 테두리 + ⚠ 아이콘 + “필수 항목입니다” 텍스트’처럼 다중 단서를 줍니다.

스크린 리더 인지(BP-065·066 연계). 시각적 인지(BP-061) 외에, 스크린 리더 사용자를 위한 — 초점 이동(BP-065), aria-live 안내도 함께 갑니다. 오류 그룹 전체가 — 모두가 오류를 인지·해결하게 설계되죠.

이 규칙은 오류의 ’시각적 인지성’을 담당합니다 — 메시지를 크기·색상·위치로 표현해(061), 사용자가 오류를 빠르게 인지 하게 하죠. 오류 그룹의 출발점입니다.

정리하면 — 오류 메시지가 작거나 눈에 안 띄거나 엉뚱한 곳에 있으면 사용자가 오류를 인지·해결 못 하므로, 메시지를 충분한 크기·주의 색상(색만 아님)·오류 지점 근처 위치로 표현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

크기·가독 — 오류 메시지가 충분히 읽을 크기인가.

색상 + 다중 단서 — 주의 색상 + 아이콘·텍스트로 표현되는가(색만 아님).

위치 — 메시지가 오류 지점 근처에 있는가(필드 옆·아래, 상단 요약).

개선 방향

오류 메시지를 충분한 크기 + 주의 색(빨강·주황) + 아이콘·텍스트(WCAG 1.4.1).

오류 지점 가까이 배치 + 폼 상단 요약. 색만 의존 금지.

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

역할	책임
디자이너	오류 메시지 시각 표현
퍼블리셔/개발	오류 표시·위치 구현

기관 유형	BP-061 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (폼·작업 오류)

폼·작업이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 오류 메시지가 충분히 읽을 크기인가요?

□ 주의 색상 + 아이콘·텍스트로 표현되나요(색만 아님)?

□ 메시지가 오류 지점 근처에 있나요(필드 옆·아래, 상단 요약)?

❓ FAQ

Q1. 빨간색으로만 표시하면 안 되나요? 색각 이상 사용자는 못 알아챕니다(WCAG 1.4.1). 색 + 아이콘(⚠) + 텍스트 (‘필수 항목입니다’)로 다중 단서를 줘야 하죠. Q2. 오류 메시지를 어디에 두나요? 오류 지점 가까이(해당 필드 옆·아래)에요. 사용자가 어느 항목이 문제인지 바로 알게요. 전체 오류는 폼 상단 요약도 좋습니다. Q3. 시각만 신경 쓰면 되나요? 아니요. 스크린 리더 사용자를 위한 초점 이동(BP-065)·aria-live 안내도 함께입니다. 오류 그룹 전체가 모두를 위한 설계죠.

6. 마무리

BP-061의 메시지:

오류가 났으면 한눈에 보이게 — 메시지를 크기·색상·위치로 표현하라.

오류 메시지가 눈에 안 띄면 사용자가 오류를 인지·해결 못 합니다. 충분한 크기·주의 색상(색만 아님)·오류 지점 근처 위치로 빠르게 인지하게 하는 게 핵심이죠. 다음 편은 오류 내용의 명확한 설명입니다.

다음 편 예고 ▶ 「628. (BP-062) 어떤 종류의 오류가 어떤 지점에서 발생했는지 문제를 분명하게 설명하고 있다.」

ViewCheck는 오류 메시지가 크기·색상·위치로 인지되게 표현되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 오류 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_07.html

WCAG 2.1 SC 1.4.1 Use of Color — https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

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

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