Date picker

Date picker (날짜 선택기)

날짜·시간 선택기는 사용자가 날짜와 시간의 단일 인스턴스 또는 범위를 선택할 수 있게 해주는 컴포넌트예요. 사용자에게 필요한 날짜의 종류에 따라 단순 입력 또는 달력 선택기 중 적합한 것을 고를 수 있습니다.

출처: Date picker

본문

날짜 선택기 with AI label이 이제 안정(stable) 버전이 됐어요. 이 추가는 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다. 자세한 내용은 AI 존재(AI presence) 섹션을 참고하세요.

개요 (Overview)

날짜 선택기는 사용자가 과거, 현재, 미래 날짜를 선택할 수 있게 해줘요. 사용자에게 요청하는 날짜의 종류에 따라 어떤 날짜 선택기(단순 또는 달력)를 사용하는 것이 가장 좋은지 결정됩니다. 시간 선택기는 사용자가 특정 시간을 선택하도록 돕습니다. 위치나 필요에 따라 시간 선택기의 형식을 사용자화할 수 있어요.

언제 사용할까요 (When to use)

• 사용자에게 정확한, 대략적인, 또는 기억할 만한 날짜나 시간을 물을 때.
• 작업을 일정에 맞출 때.

변형 (Variants)

변형 (Variant)	용도 (Purpose)
Simple date input	생년월일처럼 사용자가 쉽게 기억할 수 있는 날짜이고 달력을 예상할 필요가 없을 때 사용. 입력 필드로만 구성됩니다.
Calendar picker	날짜와 다른 요일의 관계를 알아야 하거나 날짜가 변동적일 수 있을 때 달력 선택기(단일 또는 범위)를 사용. 사용자는 달력 위젯에서 날짜를 보고 선택하거나 텍스트 필드에 수동으로 입력할 수 있어요.
Time picker	사용자에게 특정 시간을 입력하도록 요청할 때 사용.

포맷 (Formatting)

날짜 선택기의 구조 (Anatomy of date pickers)

• Default
• Fluid

단순 날짜 입력과 단일 날짜 달력 선택기의 구조.

• 라벨(Label): 사용자에게 컨트롤로 무엇을 해야 하는지 안내해요.
• 날짜 필드(Date field): 사용자가 날짜를 수동으로 입력할 수 있는 텍스트 입력 필드.
• 날짜 형식(Date format): 형식 지침은 필드 아래의 헬퍼 텍스트 또는 라벨과 인라인으로 나타나야 해요.
• 아이콘(Icon): calendar 아이콘은 달력 메뉴를 사용할 수 있음을 나타냅니다.
• 달력(Calendar): 날짜를 선택할 수 있는 메뉴.
• 월·연도 컨트롤(Month and year controls): 사용자가 과거와 미래의 시간 프레임을 탐색할 수 있게 해줘요.
• 이전·다음 달 컨트롤(Previous and next month controls): 사용자가 한 달씩 앞뒤로 이동할 수 있게 해줘요.
• 요일(Week day): 한 주의 요일.
• 날짜(Day): 한 달의 날짜. 특정 날짜 스타일은 달력 변형을 참고하세요.

시간 선택기의 구조 (Anatomy of a time picker)

• Default

• Fluid

• 라벨(Label): 사용자에게 컨트롤로 무엇을 해야 하는지 안내해요.

• 시·분 필드(Hour and minute field): 사용자가 원하는 시간의 시와 분을 입력하는 텍스트 입력 필드.

• AM/PM 선택기(AM/PM selector): 사용자가 시간대(오전/오후)를 고를 수 있는 선택 컨트롤.

• 시간대 선택기(Timezone selector): 사용자가 관련 시간대를 설정할 수 있는 선택 컨트롤.

스타일링 (Styling)

날짜 선택기 입력에는 기본(default)과 플루이드(fluid)의 두 가지 스타일이 있어요. 기능은 같지만 시각적으로 다르게 보이며, 어디에 사용할지에 영향을 줍니다.

스타일 (Style)	모양 (Appearance)	사용 사례 (Use case)
Default	라벨이 입력 필드 바깥과 위에 배치되는 전통적인 스타일.	입력 컴포넌트 사이에 여백이 필요하거나 공간이 빠듯하고 더 작은 컴포넌트가 필요한 생산적(productive) 순간에 사용.
Fluid	라벨이 입력 필드 안에 배치되고 사용자 입력 텍스트와 인라인으로 겹쳐지는 대체 스타일.	표현적(expressive) 순간, 플루이드 폼, 제한된 공간, 또는 툴바 같은 복잡한 컴포넌트에 붙일 때 사용.

