아코디언

한 화면에 넣어야 할 내용은 늘어나는데 세로 길이에는 한도가 있습니다. 자주 묻는 질문 서른 개를 답까지 전부 펼쳐 놓으면 화면이 열 배로 길어지고, 자기 질문을 찾으려는 사람은 관심 없는 답 스물아홉 개를 스크롤로 지나가야 합니다. 정작 그 사람에게 필요한 것은 그중 하나입니다.

접는 방식이 없던 시절의 대응은 둘이었습니다. 하나는 내용을 여러 페이지로 쪼개는 것인데, 이러면 찾는 내용이 몇 번째 페이지에 있는지 몰라 왔다 갔다 하게 됩니다. 다른 하나는 제목만 목록으로 두고 누르면 새 페이지로 보내는 것입니다. 답 한 줄을 보려고 페이지를 갈아탔다가 목록으로 돌아오는 동작을 열 번 반복하게 됩니다.

실제 장면은 대개 이렇게 나타납니다. 결제 화면 아래에 배송 정보와 쿠폰과 약관 동의를 다 펼쳐 두면 결제 버튼이 화면 밖으로 밀려나고, 사람들은 버튼을 못 찾아 이탈합니다. 그렇다고 탭으로 나누면 이번에는 세 덩어리를 동시에 볼 수 없게 됩니다.

아코디언은 이 사이에 자리를 잡습니다. 제목은 전부 보여 주되 내용은 접어 두고, 필요한 것만 그 자리에서 펴게 합니다. 화면을 옮기지 않으므로 돌아올 일이 없고, 제목이 남아 있으므로 여기에 무엇이 더 있는지는 계속 보입니다. 이름은 접었다 폈다 하는 악기의 주름에서 왔습니다.

제목 줄과 그 아래 내용이 한 쌍을 이루고, 이런 쌍 여럿이 세로로 붙은 구조입니다. 기본 상태는 접힘이고 제목을 누르면 그 쌍의 내용만 아래로 펼쳐집니다. 다시 누르면 접힙니다. 정해야 할 것은 네 가지입니다.

1. 동시에 몇 개를 펼 수 있는가 — 하나만 펴지게 하면 새로 누를 때 앞의 것이 자동으로 접혀서 화면 길이가 일정하게 유지됩니다. 여러 개를 함께 펼 수 있게 하면 두 항목을 나란히 놓고 견줄 수 있지만, 전부 펴 놓은 사람에게는 접기 전의 긴 화면이 그대로 돌아옵니다.
2. 처음에 무엇이 펴져 있는가 — 전부 접힌 채로 시작하는 것이 기본입니다. 다만 열 명 중 아홉이 첫 항목을 연다면 그 하나는 펴 둔 채로 시작하는 편이 낫습니다.
3. 상태를 어떻게 보여 주는가 — 제목 옆 화살표가 아래를 향하면 펼 수 있다는 뜻이고 위를 향하면 지금 펴져 있다는 뜻입니다. 이 표시가 없으면 사용자는 그 줄이 눌리는 줄인지조차 모릅니다.
4. 무엇을 누를 수 있게 하는가 — 화살표 아이콘만 눌리게 만들면 제목 글자를 눌러 본 사람은 반응이 없다고 느낍니다. 제목 줄 전체를 누를 수 있게 합니다.

접근성에서 걸리는 지점도 여기 있습니다. 제목이 단순한 글자가 아니라 버튼 역할을 해야 키보드로 이동해 스페이스바로 펼 수 있고, 화면을 읽어 주는 프로그램에도 지금 펴진 상태인지가 전달됩니다. 접힌 내용은 브라우저의 찾기 기능에도 잡히지 않으므로, 검색으로 도달해야 하는 내용을 접어 두면 그 내용은 없는 것과 같아집니다.

접었을 때 화면이 짧아지는 이득이 펼치는 클릭 한 번보다 큰 자리에 씁니다. 네 가지 상황이 대표적입니다.

