언제 잘 맞을까
슬라이더는 정확한 숫자보다 '조금 더, 조금 덜'을 느끼며 조절할 때 좋아요. 애플(n.d.)도 음량이나 밝기처럼 대략적인 조절에 쓰라고 해요. 끌면서 결과가 바로 바뀌는 걸 볼 수 있어 직관적이에요. 머티리얼(Google, n.d.)은 연속 슬라이더, 눈금이 있는 단계 슬라이더, 두 손잡이로 범위를 고르는 범위 슬라이더를 구분해요. 쇼핑 앱의 가격 범위 필터는 필터 칩과 함께 자주 쓰여요.
정확한 값이 어려운 이유
모바일 화면의 짧은 막대로 0부터 1,000,000원까지 고르면 손가락이 1픽셀만 움직여도 값이 크게 바뀌어요. 피츠(1954)의 법칙처럼 목표가 정밀할수록 맞추기 어려워요. 그래서 정확한 값이 필요하면 슬라이더 옆에 직접 입력칸을 두거나, 작은 범위라면 수량 스테퍼가 나아요. 푼케와 동료들(2011)은 설문에서 슬라이더가 일반 버튼형 척도보다 시간이 더 걸리고 중도 이탈이 늘 수 있다고 보였어요. 손잡이를 처음 위치에 두면 그 값이 기본 응답처럼 읽히는 문제도 있어요.
손잡이 크기와 접근성
손잡이는 작아 보이게 그려도 실제 터치 영역은 파히와 동료들(2006)의 엄지 크기와 터치 타깃 크기를 지켜야 해요. 범위 슬라이더에서 두 손잡이가 겹치면 어느 쪽을 잡는지 헷갈리니 처리 규칙을 정해요. 끄는 동안 현재 값을 말풍선으로 보여줘요. WCAG 2.2(W3C, 2023)의 2.5.7 기준처럼 끌기 없이 값을 바꿀 방법(입력칸, +/− 버튼, 막대 누르기)이 있어야 하고, W3C 슬라이더 패턴(n.d.)처럼 화살표 키와 값 읽기도 지원해요.
자주 묻는 질문
- 슬라이더와 입력칸을 함께 둬야 하나요?
- 정확한 값이 중요하다면 함께 두는 게 좋아요. 둘이 서로 연동되어 하나를 바꾸면 다른 쪽도 바뀌게 해요.
- 설문에 슬라이더를 써도 되나요?
- 쓸 수는 있지만 시간과 이탈이 늘 수 있고, 처음 위치가 응답처럼 보일 수 있어요. 버튼형 척도가 더 안전한 경우가 많아요.
출처 검토일: 2026-10-27
참고문헌
- Apple. (n.d.). Sliders. Human Interface Guidelines. 정확한 값보다 대략적인 조절에 슬라이더를 쓰라는 iOS 지침이라, 쓸지 말지 정할 때 참고하면 도움이 돼요.
- Google. (n.d.). Sliders. Material Design 3. 연속·단계 슬라이더와 범위 슬라이더, 값 라벨 표시를 다뤄, 안드로이드 슬라이더 설계에 참고하면 도움이 돼요.
- World Wide Web Consortium. (n.d.). Slider pattern. ARIA Authoring Practices Guide. 슬라이더 역할과 화살표·Page 키 동작이 있어, 직접 만든 슬라이더를 접근 가능하게 할 때 참고하면 도움이 돼요.
- Funke, F., Reips, U.-D., & Thomas, R. K. (2011). Sliders for the smart: Type of rating scale on the web interacts with educational level. Social Science Computer Review, 29(2), 221–231. 슬라이더가 버튼형 척도보다 응답 시간과 중도 이탈을 늘릴 수 있다는 연구라, 설문에 슬라이더를 쓸 때 참고하면 도움이 돼요.
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 정밀한 목표일수록 오래 걸린다는 법칙이라, 짧은 트랙에서 정확한 값을 맞추기 어려운 이유로 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 손잡이(thumb) 크기와 두 손잡이 간격을 정할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 끌기 동작에 한 번 누르기 대안을 요구하는 2.5.7 기준이 있어, 슬라이더 옆 입력칸이나 버튼을 둘 때 참고하면 도움이 돼요.