지금 어느 날짜에 있는지 보여라

KRDS CP-168 — 달력에서 제공되는 모든 기능에 키보드 초점이 명확하게 표시되도록 하고 있다.

0. 들어가며 — 달력 그룹의 마지막

이번 288편은 달력 그룹(CP-161~168, 8개)의 마지막 규칙입니다. 달력의 모든 기능에 키보드 초점이 명확하게 표시되게 하라는 내용이죠.

앞 편(CP-167)에서 화살표 키로 날짜를 이동하게 했습니다. 그런데 화살표로 날짜를 옮겨도, 지금 어느 날짜에 초점이 있는지 시각적으로 안 보이면 사용자는 길을 잃죠. 그리드는 날짜 칸이 많아 초점이 안 보이면 더 막막 합니다. CP-168은 초점 위치를 또렷이 표시하라고 규정하며 달력 8개를 마무리합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 키보드 초점 명확 표시

CP-168 (컴포넌트 > 달력) “달력에서 제공되는 모든 기능에 키보드 초점이 명확하게 표시되도록 하고 있다.”

달력의 모든 기능(날짜·월/연 이동 버튼 등)에 키보드 초점이 갔을 때, 그 초점 위치가 시각적으로 또렷이 보이게 표시하라는 뜻입니다.

정리: 달력의 키보드 초점이 어디 있는지 명확히 보이게 하라. 이게 CP-168입니다.

2. 왜 달력의 초점 표시가 중요한가

초점 표시는 키보드 사용자의 ‘마우스 커서’입니다(구조화 목록 CP-149에서 본 원리). 키보드로 초점을 이동하며 조작하는데, ’지금 초점이 어디 있는지’ 안 보이면 위치를 잃고 잘못 실행하죠. 달력에서는 이 초점 표시가 특히 더 중요합니다 — 두 가지 이유에서요.

① 그리드의 밀도. 달력은 28~31개의 날짜 칸이 7열 그리드로 빽빽이 모인 고밀도 컴포넌트입니다. 화살표 키로 날짜 사이를 이동할 때(CP-167), 초점이 안 보이면 — 수십 개 칸 중 ‘지금 어느 날에 있는지’ 전혀 알 수 없죠. 일반 버튼 몇 개라면 초점이 흐려도 어느 정도 추측하지만, 비슷하게 생긴 날짜 칸들이 격자로 모여 있으면 초점 표시 없이는 완전히 길을 잃습니다. 그래서 현재 초점 날짜가 다른 날짜와 또렷이 구별되게 표시돼야 하죠.

② 상태 표시와의 구별. 달력 날짜 칸은 이미 여러 시각 표시를 갖습니다 — 오늘(테두리), 선택됨(배경), 공휴일 (색), 마감(흐림) 등(CP-161·162). 여기에 키보드 초점 표시가 추가되는데, 이 초점 표시가 기존 상태 표시들과 혼동되지 않게 구별돼야 합니다. 예를 들어 ‘선택된 날’의 배경 강조와 ’초점 받은 날’의 표시가 똑같으면 — 키보드 사용자는 ’내가 이 날을 선택한 건지, 그냥 초점만 와 있는 건지’ 헷갈리죠. 초점은 ‘지금 여기 있다’(아직 선택 전), 선택은 ‘이 날을 골랐다’(확정)로 의미가 다르므로, 시각적으로 구별돼야 합니다. 보통 초점은 또렷한 외곽선(focus ring)으로, 선택은 채운 배경으로 구별하죠.

구현 핵심:

명확한 포커스 표시 — 초점 받은 날짜·버튼에 또렷한 외곽선·테두리를 표시. outline: none만 하고 대체 스타일을 안 주는 안티패턴을 피합니다(CP-149와 동일).

상태와 구별 — 초점 표시를 오늘·선택·기타 상태 표시와 시각적으로 구별. 초점은 외곽선, 선택은 배경 등으로 역할 분리.

