Radio Buttons는 사용자 인터페이스에서 여러 옵션 중 하나만 선택할 수 있게 하는 선택형 입력 컴포넌트입니다. 사용자가 제공된 여러 옵션 중에서 정확히 하나의 옵션을 선택하도록 제약하는 경우에 유용하며, 다음과 같은 주요 특징이 있습니다:
1. 단일 선택 제약
• Radio Buttons는 사용자가 여러 옵션 중 하나만 선택할 수 있도록 제한합니다. 이를 통해 사용자는 명확하게 하나의 선택지를 선택해야 하며, 여러 개의 옵션을 동시에 선택할 수 없습니다. 이는 서로 배타적인 선택지(예: 성별 선택, 배송 방법 선택)에서 유용합니다.
2. 그룹으로 사용
• Radio Buttons는 일반적으로 그룹으로 사용되며, 각 그룹 내에서 하나의 선택지만 가능하게 됩니다. 동일한 그룹 내에 속한 Radio Buttons는 동일한 질문이나 항목에 대한 여러 선택지를 나타냅니다. 이 그룹화는 HTML과 같은 웹 개발에서는 name 속성을 통해 이루어집니다.
3. 원형 인터페이스
• Radio Buttons는 작은 원(circle) 형태로 나타나며, 선택된 경우 중심에 점(dot)이 나타납니다. 이러한 시각적 특징은 사용자가 선택 상태를 쉽게 인식할 수 있도록 도와줍니다. 선택되지 않은 상태에서는 비어 있는 원으로 보이며, 선택된 상태에서는 원 안에 점이 나타납니다.
4. 텍스트 레이블과의 결합
• 각 Radio Button에는 텍스트 레이블이 함께 제공되어 선택지가 무엇을 의미하는지 설명합니다. 이 텍스트 레이블은 사용자가 선택하려는 옵션의 의미를 쉽게 이해할 수 있게 돕습니다. 예를 들어, “아침”, “점심”, “저녁”과 같은 선택지에 Radio Buttons를 사용하면 사용자는 하루의 특정 시간을 선택할 수 있습니다.
5. 사용자의 선택 시 즉시 반응
• Radio Button은 클릭하거나 탭할 때 바로 선택 상태가 변경되며, 이전에 선택된 항목은 자동으로 선택 해제됩니다. 사용자가 선택한 내용은 즉시 반영되므로 추가 확인 없이 바로 사용자의 의도를 반영할 수 있습니다.
6. 전형적인 사용 사례
• Radio Buttons는 사용자에게 명확한 단일 선택을 요구할 때 사용됩니다. 예를 들어:
• 성별 선택: “남성”, “여성”, “기타”
• 배송 방법: “일반 배송”, “익일 배송”, “빠른 배송”
• 결제 방식: “신용카드”, “직불카드”, “계좌이체”
7. 접근성 고려
• Radio Buttons는 키보드로도 탐색할 수 있도록 설계되어야 합니다. Tab 키를 통해 Radio Button 그룹으로 이동하고, 방향키를 사용하여 그룹 내의 옵션을 변경할 수 있어야 합니다. 이는 다양한 사용자에게 접근성을 제공하고, 특히 스크린 리더 사용자가 옵션을 선택할 수 있게 도와줍니다.
8. 상태 관리와 기본 선택
• Radio Buttons는 기본 선택 상태를 설정할 수 있으며, 사용자가 처음 페이지를 열었을 때 기본값이 설정된 옵션을 볼 수 있습니다. 이는 사용자가 주로 선택할 가능성이 높은 기본 선택지를 제시함으로써 선택 과정을 단순화할 수 있습니다. 그러나 필수 선택 사항일 경우에는 사용자가 명확하게 자신의 선택을 하도록 기본 선택 없이 제공하기도 합니다.
9. 레이아웃과 정렬
• Radio Buttons는 수평(horizontal) 또는 수직(vertical)으로 정렬할 수 있습니다. 수평 정렬은 선택지가 적고 간결하게 표시하고 싶을 때 적합하며, 수직 정렬은 선택지가 많거나 각 항목의 설명이 길어 공간이 더 필요할 때 유용합니다.
10. 일관된 스타일링
• 디자인 시스템에서는 Radio Buttons의 크기, 간격, 색상, 활성화 상태(hover, focus, active) 등을 표준화하여 일관된 스타일을 유지합니다. 이는 사용자가 어디서든 동일한 사용자 경험을 얻도록 도와주며, 사용자가 선택 상태를 시각적으로 쉽게 인식하게 합니다.
11. 시각적 피드백
• 선택 상태가 변경될 때 시각적으로 즉시 반영되며, 선택된 항목은 일반적으로 더 강한 대비를 주거나 색상을 바꾸어 표시합니다. 이는 사용자가 자신이 선택한 옵션이 무엇인지 명확히 알 수 있게 도와줍니다.
12. 불명확한 사용 피해야 함
• Radio Buttons는 선택지가 상호 배타적이지 않거나, 사용자가 여러 개의 선택지를 선택할 수 있는 상황에서는 부적절합니다. 그런 경우, 대신 체크박스(Checkbox)를 사용하는 것이 적합합니다. 예를 들어, ‘취미’와 같은 다중 선택이 가능한 경우에는 Radio Buttons보다 체크박스가 더 알맞습니다.