날짜 선택 UI 디자인: 기간, 시간대와 오류 상태 설계

날짜 선택 UI는 선택할 수 있는 날짜, 기간을 정하는 순서, 결과에 적용되는 시간대와 잘못된 선택을 고치는 방법을 확정 전에 보여 줘야 합니다. 달력만 그리면 끝나는 것이 아닙니다. 입력란, 도움말, 검증과 적용 결과가 함께 연결되어야 사용자가 의도한 일정을 선택할 수 있습니다.

1. 달력보다 예약 작업의 규칙부터 정하기

먼저 어떤 일정을 잡는지 정합니다. 숙박에는 체크인과 체크아웃 날짜가 필요하고, 보고서 필터는 시작이나 끝이 없는 기간을 허용할 수 있습니다. 회의에는 날짜·시각·길이·시간대가 필요합니다. 비슷한 모양의 입력란이라도 적용되는 규칙은 다릅니다.

컴포넌트를 그리기 전에 다음 항목을 짧은 명세로 남깁니다.

• 선택 방식: 하루, 기간, 여러 날짜, 날짜와 시각 중 무엇을 선택하는가.
• 경계: 가장 이른 날짜와 늦은 날짜, 최대 기간, 선택할 수 없는 날짜는 무엇인가.
• 달력 표현: 지역 설정, 한 주의 시작 요일, 월 이름과 연도 형식을 어떻게 표시하는가.
• 시간 해석: 사용자, 계정, 장소의 시간대 또는 UTC 중 무엇을 기준으로 하는가.
• 완료: 선택 즉시 반영하는가, ‘적용’을 누를 때 반영하는가.

이 튜토리얼의 예제는 숙박 검색 필터입니다. 체크인·체크아웃을 선택하고 1~14박까지 머물 수 있으며 과거 날짜는 고를 수 없습니다. 예약 가능 여부는 숙소의 시간대를 기준으로 표시합니다. 예제의 기준일은 2026년 9월 1일입니다.

이 규칙을 두고 레이아웃, 상태, 오류와 검토 항목을 이어 가면 달력의 시각적 결정이 실제 예약 조건과 연결됩니다.

2. 입력 모델 선택하기

달력 팝오버는 요일, 선택할 수 없는 날과 두 날짜 사이의 관계를 살펴볼 때 유용합니다. 하지만 정확한 날짜를 알고 있는 사람에게 항상 가장 빠른 입력 방식은 아닙니다. 텍스트 입력란과 달력 열기 버튼을 함께 제공하면 키보드로 직접 입력하거나 시각적으로 날짜를 탐색할 수 있습니다.

숙박 예제에는 ‘체크인’과 ‘체크아웃’ 입력란을 따로 두고 각 필드에 달력 버튼을 붙입니다. 선택한 기간은 입력란과 달력 모두에 남겨 두세요. 색상에만 의존하지 말고 시작과 끝을 모양·문구로 구분하며, 실제 구현에서는 접근 가능한 이름으로도 전달합니다.

3. 스타일보다 기간 선택 동작을 먼저 정하기

기간에는 선택 순서가 필요합니다. 체크인을 고르면 다음 입력 대상을 체크아웃으로 바꾸되 체크인 값은 계속 보여 줍니다. 마우스 오버나 포커스로 예상 기간을 미리 보여 줄 수 있지만 이미 확정한 선택과 같아 보이면 안 됩니다. 체크아웃을 선택하면 두 번째 날짜만이 아니라 전체 기간을 검증합니다.

예를 들어 9월 21일을 체크인으로 선택하면 시작 날짜로 표시합니다. 22~24일을 탐색할 때는 예상 범위를 보여 주고, 24일을 체크아웃으로 고르면 3박의 기간이 됩니다. 만약 23일을 이용할 수 없다면 그 날짜를 포함한 숙박을 허용하는지 제품 규칙에 따라 막거나 오류로 안내해야 합니다. 선택 불가 날짜를 건너뛸 수 있는지는 달력 디자이너가 임의로 정하지 않고 제품·개발 담당자와 합의합니다.

다시 고를 수 있도록 ‘초기화’나 ‘선택 해제’를 제공합니다. ‘적용’ 버튼을 쓰는 흐름이라면 기간이 유효해질 때까지 실행할 수 없게 하고 이유를 설명합니다. 날짜를 고른 것과 검색 조건에 적용한 것을 구분하세요. 즉시 적용하는 흐름이라면 주변 결과 요약을 갱신하고 구현에서 그 변화를 적절히 알려 줍니다.

