데이트 피커

날짜를 글자로 받으면 같은 날이 사람마다 다른 모양으로 들어옵니다. 2026-09-16 으로 쓰는 사람, 2026/9/16 으로 쓰는 사람, 9월 16일로 쓰는 사람이 섞입니다. 받는 쪽은 이걸 전부 해석해야 하고, 해석에 실패하면 "날짜 형식이 올바르지 않습니다" 라는 문구를 띄웁니다. 사용자는 무엇이 틀렸는지 모른 채 같은 칸에 다시 씁니다.

형식이 맞아도 뜻이 갈리는 경우가 있습니다. 03/04/2026 은 한국과 유럽에서는 3월 4일이고 미국에서는 4월 3일입니다. 화면에는 아무 문제가 없어 보이는데 저장된 값이 한 달 어긋나 있고, 이런 어긋남은 대개 한참 뒤에 발견됩니다.

없는 날짜도 그대로 들어옵니다. 2월 30일이나 13월 1일은 형식만 보면 멀쩡해서, 저장하는 단계까지 가서야 걸립니다.

민서가 페이지덱의 문서 보관 만료일을 글자 입력으로 두었을 때 들어온 문의 절반이 이 셋이었습니다. 여기에 하나가 더 붙습니다. "2주 뒤" 가 며칠인지는 사용자가 머릿속으로 달력을 그려 계산해야 했습니다.

데이트 피커는 이 넷을 한 번에 없앱니다. 쓰는 일을 고르는 일로 바꾸면 틀린 형식도, 없는 날짜도, 머릿속 계산도 나올 자리가 없습니다.

평소에는 입력 칸만 보이고, 그 칸을 누르면 달력이 아래에 붙어 뜹니다. 동작은 다섯 단계로 나뉩니다.

1. 엽니다. 칸이나 칸 옆의 달력 아이콘을 누르면 팝오버가 뜹니다. 팝오버는 누른 요소에 붙어 작게 뜨는 레이어라, 뒤 화면을 가리지 않고 필요한 만큼만 자리를 차지합니다.
2. 이동합니다. 좌우 화살표로 한 달씩 옮기고, 가운데 제목을 누르면 연도와 달을 바로 고르는 화면으로 넘어갑니다. 이 두 번째 경로가 없으면 20년 전으로 가려는 사람은 화살표를 240번 눌러야 합니다.
3. 고릅니다. 날짜를 누르면 칸에 값이 채워지고 달력이 닫힙니다. 오늘과 지금 고른 날은 서로 다른 표시를 줘서 자기가 무엇을 골랐는지 다시 열어 보지 않아도 됩니다.
4. 막습니다. 고를 수 없는 날짜는 흐리게 하고 눌러도 반응하지 않게 둡니다. 예약이라면 지난 날짜와 휴무일이 여기 해당합니다. 고른 뒤에 안 된다고 알리는 것보다 고르기 전에 못 고르게 하는 쪽이 문의를 줄입니다.
5. 나눕니다. 화면에 보이는 값과 저장하는 값을 분리합니다. 한국 사용자에게는 2026년 9월 16일로, 영어권 사용자에게는 Sep 16, 2026 으로 보여 주되 저장은 한 가지 형식으로 합니다. 언어와 지역에 맞춰 표현만 바꾸는 이 처리를 현지화라고 부릅니다.

변형은 둘입니다. 범위 선택은 시작일과 종료일을 연달아 눌러 사이를 칠합니다. 날짜와 시각을 함께 받는 형태는 날짜를 고르고 나면 같은 팝오버 안에 시각 목록이 이어집니다.

달력을 붙였다고 칸을 잠그지는 않습니다. 직접 칠 수 있게 열어 두고 친 값을 달력에 반영합니다. 마우스를 못 쓰는 사용자에게는 이 경로가 유일한 입력 수단이기도 해서, 키보드 내비게이션으로 달력 안을 방향키로 옮겨 다닐 수 있게 만드는 일도 함께 합니다.

