눌렀는데 아무 일도 없을 때
밀러(1968)와 카드와 동료들(1991)은 약 0.1초 안의 반응은 즉각적으로, 1초 정도는 흐름이 이어지는 것으로, 10초가 넘으면 주의가 떠나는 것으로 느껴진다고 정리했어요. 닐슨(1993)도 같은 세 한계를 제시했어요. 그래서 버튼을 누르고 0.1초 안에 아무 변화가 없으면 사람들은 '안 눌렸나?' 하고 다시 눌러요. 이게 이중 결제나 중복 게시글의 흔한 원인이에요. 버튼이 눌린 즉시 상태를 바꾸는 작은 마이크로인터랙션이 이 문제를 막아요.
버튼 안에서 보여주는 법
마이어스(1985)의 연구처럼 진행을 보여주면 기다림을 더 잘 견뎌요. 몇 초 안에 끝나는 작업이면 버튼 문구 옆이나 자리에 작은 스피너를 두고, 문구를 '결제 중…'처럼 바꿔 지금 무슨 일이 일어나는지 알려요. 버튼 폭이 바뀌면 화면이 흔들리니 폭은 그대로 유지해요. 셔윈(2014)의 지침처럼 10초 이상 걸릴 작업은 버튼 대신 진행 표시기로 넘기고, 화면 전체를 기다리게 할 땐 스켈레톤 스크린이 더 맞아요. 해리슨과 동료들(2010)은 애니메이션 모양만으로 체감 시간이 달라진다고 보였어요.
끝맺음과 접근성
처리가 끝나면 체크 표시나 '저장됨'을 잠깐 보여준 뒤 원래 상태로 돌아가고, 실패하면 버튼을 다시 활성으로 돌리며 이유를 알려 줘요. 실패했는데 버튼이 계속 돌고만 있으면 사용자는 앱이 멈춘 줄 알아요. 시간 제한을 두고 넘으면 오류를 보여주는 것도 방법이에요. 화면낭독기 사용자는 스피너를 볼 수 없으니 WCAG 2.2(W3C, 2023)의 상태 메시지 4.1.3 기준대로 '처리 중', '완료'를 aria-live 영역으로 알려 줘요.
자주 묻는 질문
- 로딩 중에 버튼을 비활성화해야 하나요?
- 네, 중복 실행을 막기 위해 처리 중에는 다시 누를 수 없게 하는 게 일반적이에요. 대신 '처리 중' 상태를 분명히 보여줘요.
- 언제 버튼 대신 진행 표시기를 쓰나요?
- 몇 초 이상 걸리거나 진행률을 알 수 있는 작업은 별도 진행 표시기가 더 적합해요.
출처 검토일: 2026-10-27
참고문헌
- Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 사람이 기다림을 견디는 응답 시간 구간을 처음 정리한 고전이라, 버튼에 로딩 표시가 필요한 시점을 정할 때 참고하면 도움이 돼요.
- Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 181–186). ACM. 0.1초·1초·10초 같은 지각 시간 상수를 정리해, 버튼 피드백 속도의 기준으로 참고하면 도움이 돼요.
- Nielsen, J. (1993, January 1). Response time limits. Nielsen Norman Group. 응답 시간 세 가지 한계를 쉽게 정리한 글이라, 스피너와 진행률 중 무엇을 쓸지 정할 때 참고하면 도움이 돼요.
- Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. 진행 표시가 있으면 사람들이 기다림을 더 잘 받아들인다는 연구라, 버튼 안 진행 표시의 근거로 참고하면 도움이 돼요.
- Harrison, C., Yeo, Z., & Hudson, S. E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1545–1548). ACM. 애니메이션 방식만 바꿔도 같은 시간이 짧게 느껴진다는 실험이라, 로딩 애니메이션 선택에 참고하면 도움이 돼요.
- Sherwin, K. (2014, October 26). Progress indicators make a slow system less insufferable. Nielsen Norman Group. 스피너와 진행 막대를 언제 쓰는지 정리한 글이라, 버튼 안 표시의 종류를 정할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 상태 메시지(4.1.3) 기준이 있어, 화면낭독기에 '처리 중'을 알릴 때 참고하면 도움이 돼요.