뭘 어떻게 넣는지 알려주기

KRDS BP-074 — 입력 필드 주변에 레이블과 설명, 입력 값의 단위 정보를 제공하고 있다.

0. 들어가며 — 빈 입력칸만 덩그러니 있으면

이번 640편은 입력 필드 주변에 레이블과 설명, 입력 값의 단위 정보를 제공하라는 규칙입니다.

입력칸만 — 덩그러니 있고 레이블이 없으면, 사용자는 무엇을 넣어야 할지 모르죠. 형식·단위도요. BP-074는 레이블·설명· 단위를 제공하라고 규정합니다. 폼 접근성의 가장 기본이죠. 이번 편을 풀어냅니다.

1. 원문 — 레이블·설명·단위 제공

BP-074 (기본 패턴 > 입력 폼) “입력 필드 주변에 레이블과 설명, 입력 값의 단위 정보를 제공하고 있다.”

입력 필드에 레이블·설명·단위 정보를 제공하라는 뜻입니다.

정리: 입력 필드에 레이블·설명·단위를 제공하라. 이게 BP-074입니다.

2. 왜 레이블·설명·단위인가

입력 필드는 그 자체로는 ’빈 칸’입니다. 무엇을 넣어야 하는지, 어떤 형식·단위로 넣는지는 주변 정보로 알려 줘야 하죠. BP-074는 레이블·설명·단위를 요구합니다.

이 정보가 없을 때의 문제:

무엇을 넣을지 모름 레이블이 없으면(또는 플레이스홀더로만 있으면), 사용자는 이 칸에 무엇을 넣는지 모릅 니다. 빈 칸만 덩그러니 있죠.

형식·규칙 모름 설명이 없으면, 어떤 형식인지(날짜 형식, 비밀번호 규칙) 모릅니다. 추측으로 넣다 오류가 나죠.

단위 혼란 단위가 없으면, 숫자를 어떤 단위로 넣는지 모릅니다(원? 만원? kg? cm?). 잘못 입력하죠.

그래서 BP-074는 — 세 가지를 제공하라고 합니다:

레이블(Label) 이 필드가 무엇인지요. 예: ‘이름’, ‘생년월일’, ‘연락처’. 레이블은 필드 위·옆에 항상 보이게 둡니다. 플레이스홀더(placeholder)로 대체하지 않죠. 플레이스홀더는 입력하면 사라져, 레이블 역할을 못 합니다. 그리고 레이블을 필드와 연결합니다(<label for> 또는 감싸기). 스크린 리더가 ’이름, 입력란’으로 읽게요(WCAG 1.3.1·4.1.2, 라벨 CP).

설명(Description) 어떻게 입력하는지요. 형식·규칙·예시를(예: ‘비밀번호는 8자 이상’, ‘예: 2026-06-11’). 필드 아래·옆에 도움말로요. 오류 예방에 좋죠(BP-063 사전 안내).

단위(Unit) 값의 단위를요. 예: ‘금액(원)’, ‘무게(kg)’, ‘면적(㎡)’. 단위를 레이블·필드 옆에 명시해, 사용자 가 올바른 단위로 넣게요.

레이블 vs 플레이스홀더. 흔한 실수 레이블을 빼고 플레이스홀더만 쓰는 것입니다. 플레이스홀더는 입력 시 사라 지고, 대비도 낮아(흐린 회색) 접근성에 나쁘죠. 레이블은 항상 보이는 진짜 레이블로, 플레이스홀더는 보조 예시로만 씁니다.

접근성 핵심. 레이블-필드 연결(<label>)은 스크린 리더 사용자에게 필수입니다. 연결이 없으면 ’입력란’으로만 읽혀 무슨 칸인지 모르죠. 레이블 텍스트와 필드의 프로그램적 연결이 핵심입니다(WCAG 1.3.1, 3.3.2 레이블·지시).

이 규칙은 입력 폼의 ’입력 안내’를 담당합니다 — 레이블·설명·단위를 제공해(074), 사용자가 무엇을 어떤 형식·단위로 넣는지 알고 정확히 입력하게 하죠. 폼 접근성의 토대입니다.

정리하면 — 입력칸만 있으면 무엇을 어떤 형식·단위로 넣을지 모르므로, 항상 보이는 레이블(필드와 연결)·설명(형식·예시)· 단위 정보를 제공해야 합니다(플레이스홀더로 레이블 대체 금지).

3. 점검 / 개선

무엇을 점검하나

레이블 — 항상 보이는 레이블이 있고 필드와 연결되는가(<label for>).

설명 — 형식·규칙·예시 설명이 제공되는가.

단위 — 값의 단위가 명시되는가(원·kg·㎡ 등).

개선 방향

항상 보이는 레이블 + 필드 연결(플레이스홀더로 대체 금지).

형식·예시 설명, 단위 명시. 스크린 리더 연결(WCAG 1.3.1/3.3.2).

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

역할	책임
UX 라이터/기획	레이블·설명·단위 문구
퍼블리셔/개발	레이블 연결 구현

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

웹접근성 의무 대상이며 입력 폼이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 항상 보이는 레이블이 있고 필드와 연결되나요(<label for>)?

□ 형식·규칙·예시 설명이 제공되나요?

□ 값의 단위가 명시되나요(원·kg·㎡ 등)?

❓ FAQ

Q1. 플레이스홀더로 레이블을 대신하면 안 되나요? 안 됩니다. 플레이스홀더는 입력 시 사라지고 대비도 낮아 접근성에 나쁘죠. 항상 보이는 진짜 레이블을 쓰고 플레이스홀더는 보조 예시로만요. Q2. 레이블을 필드와 어떻게 연결하나요? <label for="필드id"> 또는 <label>로 감싸기로요. 스크린 리더가 ’이름, 입력란’으로 읽게 합니다(WCAG 1.3.1/4.1.2). Q3. 단위는 왜 명시하나요? 단위가 없으면 숫자를 어떤 단위로 넣을지(원? 만원? kg?) 모릅니다. ’금액(원)’처럼 명시해 올바른 입력을 돕죠.

6. 마무리

BP-074의 메시지:

뭘 어떻게 넣는지 알려주기 — 입력 필드에 레이블·설명·단위를 제공하라.

입력칸만 있으면 무엇을 어떤 형식·단위로 넣을지 모릅니다. 항상 보이는 레이블·형식 설명·단위를 제공해 정확히 입력하게 하는 게 핵심이죠. 다음 편은 필수/선택 항목 구분입니다.

다음 편 예고 ▶ 「641. (BP-075) 필수 입력 항목과 선택 입력 항목을 일관성 있는 방식으로 명확하게 구분하고 있다.」

ViewCheck는 입력 필드에 레이블·설명·단위가 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 3.3.2 Labels or Instructions / 1.3.1 Info and Relationships — https://www.w3.org/WAI/WCAG21/Understanding/

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

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