모바일 메뉴의 작은 기호는 다음 화면으로 이동할지, 같은 자리에서 내용을 펼칠지 예고한다. 스매싱 매거진의 아코디언 해설을 계기로 다시 살펴볼 문제는 제목과 기호에 서로 다른 일을 맡기는 구성이다. 제목은 링크, 기호는 펼침 버튼이면 한 행 안에서 눌러야 할 위치에 따라 결과가 달라진다. 이 문제를 검토하기 위해 닐슨 노먼 그룹의 2020년 원 연구, WAI의 구현 패턴, 직접 작성한 단일 패널 예제를 나란히 놓았다. 세 자료는 각각 사용자의 기대, 구현 규칙, 실제 상태 전환이라는 다른 질문에 답한다.
첫 클릭이 무엇을 측정했는지 보기
원 연구는 136명에게 모바일 웹사이트 시제품 11개를 보여주고, 원하는 정보를 찾으려면 어디를 누를지와 그 뒤 무엇이 일어날지 물었다. 시제품은 이미 메뉴가 열린 정적 화면이었다. 실제 사이트를 끝까지 탐색하는 시험이나 모든 기기의 접근성 평가는 아니었다. 연구진은 캐럿·더하기·오른쪽 화살표, 익숙하지 않은 대조 기호와 기호가 없는 조건을 비교했다. 아이콘은 제목 오른쪽에 배치했다. 따라서 결과를 왼쪽 기호나 다른 배치에 그대로 옮기기보다는, 같은 행을 보고 사용자가 어떤 동작을 기대했는지에 대한 자료로 읽는 편이 정확하다.
그림의 방향과 실제 상태를 함께 전달하기
WAI의 아코디언 패턴은 제목에 해당하는 컨트롤을 버튼으로 구성하고, 그 버튼을 문서 구조에 맞는 제목 요소 안에 두도록 설명한다. 연결된 패널이 보이면 aria-expanded를 true로, 닫혀 있으면 false로 제공하며 aria-controls에는 해당 패널의 식별자를 연결한다. 화면의 삼각형이 돌아가는 연출만으로 상태 전달을 끝내지 않는 방식이다. 시각적으로 같은 모양을 써도 버튼에 전달한 상태가 실제 패널과 어긋나면 보조기술 사용자는 다른 정보를 받는다. 기호 선택과 상태 구현을 한 작업으로 검토할 이유가 여기 있다.
마우스 밖에서도 유지돼야 하는 같은 약속
패턴은 초점을 받은 제목 버튼에서 Enter나 Space를 누르면 패널을 펼치도록 안내한다. 닫기를 지원하는 구성에서는 같은 키로 접고, Tab과 Shift+Tab은 페이지 안의 초점 가능한 요소를 순서대로 이동한다. 한 번에 하나만 열리게 할지, 여러 패널을 함께 펼칠지는 구성에 따라 달라질 수 있다. 반면 열렸는지 닫혔는지의 안내와 버튼의 실제 동작은 그 선택 안에서 일관돼야 한다. WAI 문서는 이를 구현하는 패턴 안내이지, 특정 아이콘의 전환율을 보증하는 사용성 실험 결과는 아니다.
같은 버튼에서 여섯 동작을 직접 확인했다
2026년 11월 2일 Windows의 Chrome 156, 배율 DPR 1인 인앱 브라우저에서 제목과 더하기 기호를 하나의 네이티브 button 안에 넣은 예제를 실행했다. 기호에는 aria-hidden을 주고 제목을 버튼 이름으로 남겼다. 처음에는 패널을 hidden으로 감추고 aria-expanded를 false로 맞췄다. 텍스트를 클릭하자 패널이 열리고 상태가 true가 됐으며, 기호를 클릭하자 다시 닫히고 false가 됐다. 같은 버튼 안에서는 클릭 위치가 다른 동작을 만들지 않았다.
키보드에서는 Enter로 연 뒤 Tab을 누르면 패널 안 링크로 이동했다. Shift+Tab은 제목 버튼으로 돌아왔고 Space는 패널을 닫았다. 각 단계에서 실제 패널의 hidden 값, 버튼의 aria-expanded 값과 초점 요소를 읽어 대조했다. 아래 표는 이 예제에서 관측한 결과이며 아이콘별 선호도나 작업 완료 시간을 측정한 결과는 아니다. 스크린 리더 낭독과 다른 브라우저 조합도 이번 확인에 포함하지 않았다.
이 확인의 재현 기준은 화면에 내용이 나타나는 데서 끝나지 않는다. 펼침 상태와 패널 표시가 함께 바뀌고, 열린 내용으로 키보드가 들어갔다가 제목으로 돌아오는지까지 봐야 한다. 실제 서비스에 적용할 때는 닫히는 패널 안에 초점이 남는 경로, 여러 패널을 동시에 여는 정책, 긴 제목의 클릭 영역도 별도로 확인할 수 있다. 단일 패널에서 통과한 결과를 모든 메뉴의 접근성 인증으로 확대할 수는 없다.
| 조작 | 패널 | aria-expanded | 조작 뒤 초점 |
|---|---|---|---|
| 제목 텍스트 클릭 | 열림 | true | 제목 버튼 |
| 기호 클릭 | 닫힘 | false | 제목 버튼 |
| Enter | 열림 | true | 제목 버튼 |
| 열린 상태에서 Tab | 열림 유지 | true | 패널 안 링크 |
| Shift+Tab | 열림 유지 | true | 제목 버튼 |
| Space | 닫힘 | false | 제목 버튼 |
직접 확인에 사용한 버튼과 패널의 핵심 코드HTML
<h3><button type="button" id="menu-button"
aria-expanded="false" aria-controls="panel">
<span>세부 메뉴</span><span id="menu-icon" aria-hidden="true">+</span>
</button></h3>
<div id="panel" hidden><a href="#destination">세부 페이지 링크</a></div>
<script>
const button = document.getElementById('menu-button');
const panel = document.getElementById('panel');
button.addEventListener('click', () => {
const expanded = button.getAttribute('aria-expanded') !== 'true';
button.setAttribute('aria-expanded', String(expanded));
panel.hidden = !expanded;
document.getElementById('menu-icon').textContent = expanded ? '−' : '+';
});
</script>아코디언의 핵심은 기호 자체보다 클릭·키보드·보조기술에서 같은 상태와 동작을 전달하는 데 있다. 연구가 측정한 첫 클릭과 실제 탐색의 성공도 서로 다른 질문으로 남겨야 한다.
ARCH.B 의견
제목과 기호를 하나의 버튼으로 묶으면 어느 쪽을 눌러도 같은 결과를 얻는다. 별도의 페이지 이동이 필요하다면 펼쳐진 목록 안에 목적지가 드러나는 링크를 둘 수 있다. 예를 들어 작품 분류를 펼치는 버튼과 모든 작품을 보는 링크를 구별하는 방식이다. 이는 첫 클릭 연구와 이번 기능 확인을 실제 정보 구조에 연결한 설계 제안이며, 이 배치만으로 탐색 성공률이 높아졌다는 실험 결과는 아니다.
캐럿·더하기·화살표의 모양을 비교하는 일은 메뉴가 어떤 일을 맡을지 정한 다음에 의미가 생긴다. 분류를 펼칠지, 독립된 페이지로 이동할지, 한 화면에서 여러 정보를 비교하게 할지가 먼저다. 그 결정을 제목의 문구, 클릭 영역, 초점 표시와 상태 안내가 함께 뒷받침해야 한다. 현재 화면을 검토할 때에는 기호를 바꾼 전후의 장식 차이보다 제목과 아이콘을 각각 눌렀을 때 같은 결과를 얻는지 살펴볼 수 있다. 첫 클릭의 예측과 실제 반응이 맞을 때, 사용자는 작은 버튼의 숨은 규칙을 배워야 하는 부담을 덜 수 있다.