4. 선택할 수 없는 날짜의 이유 설명하기

선택 불가 날짜를 흐리게 만드는 것만으로는 이유가 전달되지 않습니다. 과거 날짜인지, 매진인지, 예약 가능 기간 밖인지, 다른 규칙 때문인지 알아야 할 수 있습니다. 원인에 따라 필요한 설명이나 다음 행동도 달라집니다.

• 선택 불가 날짜를 선택된 날짜와 다른 달의 날짜에서 구분합니다.
• 구현에서 선택 불가 상태를 프로그램이 인식할 수 있게 하고 필요한 경우 이유를 제공합니다.
• 선택 불가 날짜에 포커스를 둘 수 있는지와 이유를 탐색하는 방식을 선택한 키보드 패턴에 맞춰 정합니다.
• ‘최대 14박까지 선택할 수 있습니다’ 같은 중요한 제약을 컨트롤 가까이에 둡니다.
• 예약 가능 정보를 아직 받지 못했다면 로딩으로 표시합니다. 알 수 없는 날짜를 매진으로 단정하지 않습니다.

키보드와 달력 그리드의 구체적인 동작은 WAI-ARIA 날짜 선택 대화상자 예제(영문)를 참고할 수 있습니다. 이 자료는 구현 패턴을 설명하는 예제이며 그대로 상용 접근성을 보증하지 않습니다. 디자인 파일에는 의도한 포커스 순서를 기록하고 실제 키보드·보조 기술 동작은 코드로 구현한 뒤 시험하세요.

5. 날짜의 의미와 시간대를 함께 다루기

날짜만 필요한 값을 타임스탬프로 저장하면 다른 지역에서 표시할 때 날짜가 달라지는 문제가 생길 수 있습니다. 날짜 자체와 특정 순간을 먼저 구분하세요. 시간대가 예약 가능 여부, 마감이나 보고 기간에 영향을 준다면 기준을 표시합니다. 지역마다 뜻이 다른 약어만 쓰기보다 ‘숙소 기준 시간’과 필요한 지역 식별자·UTC 오프셋을 함께 보여 주는 편이 분명합니다.

예제에서는 숙소의 시간대가 자정과 예약 가능 여부의 기준입니다. 다른 지역에 있는 여행자도 숙소의 날짜를 선택합니다. 입력란 옆과 적용 결과 요약에 이 규칙을 반복하세요. 시간대를 바꿀 수 있다면 기존 값을 같은 현지 날짜로 다시 해석하는지, 같은 순간을 다른 지역의 시각으로 변환하는지 알려야 합니다. W3C 시간·시간대 작업 초안(영문)은 날짜·시각 값, 순간과 시간대의 차이를 설명합니다. UTC 오프셋 하나가 지역의 모든 미래 시간대 규칙을 대신하지는 않습니다.

서머타임 전환은 개발과 문구를 함께 검토해야 합니다. 날짜만 고르는 숙박 필터는 존재하지 않는 시각 문제를 피할 수 있지만, 특정 시각의 예약은 그렇지 않습니다. 실제 예약 서비스가 거부할 시각을 UI에서 확정 가능한 것처럼 약속하지 마세요.

반복 일정에서는 시간대와 함께 반복 규칙과 예외를 정하고, 변경 범위가 이번 일정만인지, 이번 이후인지, 전체인지 명확히 보여 주세요.

6. 수정할 수 있는 오류 안내 만들기

안전하게 유지할 수 있는 입력 날짜는 남겨 두고, 어느 필드에 문제가 있는지와 어떤 규칙을 만족해야 하는지 설명합니다. ‘잘못된 날짜’라는 말만으로는 무엇을 바꿀지 알기 어렵습니다.

입력 형식은 사용자가 마칠 기회를 가진 뒤 검사합니다. 두 필드 사이의 관계나 예약 가능 여부는 기간을 적용하거나 다음 단계로 진행할 때 확인하는 편이 명확할 수 있습니다. 글자를 하나 입력할 때마다 오류를 띄워 미완성 입력을 방해하지 마세요.

최대 기간도 구체적인 값으로 시험합니다. 같은 9월 달력에서 체크인 10일, 체크아웃 25일은 15박이므로 이 예제의 14박 제한을 넘습니다. 두 값을 지우지 않고 오류를 보여 준 뒤 체크아웃을 24일로 고치면 14박이 됩니다. 입력 오류가 해제되어 ‘적용’을 누를 수 있어도 아직 객실 예약이 완료된 것은 아닙니다.

