검색 가능한 드롭다운: 긴 목록을 사용자 친화적으로 만들기

200개 국가가 있는 드롭다운 메뉴, 50개 주 목록, 수백 가지 제품 옵션. 긴 드롭다운 목록을 스크롤하는 것은 짜증을 유발하고 양식 작성을 포기하게 만듭니다.

검색 가능한 드롭다운 사용자가 스크롤하는 대신 "can"을 입력하여 옵션을 즉시 필터링할 수 있도록 하면 이 문제를 해결할 수 있습니다. 사용자는 "can"을 입력하면 캐나다가 맨 위에 표시됩니다.

이 가이드에서는 검색 가능한 드롭다운 메뉴를 언제 사용해야 하는지, 그리고 워드프레스 폼에서 어떻게 설정하는지 알아봅니다.

긴 드롭다운 메뉴의 문제점

옵션이 많아질수록 일반 드롭다운 메뉴는 사용하기 어려워집니다.

사용자 경험 문제

• 끝없는 스크롤링 알파벳순으로 정렬된 국가 목록에서 "미국"을 찾으려면 180개가 넘는 국가를 스크롤해서 넘겨야 합니다.
• 모바일 악몽 터치스크린의 작은 스크롤 영역
• 시간이 많이 걸리는 - 사용자는 하나의 옵션을 찾는 데 10초 이상을 소비합니다.
• 발생하기 쉬운 오류 – 실수로 잘못된 상품을 선택하기 쉽습니다
• 좌절 - 드롭다운 필드가 여러 개인 경우 반복됩니다.

드롭다운 메뉴에 문제가 생길 때

검색 가능한 드롭다운 메뉴는 어떻게 작동하나요?

검색 가능한 드롭다운은 텍스트 입력란과 드롭다운 목록을 결합한 것입니다.

1. 사용자가 드롭다운 필드를 클릭합니다.
2. 검색 상자가 나타나거나 (또는 ​​해당 필드 자체가 검색 가능해집니다)
3. 사용자가 몇 글자를 입력합니다.
4. 입력값에 맞춰 실시간으로 옵션을 필터링합니다.
5. 사용자가 필터링된 짧은 목록에서 선택합니다.

예시: 국가 선택

검색 없이: 200개가 넘는 국가 목록을 스크롤하여 "독일"을 찾아보세요.

검색 기능 포함: "ger"를 입력하세요 → 독일, 알제리, 나이지리아 보기 → 독일을 클릭하세요

절약된 시간: 10초 이상 → 2초

검색 가능한 드롭다운의 일반적인 사용 사례

국가 선택

대표적인 예입니다. 195개국이 넘는 국가에서는 검색이 필수적입니다.

• "uni"를 입력하세요 → 미국, 영국, 아랍에미리트
• “aus” 입력 → 호주, 오스트리아
• "새로운"을 입력하세요 → 뉴질랜드, 뉴칼레도니아

주/도 선택

미국 50개 주, 캐나다 13개 주 또는 전 세계 지역:

• "cal"을 입력하세요 → 캘리포니아
• "새로운"을 입력하세요 → 뉴욕, 뉴저지, 뉴햄프셔, 뉴멕시코

제품 카테고리

수백 가지 제품 유형을 보유한 전자상거래 사이트:

• "랩탑"을 검색하면 노트북, 노트북 액세서리, 노트북 가방이 나옵니다.
• "휴대폰"을 입력하세요 → 휴대폰, 휴대폰 케이스, 휴대폰 충전기

직책/산업 분야

다양한 직종 목록이 포함된 구인 신청서:

• "엔지니어"를 입력하면 소프트웨어 엔지니어, 토목 엔지니어, 기계 엔지니어가 됩니다.
• "시장"을 입력하세요 → 마케팅 관리자, 시장 분석가, 마켓플레이스 전문가

언어

100개 이상의 언어 설정 옵션:

• "span"을 입력하세요 → 스페인어
• "chin"을 입력하세요 → 중국어(간체), 중국어(번체)