충분한 대비·가시성 — 초점 표시가 배경·날짜 색과 충분한 대비(비텍스트 3:1, WCAG SC 1.4.11)를 갖고 또렷 하게. WCAG 2.2의 Focus Appearance(SC 2.4.13)도 참고하죠.

이동 추적 — 화살표로 날짜를 옮길 때마다 초점 표시가 새 날짜로 즉시 따라가, 사용자가 이동을 시각적으로 확인하게.

이 규칙은 CP-167(키보드 실행)·CP-166(스크린 리더 전달)과 한 묶음입니다 — 키보드로 날짜를 이동하고(167), 그 초점이 시각적으로 보이고(168), 스크린 리더가 그 날짜를 읽어주면(166), 모든 사용자가 달력을 온전히 쓰죠. 시각 키보드 사용자(168), 비시각 사용자(166) 각각에게 ’지금 어느 날짜인지’를 보장합니다.

이로써 달력 8개 규칙(CP-161~168)이 완성됩니다 — 상태 일관·구분(161·162), 이벤트 확인(163), 요일(164), 색 무관(165), 스크린 리더(166), 키보드 실행·초점(167·168)까지. 정보가 많고 조작이 복잡한 달력을, 모든 사용자가 정확히 읽고 쓰게 하는 규칙들이죠.

3. 점검 / 개선

무엇을 점검하나

초점 표시 존재 — 모든 기능(날짜·버튼)에 초점 시 시각 표시가 또렷이 보이는가.

상태와 구별 — 초점 표시가 오늘·선택 등 상태 표시와 혼동되지 않게 구별되는가.

이동 추적 — 화살표 이동 시 초점 표시가 새 날짜로 따라가는가.

개선 방향

초점에 또렷한 외곽선(focus ring) 제공. outline:none만 두지 않기.

초점(외곽선) vs 선택(배경) vs 오늘(테두리)을 시각적으로 구별. 대비 확보.

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

역할	책임
디자이너	초점·선택·상태 구별 시각 체계 정의
퍼블리셔/개발	포커스 표시·이동 추적 구현

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

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 기능에 초점 시 시각 표시가 또렷이 보이나요?

□ 초점 표시가 오늘·선택 등 상태 표시와 구별되나요?

□ 화살표 이동 시 초점 표시가 새 날짜로 따라가나요?

❓ FAQ

Q1. 달력은 초점 표시가 왜 특히 중요한가요? 날짜 칸이 격자로 빽빽해, 초점이 안 보이면 수십 칸 중 어디 있는지 완전히 길을 잃습니다. Q2. 선택 표시와 초점 표시가 같으면 안 되나요? 헷갈립니다. 초점(아직 선택 전)과 선택(확정)은 의미가 달라 구별돼야 합니다 — 초점은 외곽선, 선택은 배경 등으로. Q3. CP-149와 같은 건가요? 같은 초점 가시성 원리지만, 달력은 그리드 밀도·상태 표시 구별 때문에 더 까다 롭습니다.

6. 마무리

CP-168의 메시지:

지금 어느 날짜에 있는지 보여라 — 달력의 키보드 초점을 명확히 표시하라.

달력은 날짜 칸이 격자로 빽빽해, 초점이 안 보이면 키보드 사용자가 위치를 완전히 잃습니다. 또렷한 외곽선으로 초점을 표시하되, 오늘·선택 등 상태 표시와 구별해야 하죠. 화살표 이동도 시각적으로 추적되게요. CP-166·167과 함께 달력을 모두에게 엽니다. 이로써 달력 8개(CP-161~168)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 디스클로저(Disclosure) 로 넘어갑니다.

다음 편 예고 ▶ 「289. (CP-169) 디스클로저 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 달력의 키보드 초점이 명확하게 표시되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.2 SC 2.4.13 Focus Appearance — https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

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

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