[UIㆍUX 용어] UIㆍUX 디자인에서 아코디언 UI vs 드롭다운 메뉴

Web 혹은 App에서 한 항목을 클릭하면 아래 내용이 열리고 다른 항목을 클릭하면 열렸던게 닫히는 구조 많이 보셨죠? 해당 UI 컴포넌트의 이름은 ‘아코디언'입니다. 이름의 어원은 실제 악기인 ‘아코디언(accordion)에서 왔습니다. 아코디언은 접었다 펴는 구조로 마치 버튼을 눌렀을 때 펼쳐지는 UI의 형태와 비슷하다하여 UIUX 용어로도 자리 잡았습니다.

아코디언 UI - 동일 레벨의 정보를 ‘세로 확장' 방식으로 노출 - 사용자가 비교하며 탐색하는 구조에 적합 - 콘텐츠 중심 인터페이스에서 활용 (FAQ, 상세 설명, 필터 옵션 등) 드롭다운 메뉴 - 선택지를 ‘레이어 위에 펼치는 방식'으로 제공 - 빠른 선택과 입력 효율에 집중된 구조 - 액션 중심 인터페이스에서 활용 (폼 선택, 네이게이션 등)

아코디언 UI가 적합한 경우 - 여러 항목을 비교해야 하는 경우 - 콘텐츠를 단계적으로 얽히게 해야 하는 경우 - 스크롤 기반 UX를 유지해야하는 경우 드롭다운 메뉴가 적합한 경우 - 옵션 중 하나를 빠르게 선택해야 하는 경우 - 화면을 목잡하게 만들지 않고 선택지를 숨겨야 하는 경우 - 입력 속도와 간결성이 중요한 경우

✔ 정보의 소비 목적이 ‘읽기'인지 ‘선택'인지 구분하기 ✔ 사용자 행동이 비교 중심인지, 단일 선택 중심인지 판단하기 ✔ 인터렉션 이후 화면 흐름이 유지되어야 하는지, 전환되어도 되는지 고려하기 💡 아코디언 UI는 정보 밀도 최적화 + 가독성 확보 💡 드롭다운 메뉴는 인터렉션 효율 + 입력 속도 개선