대학교/학교

교육기관 목록:

• "하버드"를 입력하세요 → 하버드 대학교
• "MIT"를 입력하세요 → 매사추세츠 공과대학교

시간대

400개 이상의 시간대 옵션:

• "pacific"을 입력하세요 → Pacific/Auckland, Pacific/Honolulu, US/Pacific
• "뉴욕"을 입력하세요 → America/New_York

검색 가능한 드롭다운 설정하기

다음은 검색 가능한 드롭다운 메뉴를 만드는 방법입니다. 자동 양식 작성기:

1단계: Auto Form Builder를 설치합니다.

1. We Buy Orders 신청서를 클릭하세요. 플러그인 → 새로 추가
2. "A.F.B.(자동 양식 작성기의 약칭)
3. 찾기 "AFB – 자동 양식 작성기 – 드래그 앤 드롭 양식 생성기"
4. 지금 설치다음, 활성화

2단계: 드롭다운 필드 추가

1. 양식을 만들거나 수정하세요
2. 을 끌어 쓰러지 다 양식에 필드를 추가하세요
3. 설정을 열려면 클릭하세요

3단계: 옵션 추가

원하는 옵션 목록을 입력하세요. 목록이 길 경우 다음 방법을 사용할 수 있습니다.

• 수동으로 입력 각 옵션을 하나씩 입력하세요
• 대량 추가 - 옵션 목록을 붙여넣으세요 (한 줄에 하나씩).

4단계: 검색 활성화

드롭다운 설정에서 다음을 찾으세요. 검색 가능 or 검색 활성화 옵션입니다. 켜짐으로 설정하세요.

이제 드롭다운 메뉴에 사용자가 입력하는 동안 옵션을 필터링하는 검색/필터 상자가 포함됩니다.

5단계: 검색 동작 구성

사용하는 폼 빌더에 따라 다음과 같은 옵션이 있을 수 있습니다.

• 최소 문자 - 입력된 문자 X개 이후부터 필터링을 시작합니다.
• 채용 공고 - 옵션 시작 부분 또는 어느 위치에서든 일치시키세요
• 자리 표시 자 텍스트 – “검색하려면 입력하세요…” 또는 “국가 검색…”

드롭다운 필드 활용 모범 사례

1. 20개 이상의 옵션에 대해 항상 검색 기능을 활성화하세요

드롭다운 메뉴에 옵션이 20개 이상이라면 검색 기능을 활성화하세요. 아주 간단합니다. 사용자들이 분명 좋아할 겁니다.

2. 명확한 자리 표시자 텍스트를 사용하세요

사용자에게 검색 기능을 사용할 수 있다고 알려주세요.

• "국가를 선택하세요 (검색하려면 입력하세요)"
• “원하는 주를 선택하세요…”
• “검색 또는 선택…”

3. 옵션을 논리적으로 정렬하세요

검색을 하더라도 옵션 주문 순서는 중요합니다.

• A-Z - 국가, 주 등의 이름을 검색할 때 가장 적합합니다.
• 가장 흔한 것부터 – 인기 있는 옵션을 맨 위에 배치하세요 (미국, 영국, 캐나다)
• 그룹화 된 – 구분 기호가 있는 카테고리

4. 일반적인 변형을 포함시키세요

사용자는 다음과 같은 내용을 검색할 수 있습니다.

• 미국(USA) 또는 미합중국(United States) 또는 미국(US) 또는 아메리카(America)
• "영국" 또는 "영국 연합 왕국" 또는 "브리튼" 또는 "잉글랜드"

가능하다면 동일한 옵션에 해당하는 일반적인 약어 또는 변형을 포함하십시오.

5. 모바일에서 테스트

검색 가능한 드롭다운 메뉴는 터치 기기에서 원활하게 작동해야 합니다.

• 검색 입력란을 쉽게 탭할 수 있습니다.
• 입력할 수 있는 키보드가 나타납니다.
• 옵션 크기가 충분히 커서 정확하게 탭할 수 있습니다.

