체크박스와 라디오 버튼 차이: 폼의 선택 방식 정하기

한 그룹에서 하나의 답을 골라야 한다면 라디오 버튼을 사용합니다. 각 항목을 독립적으로 선택할 수 있고 여러 항목을 함께 고를 수 있다면 체크박스를 사용합니다. 원형과 사각형 중 무엇이 화면에 더 잘 어울리는지가 아니라 어떤 답을 받아야 하는지가 선택 기준입니다.

워크숍 신청 폼을 예로 들면 참석 일정은 하나만 고르지만, 추가 학습 자료는 여러 개를 선택할 수 있습니다. 같은 폼 안에서도 질문에 따라 다른 컨트롤이 필요합니다. 폼 UI 디자인 튜토리얼은 선택 항목을 레이블, 유효성 검사, 제출 흐름과 연결하는 방법을 다룹니다. 여기서는 어떤 선택 요소를 쓰고 그 의미를 어떻게 설명할지 살펴봅니다.

폼에 저장할 답부터 정하기

컴포넌트를 고르기 전에 가능한 답을 평범한 문장으로 적어 보세요. ‘어느 일정에 참석하시나요?’라는 질문에 ‘화요일 오전’은 유효한 답입니다. 한 번만 참석할 수 있다면 ‘화요일 오전과 목요일 오후’는 유효하지 않습니다. 라디오 버튼은 다른 항목을 고르면 이전 선택이 해제되는 방식으로 이 규칙을 전달합니다.

학습 자료에는 ‘인쇄 자료’, ‘연습 문제집’, ‘둘 다’, ‘둘 다 선택하지 않음’이 모두 유효한 답일 수 있습니다. 두 체크박스로 각 항목을 직접 선택하게 하면 됩니다. ‘인쇄 자료 / 연습 문제집 / 둘 다 / 둘 다 선택하지 않음’ 중 하나를 고르게 만들면 독립적인 두 선택을 불필요하게 하나의 조합 목록으로 바꾸게 됩니다.

질문	유효한 답	적합한 컨트롤
어느 워크숍 일정에 참석하나요?	가능한 일정 중 하나	라디오 버튼 그룹
어떤 추가 학습 자료가 필요한가요?	선택 없음, 한 개, 여러 개	체크박스 그룹
워크숍 후속 안내를 받고 싶나요?	하나의 선택 사항에 동의하거나 동의하지 않음	긍정형 레이블이 명확한 단일 체크박스
계정 설정을 누르는 즉시 켜거나 끄나요?	조작 직후 설정 변경	폼의 선택 항목보다 스위치 사용을 검토

‘최대 두 개 선택’도 복수 선택 질문입니다. 체크박스를 사용하고 선택 한도를 설명하세요. 세 번째 항목을 누르면 어떻게 되는지 정하되, 이미 고른 항목을 알리지 않고 해제해서는 안 됩니다. 반대로 체크박스 그룹에서 하나만 선택할 수 있게 만들면 겉모양만 다른 라디오 그룹이 됩니다.

워크숍 신청 폼으로 끝까지 설계하기

예시 폼에는 두 그룹이 있습니다. 필수 그룹인 참가 일정 선택에는 ‘화요일 10:00~12:00’와 ‘목요일 14:00~16:00’를 넣습니다. 선택 그룹인 학습 자료 추가에는 ‘인쇄 자료’와 ‘연습 문제집’을 넣습니다. 다음 행동은 ‘예약 내용 확인’입니다.

일정은 세로로 배치한 라디오 그룹으로 만듭니다. 맥락만으로 선택 규칙이 분명하지 않다면 ‘하나를 선택하세요’라고 안내합니다. 각 컨트롤 옆에 일정과 시간을 온전히 표시해 다른 패널을 열지 않고 비교할 수 있게 하세요.

학습 자료는 별도의 체크박스 그룹에 놓고 그룹 제목에 ‘선택 사항’임을 표시합니다. 두 자료를 모두 고를 수 있습니다. 둘 다 체크하지 않으면 추가 자료가 없다는 뜻이므로, 다른 항목과 동시에 선택될 수 있는 ‘없음’ 체크박스를 굳이 추가할 필요는 없습니다.

