Accordion, 악기 비유, FAQ의 표준 형식

한 줄로

접고 펼 수 있는 콘텐츠 섹션입니다. 손풍금(아코디언) 악기처럼 늘어났다 줄어드는 모습에서 이름이 왔습니다.

어디서 왔나

악기 아코디언, 1822년 독일에서 발명된 손풍금입니다. 접었다 펼치는 풀무 구조로 소리를 냅니다. 이 시각적 비유가 1990년대 후반 GUI 컴포넌트의 이름이 됐습니다.

웹에서 본격 등장한 건 2000년대 초입니다. FAQ 페이지가 표준 사용처입니다. 질문 목록이 길어지면 한 화면에 다 안 들어가니까, 질문만 보이게 하고 답은 클릭 시 펼치는 방식입니다. Jakob Nielsen이 2014년 닐슨 노먼 그룹 블로그에서 이 패턴을 본격적으로 평가하면서 표준 명칭이 됐습니다.

좋은 사용처

FAQ: 자주 묻는 질문 페이지입니다.
상품 상세 정보: 사양, 배송, 환불 정책을 섹션별로 보여줍니다.
설정 메뉴: 카테고리별 그룹으로 정리합니다.
모바일 사이드바: 좁은 화면에서 메뉴 위계를 표현합니다.

단점

Nielsen의 후속 연구는 아코디언의 한계를 지적합니다.

콘텐츠를 숨김: 사용자가 다 펼치기 전에는 안 봅니다.
인쇄/검색 약함: 닫힌 항목은 Ctrl+F로 검색이 안 됩니다.
인지부하 증가: 클릭, 펼치기, 읽기, 닫기, 다음 클릭이 반복됩니다.

언제 쓰지 말아야 하나

모든 콘텐츠가 동등하게 중요: 다 봐야 하면 그냥 펼쳐 두는 것이 좋습니다.
사용자가 빠르게 비교해야 함: 가격 페이지 같은 경우입니다.
짧은 콘텐츠: 5줄 이하면 그냥 표시합니다.

모바일에서

좁은 화면 때문에 아코디언이 거의 표준이 된 경우가 많습니다. 다만 한 항목 펼침이 다른 항목 자동 닫힘(단일 선택)이 일반적입니다. 동시에 여러 항목을 펼칠 수 있게 만드는 건 사용자가 자기 통제를 더 원할 때입니다.

바이브 메이커가 챙길 한 가지

아코디언을 쓰기 전에 자문해야 합니다. "이 콘텐츠 전체를 그냥 보여주면 페이지가 얼마나 길어지나?" 답이 1.5배 이하라면 그냥 펼쳐 두는 게 더 강합니다. 사용자는 스크롤은 익숙하지만 클릭 후 펼치기는 부담입니다.

관련

FAQ, Progressive disclosure, Tabs