자바스크립트로 드롭다운 기능 만들기 (Dropdown)

 

 

웹 페이지를 만들다 보면 메뉴나 필터, 설정 창 등 드롭다운(dropdown) 기능이 꼭 필요할 때가 있습니다. 이번 글에서는 jQuery 없이도 구현 가능한 순수 자바스크립트(dropdown)를 활용해 사용자가 클릭하면 열리고, 다시 클릭하면 닫히는 기본 드롭다운 UI를 만드는 방법을 소개합니다.

 

✅ 드롭다운이란?

드롭다운(dropdown)은 사용자의 클릭에 따라 선택지를 보여주는 UI 요소입니다. 대표적인 예로 내비게이션 메뉴, 언어 선택 창, 알림 목록 등에서 자주 활용됩니다.

 

 

🛠️ HTML 구조

 

먼저 dropdown을 구성할 기본 HTML을 작성합니다:

<div class="dropdown">
  <button id="dropdownButton">메뉴 열기 ▾</button>
  <ul id="dropdownMenu" class="dropdown-menu">
    <li><a href="#">홈</a></li>
    <li><a href="#">소개</a></li>
    <li><a href="#">문의</a></li>
  </ul>
</div>

 

🎨 CSS 스타일

기본적으로 드롭다운 메뉴는 숨기고, 버튼 클릭 시 보이도록 처리합니다.

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  list-style: none;
  padding: 0;
  margin-top: 8px;
  width: 160px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.dropdown-menu li {
  padding: 10px;
}

.dropdown-menu li:hover {
  background-color: #f4f4f4;
}

 

⚙️ JavaScript로 토글 기능 구현

버튼을 클릭하면 ul.dropdown-menu의 display 속성을 토글 하는 스크립트를 작성합니다.

document.addEventListener("DOMContentLoaded", function () {
  const button = document.getElementById("dropdownButton");
  const menu = document.getElementById("dropdownMenu");

  button.addEventListener("click", function () {
    const isVisible = menu.style.display === "block";
    menu.style.display = isVisible ? "none" : "block";
  });

  // 외부 클릭 시 드롭다운 닫기
  document.addEventListener("click", function (event) {
    if (!button.contains(event.target) && !menu.contains(event.target)) {
      menu.style.display = "none";
    }
  });
});

 

이 스크립트는:

• 버튼을 클릭하면 메뉴를 열고,
• 다시 클릭하면 닫으며,
• 메뉴 외부를 클릭하면 자동으로 메뉴가 사라집니다.

 

아래는 드롭다운 메뉴 항목을 선택하면 버튼 텍스트가 해당 항목으로 변경되는 기능까지 포함한 자바스크립트 예제입니다. 드롭다운 기능에 있어 UX적으로도 매우 유용한 개선이에요. 😄

 

⚙️ 보완된 JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const button = document.getElementById("dropdownButton");
  const menu = document.getElementById("dropdownMenu");

  // 메뉴 토글
  button.addEventListener("click", function (e) {
    e.stopPropagation(); // 메뉴 외부 클릭 시 닫힘 방지
    menu.style.display = menu.style.display === "block" ? "none" : "block";
  });

  // 메뉴 항목 클릭 시 버튼 텍스트 변경
  menu.querySelectorAll("li a").forEach(item => {
    item.addEventListener("click", function (e) {
      e.preventDefault(); // 기본 링크 동작 방지
      button.textContent = this.textContent + " ▾"; // 버튼 텍스트 변경
      menu.style.display = "none"; // 메뉴 닫기
    });
  });

  // 외부 클릭 시 메뉴 닫기
  document.addEventListener("click", function (e) {
    if (!menu.contains(e.target) && !button.contains(e.target)) {
      menu.style.display = "none";
    }
  });
});

 

이 코드는 다음을 구현합니다:

• 버튼을 클릭하면 드롭다운 메뉴가 열리고,
• 메뉴 항목을 클릭하면 해당 텍스트로 버튼이 변경되며,
• 외부를 클릭하면 드롭다운이 닫힙니다.

 

 

드롭다운 UI는 시각적 효과뿐 아니라 모든 사용자가 접근 가능해야 해요. 이제 접근성(Accessibility, A11y)을 고려한 구조로 업그레이드해볼게요.

 

