개발 일지
(WEB_PORTAL) 휴가 신청 폼 UX 개선 — 시간 선택과 다중 날짜 신청
#Next.js#UX#폼설계
개요
휴가 신청 폼을 실제로 써본 사용자들의 피드백을 반영해 두 가지를 개선했습니다. 하나는 시간을 고르는 방식, 다른 하나는 여러 날을 한 번에 신청하는 방법이었습니다.
핵심 구현 포인트
1. 시·분 분리 선택
기존에는 시간을 하나의 통합된 선택 목록에서 골라야 해서 항목 수가 많고 찾기 불편했습니다. 이를 시(예: 08~19시)와 분(00·30분 단위) 두 개의 선택 목록으로 나눠서, 각 목록의 항목 수를 줄이고 원하는 시간을 더 빠르게 찾을 수 있도록 했습니다.
2. 다중 날짜 신청
연속된 여러 날을 종일 휴가로 신청하는 경우가 잦았는데, 그때마다 하루씩 반복해서 신청해야 하는 불편함이 있었습니다. 시작일과 종료일을 지정하면 그 사이 모든 날짜를 한 번에 신청할 수 있도록 바꾸고, 다중 날짜를 선택하면 시간 선택 UI는 숨기고 종일로 고정되도록 했습니다.
신청 제출:
다중 날짜 선택됨?
예 → 날짜별 신청 목록 생성 (모두 종일)
아니오 → 단일 신청 (시간 지정 가능)
각 항목을 순서대로 API에 전송
안내 문구로 "N일 연속 종일 휴가로 신청됩니다"를 표시해서, 제출 전에 사용자가 결과를 미리 예상할 수 있게 했습니다.
회고
- 폼을 설계할 때 "선택지가 많아서 불편하다"는 피드백은 대개 선택 항목을 줄이는 것보다 선택 방식을 잘게 쪼개는 것으로 해결되는 경우가 많았습니다. 시·분을 분리한 것이 대표적인 예였습니다.
- 반복 작업(하루씩 여러 번 신청)을 하나의 조작(기간 지정)으로 묶어주는 것만으로도 체감 사용성이 크게 개선된다는 걸 다시 확인했습니다.
#Next.js#UX#폼설계