화요일을 고른 뒤 목요일을 고르면 화요일은 해제됩니다. 인쇄 자료를 고른 뒤 연습 문제집을 고르면 두 항목이 모두 유지됩니다. 선택 항목을 큰 카드 형태로 꾸미더라도 이 차이는 명확해야 합니다.

확인 화면에는 컨트롤 이름이 아니라 선택 결과를 보여 줍니다. ‘목요일 14:00~16:00’, ‘학습 자료: 인쇄 자료, 연습 문제집’이라고 표시하세요. 사용자가 ‘라디오 2 선택됨’이나 설명 없는 체크 아이콘을 해석해야 신청 내용을 알 수 있는 화면은 피해야 합니다.

기본값과 ‘선택 없음’을 구분하기

사용자가 직접 결정해야 하는 필수 라디오 그룹은 아무것도 선택하지 않은 상태로 시작할 수 있습니다. 워크숍 예시에서 화요일이 첫 번째라는 이유로 기본 선택하면 의도하지 않은 신청으로 이어질 수 있습니다. 참석자가 일정을 고를 때까지 비워 두세요.

이미 알고 있는 선택을 반영하는 기본값은 유용합니다. 목요일 신청을 수정하러 돌아온 사람에게는 목요일이 선택된 상태를 보여 줍니다. 기존 답을 보여 주는 것과 폼을 완성된 것처럼 보이게 하려고 새 답을 임의로 정하는 것은 다릅니다.

라디오 버튼은 일반적으로 선택된 항목을 다시 눌러도 선택이 해제되지 않습니다. 답을 고르지 않아도 되는 질문이라면 ‘선호 없음’ 같은 항목이나 명확한 선택 해제 방법을 제공하세요. 표현은 저장되는 의미와 일치해야 합니다. ‘선호 없음’과 ‘아직 응답하지 않음’은 다른 상태입니다.

선택 사항인 체크박스 그룹에서는 아무것도 체크하지 않은 상태가 이미 선택 없음을 나타냅니다. 화면을 채워 보이게 하려고 추가 서비스를 미리 선택하지 마세요. 절차상 실제로 필요한 확인 항목이 있다면 의미를 명시하고, 관련 없는 선택 사항과 분리합니다.

어떤 질문은 의도적인 ‘해당 없음’과 무응답을 구분해야 하므로 별도의 ‘해당 항목 없음’이 필요합니다. 이때는 상호작용도 달라집니다. 그 항목을 고르면 다른 선택이 해제되고, 다른 항목을 고르면 ‘해당 항목 없음’이 해제된다고 안내하세요. 규칙이 복잡하다면 먼저 간단한 질문을 하고 답에 따라 후속 질문을 보여 주는 방식이 나은지 검토합니다.

선택 항목을 묶는 질문을 보여 주기

‘화요일’과 ‘목요일’은 개별 항목의 레이블이고, ‘참가 일정 선택’은 두 항목을 연결하는 질문입니다. 두 수준 모두 필요합니다. 그룹 제목이 없으면 다시 폼을 열었을 때 워크숍 참석일인지, 배송일인지, 후속 미팅 날짜인지 알기 어렵습니다.

레이블의 형식과 구별 정보를 적는 순서를 맞추세요. ‘화요일 10:00~12:00’와 ‘목요일 14:00~16:00’는 ‘화요일 오전’과 ‘목요일에 열리는 오후 워크숍’보다 비교하기 쉽습니다. 진행 방식이나 장소처럼 선택에 영향을 주는 경우에만 짧은 설명을 추가합니다.

항목이 길면 컨트롤을 첫 줄에 맞추고 레이블의 줄바꿈을 허용합니다. 레이블과 설명은 한 덩어리로 유지하세요. 여러 줄짜리 설명 때문에 라디오 원이 두 항목 중간에 놓이거나, 아래쪽 설명이 별개의 선택지처럼 보이지 않게 합니다.

