안녕하세요! 오늘은 Swiper(스와이퍼)에서 자주 사용하는 autoplay 설정 중
조금 헷갈릴 수 있는 옵션 하나를 소개해볼게요.
바로 disableOnInteraction 입니다
우선, autoplay란?
Swiper의 autoplay는 슬라이드가 자동으로 넘어가도록 만들어주는 기능이에요.
예를 들어 이런 코드가 있다고 해볼게요:
여기서 delay는 슬라이드가 자동으로 넘어가는 시간 간격이죠.
그럼 그 밑에 있는 disableOnInteraction은 뭘까요?
한마디로 말해서:
사용자가 슬라이드를 만져도 자동 넘김이 계속되게 할지 말지 정하는 옵션이에요!
true (기본값): 사용자가 슬라이드를 손으로 넘기거나 터치하면 autoplay가 멈춰요.
false: 사용자가 터치하거나 넘겨도 autoplay가 계속돼요.
왜 이걸 써야 할까?
실제로 이런 상황을 생각해볼 수 있어요:
disableOnInteraction: false 를 쓰는 경우
배너 슬라이드처럼 계속 움직여야 눈에 띄는 콘텐츠일 때
사용자 경험보다 노출 빈도가 중요한 마케팅성 슬라이드일 때
슬라이드를 잠깐 조작하더라도 다시 자동으로 진행되길 원할 때
안 쓰는 경우 (기본값 true 유지)
사용자가 직접 넘기는 슬라이드가 더 중요한 UX일 때
자동 넘김이 거슬릴 수 있는 섬세한 콘텐츠일 때
결론적으로, 이 한 줄만 추가해도
"건드려도 멈추지 않는 슬라이드" 가 완성돼요!
작은 옵션 하나지만,
사용자 경험(UX) 과 콘텐츠의 목적에 따라 이걸 쓸지 말지를 신중하게 결정해야 해요.
예를 들어,
사용자가 정보를 천천히 읽어야 하는 슬라이드에서
자동으로 계속 넘어가면 스트레스를 줄 수 있어요.
이럴 땐 disableOnInteraction: true로 두고,
직접 넘기게 하는 게 더 좋은 UX가 될 수 있죠.
반대로,
광고 배너나 이벤트 슬라이드처럼
많은 내용을 빠르게 보여줘야 하고,
사용자가 굳이 조작할 필요가 없는 경우엔
disableOnInteraction: false로 해서
건드려도 계속 넘어가도록 설정하는 게 더 효과적이에요.
즉,
"누가, 어떤 목적으로, 어떻게 보는 슬라이드인지"
생각해보고 이 옵션을 정하는 게 진짜 실무 감각이에요!
감사합니다.
