꼭 넣어야 할 것을 분명히

KRDS BP-075 — 필수 입력 항목과 선택 입력 항목을 일관성 있는 방식으로 명확하게 구분하고 있다.

0. 들어가며 — 뭐가 필수인지 모르면

이번 641편은 필수 입력 항목과 선택 입력 항목을 일관성 있는 방식으로 명확하게 구분하라는 규칙입니다.

폼에서 — 어느 게 꼭 넣어야 하는 필수이고, 어느 게 선택인지 안 보이면, 사용자는 다 넣거나 빠뜨리죠. BP-075는 필수/ 선택을 일관되게 구분하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 필수/선택 일관 구분

BP-075 (기본 패턴 > 입력 폼) “필수 입력 항목과 선택 입력 항목을 일관성 있는 방식으로 명확하게 구분하고 있다.”

필수 항목과 선택 항목을 일관된 방식으로 명확히 구분하라는 뜻입니다.

정리: 필수/선택 항목을 일관되고 명확하게 구분하라. 이게 BP-075입니다.

2. 왜 필수/선택 구분인가

폼에는 꼭 넣어야 하는 필수 항목과, 넣어도 되고 안 넣어도 되는 선택 항목이 섞여 있습니다. 사용자는 무엇이 필수인지 알아야, 효율적으로 채우죠. BP-075는 이 구분을 명확히 하라고 합니다.

필수/선택이 안 구분될 때의 문제:

불필요한 입력 어느 게 선택인지 모르면, 사용자는 다 채워야 하나 싶어 선택 항목까지 입력합니다. 시간·노력 낭비죠. 개인정보 최소수집 원칙에도 어긋나고요.

필수 누락 어느 게 필수인지 모르면, 사용자는 필수 항목을 빠뜨리고 제출하다 오류를 만납니다.

불안 무엇이 꼭 필요한지 모르면, 사용자는 막막하고 불안하죠.

그래서 BP-075는 — 일관되고 명확한 구분을 요구합니다:

명확한 표시 필수 항목을 명확히 표시합니다. 흔히 별표(*)나 ‘(필수)’ 텍스트로요. 사용자가 한눈에 필수를 알게요. 또는 선택 항목에 ’(선택)’을 붙이기도 하죠(필수가 대부분이면 선택을 표시).

일관된 방식 표시 방식을 폼 전반에서 일관되게요. 어떤 필드는 별표, 어떤 건 ‘(필수)’, 어떤 건 색으로 들쭉 날쭉하면 헷갈리죠. 한 가지 방식으로 통일합니다.

색만 의존 금지 필수를 색(빨강)만으로 표시하면, 색각 이상 사용자는 못 구분합니다(WCAG 1.4.1). 별표·텍스트 같은 색 외 단서를 함께 주죠.

접근성 표시 필수 항목은 스크린 리더도 인지하게요. required 속성·aria-required="true"로 ’필수’를 전합니다(BP-082). 시각 표시(별표)만으론 스크린 리더가 모를 수 있죠.

**별표(*)의 안내.** 별표(*)를 필수 표시로 쓸 때, 폼 어딘가에 ‘* 표시는 필수 항목입니다’ 같은 범례를 둡니다. 별표 의미를 모두가 알게요. 그리고 별표가 스크린 리더에 ‘별표’로만 읽히지 않게, aria-required나 레이블에 ’필수’ 텍스트를 함께요.

개인정보 최소수집과 연계. 공공 폼은 — 개인정보를 최소로 수집해야 합니다. 필수/선택 구분은 — 사용자가 꼭 필요한 것만 넣게 해, 이 원칙과도 통하죠(개인정보 입력 그룹 BP-001~016 정신).

이 규칙은 입력 폼의 ’필수/선택 명확화’를 담당합니다 — 필수/선택을 일관되고 명확하게 구분해(075), 사용자가 무엇을 꼭 넣어야 하는지 알고 효율적으로 채우게 하죠.

정리하면 — 필수/선택이 안 구분되면 불필요 입력·필수 누락이 생기므로, 별표·텍스트 등으로 일관되고 명확하게(색만 아님, 스크린 리더 인지 포함) 구분해야 합니다.

3. 점검 / 개선

무엇을 점검하나

명확한 표시 — 필수(또는 선택) 항목이 별표·텍스트로 표시되는가.

일관성 — 표시 방식이 폼 전반에서 통일되는가.

색 외 단서·접근성 — 색만 아닌 단서 + 스크린 리더 인지(aria-required)인가.

개선 방향

필수 항목을 별표(*)·’(필수)’로 일관 표시 + 범례. 색만 의존 금지.

aria-required/required로 스크린 리더 인지(BP-082). 개인정보 최소수집.

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

역할	책임
기획/UX	필수/선택 표시 규칙
퍼블리셔/개발	표시·aria 구현

기관 유형	BP-075 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (입력 폼)

입력 폼이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 필수(또는 선택) 항목이 별표·텍스트로 표시되나요?

□ 표시 방식이 폼 전반에서 통일되나요?

□ 색만 아닌 단서 + 스크린 리더 인지(aria-required)인가요?

❓ FAQ

Q1. 필수를 어떻게 표시하나요? 별표(*)나 ‘(필수)’ 텍스트로요. ‘* 표시는 필수 항목입니다’ 범례를 함께 둡니다. 한 가지 방식으로 일관되게요. Q2. 색(빨강)으로만 표시하면 안 되나요? 안 됩니다. 색각 이상 사용자는 못 구분하죠(WCAG 1.4.1). 별표·텍스트 같은 색 외 단서를 함께 줍니다. Q3. 스크린 리더에도 알려야 하나요? 네. 별표만으론 스크린 리더가 ’필수’를 모를 수 있습니다. required/aria- required="true"로 필수임을 전하죠(BP-082).

6. 마무리

BP-075의 메시지:

꼭 넣어야 할 것을 분명히 — 필수/선택 항목을 일관되고 명확하게 구분하라.

필수/선택이 안 구분되면 불필요 입력·필수 누락이 생깁니다. 별표·텍스트로 일관되고 명확하게(색만 아님, 스크린 리더 인지) 구분하는 게 핵심이죠. 다음 편은 자동 완성 기능입니다.

다음 편 예고 ▶ 「642. (BP-076) 사용자가 자주 입력하는 데이터에 자동 완성 기능을 제공하고 있다.」

ViewCheck는 필수/선택 항목이 일관되고 명확하게 구분되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 입력 폼 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_08.html

WCAG 2.1 SC 1.4.1 Use of Color / 3.3.2 Labels or Instructions — https://www.w3.org/WAI/WCAG21/Understanding/

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

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