비활성 버튼

왜 막막해질까

노먼(1999)의 말처럼 화면의 버튼은 모양과 관례로 '누를 수 있다'는 신호를 줘요. 비활성 버튼은 그 신호를 꺼 버리지만, 왜 꺼졌는지는 말해 주지 않아요. 게이버(1991)가 말한 '숨겨진 어포던스'처럼 사용자는 무엇을 해야 버튼이 살아나는지 찾아 화면을 헤매게 돼요. 프리드먼(2021)이 모은 사례에서도 긴 양식 끝의 흐린 '다음' 버튼은 가장 답답한 패턴으로 꼽혀요. 관련 개념은 어포던스를 참고하세요.

버튼을 살려 두고 이유를 알려 주기

세클러와 동료들(2014)의 실험처럼 무엇이 잘못됐는지 분명히 알려 주는 양식이 완료율이 높아요. 그래서 많은 경우 버튼은 활성으로 두고, 눌렀을 때 빠진 항목으로 스크롤하면서 인라인 유효성 검사 메시지를 보여주는 편이 나아요. 플래허티(2024)가 구분했듯 이건 상태 표시가 아니라 검증 메시지로 알려야 하는 정보예요. 화면 아래에 붙은 고정 하단 버튼이라면 '이름을 입력해 주세요'처럼 남은 조건을 버튼 근처에 짧게 써 줘도 좋아요.

그래도 써야 할 때

결제 처리 중처럼 중복 실행을 막아야 할 때, 또는 선택지가 아예 존재하지 않을 때는 비활성 상태가 맞아요. 이때는 고든(2025)의 지침처럼 기본·눌림 상태와 확실히 구분되게 표시하고, 가능하면 '처리 중…'처럼 이유를 함께 보여줘요. WCAG 2.2(W3C, 2023)는 비활성 요소를 텍스트 대비 1.4.3에서 예외로 두지만, 너무 흐리면 저시력 사용자는 버튼이 있는지도 몰라요. 웹에서 disabled 속성을 쓰면 키보드 초점도 받지 않아 화면낭독기 사용자가 버튼을 못 찾을 수 있으니, aria-disabled와 설명 문구를 함께 쓰는 방법도 고려해요.

자주 묻는 질문

비활성 버튼은 항상 나쁜가요?

아니요. 처리 중 중복 실행을 막거나 선택이 불가능한 경우에는 적절해요. 다만 이유를 함께 보여줘야 해요.

disabled와 aria-disabled는 무엇이 다른가요?

disabled는 초점과 클릭을 모두 막고, aria-disabled는 초점은 받게 두어 화면낭독기가 버튼과 이유를 읽을 수 있게 해요.

출처 검토일: 2026-10-27

참고문헌

1. Friedman, V. (2021, August). Frustrating design patterns: Disabled buttons. Smashing Magazine. 비활성 버튼이 사용자를 막막하게 만드는 사례와 대안을 정리한 글이라, 버튼을 비활성화할지 정할 때 참고하면 도움이 돼요.
2. Gordon, K. (2025, April 25). Button states: Communicate interaction. Nielsen Norman Group. 기본·눌림·비활성 등 버튼 상태를 구분하는 방법을 다뤄, 비활성 상태 표현에 참고하면 도움이 돼요.
3. Flaherty, K. (2024, January 17). Indicators, validations, and notifications: Pick the correct communication option. Nielsen Norman Group. 상태 표시와 검증 메시지를 구분한 글이라, 버튼을 막는 대신 무엇을 알려야 할지 정할 때 참고하면 도움이 돼요.
4. Seckler, M., Heinz, S., Bargas-Avila, J. A., Opwis, K., & Tuch, A. N. (2014). Designing usable web forms: Empirical evaluation of web form improvement guidelines. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1275–1284). ACM. 명확한 오류 안내가 양식 완료를 돕는다는 실험이라, 비활성화 대신 오류를 보여주는 근거로 참고하면 도움이 돼요.
5. Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 화면에서는 관례와 인지된 어포던스가 '누를 수 있음'을 알린다는 글이라, 흐린 버튼이 주는 신호를 이해할 때 참고하면 도움이 돼요.
6. Gaver, W. W. (1991). Technology affordances. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 79–84). ACM. 숨겨진 어포던스와 거짓 어포던스를 구분한 고전이라, 이유 없이 막힌 버튼의 혼란을 설명할 때 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 비활성 요소는 대비 기준(1.4.3)에서 예외지만 오류 식별(3.3.1)은 요구돼, 비활성 버튼의 접근성 판단에 참고하면 도움이 돼요.