AIXLOGIS 로고AIXLOGIS
개발 일지

(WEB_PORTAL) 휴가 신청 폼 UX 개선 — 시간 선택과 다중 날짜 신청

#Next.js#UX#폼설계

개요

휴가 신청 폼을 실제로 써본 사용자들의 피드백을 반영해 두 가지를 개선했습니다. 하나는 시간을 고르는 방식, 다른 하나는 여러 날을 한 번에 신청하는 방법이었습니다.

핵심 구현 포인트

1. 시·분 분리 선택

기존에는 시간을 하나의 통합된 선택 목록에서 골라야 해서 항목 수가 많고 찾기 불편했습니다. 이를 시(예: 08~19시)와 분(00·30분 단위) 두 개의 선택 목록으로 나눠서, 각 목록의 항목 수를 줄이고 원하는 시간을 더 빠르게 찾을 수 있도록 했습니다.

2. 다중 날짜 신청

연속된 여러 날을 종일 휴가로 신청하는 경우가 잦았는데, 그때마다 하루씩 반복해서 신청해야 하는 불편함이 있었습니다. 시작일과 종료일을 지정하면 그 사이 모든 날짜를 한 번에 신청할 수 있도록 바꾸고, 다중 날짜를 선택하면 시간 선택 UI는 숨기고 종일로 고정되도록 했습니다.

신청 제출:
    다중 날짜 선택됨?
        예 → 날짜별 신청 목록 생성 (모두 종일)
        아니오 → 단일 신청 (시간 지정 가능)
    각 항목을 순서대로 API에 전송

안내 문구로 "N일 연속 종일 휴가로 신청됩니다"를 표시해서, 제출 전에 사용자가 결과를 미리 예상할 수 있게 했습니다.

회고

  • 폼을 설계할 때 "선택지가 많아서 불편하다"는 피드백은 대개 선택 항목을 줄이는 것보다 선택 방식을 잘게 쪼개는 것으로 해결되는 경우가 많았습니다. 시·분을 분리한 것이 대표적인 예였습니다.
  • 반복 작업(하루씩 여러 번 신청)을 하나의 조작(기간 지정)으로 묶어주는 것만으로도 체감 사용성이 크게 개선된다는 걸 다시 확인했습니다.
#Next.js#UX#폼설계

이슈와 관련된 다른 인사이트

DEV
개발 일지

(WEB_PORTAL) 사용자가 접속한 네트워크 위치에 따라 기능을 다르게 보여주기

DEV
개발 일지

(Python_backup tool) 종료 버튼을 눌렀는데 앱이 멈춘 것처럼 보이는 문제 해결하기

DEV
개발 일지

(Python_backup tool) 자동 동기화 기능에 사용자 제어권 추가하기