아코디언Accordion
한 줄 정의
아코디언은 질문이나 제목만 세로로 늘어놓고, 방문자가 제목을 누르면 그 아래로 내용이 펼쳐졌다 접히게 하는 화면 요소예요.
쉽게 말하면
악기 아코디언이 주름을 폈다 접었다 하듯, 화면의 아코디언도 내용을 폈다 접었다 해요. 자주 묻는 질문(FAQ) 페이지에서 질문 목록만 보이다가, 궁금한 질문을 누르면 그 아래로 답이 펼쳐지는 모습이 아코디언이에요. 방문자는 긴 내용을 다 읽지 않고 필요한 제목만 골라 펼쳐 볼 수 있어요.
잘 쓰려면
- 제목만 읽어도 내용을 짐작할 수 있게: 방문자는 제목을 보고 펼칠지 정해서, 제목이 모호하면 원하는 답이 들어 있어도 지나칠 수 있어요
- 펼칠 수 있다는 표시 두기: 제목 옆에 화살표나 + 표시가 있으면 방문자가 눌러서 펼칠 수 있다는 것을 알아요
- 모두가 알아야 할 내용은 접지 않기: 환불 조건처럼 모든 방문자가 알아야 하는 내용을 접어 두면, 펼쳐 보지 않은 방문자는 그 내용을 모른 채 지나가요
구글은 모바일 화면에서 공간을 아끼려면 내용을 아코디언이나 탭에 넣는 것을 고려하라고 안내해요. 다만 구글은 클릭해야 비로소 불러오는 내용은 불러오지 않는다고 밝혀서, 제목을 누를 때 답을 새로 불러오게 만든 아코디언은 구글이 그 답을 읽지 못할 수 있어요(구글 검색 센터).
큐샵에서는
클래식 에디터와 스튜디오 에디터 모두에서 아코디언을 넣을 수 있어요. 클래식 에디터에서는 확장 블록 가운데 아코디언 블록을, 스튜디오 에디터에서는 '생산성 > 콘텐츠'에 있는 아코디언을 골라 넣어요.
헷갈리는 말
| 헷갈리는 말 | 뜻 | 아코디언과 다른 점 |
|---|---|---|
| 탭 | 위쪽 이름표를 눌러 같은 자리의 내용을 바꿔 보는 화면 요소 | 탭은 이름표가 가로로 늘어서고 한 번에 한 묶음씩 보여 줘요. 아코디언은 제목이 세로로 쌓여서 제목이 많아도 가로 폭이 모자라지 않아요 |
| 드롭다운 메뉴 | 누르면 고를 수 있는 항목 목록이 아래로 펼쳐지는 메뉴 | 드롭다운 메뉴는 항목 하나를 골라 이동하거나 선택하는 데 쓰고, 아코디언은 접힌 내용을 펼쳐 읽는 데 써요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
아코디언 메뉴Accordion
