캐러셀

왜 캐러셀은 잘 안 보일까

벤웨이(1998)는 광고처럼 크고 화려한 영역을 사용자가 오히려 무시하는 '배너 맹시'를 보고했어요. 버크와 동료들(2005)은 움직이는 배너가 탐색을 방해하면서도 기억에 남지 않는다는 걸 보였어요. 렌싱크(2002)의 리뷰처럼 사람은 화면 변화를 잘 놓치고, 시몬스와 샤브리스(1999)의 실험처럼 다른 일에 집중하면 눈앞의 것도 못 봐요. 그래서 첫 화면 큰 캐러셀의 두 번째 이후 슬라이드는 대부분의 사용자에게 전달되지 않아요.

모바일에서는 무엇이 다를까

작은 화면에서는 시선이 화면 위쪽에 몰려서(Kim et al., 2015) 첫 화면을 가득 채운 캐러셀은 정작 중요한 내용을 아래로 밀어내요. 반면 다음 카드의 일부가 보이는 가로 스크롤 목록은 '옆에 더 있다'는 신호를 주고, 사용자가 스스로 넘기기 때문에 자동 회전의 문제가 없어요. 상품 추천, 카테고리 바로가기처럼 비슷한 항목을 훑어보는 데 잘 맞아요. 다만 좌우 스와이프가 제스처 내비게이션의 뒤로 가기 제스처와 겹치지 않는지 확인해야 해요.

써야 한다면 이렇게

퍼니스(2013)의 지침처럼 슬라이드는 적게(보통 5장 이하) 두고, 현재 위치와 전체 수를 보여주고, 각 슬라이드 내용을 짧고 분명하게 만들어요. 가장 중요한 메시지는 첫 장에 두고, 시각적 위계상 캐러셀이 화면 전체를 독차지하지 않게 해요. 자동 회전은 피하는 게 좋고, 쓴다면 WCAG 2.2(W3C, 2023)의 2.2.2 기준대로 멈춤 버튼을 제공해야 해요. 화면낭독기와 키보드로도 넘길 수 있게 하고, 손가락이 닿기 쉬운 크기의 이전·다음 버튼을 두면 모바일 접근성도 지킬 수 있어요.

자주 묻는 질문

캐러셀은 무조건 나쁜가요?

아니에요. 사용자가 직접 넘기는 상품 사진 갤러리나 가로 스크롤 카드처럼 비슷한 항목을 훑을 때는 유용해요.

자동 회전은 몇 초가 적당한가요?

가능하면 자동 회전을 피하고, 쓴다면 충분히 읽을 시간과 멈춤 버튼을 반드시 제공해요.

출처 검토일: 2026-10-27

참고문헌

1. Pernice, K. (2013, September 14). Designing effective carousels: Create a carousel that users can use. Nielsen Norman Group. 캐러셀 사용성 지침을 정리한 글이라, 슬라이드 수와 컨트롤을 정할 때 참고하면 도움이 돼요.
2. Benway, J. P. (1998). Banner blindness: The irony of attention grabbing on the World Wide Web. Proceedings of the Human Factors and Ergonomics Society Annual Meeting, 42(5), 463–467. 광고처럼 보이는 영역을 사용자가 무시하는 '배너 맹시'를 처음 보고해, 큰 슬라이드 배너가 외면받는 이유로 참고하면 도움이 돼요.
3. Burke, M., Hornof, A., Nilsen, E., & Gorman, N. (2005). High-cost banner blindness: Ads increase perceived workload, hinder visual search, and are forgotten. ACM Transactions on Computer-Human Interaction, 12(4), 423–445. 움직이는 배너가 탐색을 방해하고 기억되지 않는다는 실험이라, 자동 회전의 비용을 설명할 때 참고하면 도움이 돼요.
4. Rensink, R. A. (2002). Change detection. Annual Review of Psychology, 53, 245–277. 사람이 화면 변화를 잘 놓친다는 리뷰라, 지나간 슬라이드 내용이 전달되지 않는 이유로 참고하면 도움이 돼요.
5. Simons, D. J., & Chabris, C. F. (1999). Gorillas in our midst: Sustained inattentional blindness for dynamic events. Perception, 28(9), 1059–1074. 다른 데 집중하면 눈앞의 것도 못 본다는 실험이라, 과제 중인 사용자가 캐러셀을 놓치는 이유로 참고하면 도움이 돼요.
6. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 5초 넘게 자동으로 움직이는 콘텐츠는 멈출 수 있어야 한다는 2.2.2 기준이 있어, 자동 회전 설계에 참고하면 도움이 돼요.
7. 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. 작은 화면에서 시선이 위쪽에 몰린다는 연구라, 첫 화면 캐러셀의 공간 비용을 볼 때 참고하면 도움이 돼요.