[UI 디자인] 사용자에 정보 전달: 아코디언, 드롭다운

정보가 많아질수록 UI는 정리 방식이 중요해집니다.
이때 자주 사용되는 패턴이 바로
**아코디언(Accordion)**과 **드롭다운(Dropdown)**입니다.

 

겉보기엔 비슷하지만, 목적은 분명히 다릅니다.

 

1. 아코디언(Accordion)

1️⃣ 특징

• 클릭하면 콘텐츠가 펼쳐지고 다시 접힘
• 한 영역 안에서 정보의 확장/축소를 반복
• 보통 화살표(∨ / ∧) 아이콘 사용

2️⃣ 활용

• 고객센터 FAQ
• 설정 설명
• 도움말, 가이드 문서

핵심: “정보를 단계적으로 보여주고 싶을 때”

아코디언 예시

 

2. 드롭다운(Dropdown)

1️⃣ 특징

• 버튼이나 아이콘 클릭 시 선택 옵션 목록 표시
• 항목을 선택하면 즉시 동작 수행
• 화면을 크게 차지하지 않음

2️⃣ 활용

• 더보기 메뉴 (···)
• 다운로드 / 삭제 / 좋아요 같은 액션 선택
• 정렬, 필터 옵션

핵심: “여러 행동 중 하나를 선택해야 할 때”

드롭다운 예시

 

 

정리하면

구분	아코디언	드롭다운
목적	정보 열고 닫기	행동 선택
콘턴츠	설명 및 텍스트	옵션 및 메뉴
사용 맥락	FAQ, 가이드	설정, 액션 메뉴

아코디언은 ‘읽기용’,
드롭다운은 ‘선택용’ UI다.

• 내용을 이해시키고 싶다 → 아코디언
• 행동을 고르게 하고 싶다 → 드롭다운

정보를 펼칠 땐 아코디언,
행동을 고를 땐 드롭다운을 사용하자.

이 기준만 지켜도 UI 구조가 훨씬 명확해집니다.