크기 (Sizes)

기본 입력 높이 (Default input heights)

날짜·시간 선택기의 기본 입력 필드는 작은(32px), 중간(40px), 큰(48px)의 세 가지 높이 크기로 제공돼요. 날짜 선택기의 달력 메뉴는 고정 높이와 너비이며 입력 크기에 따라 변하지 않습니다.

기본 크기 (Default size)	높이 (px/rem)	사용 사례 (Use case)
Small (sm)	32 / 2	공간이 제한되거나 길고 복잡한 폼에 드롭다운을 배치할 때 사용.
Medium (md)	40 / 2.5	이것이 기본 크기이자 가장 흔히 사용되는 크기. 확신이 없으면 중간 크기를 사용.
Large (lg)	48 / 3	작업할 공간이 많을 때 사용. 보통 단순한 폼이나 드롭다운이 페이지에 단독으로 배치될 때(예: 필터) 사용.

플루이드 입력 높이 (Fluid input heights)

플루이드 입력 높이는 하나뿐이며 기본 높이보다 시각적으로 더 커요. 입력은 경고나 오류 메시지가 하단에 추가된 경우를 제외하고 64px의 설정된 높이를 가집니다.

정렬 (Alignment)

기본적으로 선택기는 설정된 너비를 가져요. 폼처럼 선택기를 다른 입력과 인라인으로 배치한다면 너비를 다른 입력과 일치하도록 조정할 수 있습니다. 선택기는 필요에 따라 너비를 늘리거나 줄일 수 있어요. 크기를 조정할 때는 선택기에 최소 너비가 있으며 날짜 콘텐츠가 가로로 스크롤되거나 넘치지 않아야 한다는 점에 유의하세요.

달력 메뉴 정렬 (Aligning the calendar menu)

달력 자체는 항상 설정된 너비를 유지하며 조정할 수 없어요. 항상 지정된 텍스트 필드의 왼쪽 가장자리에 정렬되어야 합니다.

콘텐츠 (Content)

주요 요소 (Main elements)

라벨 (Label)

• 날짜와 시간 선택기 모두 라벨이 함께 제공되어야 해요.
• 라벨은 명확하고 설명적이어야 합니다.
• 범위 입력은 시작과 끝 라벨로 올바르게 라벨링되어야 해요.

날짜 형식 (Date format)

• 단순 날짜 입력을 사용할 때는 날짜 형식을 라벨과 인라인으로 괄호 안에 포함하거나 라벨 아래의 헬퍼 텍스트로 포함하세요.
• 달력 선택기를 사용할 때는 사용자가 달력 메뉴에서 선택하면 날짜 형식이 자동화됩니다.
• 필드 안에 자리 표시자(placeholder) 텍스트로만 날짜 형식을 포함하는 것은 문제가 있어요. 사용자가 입력을 시작하면 사라지기 때문입니다.

왼쪽의 헬퍼 텍스트 또는 오른쪽의 라벨에서 올바른 날짜 형식을 제안하는 예시.

• 날짜 형식은 위치에 따라 다르게 표시될 수 있어요. 예를 들어 일부 국가는 월/일/년 형식을 사용하고, 다른 국가는 연-월-일 순서로 바꾸고 슬래시 대신 대시를 사용할 수 있습니다. 날짜 선택기는 flatpickr를 활용하며, 여기서 dateFormat과 locale props를 받아 날짜가 표시되는 방식을 바꾸고 달력의 언어를 변경할 수 있어요. 날짜 입력을 현지화하기로 선택했다면 같은 UI에서 정적 날짜를 현지화하는 것도 권장됩니다.

왼쪽에 미국식 영어 형식, 오른쪽에 국제 표준 형식으로 날짜를 표시하는 예시.

시간 형식 (Time format)

• 12시간제와 24시간제 시스템 모두 허용돼요.
• 12시간 형식을 사용한다면 AM/PM 선택이 함께 제공되어야 합니다.
• AM과 PM 약어에는 대문자를 사용하고 마침표를 넣지 마세요.
• 특정 시간은 시간대를 지정해야 해요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

공통 동작 (Universal behaviors)