날짜를 받는 자리라면 어디에나 붙지만, 실제로 자주 놓이는 자리는 넷이고 각각 필요한 모양이 다릅니다.

1. 예약과 일정 — 앞으로의 날짜만 고릅니다. 오늘 이전을 막으면 기본 달력 하나로 충분합니다.
2. 마감일과 만료일 — 오늘부터 몇 주 안쪽이 많습니다. 달력 옆에 "내일", "다음 주" 같은 버튼을 두면 자주 쓰는 값이 한 번에 들어갑니다.
3. 기간 필터 — 대시보드에서 조회 기간을 정하는 자리입니다. 범위 선택이 기본이고, "지난 7일" 같은 빠른 선택을 함께 둡니다. 이게 없으면 매일 같은 기간을 보는 사람이 매일 달력을 두 번씩 엽니다.
4. 생년월일 — 여기서만 달력이 불리합니다. 30년 전으로 가는 길이 길어서, 연·월·일을 각각 고르는 셀렉트 세 칸이나 직접 입력이 더 빠릅니다.

넷을 가르는 질문은 하나입니다. 사용자가 고르려는 날짜가 지금 보이는 달 근처에 있는지입니다. 가까우면 달력이 이기고, 멀면 타이핑이 이깁니다.

손가락으로 쓰는 화면에서는 한 가지가 더 걸립니다. 한 달치 서른 칸을 좁은 화면에 늘어놓으면 칸 하나가 너무 작아집니다. 누를 수 있는 최소 크기를 뜻하는 터치 타깃 기준을 지키려면 모바일에서는 달력을 화면 아래에서 올라오는 넓은 형태로 바꾸는 편이 낫습니다.

"여기 날짜는 데이트 피커로 받죠. 직접 치게 두면 형식이 제각각으로 들어와요."

입력 방식을 고르는 일이 곧 들어올 값의 품질을 정하는 일이라는 말입니다.

"기간 필터에 '지난 30일' 버튼 하나만 추가해 주세요. 매일 두 번씩 달력 열고 있어요."

범위 선택만 있고 빠른 선택이 없어 같은 동작이 반복되고 있다는 뜻입니다.

"종료일 달력에서 시작일 이전은 막아 주세요."

두 날짜의 앞뒤 관계를 고를 때부터 강제해 달라는 요청입니다.

민서가 페이지덱 문서 만료일 화면을 다시 만들 때 처음 낸 안은 달력 하나였습니다. 지현이 데이터를 보니 사용자가 고른 만료일이 7일 뒤, 30일 뒤, 90일 뒤 셋에 몰려 있었습니다. 그래서 그 셋을 버튼으로 올리고 달력을 그 아래에 뒀습니다.

바뀐 뒤에는 달력을 여는 사람이 그 세 값에 해당하지 않는 날짜를 고르려는 사람뿐이었습니다.

날짜를 받는 칸이면 무조건 데이트 피커를 써야 한다고 여기는 경우가 많습니다. 달력이 손으로 치는 것보다 늘 편해 보이기 때문입니다. 실제로는 고르려는 날짜가 오늘에서 멀수록 달력이 불리합니다. 1992년 3월생 사용자는 화살표를 수백 번 누르거나 연도 선택 화면을 따로 찾아 들어가야 합니다. 그대로 두면 가입 화면에서 이탈이 생기고, 원인이 생년월일 칸이라는 걸 아무도 짐작하지 못합니다.

달력을 띄웠으니 잘못된 값은 들어오지 않는다고 믿는 것도 흔한 오해입니다. 없는 날짜가 막히는 건 맞지만 막히는 건 거기까지입니다. 종료일이 시작일보다 앞서거나, 한 번에 고를 수 있는 기간을 넘어서는 범위는 달력 혼자 걸러 내지 못합니다. 검증을 따로 붙이지 않으면 사용자는 고를 수 있었던 값을 고른 뒤에 오류 메시지를 받게 되고, 이때의 오류는 막을 수 있었던 오류라 더 답답합니다.