구현에서는 작은 원이나 사각형뿐 아니라 레이블을 눌러도 선택되게 합니다. 색상 외에도 선택 표시를 유지하세요. 카드형 항목의 테두리만으로 선택을 나타내면 포커스와 혼동될 수 있습니다. 라디오의 점이나 체크 표시를 함께 보여 주어 선택 상태와 포커스 상태를 구분합니다.

목록이 길다면 다른 패턴이 적합할 수 있습니다. 드롭다운 디자인 가이드에서는 간결한 선택 상자나 검색 가능한 선택 목록이 유용한 경우를 설명합니다. 다만 높이를 조금 줄이기 위해 짧고 중요한 비교 항목을 숨기지는 마세요.

기존 선택을 지우지 않고 오류 설명하기

참석자가 자료 두 개를 선택했지만 일정을 고르지 않고 다음으로 넘어간다면 일정 그룹 근처에 ‘계속하려면 참석 일정을 선택하세요’라고 안내합니다. 선택한 자료는 그대로 둡니다. 문제는 빠진 답 하나이지 폼 전체가 아닙니다.

오류 문구가 어느 그룹에 속하는지 분명한 위치에 놓으세요. 같은 오류를 라디오 항목마다 반복하면 하나의 문제가 여러 문제처럼 보입니다. 구현한 폼에서 오류 요약을 제공한다면 요약의 링크로 해당 질문에 이동할 수 있어야 합니다.

목요일 일정이 마감되었다면 그 이유를 평범한 말로 설명합니다. 설명 없이 회색으로 표시하면 마감인지, 접수 전인지, 다른 신청 조건이 필요한지 알기 어렵습니다. 이전에 선택한 일정이 더 이상 유효하지 않다면 무엇이 바뀌었는지 알리고 다시 고르게 합니다. 신청 일정을 조용히 화요일로 바꾸어서는 안 됩니다.

부분 선택 체크박스는 큰 목록의 일부 항목만 선택된 상태를 상위 컨트롤에서 요약할 때 유용합니다. 예와 아니요 사이에 있는 또 다른 답이 아닙니다. 워크숍 예시에는 독립적인 자료 두 개만 있으므로 ‘전체 선택’이 필요하지 않습니다. 추가하면 작업에 필요한 것보다 인터페이스가 복잡해집니다.

키보드 동작까지 설계에 포함하기

일반적인 라디오 그룹의 WAI-ARIA 라디오 패턴(영문)에서는 Tab으로 그룹에 들어가거나 나오고, 방향키로 항목을 이동하며 선택합니다. 스페이스 키로 포커스된 항목을 선택할 수도 있습니다. 도구 모음 안의 라디오 그룹은 다른 동작을 사용하므로 그 예외를 일반 신청 폼에 그대로 적용하지 마세요.

체크박스에 포커스가 있을 때는 스페이스 키로 선택 상태를 바꿉니다(W3C, 영문). 구현에는 프로그램이 인식하는 레이블, 정확한 상태, 이해할 수 있는 그룹 이름도 필요합니다. 체크 표시를 그리거나 프로토타입 화면 두 개를 연결했다고 이런 브라우저 의미 구조까지 만들어지는 것은 아닙니다.

Pixso의 인터페이스 디자인 작업 공간에서 선택 전, 선택됨, 포커스, 사용 불가 상태의 라디오 버튼과 체크박스를 재사용 가능한 컴포넌트로 만듭니다. 완성된 워크숍 폼에 배치해 레이블의 줄바꿈과 그룹 사이 간격을 확인하세요. 그룹 옆에는 일정 하나 선택, 자료는 독립 선택, 확인 절차 전에는 신청 확정 안 함이라는 동작 규칙을 적습니다.

화요일 선택, 목요일로 변경, 자료 두 개 선택, 한 개 해제를 순서대로 따라가 보세요. 일정 없이 다음으로 진행하는 경우도 확인합니다. 어느 단계에서든 어떤 답이 선택되었는지 분명해야 합니다. 사용자가 의도한 답을 고르고, 쉽게 바꾸고, 무엇이 제출될지 알 수 있다면 컨트롤의 역할이 제대로 전달된 것입니다.