아코디언UI (Accordion UI)
쉽게 풀면
제목을 누르면 아래 내용이 펼쳐지고, 다시 누르면 접히는 방식이다.
왜 중요한가
아코디언은 긴 내용을 제목만 남기고 접어 두어 한 화면에 들어오는 정보량을 조절하는 패턴으로, FAQ 페이지나 모바일 설정 화면처럼 세로 공간이 귀한 곳에서 표준처럼 쓰입니다. 사용자가 원하는 항목만 펼쳐 보게 하여 스크롤 길이를 줄이고 인지 부하를 낮추는 효과가 사용성 연구에서 반복 확인되었습니다. 아코디언은 모바일 설정 화면처럼 세로 공간이 부족한 곳에서 자주 쓰이지만, 화면이 넓은 데스크톱에서는 굳이 접지 않고 다 펼쳐 보여줘도 공간 문제가 없어 아코디언의 필요성 자체가 달라진다. 아코디언 항목을 펼쳤을 때 다음 항목과의 경계가 명확하지 않으면 어디까지가 펼쳐진 내용인지 구분하기 어려워지므로 여백이나 구분선으로 경계를 뚜렷이 하는 것이 필요하다.
논문에서는 이렇게 쓰입니다
정보를 접고 펼치는 방식으로 화면 길이를 줄인 UI 설계 사례이다.
펼치고 접을 수 있음을 알리는 시각적 단서가 없으면 아코디언 기능의 발견 가능성이 크게 떨어짐을 보여준다.
펼치고 접을 수 있음을 알리는 시각적 단서가 없으면 아코디언 기능의 발견 가능성이 크게 떨어짐을 보여준다.
조금 더 깊게 보면
아코디언은 내용을 숨기기 때문에 사용자가 전체 내용을 읽어야 하는 문서나 페이지 내 검색(Ctrl+F)이 중요한 경우에는 오히려 발견 가능성을 떨어뜨립니다. 접힘 상태를 시각적으로 알리는 화살표 같은 기표가 없으면 열 수 있다는 사실을 알아채지 못하는 사용자가 많다는 점도 테스트에서 자주 드러납니다. 한 번에 하나만 열리게 할지 여러 개를 동시에 열지, 키보드와 스크린리더에서 어떻게 동작할지가 설계에서 실제로 갈리는 지점입니다. 여러 항목을 동시에 펼칠 수 있는 방식과 하나를 펼치면 나머지가 자동으로 닫히는 방식이 있으며, 후자는 화면 길이를 예측 가능하게 유지하지만 여러 항목을 한 번에 비교해야 하는 콘텐츠에는 불편을 준다.
주의할 점
아코디언UI는 콘텐츠를 숨기기 때문에 중요한 정보를 이 안에 배치하면 발견율이 낮아질 수 있다.