어떻게 적는지 미리 알려주기

KRDS CP-386 — 도움말 텍스트를 활용하여 날짜 입력 형식을 안내하고 있다.

0. 들어가며 — 2024-01-05인지 24.1.5인지

이번 506편은 도움말 텍스트를 활용하여 날짜 입력 형식을 안내하라는 규칙입니다.

날짜는 — 적는 형식이 여러 가지죠(2024-01-05, 2024.1.5, 01/05/2024 등). 사용자가 어떤 형식으로 적어야 하는지 모르면 — 입력 오류가 납니다. CP-386은 도움말 텍스트로 입력 형식을 미리 안내하라고 규정합니다. 이번 편을 풀어 냅니다.

1. 원문 — 도움말 텍스트로 형식 안내

CP-386 (컴포넌트 > 날짜 입력 필드) “도움말 텍스트를 활용하여 날짜 입력 형식을 안내하고 있다.”

날짜 필드 옆에 도움말 텍스트(예: ‘YYYY-MM-DD’)를 두어, 사용자가 어떤 형식으로 날짜를 입력해야 하는지 미리 안내하라는 뜻입니다.

정리: 도움말 텍스트로 날짜 입력 형식을 미리 안내하라. 이게 CP-386입니다.

2. 왜 형식 안내인가

날짜는 — 적는 형식이 다양합니다:

2024-01-05 (YYYY-MM-DD), 2024.01.05, 2024년 1월 5일, 01/05/2024, 5/1/24 등.

사용자가 어떤 형식으로 적어야 하는지 모르면, 자기 방식대로 적다가 시스템이 인식하는 형식과 안 맞아 입력 오류가 납니다. 특히 월/일 순서(01/05가 1월 5일인지 5월 1일인지)는 나라·관습마다 달라 혼란스럽죠. 그래서 입력 전에 형식을 안내해야 합니다.

형식 안내가 없을 때:

시행착오 — 사용자가 — 형식을 모른 채 적고, 오류가 나면 다시 적습니다. ’2024.1.5’를 적었는데 ’YYYY-MM-DD’를 원하면 오류죠. 여러 번 시도하며 짜증납니다.

잘못된 입력 — 형식을 잘못 알면 — 엉뚱한 날짜가 들어갑니다(01/05를 5월 1일로 오해 등).

그래서 CP-386은 — 도움말 텍스트로 형식을 안내하라고 합니다:

형식 예시 표시 날짜 필드 옆(또는 아래)에 입력 형식을 보여주는 도움말 텍스트를 둡니다. ‘YYYY-MM-DD’ 같은 형식 패턴이나, ‘예: 2024-01-05’ 같은 실제 예시로요. 사용자가 적기 전에 ’아, 이렇게 적으면 되는구나’를 알게요.

플레이스홀더 보조 입력 필드의 플레이스홀더에 ’YYYY-MM-DD’를 흐리게 보여줄 수도 있죠. 단, 플레이스홀더는 입력 시 사라지므로 항상 보이는 도움말 텍스트가 더 안전합니다(셀렉트 레이블 CP-300 정신).

입력 전 안내가 핵심. 형식 안내의 핵심은 오류가 나기 전에 미리 알려주는 것입니다. 오류 메시지로 사후에 ’형식이 틀렸습니다’라고 하기보다 처음부터 형식을 보여줘 오류를 예방하죠. 이는 ’오류 예방’이라는 사용성·접근성 원칙(WCAG 3.3.2 레이블 또는 설명)입니다.

CP-392와의 관계. CP-386(도움말 텍스트로 형식 안내)과 CP-392(형식 지정 시 입력 방식 명확 안내)는 거의 같은 방향이죠. CP-386은 ’도움말 텍스트 활용’이라는 방법을, CP-392는 ’형식이 지정된 경우 명확한 안내’라는 요구를 강조합니다. 둘 다 입력 형식을 사용자에게 분명히 알리라는 정신이고요(CP-392에서 더 다룹니다).

자동 포맷팅도 고려. 안내(386)에 더해 입력하면 자동으로 형식을 맞춰주는(예: 숫자만 치면 ‘-’ 자동 삽입) 구현도 도움이 되죠. 또는 날짜 선택기(달력 UI)로 형식 걱정 없이 고르게 할 수도 있습니다. 다만 직접 입력을 받는다면 형식 안내가 필수입니다.

이 규칙은 날짜 입력의 ’형식 오류 예방’을 담당합니다 — 도움말 텍스트로 입력 형식을 미리 안내해(386), 사용자가 올바른 형식으로 적고 오류를 줄이게 하죠. 레이블(CP-385)이 ’무슨 날짜’라면, 형식 안내(386)는 ’어떻게 적는지’입니다.

정리하면 — 날짜 형식이 다양해 사용자가 모르면 입력 오류가 나므로, 도움말 텍스트(예: YYYY-MM-DD)로 입력 형식을 미리 안내해 오류를 예방해야 합니다.

3. 점검 / 개선

무엇을 점검하나

형식 안내 — 날짜 필드에 입력 형식(YYYY-MM-DD 등) 도움말 텍스트가 있는가.

입력 전 표시 — 형식 안내가 항상 보이는가(플레이스홀더만으로 대체 안 함).

예방 중심 — 오류 사후 메시지보다 입력 전 형식 안내로 예방하는가.

개선 방향

날짜 필드에 형식 도움말 텍스트(‘YYYY-MM-DD’ 또는 ‘예: 2024-01-05’) 추가.

플레이스홀더 보조 + 항상 보이는 도움말. 자동 포맷팅·날짜 선택기 고려.

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

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

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

날짜 직접 입력을 받는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 날짜 필드에 입력 형식(YYYY-MM-DD 등) 도움말 텍스트가 있나요?

□ 형식 안내가 항상 보이나요(플레이스홀더만으로 대체 안 함)?

□ 오류 사후 메시지보다 입력 전 형식 안내로 예방하나요?

❓ FAQ

Q1. 플레이스홀더에 형식을 넣으면 안 되나요? 보조로는 좋지만 입력 시 사라집니다. 항상 보이는 도움말 텍스트가 더 안전하죠. Q2. 날짜 선택기(달력)를 쓰면 형식 안내가 필요 없나요? 달력으로 고르면 형식 걱정이 없죠. 단, 직접 입력도 받으면 형식 안내가 필수입니다. Q3. CP-392와 뭐가 다른가요? 거의 같은 방향입니다. CP-386은 ‘도움말 텍스트 활용’ 방법, CP-392는 ‘형식 지정 시 명확 안내’ 요구를 강조하죠.

6. 마무리

CP-386의 메시지:

어떻게 적는지 미리 알려주기 — 도움말 텍스트로 날짜 입력 형식을 안내하라.

날짜 형식이 다양해 모르면 입력 오류가 납니다. 도움말 텍스트(YYYY-MM-DD 등)로 형식을 미리 안내해 오류를 예방하는 게 핵심이죠. 다음 편은 원본 형식과의 일치입니다.

다음 편 예고 ▶ 「507. (CP-387) 문서에 표시된 날짜를 정확하게 요청할 때 입력 필드의 구성을 원본 형식과 일치 시켜 제공하고 있다.」

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컴포넌트,웹표준