이 섹션에 나열된 동작은 모든 변형에 공통입니다. 각 변형에 고유한 동작은 아래의 각 컴포넌트 변형 섹션을 참고하세요.

상태 (States)

날짜 선택기와 달력 메뉴 (Date picker and calendar menu)

날짜 선택기 입력은 텍스트 입력(text input)이며 동일한 인터랙션 상태와 동작을 가져요. 달력이 있는 날짜 선택기만 입력 필드 오른쪽에 달력 아이콘이 있습니다. 자세한 내용은 스타일 탭을 참고하세요. 달력 메뉴 상태는 달력 변형 섹션을 참고하세요.

시간 선택기 (Time picker)

시간 선택기는 텍스트 입력과 선택 입력(select inputs)의 조합이며 동일한 인터랙션 상태와 동작을 가져요. 자세한 내용은 스타일 탭을 참고하세요.

상태 (State)	언제 사용하나요 (When to use)
Enabled	날짜·시간 선택기가 활성화되어 있지만 사용자가 직접 상호작용하지 않을 때. 보통 컴포넌트의 기본 또는 정상 상태라고 함.
Hover	사용자의 마우스 커서가 필드 위에 있을 때.
Focus	사용자가 입력에 탭하거나 클릭하면 필드가 포커스되어, 사용자가 컴포넌트로 성공적으로 이동했음을 나타냄.
Open	열림 상태는 달력 메뉴에 특화된 상태. 달력 메뉴가 열리면 사용자는 메뉴 안을 탐색해 단일 날짜 또는 날짜 범위를 선택할 수 있음.
Error	날짜·시간 선택기 컴포넌트의 텍스트 입력에 대한 필수 필드가 채워지지 않았거나 시간 선택기 컴포넌트의 select에 선택이 없을 때. 시스템 오류로 인해 발생할 수도 있음. 데이터를 제출·저장하기 전에 사용자 응답이 필요함.
Warning	예외 조건에 사용자의 주의를 환기해야 할 때. 그 조건은 오류가 아닐 수 있지만 해결되지 않으면 문제를 일으킬 수 있음.
Disabled	사용자가 컴포넌트와 상호작용할 수 없고 모든 인터랙티브 기능이 제거되었을 때. 읽기 전용 상태와 달리 비활성 상태는 포커스할 수 없고, 화면 판독기로 읽히지 않으며, 시각 대비를 통과할 필요가 없어 해석이 필요하면 접근성이 떨어짐.
Skeleton	초기 페이지 로드 시 날짜·시간 선택기가 아직 완전히 로드되지 않았음을 나타내는 데 사용.
Read-only	사용자가 컴포넌트를 검토할 수 있지만 수정할 수 없을 때. 비활성 상태처럼 모든 인터랙티브 기능을 제거하지만 여전히 포커스 가능하고, 화면 판독기로 접근 가능하며, 가독성을 위해 시각 대비를 통과함.

검증 (Validation)

유효하지 않은 필드는 명확히 표시되어야 해요. 필드가 둘 이상인 선택기에서는 오류를 트리거하는 개별 요소에만 유효하지 않은 상태를 설정해서 사용자가 어느 것을 해결해야 하는지 명확히 이해할 수 있게 하세요.

국제화 (Internationalization)

국제화(globalization이라고도 함)는 추가 코드 변경 없이 소프트웨어가 대상 로케일의 다른 언어, 지역 특성, 기술 요구 사항에 적응하는 것을 말해요. 즉, 위치를 알 수 있다면 날짜나 시간의 형식이 허용 가능한 현지 형식으로 자동으로 바뀔 수 있습니다. 항상 국제화를 위해 디자인해야 해요.

단순 날짜 입력 (Simple date input)

단순 날짜 입력은 사용자에게 날짜를 수동으로 입력할 수 있는 텍스트 필드만 제공해요. 달력 메뉴나 드롭다운에서 오는 불필요한 인터랙션 없이 날짜를 입력할 수 있게 해줍니다.

단순 날짜 입력은 월/년 또는 월/일/년을 포함할 수 있어요. 형식은 현지화되고 나타나는 순서로 재배열될 수 있습니다.

언제 사용할까요 (When to use)

기억할 만한 날짜에 사용 (Use for memorable dates)

단순 날짜 입력은 생년월일이나 신용카드 만료일처럼 사용자가 아는 날짜일 때 주로 사용돼요.

