이 날이 무슨 요일인지

KRDS CP-164 — 달력 그리드에 요일 정보를 제공하고 있다.

0. 들어가며 — 숫자만으론 요일을 모른다

이번 284편은 달력 그리드에 요일 정보를 제공하라는 규칙입니다.

달력은 날짜 숫자(1~31)를 7열 그리드로 배열합니다. 그런데 각 열이 무슨 요일인지(일·월·화…) 표시가 없으면 — 사용자는 ’15일이 무슨 요일이지?’를 알 수 없죠. 날짜를 고를 때 요일은 핵심 정보입니다(주말·평일, 업무일 등). CP-164는 그리드 상단에 요일 헤더를 제공해 각 날짜의 요일을 알게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 요일 정보 제공

CP-164 (컴포넌트 > 달력) “달력 그리드에 요일 정보를 제공하고 있다.”

달력의 7열 그리드 각 열이 무슨 요일인지를 표시하는 요일 헤더(일·월·화·수·목·금·토)를 제공해, 사용자가 각 날짜의 요일을 알 수 있게 하라는 뜻입니다.

정리: 달력 그리드에 요일 헤더를 제공하라. 이게 CP-164입니다.

2. 왜 요일 정보가 필요한가

달력에서 ’요일’은 날짜만큼 중요한 정보입니다. 사용자가 날짜를 고르거나 일정을 확인할 때, 그 날이 무슨 요일 인지가 결정에 직접 영향을 주죠:

주말/평일 구분 — 예약·방문은 보통 평일에만 가능하거나, 주말 일정이 다릅니다. ‘15일에 방문하자’ 할 때 그게 토요일이면 안 될 수 있죠.

업무일 계산 — 민원 처리 기간(○○ 영업일), 신청 마감 등은 요일·주말에 영향받습니다.

반복 일정 — ‘매주 화요일 행사’ 같은 정보는 요일 기준이죠.

날짜 숫자만 있고 요일이 없으면 — 사용자는 각 날짜가 무슨 요일인지 일일이 세거나 짐작해야 합니다. 그리드 배열만으로는 ’몇 번째 열인지’로 추측할 수 있지만, 요일 헤더가 없으면 그 열이 일요일 시작인지 월요일 시작인지도 불명확하죠(문화·설정에 따라 주 시작 요일이 다름).

그래서 CP-164는 그리드 상단(또는 적절한 위치)에 요일 헤더를 둡니다 — “일 월 화 수 목 금 토” 처럼 각 열의 요일을 명시하죠. 그러면 사용자는 어느 날짜든 위의 요일 헤더와 같은 열을 보고 즉시 요일을 압니다. ’15일’이 어느 열에 있는지 보고, 그 열 헤더가 ’수’면 ’15일은 수요일’이라고 바로 읽죠.

구현·접근성 고려:

주 시작 요일 — 한국은 보통 일요일 시작이 일반적이지만, 월요일 시작 달력도 있습니다. 헤더가 있으면 어느 쪽이든 명확해지죠. 사이트 내 일관성을 유지합니다.

주말 시각 구분 — 토·일요일 헤더와 날짜에 색·표시를 주어 주말을 구별하기도 합니다. 단 색만으로 구분하면 안 되고(CP-165) 텍스트(요일명) 자체가 정보를 담죠.

시맨틱 마크업 — 달력을 <table>로 만든다면 요일 헤더를 <th scope="col">로 마크업해, 스크린 리더가 각 날짜 셀을 읽을 때 해당 열의 요일(<th>)을 연결해 안내하게 합니다. 그러면 비시각 사용자도 “15일, 수요일” 처럼 요일을 함께 듣죠(CP-166의 스크린 리더 정보 전달과 연결). 요일 약어(“월”)만 쓰면 스크린 리더가 모호하게 읽을 수 있어, abbr이나 전체 요일명 보충을 고려합니다.

이 요일 헤더는 달력의 기본 골격입니다. 날짜 그리드(숫자) + 요일 헤더(열 의미)가 합쳐져야 달력이 ’언제가 무슨 요일인지’를 온전히 전하죠. 상태 표현(CP-161·162), 이벤트(CP-163)가 그 위에 얹히고, 색 무관 구분(CP-165)· 스크린 리더 전달(CP-166)이 접근성을 보강합니다.

정리하면 — 요일은 날짜 선택의 핵심 정보이므로, 그리드에 요일 헤더를 제공해 각 날짜의 요일을 명확히 알게 하고, 시맨틱 마크업으로 스크린 리더에도 전달해야 합니다.

3. 점검 / 개선

무엇을 점검하나

요일 헤더 존재 — 그리드에 요일(일~토) 헤더가 있는가.

주 시작 명확 — 주 시작 요일이 헤더로 분명하고 일관된가.

시맨틱 연결 — <th scope="col"> 등으로 스크린 리더가 날짜의 요일을 함께 읽는가.

개선 방향

그리드 상단에 요일 헤더 제공. 주말 구분은 색+텍스트로(색만 아님).

<table> 사용 시 요일 헤더를 <th scope="col">로 마크업.

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

역할	책임
디자이너	요일 헤더·주말 구분 표현 정의
퍼블리셔/개발	요일 헤더·시맨틱 마크업 구현

기관 유형	CP-164 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (달력 사용 시)

달력을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 그리드에 요일 헤더(일~토)가 있나요?

□ 주 시작 요일이 헤더로 분명하고 일관된가요?

□ <th scope="col"> 등으로 스크린 리더가 날짜의 요일을 함께 읽나요?

❓ FAQ

Q1. 그리드 배열만으로 요일을 알 수 있지 않나요? 주 시작 요일이 불명확하면 추측해야 합니다. 헤더가 있어야 확실합니다. Q2. 주 시작은 일요일인가 월요일인가요? 한국은 보통 일요일 시작이 일반적이지만, 어느 쪽이든 헤더로 명확히 하고 사이트 내 일관성을 지킵니다. Q3. 스크린 리더에도 요일이 전달되나요? <th scope="col">로 요일 헤더를 마크업하면 날짜 셀을 읽을 때 요일이 연결돼 안내됩니다(CP-166).

6. 마무리

CP-164의 메시지:

이 날이 무슨 요일인지 — 달력 그리드에 요일 헤더를 제공하라.

요일은 날짜 선택의 핵심 정보(주말/평일, 업무일 등)입니다. 그리드에 요일 헤더가 없으면 사용자가 요일을 추측 해야 하죠. 헤더로 각 열의 요일을 명시하고, <th scope="col">로 스크린 리더에도 전달합니다. 다음 편은 색에만 의존하지 않는 구분입니다.

다음 편 예고 ▶ 「285. (CP-165) 날짜 및 관련 정보의 의미를 색상으로만 구분하지 않고 있다.」

ViewCheck는 달력 그리드에 요일 정보가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 달력(Calendar) 가이드 — https://www.krds.go.kr/html/site/component/component_14.html

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

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