같은 상태면 같은 표시

KRDS CP-161 — 날짜의 여러 가지 상태, 정보의 범례는 일관성 있게 표현하고 있다.

0. 들어가며 — 달력 그룹의 첫 규칙

이번 281편부터 달력(Calendar) 그룹(CP-161~168, 8개)으로 들어갑니다. 첫 규칙은 날짜의 여러 상태와 정보의 범례를 일관성 있게 표현하라는 내용이죠.

달력은 단순히 날짜만 보여주지 않습니다 — 오늘, 선택된 날, 예약 가능/마감, 공휴일, 이벤트 있는 날 등 여러 상태를 표시하죠. 이 상태들을 표시하는 방식(색·아이콘·표시)이 일관돼야, 사용자가 한 번 익힌 규칙으로 모든 날짜를 읽습니다. CP-161은 상태 표현과 범례의 일관성을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 상태·범례 일관 표현

CP-161 (컴포넌트 > 달력) “날짜의 여러 가지 상태, 정보의 범례는 일관성 있게 표현하고 있다.”

달력에서 날짜의 여러 상태(오늘·선택·가능·마감·공휴일 등)와 그것을 설명하는 범례를, 일관된 시각 규칙으로 표현 하라는 뜻입니다.

정리: 날짜 상태와 범례를 일관된 규칙으로 표현하라. 이게 CP-161입니다.

2. 왜 상태·범례가 일관돼야 하나

달력은 정보 밀도가 높은 컴포넌트입니다. 작은 날짜 칸들에 여러 상태가 색·표시·아이콘으로 겹쳐 표현되죠. 사용 자가 이 복잡한 정보를 빠르게 읽으려면 — ’이 색/표시는 이 상태’라는 일관된 규칙이 있어야 합니다. 규칙이 일관되면 한 번 익혀 모든 날짜에 적용하지만, 제각각이면 매번 해석해야 하죠.

① 상태 표현의 일관성. 같은 상태는 항상 같은 방식으로 표시해야 합니다. 예를 들어 ‘예약 가능한 날’을 어떤 곳은 초록 점, 어떤 곳은 파란 배경으로 표시하면 — 사용자는 둘이 같은 상태인지 다른 상태인지 헷갈립니다. ’오늘’ 은 늘 같은 표시(예: 굵은 테두리), ’선택된 날’은 늘 같은 표시(예: 채운 배경), ’마감된 날’은 늘 같은 표시(예: 흐림+취소선)처럼 — 상태마다 고유하고 일관된 시각 규칙을 정하고 모든 날짜에 적용하죠. 같은 달력 안에서, 그리고 사이트 내 여러 달력에서 이 규칙이 통일돼야 합니다.

② 범례의 일관성·존재. 달력에 여러 상태가 색·표시로 구분되면, 그 의미를 설명하는 범례(legend) 가 필요 합니다 — “초록: 예약 가능 / 빨강: 마감 / ★: 행사 있음” 식이죠. 이 범례가 있어야 사용자가 각 표시의 의미를 알고 날짜를 해석합니다. 범례 없이 색·표시만 있으면 사용자는 ‘이 빨간 날은 뭐지? 공휴일인가 마감인가?’ 추측 해야 하죠. 그리고 범례의 표현이 실제 달력의 표현과 일치해야 합니다 — 범례엔 ’초록 점’이라 했는데 달력엔 ’초록 배경’이면 매칭이 안 되죠. 범례와 실제 표시가 같은 시각 언어를 써야 합니다.

③ 인지 부담 감소. 일관된 상태·범례는 사용자의 인지 부담을 크게 줄입니다. 달력은 ’날짜 선택’이라는 빈번한 작업(예약, 신청, 일정 확인)에 쓰이는데, 매번 표시 의미를 해석해야 하면 작업이 느리고 실수가 생기죠. 일관성이 있으면 직관적으로 빠르게 날짜를 읽고 고릅니다.

이 규칙은 다음 편 CP-162(상태가 서로 명확히 구분)와 짝을 이룹니다 — CP-161이 ‘같은 상태는 같게(일관성)’, CP-162가 ’다른 상태는 다르게(구분성)’로, 함께 상태 표현 체계를 완성하죠. 일관되면서도 서로 구별돼야 사용자가 정확히 읽습니다. 그리고 색에만 의존하지 않고(CP-165), 스크린 리더에도 전달돼야(CP-166) 모든 사용자가 상태를 인지합니다 — 이어지는 규칙들이 그 접근성을 다룹니다.

정리하면 — 날짜 상태와 범례를 일관된 시각 규칙으로 표현해, 사용자가 한 번 익힌 규칙으로 복잡한 달력 정보를 빠르게 읽게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

상태 일관성 — 같은 상태(오늘·선택·가능·마감 등)가 항상 같은 방식으로 표시되는가.

범례 존재·일치 — 상태를 설명하는 범례가 있고, 범례 표현이 실제 표시와 일치하는가.

달력 간 일관성 — 사이트 내 여러 달력에서 표현 규칙이 통일됐는가.

개선 방향

상태별 시각 규칙(색·표시·아이콘)을 토큰화해 일관 적용.

범례를 제공하고 실제 달력 표시와 동일한 시각 언어 사용.

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

역할	책임
디자이너	상태별 시각 규칙·범례 정의
퍼블리셔/개발	일관 표현·범례 구현

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

예약·신청·일정 등 상태 있는 달력을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 같은 상태가 항상 같은 방식으로 표시되나요?

□ 상태를 설명하는 범례가 있고, 실제 표시와 일치하나요?

□ 사이트 내 여러 달력에서 표현 규칙이 통일됐나요?

❓ FAQ

**Q1. 날짜의 ‘상태’가 뭔가요?** 오늘, 선택된 날, 예약 가능/마감, 공휴일, 행사 있는 날 등 날짜가 가질 수 있는 여러 의미입니다. Q2. 범례가 꼭 필요한가요? 색·표시로 상태를 구분하면, 그 의미를 설명하는 범례가 있어야 사용자가 해석할 수 있습니다. Q3. CP-162와 뭐가 다른가요? CP-161은 ’같은 상태는 같게(일관성)’, CP-162는 ‘다른 상태는 다르게(구분성)’ 입니다. 함께 상태 체계를 이룹니다.

6. 마무리

CP-161의 메시지:

같은 상태면 같은 표시 — 날짜 상태와 범례를 일관되게 표현하라.

달력은 여러 상태가 겹친 고밀도 정보입니다. 같은 상태를 같은 시각 규칙으로 표시하고 범례로 의미를 설명하면, 사용자가 한 번 익힌 규칙으로 빠르게 읽죠. 일관성이 인지 부담을 줄입니다. 다음 편은 상태들이 서로 명확히 구분되게 하는 규칙입니다.

다음 편 예고 ▶ 「282. (CP-162) 날짜의 여러 가지 상태 정보가 서로 명확하게 구분되도록 표현하고 있다.」

ViewCheck는 달력의 날짜 상태·범례가 일관되게 표현되는지를 진단합니다.

📚 참고 출처

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

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

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