검색 가능한 드롭다운을 사용하지 말아야 할 경우

검색 가능한 드롭다운 메뉴가 항상 정답은 아닙니다.

간략 목록 (옵션 10개 미만)

옵션이 5~10개 정도라면 일반 드롭다운 메뉴가 더 빠릅니다. 모든 항목을 한눈에 볼 수 있으니 일일이 입력할 필요가 없습니다.

사용자가 정확한 용어를 모를 때

검색을 하려면 사용자가 무엇을 입력해야 하는지 알아야 합니다. 하지만 여러 옵션을 탐색하는 경우에는 카테고리별 목록이나 라디오 버튼이 더 효과적일 수 있습니다.

예/아니오 또는 이진 선택

라디오 버튼을 사용하세요. 두 가지 옵션만 있는 경우에는 드롭다운 메뉴가 전혀 필요 없습니다.

숫자 범위

연령대 또는 수량 선택 시 다음 사항을 고려하십시오.

• 숫자 입력 필드
• 슬라이더
• 간략한 드롭다운 (1-10)

검색 가능한 드롭다운 메뉴의 대안

보유 데이터에 따라 다음 대안들을 고려해 보세요:

텍스트 필드 자동 완성

사용자가 자유롭게 입력하면 아래에 제안 사항이 표시됩니다. 사용자가 목록에 없는 값을 입력할 가능성이 있을 때 유용합니다.

계단식 드롭다운

긴 목록 하나를 두 개의 짧은 목록으로 나누세요:

• 첫 번째 드롭다운 메뉴: 대륙을 선택하세요
• 두 번째 드롭다운 메뉴: 국가 선택(대륙별 필터링)

"기타"가 포함된 라디오 버튼

상위 5~7개 옵션을 라디오 버튼으로 표시하고, "기타" 옵션을 선택하면 텍스트 입력란이 나타나도록 합니다.

그룹화/범주화된 옵션

옵션 그룹을 사용하여 옵션을 범주별로 정리하세요.

• 북아메리카
  • Canada
  • Mexico
  • United States
• 유럽
  • France
  • 독일
  • 영국

사전 구성된 옵션 목록

굳이 처음부터 모든 걸 새로 만들 필요는 없습니다. 필요한 일반적인 목록은 다음과 같습니다.

국가

유엔 회원국 195개국과 그 영토. 공통 국가(미국, 영국, 캐나다, 호주 등)를 맨 위에 놓고 그 아래로 알파벳순으로 나열하는 것을 고려해 보세요.

미국 주

미국 50개 주와 워싱턴 D.C. 및 자치령. 알파벳순이 적당합니다.

캐나다 지방

13개 주 및 준주. 매우 간단하므로 검색은 선택 사항입니다.

시간대

표준 시간대 식별자(America/New_York, Europe/London)를 사용하십시오. 지역별로 그룹화하십시오.

언어

ISO 언어 코드와 표시 이름입니다. 자주 사용하는 언어를 먼저 나열하세요.

적용 산업

표준 산업 분류 목록(NAICS, SIC) 또는 대상 고객에 맞춘 맞춤형 목록을 제공합니다.

성능 고려 사항

매우 큰 목록 (옵션 1000개 이상)

목록 크기가 매우 큰 경우:

• 주문형 적재 옵션 - 사용자가 입력하는 대로 서버에서 데이터를 가져옵니다.
• 최소 문자 수 설정 – 검색 전에 2~3개의 문자를 입력해야 합니다.
• 표시되는 제한 결과 - 전체 500개가 아닌 상위 20개 결과만 표시합니다.

페이지 로드 영향

옵션 목록이 길어지면 페이지 크기가 커집니다. 옵션이 500개 이상인 목록의 경우 다음을 고려하십시오.

• AJAX를 통한 옵션 로딩
• 계단식 드롭다운 메뉴 열기
• 서버 측 검색 사용

접근 용이성

