📌 아코디언 UI란?
아코디언은 접었다 폈다 할 수 있는 콘텐츠 박스를 말하기도 하고 메뉴를 펼쳤다 접었다 할 수 있기도 합니다.
검색한 바로는 마치 실제 악기 '아코디언'을 펼쳤다 접었다 하는 것처럼 클릭하면 내용이 나타났다 사라졌다 하는 방식이라서 이름이 붙여졌다고 합니다.
*내용 참고 및 이미지 출처 : http://61.107.76.13/Li/04_02.html
📌 아코디언 UI는 언제 쓰이는 것일까?
1) 한 페이지 안에 많은 정보가 있을 경우
2) 카테고리별로 묶어서 정리하고 싶을 경우
3) 사용자가 선택적으로 내용을 보고 싶을 경우
4) 공간을 아끼고 모바일에서도 보기 쉽게 만들기 위한 경우
더 많은 사용 용도가 있겠지만 한눈에 봤을 때 파악되는 점은 위와 같았습니다.
대표적인 사용 사례로는 FAQ, 상품 상세페이지 - 정보 전달, 모바일 화면에서 필터 메뉴 등 되겠습니다.
lithium Design 에서 확인된 아코디언 종류로는 메뉴 아코디언 / 콘텐츠 아코디언 / 컨테이너 아코디언이 있었고, 찾아본 결과 추가적으로 단일 열림형 / 다중 열림형으로 또 세분화하여 아코디언 종류가 있었습니다.
| 종류 | 특징 | 사용 용도 | 대표 사례 | 열림 방식 |
|---|---|---|---|---|
| 메뉴 아코디언 | 내비게이션용으로, 메뉴를 계층적으로 구성 | 사이드바, 모바일 메뉴 | 관리자 페이지, 햄버거 메뉴 | 보통 다중 |
| 콘텐츠 아코디언 | 텍스트·이미지 등 콘텐츠 내용을 접었다 펴는 방식 | FAQ, 상품 설명 | 자주 묻는 질문, 정보 더보기 | 단일 or 다중 |
| 컨테이너 아코디언 | 전체 구역(카드, 박스)을 접거나 펼침 | 대시보드, 설정 영역 | 관리자 UI 섹션별 정보 숨기기 | 보통 단일 |
| 단일 열림형 | 하나만 열 수 있음. 클릭 시 기존은 자동 닫힘 | Q&A, 설명서 | 질문을 하나씩만 펼침 | 단일 |
| 다중 열림형 | 여러 항목을 동시에 열 수 있음 | 쇼핑몰 필터 | 색상/사이즈/브랜드 필터 | 다중 |
📌 아코디언 UI의 장점
| 장점 | 설명 |
|---|---|
| 공간 효율성 | 콘텐츠를 접었다가 필요할 때 펼칠 수 있어, 화면을 깔끔하게 구성할 수 있다. 특히 정보가 많은 페이지에서 유용하다. |
| 사용자 편의성 | 사용자가 원하는 정보만 골라서 볼 수 있어 가독성과 탐색성이 향상된다. |
| 반응형 디자인에 적합 | 모바일·태블릿 등 좁은 화면에서도 유연하게 동작하고, 콘텐츠를 정돈되게 보여줄 수 있다. |
| 시각적 집중 유도 | 한 번에 하나의 항목만 펼치는 구조(단일 열림형)를 사용하면, 사용자의 집중력을 한 곳에 모을 수 있다. |
⚠️ 아코디언을 사용할 때 주의할 점
| 주의할 점 | 설명 |
|---|---|
| 너무 깊은 구조는 피하기 | 아코디언 안에 또 아코디언을 넣는 등 중첩 구조가 3단 이상이면 사용자가 혼란을 느낄 수 있다. |
| 열림/닫힘 상태 명확히 표시 | 아이콘 회전(▼ → ▲), 색 변화, border 강조 등으로 현재 열려 있는지 아닌지 시각적으로 알 수 있어야 한다. |
| 애니메이션 없이 갑자기 열리면 어색함 | transition, max-height, opacity 등을 이용해서 자연스럽게 열고 닫히는 효과를 주는 것이 UX적으로 좋다. |
| 키보드 접근성 고려 | 마우스 없이도 Tab, Enter, Space 키로 조작 가능해야 하며, aria-expanded 속성 등 접근성 속성도 중요하다. |
✅ 아코디언 구현 시 체크리스트
1) 제목 영역 클릭 시 콘텐츠 열기/닫기 가능해야 함
2) 열림/닫힘 상태 시각적으로 구분 가능해야 함 (ex. 아이콘 회전)
3) 콘텐츠는 기본적으로 숨겨진 상태에서 시작
4) 디자인 가이드(폰트, 여백, 컬러 등)에 맞게 구성
5) 모바일에서도 터치가 잘 되도록 여유 있는 padding
❗결론적으로 느낀 점
단순히 “접었다 펼치는 메뉴 UI”로만 생각했던 아코디언이었지만, 직접 자료를 찾아보니까 어떤 항목이 열려 있는지 사용자에게 명확하게 보여주는 시각적 요소,모바일에서 클릭이 편리하도록 터치 영역을 넉넉하게 주는 배려,콘텐츠가 펼쳐질 때 전환이 부드럽게 느껴지는 애니메이션 처리까지 생각보다 많은 UI/UX 고민이 필요하다는 걸 느꼈습니다.
**내가 생각하기에 UI/UX 고민이 필요한 부분들??
어떤 항목이 펼쳐져 있는지 한눈에 파악이 가능한가?
열림 상태에서 시각적으로 강조할 부분이 필요한가?
클릭했을떄 자연스럽게 전환되는가??
지금 어떤 항목이 열려있는지 확실히 구분되어 보이는지?
클릭 패딩 영역이나 콘텐츠 내용 가독성을 위해 라인 간격 여백 글자 크기등 고려 필요
등등 사용자 흐름에 맞춰서 판단해야할 요소가 굉장히 많은 부분이라고 생각이 들었다.
사용자에게 선택적으로 보여줄 수 있는 아주 유용한 UI 방식이라 디자인 가이드를 맞춰 구현하는 연습이 매우 필요할 거 같고 구현된 포스팅은 다음 포스팅에 정리하겠습니다.