7. Pixso에서 컴포넌트와 상태 검토하기

각 화면을 별도 그림으로 만드는 대신 편집 가능한 컴포넌트 세트로 구성합니다. 입력 필드, 달력 헤더, 요일 행, 날짜 셀, 기간 강조, 도움말과 오류 문구를 재사용 가능한 부분으로 나누세요. 컴포넌트 속성이나 명확한 변형 이름으로 기본, 포커스, 시작·중간·끝 선택, 선택 불가, 오늘과 다른 달의 날짜를 구분합니다.

레이블이나 오류 문구가 바뀌어도 간격과 정렬이 유지되도록 레이아웃을 설정합니다. 컴포넌트 옆에 예약 규칙을 두고 ‘처음 열기’, ‘기간 선택 중’, ‘선택 불가 날짜’, ‘잘못된 기간’의 네 프레임을 준비하세요. 공유 컴포넌트, 스타일과 변수는 시각적 일관성을 유지하는 데 도움이 되지만 제품 규칙은 담당자와 근거가 따로 있어야 합니다.

제품·콘텐츠·접근성·개발 담당자에게 파일을 공유하고 정확한 프레임과 상태 옆에 의견을 남기게 합니다. 팀 전체에서 재사용할 기준은 Pixso 디자인 시스템 작업 흐름과 연결하세요. Pixso 편집기에서 컴포넌트를 수정한 뒤 실제 구현의 동작은 따로 검증합니다. 캔버스에 예약 화면을 그리는 것과 예약 서비스를 연결하는 것은 다른 작업입니다.

8. 반응형과 접근성 동작 확인하기

넓은 화면에서는 두 달을 함께 보며 기간을 선택할 수 있습니다. 좁은 화면에서는 읽기 쉬운 한 달과 분명한 이전·다음 버튼이 더 나을 수 있습니다. 두 달을 억지로 줄여 날짜를 누르기 어렵게 만들지 마세요. 스크롤하는 동안에도 체크인·체크아웃 값이 달력 위에 남아 맥락을 확인할 수 있게 합니다.

달력 열기, 하루·한 주 이동, 월 변경, 날짜 선택, 변경 없이 취소하기, 열기 버튼으로 포커스 복귀까지 키보드 경로를 기록합니다. 구현에서는 레이블, 설명, 오류, 선택 상태와 갱신 내용을 보조 기술에 전달해야 합니다. 대비, 누를 영역, 확대와 고대비 모드도 코드 단계에서 확인합니다.

검토에는 실제로 사용할 현지화 문구를 넣습니다. 월 이름, 요일 순서, 숫자 형식과 번역한 도움말은 모두 폭에 영향을 줍니다. 한국어 입력 형식을 YYYY-MM-DD로 안내했다면 직접 입력과 달력 선택이 같은 날짜를 만들어야 합니다. 번역이 길어져도 선택값이 잘리거나 주요 버튼이 화면 밖으로 밀리지 않도록 설계하세요.

9. 날짜 선택 UI 확인 항목

• 하루·기간·여러 날짜·날짜와 시각 중 실제 작업에 맞는 컨트롤입니다.
• 직접 입력과 달력 선택이 같은 값과 표시 형식을 만듭니다.
• 시작, 끝, 미리보기, 오늘, 선택 불가와 다른 달의 날짜가 구분됩니다.
• 최소·최대 날짜, 선택 불가 날짜와 최대 기간 규칙이 보입니다.
• 시간대가 결과에 영향을 주는 곳에는 기준을 표시합니다.
• 오류에서 수정할 수 있는 입력을 보존하고 복구 행동을 안내합니다.
• 로딩, 예약 가능한 날짜 없음, 적용 성공과 예약 가능 여부 변경을 다룹니다.
• 반응형 화면에서도 날짜와 선택값을 읽고 조작할 수 있습니다.
• 키보드와 보조 기술 동작을 명세하고 실제 구현에서 시험합니다.

날짜 선택과 예약 규칙을 같은 화면에 연결하기

날짜 선택 UI는 보이는 달력과 명확한 예약 규칙을 연결해야 합니다. 작업, 기간, 선택 불가 상태, 시간대, 검증과 적용 결과를 먼저 정한 뒤 표현을 다듬으세요. Pixso에서 이 상태를 재사용 가능한 컴포넌트로 검토하고, 구현에서는 실제 제약 아래 키보드·현지화·서비스 동작을 확인합니다.