coastdigitalgroup/coastai-skills

달력 및 날짜 선택 시스템

목적

달력 및 날짜 선택 시스템은 사용자가 단일 날짜, 날짜 범위 또는 특정 시간대를 선택할 수 있는 인터페이스 설계 방법론을 제공합니다. 날짜 선택은 다음 주 화요일이나 이번 달 마지막 주말과 같이 복잡한 정신적 모델을 필요로 하는 고마찰 작업입니다. 이 시스템은 날짜 선택기가 시각적으로 명확하고 키보드 및 터치로 쉽게 탐색할 수 있으며 유효성과 가용성에 대한 즉각적인 피드백을 제공하도록 보장합니다.

사용 사례

• 예약 및 예약: 호텔 체크인/체크아웃 날짜 또는 항공편 출발일 선택.
• 일정 관리: 회의, 약속 또는 배송을 위한 시간대 선택.
• 분석 및 보고: 데이터 필터링을 위한 사용자 정의 날짜 범위(시작일-종료일) 정의.
• 생년월일 입력: 연령 확인 또는 프로필 설정을 위한 생년월일 캡처.
• 이벤트 계획: 프로젝트 관리 도구에서 마감일 또는 이정표 관리.

사용하지 말아야 할 경우

• 간단한 날짜: 오늘이나 어제와 같이 잘 알려진 단일 날짜만 필요한 경우, 간단한 버튼이나 링크를 사용하세요.
• 기억하기 쉬운 날짜: 생일이나 신용카드 만료일과 같이 사용자가 이미 알고 있는 날짜의 경우, 달력 그리드 대신 type="number" 또는 type="tel"을 사용한 표준 텍스트 입력을 사용하세요. 그리드를 탐색하는 것보다 입력 속도가 더 빠릅니다.
• 상대적 시간: 사용자가 지난 7일 또는 이번 달만 선택하면 되는 경우, 전체 달력 대신 드롭다운이나 버튼 그룹을 사용하세요.

입력

1. 선택 모드: 단일 날짜, 날짜 범위 또는 시간대.
2. 제약 조건: 최소/최대 날짜, 비활성화된 날짜(예: 과거 날짜, 예약 마감된 슬롯).
3. 컨텍스트: 독립형 페이지 요소인지, 팝오버/모달 트리거인지.
4. 지역화: 지역 날짜 형식(MM/DD/YYYY vs DD/MM/YYYY) 및 주 시작일(일요일 vs 월요일).

출력

1. 그리드 구조 명세: 월 헤더, 요일 레이블, 일 셀의 시각적 정의.
2. 상태 매트릭스: 오늘, 선택됨, 범위 시작, 범위 끝, 범위 내, 호버, 비활성화 상태에 대한 시각적 처리.
3. 입력 연결 명세: 달력이 텍스트 입력 필드와 어떻게 관련되는지(트리거 아이콘, 형식 지정, 수동 입력 지원).
4. 접근성 계획: 키보드 단축키(화살표, Enter, Escape) 및 상태 업데이트를 위한 ARIA 라이브 리전.

워크플로우

1. 입력 패턴 선택

사용자가 날짜를 입력하는 방식을 선택합니다.

• 직접 입력: 마스킹된 텍스트 입력. 빠르고 익숙한 날짜 입력에 가장 적합.
• 선택기 트리거: 달력 아이콘이 있는 입력 필드로 오버레이를 엽니다. 대부분의 사용 사례에 표준적.
• 인라인/고정: 달력이 항상 페이지에 표시됩니다. 일정이 많은 작업에 가장 적합.

2. 달력 그리드 설계

월 보기에 일관된 공간 리듬을 설정합니다.

• 헤더: 이전 및 다음 탐색 버튼이 있는 연도와 월.
• 요일 행: 빠른 방향 확인을 위한 한 글자 또는 짧은 레이블(S, M, T...).
• 7열 그리드: 각 일 셀에 날짜와 잠재적 상태 표시기(예: 이벤트 표시 점)를 넣을 충분한 공간을 확보합니다.

3. 범위 로직 정의(해당되는 경우)

범위를 선택할 때 인터페이스는 세 가지 상태를 추적해야 합니다.