대략적인 날짜에 사용 (Use for approximate dates)

단순 날짜 입력은 정확한 날짜보다 대략적인 날짜를 요청할 때, 특히 과거 날짜에 관해 요청할 때 가장 좋아요. 예를 들어 사용자에게 구매가 언제 이루어졌는지 물을 때, 특정 날짜(2019년 11월 22일)보다 월과 연도(2019년 11월)를 쉽게 기억할 가능성이 높습니다.

달력 선택기 (Calendar pickers)

달력 선택기는 기본적으로 열릴 때 오늘 날짜를 보여주고 한 번에 한 달만 표시돼요. 달력 선택기는 사용자가 월과 연도를 탐색할 수 있게 하지만, 최근 또는 가까운 미래 날짜에 사용할 때 가장 잘 작동합니다. 아주 먼 미래 날짜를 입력해야 한다면 달력이 더 편리한 날짜로 기본 열리도록 하는 것을 고려하세요.

일부 사용자는 달력 선택기를 사용하기 어렵다고 느낄 수 있다는 점을 명심하세요. 달력 선택기를 사용할 때는 항상 텍스트 필드에 날짜를 입력하는 간단한 방법이 있어야 해요.

일정 잡기에 사용 (Use for scheduling)

사용자가 요일이나 오늘과의 근접성처럼 날짜와 다른 요일의 관계를 알아야 할 때 달력 선택기를 사용하세요. 작업을 일정에 맞추는 데 최적입니다.

달력 변형 (Calendar variants)

단일 날짜 선택기 (Single date picker)

단일 날짜 선택기에서 사용자는 텍스트 필드에 날짜를 수동으로 입력하거나 메뉴 달력에서 특정 날짜를 선택하는 옵션이 있어요. 일, 월, 년을 선택해야 합니다.

• 오늘 날짜
• 호버
• 한 달의 날짜
• 선택된 날짜
• 다음/이전 달의 날짜

날짜 범위 선택기 (Date range picker)

날짜 범위 선택기는 단일 날짜 선택기와 매우 유사하게 작동하지만, 하나의 날짜를 고르는 대신 사용자가 start 날짜와 end 날짜를 고를 수 있어요. 범위의 각 날짜에 대해 사용자는 텍스트 필드에 날짜를 수동으로 입력하거나 달력에서 날짜를 선택하는 옵션이 있습니다. 각 지점은 일, 월, 년의 선택이 필요해요.

• 한 달의 날짜
• 오늘
• 선택된 시작 날짜
• 범위의 날짜
• 끝 날짜 호버와 포커스
• 다음/이전 달의 날짜

달력 동작 (Calendar behaviors)

달력 열기 (Opening the calendar)

달력은 두 가지 방법으로 열 수 있어요:

• 필드 맨 오른쪽의 calendar 아이콘을 클릭해 달력 메뉴를 엽니다.
• 텍스트 필드가 포커스를 받으면 달력 메뉴도 나타나며, 날짜가 선택되거나 선택기에서 포커스가 제거될 때까지 열린 상태로 유지됩니다.

날짜 선택 (Selecting a date)

날짜는 다음 방법으로 선택할 수 있어요:

• 텍스트 입력 필드에 날짜를 수동으로 입력.
• 달력 메뉴에서 날짜 클릭.
• Arrow 키로 날짜로 이동한 다음 Enter를 누르기.

다음·이전 달 (Next and previous month)

사용자는 다음 방법으로 한 해의 월 사이를 탐색할 수 있어요:

• 달력 왼쪽 상단과 오른쪽 상단의 chevron 아이콘 클릭.
• Arrow 키를 사용해 다음 또는 이전 달로 이동.

연도 선택 (Selecting a year)

기본적으로 현재 날짜와 연도가 달력에 나타나요. 다른 연도로 이동하려면 사용자는 다음 중 하나를 할 수 있습니다:

• 날짜 텍스트 필드에 연도를 수동으로 입력.
• 달력의 연도 입력에 포커스하거나 호버할 때 나타나는 위·아래 화살표 클릭.
• 연도 입력을 선택한 다음 입력.

달력 닫기 (Closing the calendar)

달력은 다음 중 한 가지 방법으로 닫을 수 있어요:

• 단일 날짜 또는 범위의 끝 날짜 선택. 이렇게 하면 자동으로 닫힘.
• 달력 메뉴 바깥 아무 곳이나 클릭.
• 선택기에서 포커스 제거.
• Esc 누르기.

