체크박스 · 라디오

정의

체크박스와 라디오는 여러 선택지 중에서 고르게 하는 입력 방식입니다. 둘의 차이는 한 번에 몇 개를 고를 수 있느냐에 있습니다. 체크박스는 목록에서 원하는 만큼 여러 개를 동시에 켤 수 있고, 라디오는 여러 개 중에서 오직 하나만 고를 수 있어 하나를 켜면 앞서 켠 것이 자동으로 꺼집니다. 그래서 체크박스는 각 항목이 서로 독립적인 on/off 질문에 쓰고, 라디오는 서로 배타적이라 반드시 하나로 좁혀야 하는 질문에 씁니다. 이 성격 차이가 두 입력을 언제 써야 하는지 가르는 기준이 되므로, 화면을 만들기 전에 이 질문이 여러 개를 허용하는지 하나만 받는지를 먼저 정해 두어야 합니다.

왜 중요한가

어느 쪽을 쓰느냐에 따라 사용자가 화면을 이해하는 방식이 완전히 달라집니다. 라디오를 보면 사용자는 곧바로 여기서는 하나만 고르면 되는구나 하고 판단하고, 체크박스를 보면 여러 개를 골라도 되는구나 하고 받아들입니다. 즉 입력의 모양 자체가 규칙을 미리 알려 주는 셈입니다. 이 신호를 반대로 주면 사용자는 여러 개를 고르려다 막히거나, 하나만 골라야 하는데 여러 개를 켜서 나중에 오류를 만납니다. 특히 결제수단이나 배송 방법처럼 하나만 성립하는 선택에서 방식을 잘못 고르면, 잘못된 조합이 그대로 제출되어 되돌리기 번거로운 문제로 이어집니다. 반대로 방식을 제대로 고르면 별도의 안내 문구 없이도 규칙이 저절로 전달되어, 폼이 훨씬 간결하고 실수 없이 굴러갑니다.

흔한 실수

• 하나만 골라야 하는 질문에 체크박스를 쓰는 경우입니다. 사용자가 결제수단을 두 개 켜 버리면 시스템은 어느 것을 써야 할지 알 수 없고, 결국 제출 단계에서 오류를 내며 사용자를 처음으로 되돌려 보내게 됩니다.
• 모양의 관습을 어기는 것입니다. 체크박스는 네모, 라디오는 동그라미라는 약속을 무시하고 둘을 뒤섞으면, 사용자는 모양만 보고 몇 개를 고를 수 있는지 판단하지 못해 매번 헷갈리게 됩니다.
• 라디오를 아무것도 선택되지 않은 상태로 두는 것입니다. 기본값이 없으면 사용자는 매번 처음부터 하나를 골라야 하고, 실수로 그냥 넘기면 값이 비어 오류가 나기 쉽습니다.

실무 팁

• 독립적인 on/off는 체크박스로, 하나만 골라야 하는 선택은 라디오로 구분하세요. 약관 동의처럼 각각 켜고 끄는 항목은 체크박스, 결제수단처럼 하나로 좁혀야 하는 항목은 라디오가 맞습니다.
• 모양 관습을 반드시 지키세요. 체크박스는 네모, 라디오는 동그라미로 두면 사용자는 아이콘만 보고도 여러 개를 고를 수 있는지 하나만 고르는지 즉시 알아챕니다.
• 라디오는 가장 흔하거나 안전한 항목을 기본으로 하나 선택해 두세요. 미리 선택돼 있으면 사용자가 매번 처음부터 고르는 수고를 덜고, 빈 값으로 제출되는 실수도 함께 줄어듭니다. 단, 개인정보 수집 같은 민감한 선택은 기본값을 켜 두지 말고 비워 두는 편이 안전합니다.

관련 개념