[UI 디자인] 컴포넌트 정리: 라디오 버튼, 체크박스 , 토글 스위치

UI를 설계할 때 자주 사용하는 선택 컴포넌트는
라디오 버튼, 체크박스, 토글 스위치입니다.
겉보기에는 비슷해 보여도 쓰임새는 명확히 다릅니다.

 

1. 라디오 버튼 (Radio Button)

1️⃣ 특징

• 여러 선택지 중 하나만 선택
• 하나를 선택하면 다른 선택지는 자동 해제

2️⃣ 활용

• 배송 방법 선택
• 결제 수단 선택
• 성별, 요금제 등 단일 선택이 필요한 경우

핵심: “하나만 골라야 할 때”

라디오 버튼 예시

 

2. 체크박스 (Checkbox)

1️⃣ 특징

• 여러 개 선택 가능
• 각 항목이 독립적으로 on / off

2️⃣ 활용

• 관심 항목 복수 선택
• 약관 동의(복수 항목)
• 필터 옵션 선택

핵심: “여러 개를 동시에 선택할 수 있을 때”

체크박스 예시

 

3. 토글 스위치 (Toggle Switch)

1️⃣ 특징

• 하나의 설정에 대해 두 가지 상태
• 좌·우 방향으로 전환
• 상태 표현이 직관적
  • OFF → 회색
  • ON → 컬러 강조

2️⃣ 활용

• 알림 켜기 / 끄기
• 다크 모드 on / off
• 기능 활성화 / 비활성화

핵심: “설정의 상태를 즉시 전환할 때”

토글 스위치 예시

 

 

 

 

정리하면

컴포넌트	선택 방식	사용 목적
라디오 버튼	하나만 선택	단일 선택
체크박스	여러 개 선택	복수 선택
토글 스위치	ON / OFF	설정 상태

좋은 UI는 선택의 성격에 맞는 컴포넌트를 쓰는 것에서 시작된다.

• 선택지 중 하나 → 라디오 버튼
• 선택지 중 여러 개 → 체크박스
• 설정 상태 전환 → 토글 스위치

이 기준만 지켜도 UI는 훨씬 직관적으로 보입니다.