언제부터 언제까지

KRDS BP-098 — 날짜, 시간을 기준으로 한 필터링은 범위를 입력할 수 있도록 제공하고 있다.

0. 들어가며 — 특정 기간만 보고 싶은데

이번 664편은 날짜, 시간을 기준으로 한 필터링은 범위를 입력할 수 있도록 제공하라는 규칙입니다.

게시글·자료를 — 특정 기간(예: 3월 1일~3월 31일)으로 좁히고 싶은데, 날짜 범위를 못 넣으면 불편하죠. BP-098은 날짜· 시간 필터에 범위 입력을 제공하라고 규정합니다. 날짜 입력 컴포넌트(CP)의 필터 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 날짜·시간 범위 입력

BP-098 (기본 패턴 > 필터링·정렬) “날짜, 시간을 기준으로 한 필터링은 범위를 입력할 수 있도록 제공하고 있다.”

날짜·시간 필터에 범위(시작~끝)를 입력할 수 있게 제공하라는 뜻입니다.

정리: 날짜·시간 필터에 범위 입력을 제공하라. 이게 BP-098입니다.

2. 왜 범위 입력인가

날짜·시간은 흔한 필터 기준입니다(등록일·신청일·기간). 사용자는 보통 ‘특정 시점’이 아니라 특정 기간으로 좁히고 싶어 하죠. 예: ’3월 한 달’, ‘최근 1주일’, ‘2026년 상반기’. BP-098은 범위 입력을 요구합니다.

범위 입력이 없을 때의 문제:

기간 지정 불가 날짜 필터가 단일 날짜만 받으면(또는 ‘오늘/이번 주’ 고정 옵션만 있으면), 사용자는 원하는 기간을 정확히 못 좁힙니다. ’3월 5일~3월 20일’을 못 넣죠.

여러 번 시도 단일 날짜로만 좁히려면, 일일이 여러 번 걸러야 합니다. 비효율적이죠.

불편 기간으로 보고 싶은데 범위를 못 넣으면, 사용자는 답답합니다.

그래서 BP-098은 — 범위 입력을 제공하라고 합니다:

시작~끝 날짜 날짜 필터에 시작일과 종료일을 입력하게 합니다. ’2026-03-01 ~ 2026-03-31’처럼요. 사용자가 원하는 기간을 정확히 지정하죠.

날짜 선택 도구(데이트픽커) 날짜를 직접 타이핑 + 달력(date picker)으로 고르게요(날짜 입력 컴포넌트 CP-385~ 392 연계). 시작·끝을 달력에서 범위로 선택하게 하면 편하죠.

빠른 범위 프리셋(권장) 자주 쓰는 범위는 프리셋 버튼으로요: ‘최근 1주일’, ‘1개월’, ‘3개월’, ‘올해’. 사용자가 한 번에 고르게요. 프리셋 + 직접 범위 입력을 함께 제공하면 좋죠.

유효성 시작일이 종료일보다 늦으면 안 되죠. 검증해 피드백을 줍니다(오류 그룹). 미래 날짜 제한 등도요.

날짜 입력 컴포넌트(CP)와의 관계. 날짜 입력 컴포넌트 규칙(CP-385~392)이 — 날짜 입력 자체의 형식·달력·접근성이었 다면, BP-098은 — 필터 맥락에서 날짜를 범위로 받으라는 패턴 요구입니다. 컴포넌트(어떻게 입력) + 패턴(범위로)이죠.

접근성. 날짜 범위 입력도 키보드·스크린 리더로 접근 가능해야 합니다. 직접 타이핑 입력을 허용하고(달력만 강제 안 함), 레이블(‘시작일’, ‘종료일’)을 명확히요(BP-074, BP-092).

이 규칙은 필터링·정렬의 ’날짜 범위 필터’를 담당합니다 — 날짜·시간 필터에 범위 입력을 제공해(098), 사용자가 원하는 기간을 정확히 좁히게 하죠.

정리하면 — 날짜·시간으로 특정 기간을 좁히려는데 단일 날짜만 받으면 불편하므로, 시작~끝 범위 입력(달력 + 직접 입력 + 프리셋, 유효성 검증)을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

범위 입력 — 날짜·시간 필터에 시작~끝 범위 입력이 있는가.

선택 도구·프리셋 — 달력(데이트픽커) + 빠른 범위 프리셋이 있는가.

유효성·접근성 — 시작>끝 검증, 키보드·레이블 접근성이 있는가.

개선 방향

시작~끝 날짜 범위 입력(달력 + 직접 타이핑). ‘최근 1주/1개월’ 프리셋.

시작>끝 검증·피드백. 키보드 접근, 레이블(‘시작일’·‘종료일’).

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

역할	책임
기획/UX	날짜 범위 필터 설계
퍼블리셔/개발	데이트픽커·범위 구현

기관 유형	BP-098 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (날짜 필터 사용 시)

날짜·시간 필터를 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 날짜·시간 필터에 시작~끝 범위 입력이 있나요?

□ 달력(데이트픽커) + 빠른 범위 프리셋이 있나요?

□ 시작>끝 검증, 키보드·레이블 접근성이 있나요?

❓ FAQ

Q1. 단일 날짜만 받으면 안 되나요? 사용자는 보통 특정 기간(‘3월 한 달’)으로 좁히려 합니다. 단일 날짜만 받으면 정확히 못 좁히죠. 시작~끝 범위가 필요합니다. Q2. 프리셋은 뭔가요? ‘최근 1주일’, ‘1개월’, ‘올해’ 같은 자주 쓰는 범위 버튼입니다. 한 번에 고르게요. 프리셋 + 직접 범위 입력을 함께 제공하면 좋죠. Q3. 달력만 제공하면 되나요? 직접 타이핑도 허용해야 합니다. 달력만 강제하면 키보드 사용자가 불편하죠. 레이블 (‘시작일’·‘종료일’)도 명확히 줍니다(접근성).

6. 마무리

BP-098의 메시지:

언제부터 언제까지 — 날짜·시간 필터에 범위 입력을 제공하라.

특정 기간을 좁히려는데 단일 날짜만 받으면 불편합니다. 시작~끝 범위 입력(달력·직접 입력·프리셋, 유효성)을 제공해 원하는 기간을 정확히 좁히게 하는 게 핵심이죠. 다음 편은 필터 일괄 해제입니다.

다음 편 예고 ▶ 「665. (BP-099) 적용된 필터링 옵션을 한 번에 해제할 수 있는 기능을 제공하고 있다.」

ViewCheck는 날짜·시간 필터에 범위 입력이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 필터링·정렬 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_10.html

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

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