드롭다운 리스트(Drop-down List) 학습

드롭다운 리스트는 공간을 효율적으로 사용하면서 사용자에게 여러 선택지 중 하나를 고르게 하는 고전적이면서도 필수적인 UI 컴포넌트입니다. 평소에는 하나의 값만 보여주다가, 클릭하면 리스트가 아래로 펼쳐집니다.

이미지

드롭다운 리스트 UI 예시 이미지

설명

1. 드롭다운의 UX/UI 목적: 공간 절약

  • 정돈된 UI: 선택지가 많아도 한 줄만 차지해 화면이 깔끔해집니다.
  • 의사결정 보조: 직접 입력 대신 정해진 옵션 선택으로 입력 오류를 줄일 수 있습니다. (예: 국가, 생년월일)

2. 설계 시 주의할 UX 원칙

  • 옵션 개수: 2~3개면 라디오 버튼이 더 낫고, 20개 이상이면 검색/정렬 기능이 필요합니다.
  • 명확한 레이블/플레이스홀더: "지역을 선택하세요", "정렬 기준"처럼 의미가 드러나야 합니다.
  • 상태 시각화: 화살표(Chevron), 호버/포커스 상태로 펼침/선택 상태를 명확히 보여줘야 합니다.

4. 모바일 UX

  • 기본 UI 활용: 모바일은 OS Picker를 쓰는 표준 `select`가 더 편한 경우가 많습니다.
  • 바텀 시트 활용: 최근에는 드롭다운 대신 바텀 시트 패턴도 자주 사용합니다.

교수님의 실전 팁

"드롭다운은 사용자가 생각을 덜 하게 만들어야 합니다. 옵션이 너무 많다면 드롭다운 고집보다 모달 + 검색 방식이 더 나은 UX일 수 있습니다. 공간 절약보다 사용자의 편리함을 우선하세요."

코드

HTML

<div class="dropdown">
  <button class="dropdown-toggle">지역 선택 <span class="arrow">▼</span></button>
  <ul class="dropdown-menu">
    <li><a href="#">서울</a></li>
    <li><a href="#">부산</a></li>
    <li><a href="#">인천</a></li>
    <li><a href="#">대구</a></li>
  </ul>
</div>

CSS (Figma 가이드 반영 스타일)

.dropdown {
  position: relative;
  width: 200px;
}

.dropdown-toggle {
  width: 100%;
  padding: 12px 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 110%; left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  list-style: none;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
}

.dropdown.active .dropdown-menu {
  display: block;
}

jQuery (상태 제어)

$(document).ready(function() {
  $('.dropdown-toggle').on('click', function() {
    $(this).parent('.dropdown').toggleClass('active');
  });

  $('.dropdown-menu li a').on('click', function(e) {
    e.preventDefault();
    let selectedText = $(this).text();
    $('.dropdown-toggle').html(selectedText + ' <span class="arrow">▼</span>');
    $('.dropdown').removeClass('active');
  });

  $(document).on('click', function(e) {
    if (!$(e.target).closest('.dropdown').length) {
      $('.dropdown').removeClass('active');
    }
  });
});

실행