1. 자주 묻는 질문 — 사람마다 필요한 질문이 다르고, 한 사람이 보는 답은 보통 하나나 둘입니다. 아코디언이 가장 잘 맞는 자리입니다.
2. 주문과 결제 요약 — 배송지·결제 수단·쿠폰처럼 이미 정해 둔 항목을 접어 두고, 바꿀 것만 펴서 고치게 합니다.
3. 설정 화면의 고급 옵션 — 대부분은 기본값을 그대로 쓰므로 접어 둡니다. 이런 쓰임을 점진적 노출이라 부르는데, 필요한 사람에게만 단계적으로 드러내는 방식을 말합니다.
4. 좁은 화면의 필터와 목록 — 가로 폭이 부족한 휴대폰 화면에서 나란히 놓을 수 없는 묶음을 세로로 접어 둡니다.

반대로 피할 자리도 분명합니다. 항목끼리 값을 견줘야 하는 내용은 접으면 비교가 불가능해지므로 테이블로 늘어놓습니다. 순서대로 밟아야 하는 흐름은 스테퍼가 맡습니다. 그리고 반드시 읽혀야 하는 내용은 접지 않습니다. 접힌 것은 대체로 읽히지 않습니다. 묶음이 두세 개뿐일 때도 접는 이득이 거의 없어서, 클릭 한 번을 아끼는 쪽이 낫습니다.

"이 항목 여섯 개는 아코디언으로 접죠. 다 펼쳐 두니까 저장 버튼이 안 보여요."

화면 길이를 줄여 주요 동작을 화면 안으로 되돌리자는 제안입니다.

"아코디언은 하나만 열리게 할까요, 여러 개 열리게 할까요?"

두 항목을 나란히 견줄 일이 있는지 묻는 말입니다.

"약관은 아코디언에 넣지 맙시다. 접어 두면 아무도 안 읽어요."

읽혔다는 사실이 필요한 내용은 접으면 안 된다는 뜻입니다.

페이지덱의 설정 화면을 다시 그리면서 민서가 꺼낸 것이 이 요소였습니다. 알림·공유·연동·고급 넷을 다 펼쳐 두니 설정 화면이 네 번 스크롤해야 끝나는 길이였는데, 사용자 대부분이 건드리는 항목은 알림 쪽 두 개뿐이었습니다. 네 묶음을 접고 알림만 펴 둔 채로 시작하도록 바꿨습니다. 바꾸고 나니 설정 화면 전체가 제목 네 줄과 펴진 묶음 하나로 끝나서, 알림 스위치와 저장 버튼이 한 화면에 들어왔습니다.

태오가 붙인 조건은 하나였습니다. 고급 묶음 안에 있는 항목은 도움말 문서에서 링크로 바로 보내는 자리라, 그 링크를 타고 들어오면 해당 묶음이 펴진 채로 열려야 한다는 것입니다. 접힌 채로 열리면 사용자는 도움말이 알려 준 설정을 화면에서 찾지 못합니다.

접을수록 화면이 깔끔해진다고 읽는 경우가 가장 많습니다. 펼친 화면과 접은 화면을 나란히 놓고 보면 접은 쪽이 단정해 보이니 그렇게 판단하게 됩니다. 그런데 접는다고 내용이 줄지는 않고 한 번의 클릭 뒤로 옮겨질 뿐입니다. 클릭 뒤로 넘어간 내용은 읽는 사람이 눈에 띄게 줄어들어서, 안내 문구를 전부 접어 둔 가입 화면은 깔끔해진 대신 같은 질문이 고객 문의로 들어오기 시작합니다.

모바일 화면이니 아코디언이 맞다고 보는 것도 비슷한 오해입니다. 가로 폭이 좁아 세로로 접는 방식이 어울리는 것은 맞습니다. 다만 좁은 화면일수록 접힌 제목 줄만 여섯 개 이어진 화면이 되기 쉬운데, 이 상태에서는 무엇이 들어 있는지 보이지 않아 사용자가 하나씩 열어 보게 됩니다. 접기 전보다 오히려 더 많은 동작이 필요해집니다. 제목만으로 안에 무엇이 있는지 짐작되지 않으면 접는 선택 자체를 다시 봅니다.