작은 칸에 다 못 담으면 다른 수단을

KRDS CP-163 — 이벤트 정보가 복잡한 경우 정보를 손실 없이 확인할 수 있는 수단을 제공하고 있다.

0. 들어가며 — 날짜 칸은 너무 작다

이번 283편은 이벤트 정보가 복잡한 경우 손실 없이 확인할 수 있는 수단을 제공하라는 규칙입니다.

달력의 날짜 칸은 작습니다. 그 안에 행사·일정 정보를 다 담으려 하면 — 글자가 잘리거나, 여러 이벤트가 겹쳐 일부만 보이거나, 점 하나로 축약돼 내용을 알 수 없죠. CP-163은 작은 칸에 다 못 담는 복잡한 이벤트 정보를, 다른 수단(상세 보기·목록·팝오버 등)으로 손실 없이 확인하게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 손실 없는 확인 수단

CP-163 (컴포넌트 > 달력) “이벤트 정보가 복잡한 경우 정보를 손실 없이 확인할 수 있는 수단을 제공하고 있다.”

날짜 칸에 다 표시하기 어려운 복잡한 이벤트 정보를, 별도 수단(상세 화면·목록·팝오버 등)으로 빠짐없이 확인할 수 있게 제공하라는 뜻입니다.

정리: 복잡한 이벤트 정보는 손실 없이 확인할 다른 수단을 제공하라. 이게 CP-163입니다.

2. 왜 손실 없는 확인 수단이 필요한가

달력의 날짜 칸은 본질적으로 좁습니다 — 한 달(28~31일)을 한 화면에 그리드로 담으니, 각 날짜 칸은 작을 수밖에 없죠. 그런데 그 작은 칸에 표시해야 할 이벤트 정보가 복잡해지는 경우가 많습니다:

하루에 여러 이벤트 — 한 날에 행사·접수·마감이 여러 개 겹치는 경우. 칸에 다 못 넣어 1~2개만 보이고 나머지는 잘리죠(“외 3건” 식).

긴 이벤트 제목 — “○○ 정책 설명회 및 주민 의견 수렴 간담회” 같은 긴 제목은 작은 칸에서 잘립니다.

부가 정보 — 시간·장소·대상·신청 방법 등은 칸에 도저히 안 들어가죠.

이때 칸에 보이는 것만으론 정보가 손실됩니다 — 사용자는 ‘이 날 무슨 행사가 있긴 한데, 정확히 뭐고 몇 시 인지’ 모르죠. 달력이 ’일정이 있다’는 신호만 주고 정작 내용은 못 전하면, 도구로서 불완전합니다.

그래서 CP-163은 — 칸에 다 못 담는 복잡한 정보를 다른 수단으로 완전히 확인하게 하라고 합니다. 흔한 방법:

상세 보기/팝오버 — 날짜를 클릭/탭하면 그 날의 모든 이벤트가 펼쳐지는 팝오버·모달·상세 패널. 칸엔 요약 (점·개수)만, 클릭하면 전체를요.

이벤트 목록 보기 — 달력(월 그리드) 외에 ‘목록(아젠다) 보기’ 전환을 제공해, 이벤트들을 시간순 목록으로 상세히 보게 함. 그리드는 한눈 파악, 목록은 상세 확인으로 역할 분담.

일별/주별 상세 뷰 — 특정 날짜·주를 확대해 더 많은 정보를 보여주는 뷰.

핵심은 — 달력 칸은 ‘요약·신호’ 역할만 하고, 클릭/전환으로 전체 정보에 손실 없이 도달하는 경로를 보장하는 것입니다. 칸에 억지로 다 욱여넣어 잘리게 하느니, 요약은 깔끔하게 두고 상세는 별도 수단으로 빠짐없이 제공하죠 (콘텐츠 내 탐색 CP-109의 ’요약은 가볍게, 상세는 따로’와 같은 정신).

접근성 측면. 이 ’다른 수단’도 모든 사용자가 쓸 수 있어야 합니다 — 키보드로 날짜를 열어 상세를 보고 (CP-167), 스크린 리더가 그 상세를 읽고(CP-166), 팝오버·모달이 접근성을 갖춰야(초점 관리 등) 하죠. 시각 사용자에게 ’클릭하면 상세’가 보이듯, 비시각 사용자도 그 상세에 도달·확인할 수 있어야 손실이 없습니다.

정리하면 — 작은 날짜 칸의 한계를 인정하고, 복잡한 이벤트 정보는 상세 보기·목록·확대 뷰 같은 수단으로 손실 없이 확인하게 해, 달력이 정보를 온전히 전달하는 도구가 되게 합니다.

3. 점검 / 개선

무엇을 점검하나

손실 여부 — 칸에 안 들어가는 이벤트 정보가 잘려 사라지지 않는가.

확인 수단 — 클릭 상세·목록 보기·확대 뷰 등으로 전체 정보에 도달하는가.

접근성 — 그 확인 수단이 키보드·스크린 리더로도 쓰이는가.

개선 방향

칸엔 요약(점·개수), 클릭 시 팝오버·상세 패널로 전체 이벤트 표시.

‘목록(아젠다) 보기’ 전환 제공. 상세 수단에 접근성(초점·낭독) 적용.

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

역할	책임
기획/UX	요약-상세 분리·확인 수단 설계
퍼블리셔/개발	상세 보기·목록·접근성 구현

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

행사·일정 정보를 달력에 표시하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 칸에 안 들어가는 이벤트 정보가 잘려 사라지지 않나요?

□ 클릭 상세·목록 보기 등으로 전체 정보에 도달하나요?

□ 그 확인 수단이 키보드·스크린 리더로도 쓰이나요?

❓ FAQ

Q1. 칸에 다 표시하면 안 되나요? 작은 칸에 욱여넣으면 잘리거나 어수선해집니다. 칸은 요약, 상세는 별도 수단이 깔끔합니다. Q2. 어떤 수단이 좋나요? 날짜 클릭 시 팝오버·상세 패널, 목록(아젠다) 보기 전환, 일/주 확대 뷰 등입니다. Q3. 스크린 리더 사용자는요? 상세 수단을 키보드로 열고 내용을 낭독받을 수 있어야 손실이 없습니다 (CP-166·167).

6. 마무리

CP-163의 메시지:

작은 칸에 다 못 담으면 다른 수단을 — 복잡한 이벤트 정보를 손실 없이 확인하게 하라.

달력 칸은 좁아 복잡한 이벤트를 다 담으면 잘립니다. 칸은 요약·신호만 주고, 클릭 상세·목록 보기로 전체 정보에 손실 없이 도달하게 해야 하죠. 그 수단도 키보드·스크린 리더로 쓸 수 있어야 합니다. 다음 편은 달력 그리드의 요일 정보입니다.

다음 편 예고 ▶ 「284. (CP-164) 달력 그리드에 요일 정보를 제공하고 있다.」

ViewCheck는 복잡한 이벤트 정보를 손실 없이 확인할 수단이 제공되는지를 진단합니다.

📚 참고 출처

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

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

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