범위 선택 (Selecting a range)

범위는 여러 방법으로 선택할 수 있어요:

• 텍스트 필드에 시작·끝 날짜를 수동으로 입력.
• 달력이 열리면 처음 클릭하는 날짜가 시작 날짜가 되고, 두 번째 클릭하는 날짜가 끝 날짜가 됨.
• Arrow 키를 사용해 시작 날짜로 이동하고 Enter를 누른 다음, 계속 Arrow 키로 두 번째 날짜로 이동하고 다시 Enter를 누르기.

최소·최대 날짜 (Min and max dates)

달력에서 선택 가능한 날짜를 제한하려면 최소·최대 날짜를 설정할 수 있어요. 설정하면 최소/최대 범위 안에 드는 날짜만 선택 가능하며 범위 밖의 날짜는 비활성화됩니다.

사용자 오류를 방지하기 위해 최소·최대 날짜를 사용하세요. 일정을 잡을 때 사용자가 과거 날짜를 선택할 수 없어야 한다면 최소 날짜를 오늘로 설정하세요.

오늘 이전의 날짜는 범위 밖이며 비활성화됩니다.

시간 선택기 (Time pickers)

시간 선택기는 사용자에게 시와 분을 입력할 수 있는 텍스트 필드를 제공해요. 또한 AM/PM과 시간대 컨트롤과 함께 제공될 수 있으며, 둘 다 select로 스타일링됩니다.

시간 필드 형식은 시와 분을 포함해야 해요(예: 11:30). 12시간제나 24시간제 형식을 수용하도록 현지화될 수 있습니다.

일정 잡기에 사용 (Use for scheduling)

회의 시간 계획처럼 특정 시간이 일정에 맞춰져야 할 때 시간 선택기를 사용하세요.

AI 존재 (AI presence)

날짜 선택기에는 입력에 AI 라벨이 있을 때 AI 시각적 스타일링을 취하는 수정(modification)이 있어요. AI 변형은 AI 라벨이 추가된 것 외에는 일반 버전과 동일하게 동작하며, AI 라벨은 시각적 표시이자 설명 가능성 팝오버의 트리거 역할을 합니다.

AI용 디자인에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.

• Default
• Fluid

AI로 되돌리기 (Revert to AI)

날짜 선택기는 사용자 인터랙션에 따라 AI 변형과 비-AI 변형 사이를 전환할 수 있어요. 사용자가 AI가 제안한 콘텐츠를 수동으로 재정의하면 입력은 AI 변형에서 비-AI 변형으로 바뀝니다. 편집 후에도 사용자는 revert to AI 버튼을 통해 처음에 AI로 생성된 콘텐츠로 다시 전환할 수 있어야 해요.

• Default
• Fluid

관련 컴포넌트 (Related)

상대적인 시간·날짜 요청 (Asking for relative times and dates)

위 선택기에서 다루지 않은 또 다른 흔한 사용 사례는 알림처럼 오늘 또는 지금에 상대적인 시간이나 날짜를 설정하는 것이에요. 예를 들어 설치가 지금, 한 시간 후, 또는 오늘 밤에 시작하도록 설정하는 것입니다. 이 변형의 선택기는 표준 select(선택) 컴포넌트를 사용해 만들 수 있어요.

개별 입력 사용 (Using individual inputs)

날짜 경험의 또 다른 수용 가능한 형태는 각 요소에 개별 입력을 사용하는 것이에요. 날짜의 각 요소에 개별 필드를 사용하면 형식 오류를 줄이는 데 도움이 됩니다. 이는 특히 로컬라이제이션으로 날짜를 다시 형식화할 수 없을 때 유용해요.

정확한 날짜(월/일/년)에 하나의 입력을 두는 대신, 세 개의 분리된 입력과 각각에 명확한 라벨을 둘 수 있습니다.

더 알아보기 (Learn more)

날짜·시간 선택기는 사용자의 기억 용이성과 날짜 관계 파악 필요성에 따라 단순 입력 또는 달력 선택기를 고르는 게 핵심이에요. 형식 현지화와 AM/PM·시간대 처리, min/max 날짜 제한으로 사용자 오류를 줄이세요. AI가 포함된 입력은 revert to AI를 통해 원래 AI 생성 콘텐츠로 되돌릴 수 있게 해야 합니다.