MultiStopSelector 단일 선택 UX 개선으로 사용자 혼란 줄이기

🤖 1721 in / 923 out / 2644 total tokens

v0.19.0에서 MultiStopSelector의 UX를 대폭 개선했다. 대부분의 사용자가 하나의 경유지만 선택한다는 피드백을 반영해, 기본적으로 단일 선택 모드로 동작하도록 변경했다. 첫 번째 경유지 선택 시 나머지 체크박스는 자동으로 비활성화되며, 여러 곳을 들러야 한다면 '다른 경유지 추가하기' 버튼을 통해 명시적으로 다중 선택 모드에 진입할 수 있다.

이번 변경으로 사용자가 실수로 여러 경유지를 선택하는 일을 방지했다. 다중 선택 모드 진입 시에는 안내 문구와 경고를 표시해 사용자가 의도적인 선택을 하도록 유도했다. 함께 접근성도 강화했는데, 지도 컨테이너에 aria-label과 role을 추가하고, 결과 카드에 스크린 리더용 설명을 덧붙였다. 카테고리 선택 버튼에도 aria-pressed 속성을 적용해 현재 선택 상태를 명확히 전달한다.

const [allowMultiSelect, setAllowMultiSelect] = useState(false);
 
const handleToggle = (id: string) => {
  const newSelected = new Set(selected);
  if (newSelected.has(id)) {
    newSelected.delete(id);
  } else {
    if (!allowMultiSelect && newSelected.size >= 1) return;
    newSelected.add(id);
  }
  setSelected(newSelected);
};

새로운 UX 플로우에 맞춰 유닛 테스트 10개를 추가했다. 단일 선택, 다중 선택 모드 전환, 체크박스 비활성화 로직 등을 꼼꼼히 검증했다. 8개 파일에서 +332줄, -31줄 변경으로 생각보다 규모가 커졌지만 핵심 로직은 깔끔하게 유지했다.

UX는 사용자 행동 패턴을 관찰하고 그에 맞춰 기본값을 조정하는 게 중요하다.