국가 선택기 재설계 및 selectToAutocomplete 플러그인
Source
Evernote/Technote scraps/Redesigning the Country Selector - Baymard Institute.md
Summary
Baymard Institute 는 체크아웃 과정에서 드롭다운 국가 선택기가 가지는 사용성 문제(오버뷰 부족, 정렬 불명확, 모바일 컨텍스트 결여 등)를 해결하기 위해 ‘progressive enhancement’ 원칙을 적용한 재설계를 제안합니다. 기존 드롭다운을 유지하여 접근성을 보장하되, 현대 브라우저에서는 오타 처리, 동의어 인식, 우선순위 정렬이 가능한 고급 자동 완성(auto-complete) 필드로 변환합니다. 이를 구현하는 jQuery 플러그인 ‘selectToAutocomplete’는 ISO 3166 기반 국가 목록을 예시로 제공하지만, 특정 목록에 종속되지 않으며 모든 드롭다운 요소에 적용 가능합니다. 백엔드 연동 없이 프론트엔드에서만 동작하며, IE6/7 에서는 기존 드롭다운으로 폴백됩니다.
Key Points
- 기존 드롭다운 국가 선택기의 사용성 문제점(스크롤, 정렬, 모바일 대응 등)을 지적하고 자동 완성 필드로의 전환을 제안
- Progressive Enhancement 적용: 접근성을 위해 기본 드롭다운 유지, 현대 브라우저에서는 고급 자동 완성 기능 제공
- 오타 허용, 여러 철자법 대응, 동의어 처리 및 입력 문자 기반 우선순위 정렬 로직 개선
- jQuery 플러그인 ‘selectToAutocomplete’ 제공: ISO 3166 목록 예시 포함이나 사용자 정의 목록 가능
- 국가 선택기 외에도 모든 드롭다운(select 태그)에 적용 가능한 범용성
- 백엔드 연동 불필요 (프론트엔드 즉시 검색), IE6/7 호환성 유지 (기능 폴백)