라디오 버튼과 체크박스

무엇이 다를까

닐슨(2004)은 기본 규칙을 이렇게 정리해요. 서로 배타적인 선택지에서 하나를 고를 땐 라디오 버튼, 여러 개를 고르거나 하나를 켜고 끌 땐 체크박스예요. 모양도 관례가 있어서 라디오는 동그라미, 체크박스는 네모예요. 이 관례를 어기면 사람들은 몇 개를 고를 수 있는지 헷갈려요. 선택지가 두세 개면 세그먼트 컨트롤도 쓸 수 있고, 즉시 켜지고 꺼지는 설정은 토글 스위치가 더 맞아요. 선택지가 아주 많으면 힉(1952)의 법칙처럼 고르기 느려지니 검색이나 드롭다운을 고려해요.

기본 선택과 미리 체크

존슨과 골드스타인(2003)은 미리 정해진 값이 사람들의 선택을 크게 바꾼다는 것을 보였어요(기본값 효과). 라디오 그룹에 합리적인 기본값을 두면 입력이 빨라지지만, 사용자에게 불리한 쪽을 미리 골라 두면 안 돼요. 특히 마케팅 수신 동의 같은 체크박스를 미리 체크해 두는 건 다크 패턴으로 여겨지고 법적으로 문제가 될 수도 있어요. 반드시 골라야 하는 질문이라면 기본값 없이 비워 두는 것도 방법이에요.

모바일 터치와 접근성

기본 라디오와 체크박스는 아주 작아서 모바일에서 누르기 어려워요. 파히와 동료들(2006)의 엄지 타깃 크기 기준을 지키려면 레이블을 포함한 줄 전체를 누를 수 있게 해요. 선택지는 가로보다 세로로 나열해야 훑기 쉬워요. 그룹에는 fieldset과 legend로 질문을 붙여 WCAG 2.2(W3C, 2023)의 1.3.1과 3.3.2 기준을 지켜요. 직접 만든 컨트롤이라면 W3C의 라디오 그룹(n.d.-a)과 체크박스 패턴(n.d.-b)처럼 역할과 키보드 동작을 갖춰요. 전체 선택 체크박스는 '일부 선택' 상태도 보여줘요.

자주 묻는 질문

체크박스 하나만 있을 때는 언제 쓰나요?

'이용약관에 동의합니다'처럼 하나의 항목을 켜고 끌 때 써요. 이때 제출해야 반영되는 설정이면 체크박스, 즉시 반영되면 토글 스위치가 어울려요.

라디오 버튼은 선택 해제가 안 되나요?

네, 라디오는 한 번 고르면 해제할 수 없어요. '선택 안 함'이 필요하면 그 선택지를 따로 넣어요.

출처 검토일: 2026-10-27

참고문헌

1. Nielsen, J. (2004, September 27). Checkboxes vs. radio buttons. Nielsen Norman Group. 하나만 고를 땐 라디오, 여러 개는 체크박스라는 기본 규칙을 정리해, 컨트롤 선택에 참고하면 도움이 돼요.
2. World Wide Web Consortium. (n.d.-a). Radio group pattern. ARIA Authoring Practices Guide. 라디오 그룹의 역할과 화살표 키 이동을 다뤄, 직접 만든 라디오를 접근 가능하게 할 때 참고하면 도움이 돼요.
3. World Wide Web Consortium. (n.d.-b). Checkbox pattern. ARIA Authoring Practices Guide. 체크박스와 '일부 선택' 상태를 다뤄, 전체 선택 체크박스를 만들 때 참고하면 도움이 돼요.
4. Johnson, E. J., & Goldstein, D. (2003). Do defaults save lives? Science, 302(5649), 1338–1339. 미리 선택된 값이 결정을 크게 바꾼다는 연구라, 라디오 기본 선택과 미리 체크된 동의를 다룰 때 참고하면 도움이 돼요.
5. Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. 선택지 수와 결정 시간의 관계라, 라디오 목록이 길어질 때 다른 컨트롤로 바꿀 이유로 참고하면 도움이 돼요.
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. 정보와 관계(1.3.1), 레이블(3.3.2) 기준이 있어, 그룹 제목과 레이블 연결에 참고하면 도움이 돼요.