아코디언

정의

아코디언은 제목만 세로로 죽 늘어놓았다가, 사용자가 특정 제목을 누르면 그 아래로 숨어 있던 내용이 펼쳐지는 접이식 목록입니다. 평소에는 목록 전체가 짧게 접혀 있어 화면을 한눈에 훑기 쉽고, 궁금한 항목만 눌러 열어 보면 됩니다. 이름 그대로 악기 아코디언의 주름상자가 늘었다 줄었다 하듯, 필요할 때만 내용이 늘어나는 모습에서 붙은 이름입니다. 가장 흔한 예가 자주 묻는 질문(FAQ)입니다. 질문 수십 개를 한 번에 펼쳐 두면 화면이 끝없이 길어지지만, 아코디언으로 접어 두면 사용자는 자기에게 필요한 질문 하나만 열어 답을 확인할 수 있습니다.

왜 중요한가

항목은 많지만 사용자가 한 번에 전부 읽을 필요는 없을 때, 아코디언은 공간을 크게 절약해 줍니다. 접힌 제목 목록이 일종의 목차 역할을 해서 전체 구조를 먼저 조망하게 하고, 그중 관심 있는 것만 펼쳐 깊이 들어가는 흐름을 만듭니다. 이 덕분에 사용자는 관심 없는 내용을 스크롤로 지나칠 필요 없이 곧장 원하는 항목에 다다릅니다. 탭과 비슷해 보이지만 결정적 차이가 있습니다. 탭은 한 번에 하나만 보여 주고 가로로 배치되는 반면, 아코디언은 세로로 쌓이며 여러 개를 동시에 펼쳐 둘 수도 있고 내용 길이의 제약도 적습니다. 그래서 길이가 들쭉날쭉한 설명이나 설정 항목처럼, 분량을 예측하기 어려운 가변적 콘텐츠에 특히 잘 맞습니다.

흔한 실수

• 정말 중요해서 모두가 꼭 봐야 하는 정보를 아코디언 안에 접어 두는 경우입니다. 접힌 내용은 한 번 더 눌러야 보이므로, 핵심 안내나 경고를 숨기면 상당수 사용자가 그 존재조차 모르고 지나칩니다. 꼭 읽어야 할 것은 접지 말고 처음부터 펼쳐 두세요.
• 펼침 상태를 알려 주는 표시가 없거나 애매한 경우입니다. 화살표 방향이나 아이콘이 열림과 닫힘에 따라 바뀌지 않으면, 사용자는 이 항목을 이미 열었는지 눌러도 되는지 헷갈리고 같은 곳을 반복해서 누르게 됩니다.

실무 팁

• 한 번에 하나만 열리게 할지, 여러 개를 동시에 열 수 있게 할지 먼저 정하세요. 항목끼리 비교가 필요하면 다중 열기가, 화면을 짧게 유지하는 게 중요하면 하나만 열리는 방식이 낫습니다. 두 방식을 섞으면 사용자가 동작을 예측하기 어렵습니다.
• 펼침 상태는 화살표 방향처럼 눈에 띄는 신호로 분명하게 표시하세요. 닫혔을 때와 열렸을 때의 아이콘이 확실히 달라야 사용자가 현재 상태를 한눈에 파악하고, 지금 어디를 열어 두었는지 놓치지 않습니다. 제목을 누르는 영역도 넉넉히 잡아 두면 손이 덜 미끄러집니다.
• 제목만 읽어도 안에 무엇이 있는지 짐작되도록 라벨을 구체적으로 쓰세요. 제목이 막연하면 사용자는 원하는 내용을 찾으려 여러 항목을 일일이 열었다 닫았다 반복하게 되어, 공간을 아끼려던 애초의 목적이 무색해집니다.

관련 개념