Date Picker 어디까지 고민해야 할까요?
일정 조율을 위한 날짜, 시간 선택 UI
나는 몰랐다. 안일하게도 'Date Picker가 필요해요'라는 이야기를 들었을 때, 그냥 날짜와 시간을 선택할 수 있는 영역 두 개만 마련해 주면 되는 줄로 생각했던 것이다. 날짜와 시간을 선택하는 UI에 그렇게 다양한 것들이 있고, 그중에 우리에게 딱 맞는 UI를 찾기가 이렇게 험난할 줄은.
우리의 Date Picker는 아래와 같은 조건을 만족해야 했다.
1. 날짜는 여러 개 선택할 수 있어야 한다. (예: 3/1, 3/2, 3/7...)
2-1. 한 날짜에는 하나의 시간대만 선택할 수 있어야 한다. (예: 3/1, 오전(9AM~12PM)
2-2. 한 날짜에는 하나의 시간만 선택할 수 있어야 한다. (예: 3/1, 오전 11AM)
3. 선택한 날짜&시간 값을 확인할 수 있어야 한다. (예: 3/ 오전, 3/2 오후... 를 선택하였습니다.)
4. 선택한 날짜&시간 값을 부분 삭제 할 수 있어야 한다. (예: 3/1 오전만 선택 삭제)
고객 <> 파트너의 매칭률을 높이기 위해, 고객이 접수할 때 여러 개의 날짜를 선택하는 것이 유리했다. 시간의 경우, 파트너 매칭 난이도를 낮추기 위해 특정 시간보다는 시간대를 선택할 수 있는 게 유리해 보였다(2-1). 하지만, 명확하게 일정을 픽스하기 위해서는 시간대보다는 특정 시간을 선택(2-2)할 필요가 있었다. 마지막으로 고객이 선택한 슬롯을 명확히 인지해 이후의 파트너와의 커뮤니케이션 미스를 줄이기 위해 선택한 값을 확인하고 삭제 혹은 추가할 수 있는 단계가 필요했다.
처음부터 이렇게 요구사항이 디테일했던 것은 아니었다. 사업부와 PM님과 수차례 고객/파트너 리서치를 진행하고 수시간의 회의를 거친 끝에 정리된 요구사항이었다. 요구사항이 정리되자 각자의 머릿속으로 상상만 했던 스크린을 화면으로 그려낼 수 있었다.
4가지 요구사항을 충족할 수 있는 와이어프레임은 다음(A~D)과 같았다.
A
바텀 모달 하나에서 선택과 확인을 모두 해결
- 형태 : 바텀모달
- 날짜 : 슬라이드
- 시간 : 타일
1. 특정 시간대를 선택할 수 있다.
2. 날짜/시간값 선택과 선택한 값을 확인하고 삭제하는 액션을 하나의 모달에서 이루어진다.
2. 3가지 정보(날짜선택/시간선택/선택된 정보)가 한 번에 보여, 정돈되어 보이지 않는다.
B
A안의 컨셉을 그대로 가져가되,
선택된 날짜/시간 데이터를 다른 페이지로 분리하여 사용자 피로도를 낮춤
- 형태 : 바텀모달
- 날짜 : 슬라이드
- 시간 : 리스트
1. 시간의 범위를 선택할 수 있다.
2. date picker 자체에 선택여부를 표시하였으나, A안처럼 한눈에 선택한 모든 날짜/시간을 볼 수는 없고, 단계를 넘기면 다음 페이지에서 확인 가능하다.
C
최대한 많은 선택지를 보여주어
매칭 난이도를 낮춤
- 형태 : 스크린
- 날짜 : 리스트
- 시간 : 아코디언
1. A, B안(바텀모달)에 비해 더 많은 시간 슬롯을 보여줄 수 있다.
2. 풀모달로 제공되었기 때문에 바텀모달에 비해 사용자 액션이 무거워 보이며, 화면에 텍스트가 많아 피로도가 높다.
3. 필요에 따라 시간대 혹은 특정 시간 슬롯을 선택하도록 하는 게 가능하다.
D
사용자 피로도를 고려하여
화면 개수가 늘어나더라도
날짜/시간 스탭을 분리
- 형태 : 풀모달+스크린
- 날짜 : 캘린더
- 시간 : 타일
1. 날짜와 시간을 선택하는 스탭의 화면을 분리하여 사용자 피로도를 낮춘다.
2. 단계가 늘어남에 따라 이탈이 발생할 수 있다.
3. 추후에 선택 가능한 날짜의 range 값을 확장하기가 슬라이드에 형태에 비해 용이하다.
4. 프러덕트 팀에서 지향하는 1 step / 1 action에 가깝다.
E
기존 라이브러리의 UI를 활용
- 형태 : 풀모달
- 날짜&시간 : 리스트
1. 기존에 다른 기능에서 활용하고 있던 라이브러리의 디자인을 살짝만 변형했다.
2. 여전히 한 화면에서 두 가지 액션을 요구하고 있어, 프러덕트 팀에서 지향하는 1 step / 1 action 과는 거리가 좀 있다.
결과적으로 개발공수와 요구사항, 우리 팀에서 지향하는 방향에 더 가까운 D 안이 MVP에 적용되었다. 다행히도 날짜와 시간을 선택하는 단계를 분리하여, 화면이 늘어났음에도 불고하고 해당 구간에서 눈에 띄는 이탈은 발견되지 않았다. 이후에 사용자 데이터를 지속적으로 트래킹 하며 발견되는 문제들을 추가 보완하기로 협의되었다.
끝.