• 시작 선택: 클릭한 첫 번째 날짜.
• 구간: 시작과 현재 호버 위치 사이의 시각적 연결.
• 종료 선택: 두 번째로 클릭한 날짜, 범위를 최종 확정.
• 시각적 피드백: 범위 내 날짜에는 미묘한 배경색을 사용하고, 시작과 끝 표시에는 뚜렷한 모양이나 높은 대비를 사용합니다.

4. 접근성 설계

• 키보드 탐색: 사용자는 화살표 키로 날짜 사이를 이동하고, PageUp/PageDown으로 월을 전환하고, Enter로 선택할 수 있어야 합니다.
• 포커스 관리: 선택기가 열리면 포커스가 현재 선택된 날짜 또는 오늘로 이동해야 합니다.
• ARIA 역할: 달력에 role="grid", 요일에 role="columnheader", 날짜에 role="gridcell"을 사용합니다. 활성 선택에는 aria-selected="true"를 사용합니다.

5. 반응형 적응 계획

• 모바일 보기: 작은 화면에서는 단일 월 보기가 가장 좋은 경우가 많습니다. 범위 선택의 경우, 두 달을 세로로 쌓거나 전체 화면 오버레이를 사용하는 것을 고려하세요.
• 터치 대상: 각 일 셀은 최소 44x44px이거나 우발적 클릭을 방지하기 위해 적절한 패딩을 제공해야 합니다.

의사 결정 규칙

• 먼저 입력 규칙: 항상 사용자가 입력 필드에 날짜를 직접 입력할 수 있도록 허용하세요. 달력을 사용하도록 강요하지 마세요.
• 월 제한: 먼 과거나 미래(예: 5년 이상)의 날짜를 선택해야 하는 경우, 사용자가 이전 버튼을 수십 번 클릭하도록 강요하는 대신 연도/월 드롭다운 선택기를 제공하세요.
• 즉각적인 피드백: 사용자가 유효하지 않은 날짜(예: 평일 전용 배송에서 일요일)를 선택하면, 양식 제출을 기다리지 말고 즉시 상황에 맞는 오류 메시지를 표시하세요.
• 주 시작일: 사용자의 로케일을 기본값으로 사용합니다(미국은 보통 일요일, 영국/유럽은 월요일).

제약 조건

• 접근성: 모든 날짜 상태에 대해 WCAG AA 대비(4.5:1)를 충족해야 합니다. 선택된 날짜는 색상만으로 구분되어서는 안 됩니다(예: 배경색 유무).
• 반응형: 달력이 뷰포트를 넘지 않아야 합니다. 팝오버 선택기는 입력 필드 아래에 공간이 없으면 플립 로직을 사용하여 계속 표시되어야 합니다.
• 지역화: 다른 날짜 형식과 월/요일 이름 번역을 지원해야 합니다.

일반적인 실패 패턴

• 무한 클릭: 연도 선택기 대신 사용자가 12개월을 클릭하며 날짜를 찾도록 하는 경우.
• 숨겨진 입력: 사용자가 날짜를 직접 입력하지 못하도록 막아, 고급 사용자와 운동 장애 사용자를 불편하게 만드는 경우.
• 작은 대상: 모바일 장치에서 사용이 불가능한 20px 셀의 그리드를 설계하는 경우.
• 오늘 컨텍스트 부족: 현재 날짜를 강조 표시하지 않아 사용자가 방향을 잡기 어렵게 만드는 경우.
• 혼란스러운 범위: 범위의 시작과 끝을 명확히 구분하지 않거나, 범위 내 구간을 표시하지 않는 경우.

유효성 검사 기준

• 사용자가 키보드만 사용하여 달력을 탐색하고 날짜를 선택할 수 있습니다.
• 입력 필드에서 수동 텍스트 입력이 지원되고 유효성 검사가 이루어집니다.
• 오늘 날짜는 시각적으로 구분되지만 선택 항목과 경쟁하지 않습니다.
• 범위 선택에는 시작, 끝, 구간에 대한 명확한 시각적 처리가 있습니다.
• 일 셀의 터치 대상이 44x44px 권장 사항(또는 간격을 포함한 최소 24x24px)을 충족합니다.
• 모든 상태(호버, 선택됨, 비활성화됨)의 대비 비율이 WCAG AA를 충족합니다.
• 달력이 모바일 장치에서 레이아웃을 조정하거나 전체 화면으로 전환됩니다.