검색 가능한 드롭다운 메뉴가 접근 가능한지 확인하십시오.

키보드 탐색

• 탭하여 필드에 초점을 맞추세요
• 검색하려면 입력하십시오.
• 옵션 탐색을 위한 화살표 키
• 선택하려면 Enter를 누르세요
• 탈출하여 닫기

스크린 리더

• 적절한 ARIA 라벨
• 결과 개수를 발표하세요
• 선택한 옵션을 알립니다

시각적 표시기

• 명확한 초점 상태
• 강조 표시된 현재 옵션
• 검색 중 로딩 표시기

자주 묻는 질문

검색을 하기 전에 옵션이 몇 개나 필요할까요?

옵션이 20개 이상인 드롭다운 메뉴에는 검색 기능을 활성화하세요. 옵션이 50개 이상인 경우에는 검색 기능이 필수적입니다. 일부 사용자는 옵션이 10~15개인 경우에도 검색 기능을 유용하게 생각합니다.

검색은 처음부터 시작해야 할까요, 아니면 어느 위치에서든 시작해야 할까요?

"어디든" 검색하는 방식은 오류를 더 쉽게 찾아냅니다. 예를 들어 "york"를 검색하면 "New York"이 나옵니다. 반면, 단어의 시작 부분만 검색하는 방식은 이미 알고 있는 단어를 찾을 때 더 빠릅니다.

사용자가 모든 옵션을 스크롤하여 볼 수 있나요?

네, 검색 가능한 드롭다운 메뉴는 일반적으로 처음에 전체 목록을 보여줍니다. 검색을 통해 목록을 필터링할 수 있지만, 사용자는 원할 경우 스크롤하여 목록을 줄일 수도 있습니다.

사용자가 검색어를 잘못 입력하면 어떻게 될까요?

기본 검색은 오타를 처리하지 못합니다. 국가와 같은 중요한 필드의 경우, 흔히 발생하는 오타를 포함하도록 검색하거나, 가능하다면 유사 검색 기능을 활용하세요.

검색 가능한 드롭다운 메뉴는 모바일에서도 작동하나요?

네, 그리고 모바일 환경에서는 일반 드롭다운 메뉴보다 타이핑이 더 빠른 경우가 많습니다. 스크롤 영역이 작은 긴 목록을 스크롤하는 것보다 타이핑이 훨씬 빠르기 때문입니다.

제품 개요

긴 드롭다운 목록을 사용하기 쉽게 만드세요:

1. 긴 목록을 식별합니다 – 옵션이 20개 이상인 드롭다운 메뉴
2. 검색 사용 – 사용자가 직접 입력하여 필터링할 수 있도록 함
3. 명확한 자리 표시자를 사용하세요 – “검색하려면 입력하세요…”
4. 논리적으로 순서대로 인기 상품부터 먼저, 그 다음은 알파벳순으로 정렬
5. 모바일에서 테스트 – 원활한 터치 경험을 보장합니다
6. 대안 고려 계단식 드롭다운 메뉴, 그룹화된 옵션

맺음말

긴 드롭다운 목록은 양식 작성 완료율을 떨어뜨립니다. 검색 가능한 드롭다운 사용자 경험을 혁신적으로 개선하여, 더 이상 끝없이 스크롤할 필요 없이 몇 초 만에 원하는 옵션을 찾을 수 있습니다.

국가, 주, 제품 또는 20개 이상의 옵션이 있는 목록이든 상관없이 검색 기능을 추가하면 양식을 더 빠르고 사용자 친화적으로 만들 수 있습니다.

자동 양식 작성기 검색 기능을 갖춘 드롭다운 필드를 만들 수 있어 사용자가 아무리 긴 목록에서도 필요한 항목을 빠르게 찾을 수 있도록 도와줍니다.

폼 작성 실력을 향상시킬 준비가 되셨나요? 자동 양식 작성기 다운로드 지금 바로 드롭다운 목록을 사용자 친화적으로 만들어 보세요.