수량 스테퍼

언제 잘 맞을까

스테퍼는 대부분 사람이 기본값 근처에서 조금만 바꾸는 값에 잘 맞아요. 장바구니 수량, 호텔 인원, 숙박일처럼요. 저우(2018)는 바꿀 범위가 작고 기본값이 합리적일 때 스테퍼가 효율적이라고 정리했어요. 애플(n.d.)도 작은 변화에 쓰고 현재 값을 바로 옆에 보여주라고 해요. 하지만 값이 크거나 범위가 넓으면 수십 번 눌러야 해서 오히려 느려요.

직접 입력과 범위

그래서 가운데 숫자는 눌러서 직접 입력할 수도 있게 해야 해요. MDN(n.d.)이 설명하는 min, max, step 값으로 범위를 정하고, 키보드는 숫자 키패드가 뜨게 해요. 최소값에서는 − 버튼을, 최대값에서는 + 버튼을 흐리게 하고 이유를 알려줘요. 재고보다 많이 입력했다면 인라인 유효성 검사로 바로 알려요. 수량을 0으로 줄이면 삭제할지 묻거나 삭제 버튼으로 바뀌는 방식도 흔해요. 길게 누르면 빠르게 바뀌는 기능은 편하지만 지나치기 쉬우니 속도를 조절해요.

버튼 크기와 접근성

+/− 버튼은 작게 그리기 쉬운데, 피츠(1954)의 법칙처럼 작을수록 누르기 어렵고 서로 붙어 있으면 반대 버튼을 누르기 쉬워요. 파히와 동료들(2006)의 엄지 크기와 터치 타깃 크기 기준(피츠의 법칙)을 지키고 간격을 둬요. 화면낭독기에는 W3C의 spinbutton 패턴(n.d.)처럼 현재 값과 최소·최대를 알려 주고, 값이 바뀔 때 WCAG 2.2(W3C, 2023)의 4.1.3 기준처럼 상태 메시지로 알려줘요. 버튼에는 '수량 늘리기'처럼 이름을 붙여요.

자주 묻는 질문

스테퍼와 드롭다운 중 무엇이 좋나요?

작은 범위에서 조금씩 바꾸면 스테퍼, 정해진 몇 개 값 중 고르면 드롭다운이나 세그먼트 컨트롤이 나아요.

input type=number만 쓰면 안 되나요?

써도 되지만 기본 화살표는 작아서 모바일에선 누르기 어려워요. 큰 +/− 버튼과 함께 쓰는 경우가 많아요.

출처 검토일: 2026-10-27

참고문헌

1. Zhou, Y. (2018, November 11). Design guidelines for input steppers. Nielsen Norman Group. 스테퍼가 맞는 경우와 직접 입력도 허용해야 하는 이유를 정리해, 수량 입력 설계에 참고하면 도움이 돼요.
2. Apple. (n.d.). Steppers. Human Interface Guidelines. 작은 값 변화에 스테퍼를 쓰고 현재 값을 옆에 보여주라는 iOS 지침이라, 모양과 배치에 참고하면 도움이 돼요.
3. MDN Web Docs. (n.d.). <input type="number">. Mozilla. min·max·step 속성과 숫자 입력의 한계를 설명해, 웹 스테퍼 구현에 참고하면 도움이 돼요.
4. World Wide Web Consortium. (n.d.). Spinbutton pattern. ARIA Authoring Practices Guide. 값과 최소·최대를 알리는 spinbutton 역할과 키보드 동작이 있어, 접근 가능한 스테퍼에 참고하면 도움이 돼요.
5. 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. 크기와 거리의 법칙이라, 작은 +/− 버튼이 왜 누르기 어려운지 설명할 때 참고하면 도움이 돼요.
6. 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. 엄지 타깃 크기 연구라, +/− 버튼 크기와 간격을 정할 때 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 타깃 크기(2.5.8)와 상태 메시지(4.1.3) 기준이 있어, 버튼 크기와 값 변경 안내에 참고하면 도움이 돼요.