라디오 버튼?

라디오 버튼 역시 명칭과 기능이 현실에서의 메타포를 기반으로 합니다. 지금 세대는 모를 수 있지만, 과거 라디오 플레이어의 주요 버튼들의 의 동작은 하나의 버튼을 누르면 다른 버튼들은 모두 비활성 상태로 튀어 나오는 형태를 갖고 있었습니다. 아래 이미지를 참고하시면 이해가 편하실 수 있습니다. 이 버튼들은 라디오 주파수를 기억하는 Preset을 저장하는 데에 사용되거나, 아니면 카세트 테이프 이후 시대에는 카세트 테이프를 조작하는 용도로 사용되었는데, 공통적으로 하나의 선택값만을 활성화할 수 있다는 특징이 있었습니다.

하나의 선택값만을 활성화하는 속성을 그대로 유지하면서, 이와 같은 기능을 하는 GUI 상의 컨트롤 타입을 라디오 버튼이라는 이름으로 부르기 시작했습니다. 동그란 형태의 라디오 버튼은 애플 매킨토시 시스템 4에서 처음 사용되기 시작했다고 하는데, 왜 동그라미 형태인가에 대해서는 체크박스와의 명확한 구분을 위해서 동그라미를 쓰기 시작했다는 가설이 있다고 하나 명확한 이유는 불분명하다고 합니다.

매킨토시 시스템4의 동그라미 라디오 버튼. Source: Guidebook Gallery

라디오 버튼은 여러 옵션 중 하나의 선택값만 갖게 하는 선택용 컨트롤

Radio Buttons. Source: Google Material Design

기본형은 빈 동그라미와 레이블을 가지며, 선택값은 채워진 동그라미로 표현을 하는 형태입니다. 구글의 메테리얼 디자인의 경우 Checkbox, Switch와 함께 Selection controls라는 항목으로 묶어서 시스템화를 해 놓았습니다. 또는 Forms라는 항목으로 묶여서 함께 체계화되기도 하는데, 이처럼 특히 Checkbox와 함께 대표적인 '항목 선택 컨트롤 모듈'이라고 생각하실 수 있습니다. 일반적으로 중복선택이 가능한 경우에는 Checkbox를 그 외의 경우에는 Radio Button을 사용한다고 보면 될 것 같습니다. 마이크로소프트의 Fluent Design System은 라디오라는 표현이 맘에 안 들었던지 ChoiceGroup이라는 명칭으로 컴포넌트화를 해 놓았습니다.

메뉴와의 차이점

라디오 버튼을 동그라미 형태로 쓰지 않고, 다른 형태로도 변형되어 쓰입니다. 여러 값 중 하나의 값을 선택한다는 측면에서 '메뉴(Menu)'와 유사하나, 네비게이션이나 정보를 새로 불러오는 용도가 본래 라디오 버튼의 용도는 아니라는 점에서 메뉴와의 차이점이 있다고 볼 수 있습니다. 다만 절대적인 것은 아니며 경우에 따라 라디오 버튼을 클릭하는 것만으로 데이터를 주고 받거나, 다른 이벤트를 실행하게 하는 등의 사용자 경험도 많이 사용되곤 합니다. 이 또한 디자인 철학에 따라 체계화가 다르게 진행될 수 있는 부분인 것으로 보입니다. 다만 원론적으로는 값을 선택하는 것에 그치며, '전송/통신'하는 용도로는 쓰이지 않는 것으로 보입니다.

라디오 버튼 그룹 (토글 버튼 그룹)

기본 동그라미 형태 외에도 스타일링을 통해 다른 형태로도 제공되곤 합니다. 특히 동그라미를 제외하고, '버튼 그룹' 형태로 일렬로 버튼이 이어진 형태는 일반적인 라디오 버튼의 스타일링 행태입니다. 일반적인 '버튼 그룹'과 달리 선택값이 유지되며, 데이터의 송/수신이나 다른 이벤트의 발생보다는 값의 선택 자체에 초점을 두는 사용자 경험을 제공한다는 특징을 갖습니다.

Radio Button Group. Source: Salesforce Lighting Design System

일부 디자인 시스템에서는 동그라미 형태를 '라디오'라고 부르고, 일반적인 버튼 타입으로 스타일링된 것을 '라디오 버튼'이라고 나름대로 분류해서 부르는 것을 확인할 수 있는데, 라디오를 메타포로 한 컨트롤이 아니라 라디오의 버튼을 메타포로 사용한 컨트롤이기에 엄밀히 따지면 의미에서 어긋난 용례라고 볼 수 있습니다.