다른 상태는 다르게 보여라

KRDS CP-162 — 날짜의 여러 가지 상태 정보가 서로 명확하게 구분되도록 표현하고 있다.

0. 들어가며 — 헷갈리지 않게 구별

이번 282편은 앞 편(CP-161)의 짝입니다. 날짜의 여러 상태 정보가 서로 명확하게 구분되도록 표현하라는 규칙 이죠.

CP-161이 ‘같은 상태는 같게(일관성)’였다면, CP-162는’다른 상태는 다르게(구분성)’입니다. 달력에는 오늘· 선택·가능·마감·공휴일 등 여러 상태가 있는데, 이들이 비슷하게 보이면 — ‘이 날이 선택된 건가, 오늘인가?’ 헷갈 리죠. 각 상태가 서로 또렷이 구별돼야 사용자가 정확히 읽습니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 상태 간 명확 구분

CP-162 (컴포넌트 > 달력) “날짜의 여러 가지 상태 정보가 서로 명확하게 구분되도록 표현하고 있다.”

달력의 여러 날짜 상태(오늘·선택·가능·마감·공휴일 등)를, 서로 시각적으로 또렷이 구별되게 표현해 사용자가 혼동 없이 각 상태를 인지하게 하라는 뜻입니다.

정리: 서로 다른 날짜 상태가 명확히 구별되게 표현하라. 이게 CP-162입니다.

2. 왜 상태 간 구분이 명확해야 하나

달력에는 여러 상태가 공존합니다 — 한 화면에 ‘오늘’, ‘선택된 날’, ‘예약 가능한 날’, ‘마감된 날’, ‘공휴일’, ‘행사 있는 날’이 동시에 표시될 수 있죠. 사용자가 날짜를 정확히 고르려면, 이 상태들이 서로 헷갈리지 않게 구별돼야 합니다. CP-161(일관성)이 ’같은 상태를 같게’ 했다면, CP-162는 ‘다른 상태를 다르게’ 해서 상태 체계를 완성하죠.

구분이 모호할 때의 문제. 상태 표시가 서로 비슷하면 사용자는 혼동합니다:

’오늘’은 옅은 회색 배경, ’선택된 날’은 약간 더 진한 회색 배경이면 — 둘이 거의 같아 보여 어느 게 선택된 건지 모르죠.

’예약 가능’과 ’마감’이 비슷한 색이면 — 마감된 날을 가능한 날로 착각해 클릭했다 실패합니다. 이건 단순 혼동을 넘어 잘못된 행동(마감일 신청 시도)으로 이어지죠.

’공휴일’과 ’행사 있는 날’이 둘 다 빨간 표시면 — 의미가 섞입니다.

특히 달력은 ’날짜 선택’이라는 결과가 분명한 작업(예약·신청)에 쓰여, 상태 혼동이 곧 실수·실패로 직결되죠. 그래서 각 상태는 충분히 다른 시각 단서로 구별해야 합니다.

구분의 수단. 상태를 구별하려면 여러 시각 속성을 활용합니다:

형태 — 테두리(오늘), 채운 배경(선택), 취소선·흐림(마감), 밑줄·점(행사) 등 서로 다른 형태.

색 — 가능/마감/공휴일에 다른 색. 단 색만으로 구분하면 안 됩니다(CP-165 — 색 무관 구분).

위치·아이콘 — 날짜 칸 모서리에 점·아이콘 표시 등.

핵심은 — 각 상태가 ‘확실히 다른’ 단서를 갖되, 색에만 의존하지 않는 것입니다. 색맹 사용자도 형태·아이콘으로 구별할 수 있어야 하죠(CP-165와 직접 연결). 예를 들어 ’마감’은 색만 회색으로 바꾸는 게 아니라 + 취소선이나 흐림 효과를 더해, 색을 못 봐도 ’이 날은 못 쓴다’를 알게 합니다.

충돌하는 상태의 처리. 한 날짜가 여러 상태를 동시에 가질 수도 있습니다 — ’오늘’이면서 ’선택된 날’이면서 ’행사 있는 날’처럼요. 이때 여러 표시가 겹쳐도 각각 구별되게 처리해야 하죠(예: 오늘 테두리 + 선택 배경 + 행사 점이 함께 보이게). 우선순위를 정하거나 표시를 조합해, 복합 상태도 읽히게 합니다.

이 규칙은 CP-161(일관)·CP-165(색 무관)·CP-166(스크린 리더 전달)과 한 묶음입니다 — 같은 상태는 일관되게, 다른 상태는 명확히 구분되게, 색만이 아니라 형태로, 시각·비시각 모두에게요. 함께 달력의 상태 정보를 모든 사용 자가 정확히 읽게 합니다.

3. 점검 / 개선

무엇을 점검하나

상태 구별 — 서로 다른 상태(오늘/선택/가능/마감 등)가 또렷이 구별되는가.

혼동 위험 — 비슷해 보여 착각할 수 있는 상태 쌍이 없는가(특히 가능/마감).

복합 상태 — 한 날짜의 여러 상태가 겹쳐도 각각 읽히는가.

개선 방향

상태마다 충분히 다른 시각 단서(형태·색·아이콘) 부여. 비슷한 표시 제거.

색에만 의존하지 않게 형태 단서 병행(CP-165). 복합 상태 표시 조합 설계.

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

역할	책임
디자이너	상태 간 구별되는 시각 체계 정의
퍼블리셔/개발	상태 구분·복합 상태 표시 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 서로 다른 상태가 또렷이 구별되나요?

□ 비슷해 보여 착각할 수 있는 상태 쌍(특히 가능/마감)이 없나요?

□ 한 날짜의 여러 상태가 겹쳐도 각각 읽히나요?

❓ FAQ

Q1. 색만 다르게 하면 안 되나요? 색만으론 색각 이상 사용자가 구별 못 합니다. 형태·아이콘 등 단서를 함께 씁니다(CP-165). Q2. 가능/마감 구분이 왜 특히 중요한가요? 마감일을 가능으로 착각해 신청을 시도하면 실패합니다. 결과가 분명한 만큼 구분이 명확해야 하죠. Q3. 한 날에 여러 상태가 겹치면요? 표시를 조합하거나 우선순위를 정해, 복합 상태도 각각 읽히게 합니다.

6. 마무리

CP-162의 메시지:

다른 상태는 다르게 보여라 — 날짜 상태들이 서로 명확히 구분되게 표현하라.

달력엔 여러 상태가 공존하므로, 이들이 비슷하면 혼동과 실수가 생깁니다. 특히 가능/마감 혼동은 신청 실패로 이어지죠. 각 상태에 충분히 다른 단서(형태·색·아이콘)를 주되 색에만 의존하지 않아야 합니다. CP-161(일관)과 함께 상태 체계를 완성하죠. 다음 편은 복잡한 이벤트 정보의 손실 없는 확인 수단입니다.

다음 편 예고 ▶ 「283. (CP-163) 이벤트 정보가 복잡한 경우 정보를 손실 없이 확인할 수 있는 수단을 제공하고 있다.」

ViewCheck는 달력의 날짜 상태들이 서로 명확하게 구분되는지를 진단합니다.

📚 참고 출처

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

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

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