어떤 날짜를 고르는가
리(2017)의 지침처럼 가장 좋은 형태는 '어떤 날짜인가'에 따라 달라요. 다음 주 호텔 체크인처럼 가까운 날짜는 요일과 주가 보이는 달력이 좋아요. 반면 생년월일처럼 수십 년 전 날짜를 달력으로 고르게 하면 화살표를 수백 번 눌러야 해요. 이런 날짜는 연·월·일을 직접 입력하는 칸이 훨씬 빨라요. 머티리얼(Google, n.d.)도 달력형과 입력형을 함께 제공하고 서로 전환할 수 있게 해요.
모바일에서 잘 만드는 법
휠형은 애플(n.d.)의 iOS 관례라 익숙하지만, 큰 범위를 오가기엔 느려요. 달력은 바텀 시트로 띄우면 한 손으로 다루기 좋고, 날짜 칸은 파히와 동료들(2006)의 연구처럼 엄지로 누를 만큼 커야 해요(터치 타깃 크기). 예약처럼 기간을 고를 때는 시작과 끝을 한 달력에서 이어서 고르게 하고, 선택할 수 없는 날짜는 흐리게 하면서 이유도 알려 줘요. 오늘 날짜와 선택한 날짜는 서로 다르게 표시해요.
형식 힌트와 접근성
직접 입력에서는 '1990.05.21'처럼 형식을 입력란 가까이 보여주면 정확도가 올라가요(Christian et al., 2007). 세클러와 동료들(2014)의 결과처럼 점·하이픈·공백 등 여러 형식을 너그럽게 받아들이고, 틀렸을 때는 인라인 유효성 검사로 바로 알려 줘요. WCAG 2.2(W3C, 2023)의 2.5.7 기준처럼 휠을 끌어야만 고를 수 있으면 안 되고 탭이나 입력으로도 고를 수 있어야 하며, 2.5.8 기준의 최소 타깃 크기도 지켜야 해요.
자주 묻는 질문
- 생년월일은 어떤 형태가 좋나요?
- 먼 날짜이므로 연·월·일 직접 입력이 가장 빨라요. 달력은 피하는 게 좋아요.
- 휠 선택기는 접근성 문제가 없나요?
- 끌기만으로 조작해야 하면 문제예요. 탭이나 직접 입력 같은 대안을 함께 제공해요.
출처 검토일: 2026-10-27
참고문헌
- Li, A. (2017, January 22). Date-input form fields: UX design guidelines. Nielsen Norman Group. 달력·드롭다운·직접 입력 중 무엇을 쓸지 정리한 지침이라, 날짜 입력 방식을 고를 때 참고하면 도움이 돼요.
- Google. (n.d.). Date pickers. Material Design 3. 도킹형·모달형·입력형 날짜 선택기와 기간 선택을 다뤄, 안드로이드 구현에 참고하면 도움이 돼요.
- Apple. (n.d.). Pickers. Human Interface Guidelines. 휠형·컴팩트형 날짜 선택기 지침이라, iOS 관례를 맞출 때 참고하면 도움이 돼요.
- Christian, L. M., Dillman, D. A., & Smyth, J. D. (2007). Helping respondents get it right the first time: The influence of words, symbols, and graphics in web surveys. Public Opinion Quarterly, 71(1), 113–125. 날짜 입력란의 형식 표시(MM/YYYY 등)가 정확도를 높인다는 연구라, 직접 입력 형식 힌트에 참고하면 도움이 돼요.
- Seckler, M., Heinz, S., Bargas-Avila, J. A., Opwis, K., & Tuch, A. N. (2014). Designing usable web forms: Empirical evaluation of web form improvement guidelines. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1275–1284). ACM. 입력 형식을 유연하게 받고 분명히 안내하는 양식이 오류를 줄인다는 실험이라, 날짜 형식 처리에 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 달력의 날짜 칸 크기를 정할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 드래그 없이 조작할 수 있어야 한다는 2.5.7과 타깃 크기 2.5.8 기준이 있어, 휠·달력 선택기의 접근성에 참고하면 도움이 돼요.