정해진 형식이면 콕 집어 알려주기

KRDS CP-392 — 날짜 입력 형식이 지정되어 있는 경우 사용자에게 입력 방식을 명확하게 안내하고 있다.

0. 들어가며 — 형식이 정해져 있는데 안 알려주면

이번 512편은 날짜 입력 형식이 지정되어 있는 경우 사용자에게 입력 방식을 명확하게 안내하라는 규칙입니다. 이로써 날짜 입력 8개 규칙이 마무리됩니다.

시스템이 — 특정 날짜 형식(예: YYYY-MM-DD)만 받게 정해져 있으면, 사용자에게 그 형식을 분명히 알려야 하죠. 안 그러면 사용자는 다른 형식으로 적다가 오류가 납니다. CP-392는 지정된 형식의 명확한 안내를 규정합니다. CP-386 (도움말 텍스트 형식 안내)을 보강하는 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 형식 지정 시 입력 방식 명확 안내

CP-392 (컴포넌트 > 날짜 입력 필드) “날짜 입력 형식이 지정되어 있는 경우 사용자에게 입력 방식을 명확하게 안내하고 있다.”

날짜 입력 형식이 특정하게 정해져 있다면, 그 입력 방식(형식)을 사용자에게 명확하게 안내하라는 뜻입니다.

정리: 정해진 입력 형식이면 그 방식을 명확히 안내하라. 이게 CP-392입니다.

2. 왜 입력 방식 명확 안내인가

날짜 입력 필드 중에는 — 시스템이 특정 형식만 받도록 지정된 경우가 있습니다. 예: ‘YYYY-MM-DD’ 형식만 유효 하고, 다른 형식은 오류 처리하는 거죠. 이렇게 형식이 정해져 있을 때, 사용자에게 그 형식을 명확히 알리지 않으면 문제가 생깁니다.

형식 안내가 없을 때:

형식 불일치 오류 — 사용자가 — 정해진 형식을 모른 채 자기 방식으로 적으면(2024.1.5, 24/01/05 등), 시스템이 인식하는 형식(YYYY-MM-DD)과 안 맞아 오류가 납니다. 사용자는 왜 오류인지 모르고 짜증나죠.

반복 시행착오 — 형식을 추측하며 여러 번 다시 적게 됩니다.

그래서 CP-392는 — 형식이 지정된 경우 그 입력 방식을 명확히 안내하라고 합니다:

형식 명시 입력 전에 정해진 형식을 분명히 보여줍니다. ‘YYYY-MM-DD’ 같은 패턴, ‘예: 2024-01-05’ 같은 예시, 또는 ‘연도 4자리-월 2자리-일 2자리’ 같은 설명으로요. 사용자가 어떤 방식으로 적어야 하는지 정확히 알게요.

항상 보이게 — 형식 안내를 — 항상 보이는 도움말 텍스트로 둡니다(플레이스홀더는 입력 시 사라지므로 보조, CP-386 정신).

구분자·자릿수까지 — 정해진 형식이 — 구분자가 ‘-’인지’.’인지, 자릿수가 어떤지(월을 ’1’로 쓰는지 ’01’로 쓰는지)까지 명확히요. 애매하면 사용자가 헷갈리죠.

CP-386과 CP-392의 관계. 둘은 거의 같은 방향(형식 안내)이지만 강조점이 다릅니다:

CP-386 — ‘도움말 텍스트를 활용하여’ 형식을 안내. 안내 방법(도움말 텍스트)을 강조.

CP-392 — ‘형식이 지정되어 있는 경우 입력 방식을 명확하게 안내’. 형식이 정해진 상황에서 명확성을 강조.

함께 보면 — 형식이 정해져 있으면(392), 도움말 텍스트 등으로(386) 그 형식을 명확히 안내하라는 거죠. 둘이 합쳐져 — 사용자가 정해진 형식을 알고 오류 없이 입력하게 합니다.

입력 보조도 함께. 안내(392)에 더해 — 입력 편의를 높이는 구현도 좋죠:

자동 포맷팅 — 사용자가 숫자만 치면 — 시스템이 구분자(‘-’)를 자동 삽입해 형식을 맞춰줍니다. 형식 신경 안 쓰고 숫자만 치게요.