✅ 접근성을 강화한 HTML 구조

<div class="dropdown">
  <button
    id="dropdownButton"
    aria-haspopup="true"
    aria-expanded="false"
    aria-controls="dropdownMenu"
  >
    메뉴 열기 ▾
  </button>
  <ul
    id="dropdownMenu"
    class="dropdown-menu"
    role="menu"
    aria-labelledby="dropdownButton"
  >
    <li role="menuitem"><a href="#">홈</a></li>
    <li role="menuitem"><a href="#">소개</a></li>
    <li role="menuitem"><a href="#">문의</a></li>
  </ul>
</div>

 

🔎 접근성 포인트 요약:

• aria-haspopup="true": 이 버튼이 팝업 메뉴를 연다는 의미
• aria-expanded: 열림 상태를 실시간으로 반영
• aria-controls + aria-labelledby: 버튼과 메뉴를 명확하게 연결
• role="menu" + role="menuitem": 화면낭독기에서 드롭다운이라는 의미를 전달

 

⚙️ 접근성 강화 + 키보드 지원 JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("dropdownButton");
  const menu = document.getElementById("dropdownMenu");

  // 메뉴 열기/닫기
  function toggleMenu(show) {
    menu.style.display = show ? "block" : "none";
    button.setAttribute("aria-expanded", show ? "true" : "false");
  }

  button.addEventListener("click", (e) => {
    e.stopPropagation();
    const isOpen = button.getAttribute("aria-expanded") === "true";
    toggleMenu(!isOpen);
  });

  // 메뉴 아이템 클릭 → 버튼 텍스트 변경
  menu.querySelectorAll("a").forEach(item => {
    item.addEventListener("click", (e) => {
      e.preventDefault();
      button.textContent = item.textContent + " ▾";
      toggleMenu(false);
    });
  });

  // 외부 클릭 시 메뉴 닫기
  document.addEventListener("click", (e) => {
    if (!menu.contains(e.target) && !button.contains(e.target)) {
      toggleMenu(false);
    }
  });

  // ESC 눌렀을 때 닫기
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      toggleMenu(false);
      button.focus();
    }
  });

  // 아래 방향키로 포커스 이동
  button.addEventListener("keydown", (e) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      const firstItem = menu.querySelector("a");
      if (firstItem) firstItem.focus();
    }
  });

  // 메뉴 항목 간 방향키 이동
  menu.addEventListener("keydown", (e) => {
    const items = Array.from(menu.querySelectorAll("a"));
    const currentIndex = items.indexOf(document.activeElement);

    if (e.key === "ArrowDown") {
      e.preventDefault();
      const next = items[(currentIndex + 1) % items.length];
      next.focus();
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      const prev = items[(currentIndex - 1 + items.length) % items.length];
      prev.focus();
    }
  });
});

 

🌟 이 코드의 접근성 요약

• ✅ 버튼 역할 명확화 (aria-* 속성)
• ✅ 키보드 탐색 가능 (방향키, ESC 지원)
• ✅ 포커스 이동 처리
• ✅ 화면 낭독기에서 메뉴 인식 지원

이제 시각적 사용자뿐 아니라 키보드 사용자, 스크린리더 사용자 모두에게 친절한 드롭다운 UI가 완성됐어요!

 

 

🍵 마무리하며

드롭다운 UI는 단순한 기능처럼 보일 수 있지만,

사용자 경험의 디테일을 좌우하는 중요한 요소입니다.

순수 자바스크립트만으로도 클릭, 키보드 탐색, 외부 클릭 처리 등 다양한 상호작용을 구현할 수 있으며,

접근성을 강화하면 더욱 많은 사용자에게 열린 인터페이스를 제공할 수 있어요.

 

작은 드롭다운 하나를 만들면서도

HTML 구조, 스타일링, 이벤트 처리, 그리고 웹 접근성까지

모두 고민할 수 있다는 점에서 프런트엔드 개발은 정말 매력적인 분야죠.

 

앞으로도 이런 UI 컴포넌트 하나하나를 세심하게 만들어가며,

더 나은 사용자 경험을 디자인해보세요!

다음 포스트에서는 더 다양한 인터랙션이나 애니메이션 활용 방법도 소개할 예정입니다.

기대해주세요. 😊