아코디언

접어 두면 무엇이 좋을까

모바일 화면에서 긴 페이지는 끝없는 스크롤이 되고, 김과 동료들(2015)의 연구처럼 작은 화면에서는 내가 어디쯤 있는지 파악하기도 어려워요. 아코디언은 제목만 먼저 보여줘서 페이지 전체 구조를 한눈에 보게 해요. 스웰러(1988)의 인지 부하 관점에서도 지금 필요 없는 내용을 접어 두면 부담이 줄어요. 이는 점진적 공개의 대표적인 형태예요. 사람들은 피롤리와 카드(1999)가 말한 정보 냄새를 보고 열지 말지 정하므로, 제목이 내용을 정확히 알려 줘야 해요.

잘 맞는 경우와 피할 경우

로랑어(2014)는 사용자가 일부만 필요로 하는 내용, 즉 FAQ, 상품 상세 사양, 설정 묶음에 아코디언이 잘 맞는다고 정리했어요. 반대로 대부분 사람이 거의 모든 내용을 읽어야 한다면, 일일이 눌러 여는 수고가 오히려 커져요. 이런 경우엔 그냥 펼쳐 두고 제목으로 시각적 위계를 만드는 편이 나아요. 제목 목록이 너무 길어지면 밀러(1956)의 한계처럼 훑기 어려우니, 상위 묶음으로 나누는 정보 구조 정리가 먼저예요.

디자인과 접근성

제목 줄 전체를 누를 수 있게 하고, 펼침·접힘 상태를 화살표 방향으로 보여줘요. 하나를 열 때 다른 것을 자동으로 닫으면 비교가 어려워질 수 있으니 상황에 맞게 정해요. 펼친 뒤에는 화면이 엉뚱한 위치로 튀지 않게 해요. W3C의 아코디언 패턴(n.d.)처럼 제목을 버튼으로 만들고 aria-expanded로 상태를 알리면, WCAG 2.2(W3C, 2023)의 4.1.2 기준도 지킬 수 있어요. 페이지 안 찾기(Ctrl+F)로 접힌 내용도 찾을 수 있게 하는 방법도 고려해요.

자주 묻는 질문

아코디언은 하나만 열리게 해야 하나요?

정답은 없어요. 서로 비교할 내용이면 여러 개를 열 수 있게 하고, 단계별 내용이면 하나씩 여는 방식도 괜찮아요.

SEO에 불리하지 않나요?

내용이 HTML에 들어 있고 숨김만 되어 있다면 검색엔진도 읽을 수 있어요. 다만 중요한 핵심 내용은 펼쳐 두는 게 좋아요.

출처 검토일: 2026-10-27

참고문헌

1. Loranger, H. (2014, May 18). Accordions for complex website content on desktops. Nielsen Norman Group. 아코디언이 도움이 되는 경우와 해가 되는 경우를 정리한 글이라, 내용을 접을지 정할 때 참고하면 도움이 돼요.
2. World Wide Web Consortium. (n.d.). Accordion pattern (sections with show/hide functionality). ARIA Authoring Practices Guide. 제목 버튼과 aria-expanded, 키보드 동작 규칙이 있어, 접근 가능한 아코디언 구현에 참고하면 도움이 돼요.
3. Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 사람이 단서를 보고 열어 볼지 결정한다는 정보 채집 이론이라, 아코디언 제목 문구의 중요성을 설명할 때 참고하면 도움이 돼요.
4. Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285. 불필요한 정보가 작업 기억을 압박한다는 연구라, 긴 내용을 접어 두는 이유로 참고하면 도움이 돼요.
5. Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 작은 화면에서는 스크롤과 위치 파악 부담이 크다는 연구라, 모바일에서 아코디언이 유용한 이유로 참고하면 도움이 돼요.
6. Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. 한 번에 훑을 수 있는 항목 수의 한계를 다뤄, 접힌 제목 목록 길이를 정할 때 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 이름·역할·상태(4.1.2)와 제목·레이블(2.4.6) 기준이 있어, 펼침 상태를 알릴 때 참고하면 도움이 돼요.