날짜 선택기 — 달력에서 고르게 하면(CP-390 키보드 지원) — 형식 걱정이 아예 없죠. 직접 입력 시엔 형식 안내가 필수고요.

유연한 파싱 — 가능하면 — 여러 형식을 받아들여 시스템이 알아서 변환하면, 사용자 부담이 줄죠. 단, 한 형식만 받는다면 그 형식을 명확히 안내합니다.

오류 예방 정신. 형식 안내의 핵심은 — 오류가 나기 전에 형식을 알려 예방하는 것입니다(WCAG 3.3.2 레이블/ 설명). 사후 오류 메시지보다 — 사전 형식 안내가 사용자 친화적이죠.

이 규칙은 날짜 입력의 ’형식 명확성’을 담당합니다 — 정해진 형식을 명확히 안내해(392), 사용자가 올바른 방식으로 입력하고 형식 오류를 피하게 하죠. CP-386(도움말 텍스트)·CP-385(레이블)와 함께 날짜 입력의 안내 체계를 완성합니다. 날짜 입력 8개 규칙이 이로써 마무리됩니다.

정리하면 — 날짜 형식이 특정하게 지정돼 있는데 안 알리면 사용자가 다른 형식으로 적어 오류가 나므로, 그 입력 방식 (형식·구분자·자릿수)을 명확히 안내해 오류를 예방해야 합니다.

3. 점검 / 개선

무엇을 점검하나

형식 명시 — 지정된 형식(YYYY-MM-DD 등)이 명확히 안내되는가.

항상 보임 — 형식 안내가 항상 보이는가(플레이스홀더만 아님).

세부 명확 — 구분자·자릿수까지 분명한가. 오류 전 예방 안내인가.

개선 방향

지정 형식을 명확히 안내(패턴·예시·설명). 항상 보이는 도움말 텍스트.

자동 포맷팅·날짜 선택기·유연한 파싱으로 입력 보조. 사전 예방 안내.

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

역할	책임
콘텐츠/UX	형식 안내 문구 작성
퍼블리셔/개발	형식 안내·자동 포맷팅 구현

기관 유형	CP-392 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (형식 지정 날짜 입력 시)

특정 날짜 형식을 받는 폼을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 지정된 형식(YYYY-MM-DD 등)이 명확히 안내되나요?

□ 형식 안내가 항상 보이나요(플레이스홀더만 아님)?

□ 구분자·자릿수까지 분명하고, 오류 전 예방 안내인가요?

❓ FAQ

Q1. CP-386과 뭐가 다른가요? 거의 같은 방향입니다. CP-386은 ‘도움말 텍스트 활용’ 방법, CP-392는 ‘형식 지정 시 명확 안내’ 상황·명확성을 강조하죠. 함께 적용합니다. Q2. 자동 포맷팅을 하면 안내가 필요 없나요? 자동 포맷팅·날짜 선택기는 입력을 돕지만, 직접 입력을 받으면 형식 안내가 여전히 필요합니다. Q3. 여러 형식을 받으면요? 가능하면 유연하게 받는 게 사용자 친화적입니다. 단, 한 형식만 받는다면 그 형식을 명확히 안내하죠.

6. 마무리

CP-392의 메시지:

정해진 형식이면 콕 집어 알려주기 — 지정된 입력 방식을 명확하게 안내하라.

날짜 형식이 특정하게 지정됐는데 안 알리면 사용자가 다른 형식으로 적어 오류가 납니다. 그 입력 방식을 명확히 안내해 오류를 예방하는 게 핵심이죠. 이로써 날짜 입력 8개 규칙이 마무리됩니다. 다음 편부터는 텍스트 영역(Textarea)입니다.

다음 편 예고 ▶ 「513. (CP-393) 텍스트 영역 — 여러 줄의 긴 텍스트를 입력받는 데 사용하고 있다.」

ViewCheck는 지정된 날짜 입력 형식이 명확히 안내되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 날짜 입력 필드(Date input) 가이드 — https://www.krds.go.kr/html/site/component/component_38.html

WCAG 2.1 SC 3.3.2 Labels or Instructions — https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

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

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