라디오 버튼

여러 선택지에서 한 가지만 선택할 수 있게 제공되는 UI 컴포넌트를 라디오 버튼_Radio Button 이라고 칭합니다.

라디오 버튼은 설문 , 회원가입 양식 또는 검색 카테고리 선택 등 UI 전방위에서 쓰이고 있는 만큼 아주 유용한 UI 요소라고 할 수 있습니다.

Radio Button 이름의 유래

라디오 버튼의 이름은 실제 라디오의 버튼의 동작방식에서 유래하였습니다.

이 버튼은 여러개 중 한 가지가 눌려 있을 때 다른 버튼을 누르게 되면 기존에 눌려있던 버튼이 튕겨져 나오며, 결국에는 마지막에 눌렀던 한가지의 버튼만 활성화 되는 특징을 가지고 있었습니다.

언제 사용하는가

라디오 버튼은 프로그램 설치 과정에서도 많이 볼 수 있습니다.

어떠한 제품을 설치 하는 과정에서 사용자에게 옵션을 선택하도록 요구해야하는 경우가 많이 있는데요, 이 옵션들 중에서는 중복해서 선택할 수 없는 옵션들이 있습니다.

이러한 경우에 한가지 옵션만 선택할 수 있도록 디자인된 라디오 버튼을 사용하는 것이 적합할 것입니다.

또 각종 가입 및 신청 폼, 그리고 물론 설문폼도 라디오 버튼의 활용도가 아주 높은 경우들입니다.

라디오 버튼의 특징은 한가지 옵션을 선택하면 이전에 선택했던 옵션이 비활성화 됨으로 잘못된 선택으로 인한 오류를 막는 효과도 함께 가져옵니다.

최근에는 이미 그래픽 인터페이스를 접하는 사용자들이 라디오 버튼의 성격에 익숙해져 있어 라디오 버튼의 형태를 보는 것 만으로도 옵션 선택 방법의 의미를 이해하기도 합니다.

어떻게 사용해야 할까

아주 기본적이고 익숙한 UI 요소이지만, 익숙한 만큼 쉽게 놓칠 수 있는 라디오 버튼의 활용법에 대해 몇 가지 적어보겠습니다.

01. 세로 배열이 유리

시각적으로 라디오 버튼을 활용한 선택지 목록은 세로로 배열하는 것이 유리합니다.

텍스트의 사이드에 라디오 버튼이 위치하기 때문인데요, 가로로 목록이 배열될 경우 이 버튼이 좌우 텍스트 중 어느 쪽에 속하는 것인지 구분하기가 상대적으로 어렵기 때문입니다.

선택지 간의 간격을 넓히거나 디바이더를 넣는 등 해결 방법은 있겠지만 가능하다면 세로로 배열하는 것이 가장 이상적인 방법일 것입니다.

02. 클릭 영역은 최대한 넓게

라디오 버튼을 구현하다 보면 흔히들 할 수 있는 실수가 라디오 버튼 "만" 클릭할 수 있게 하는 것입니다.

대부분의 라디오 버튼들은 선택지 텍스트 만큼 또는 그보다 작은 높이를 가진 크기로 제작되기 때문에 이렇게 클릭할 수 있는 영역이 구현되게 되다보면 누르기가 어려운 라디오 버튼이 되고, 이는 하나의 작은 불편함을 서비스에 추가하는 결과를 가져오게 되겠지요.

따라서 라디오 버튼을 디자인 할 때는 최대한 확보할 수 있는 클릭 영역을 모두 끌어다 써야합니다.

보통은 텍스트도 클릭 가능하도록 하거나 그 이상 주변까지 클릭할 수 있도록 지정하는 방법을 사용할 수 있습니다.

03. 디폴트 선택을 제공

라디오 버튼은 한 가지 선택지가 디폴트로 선택되어 제공되어야 합니다.

이는 유저 인터페이스 휴리스틱 요소 중 한 가지인 User control and freedom을 위해서 입니다.

라디오 버튼은 항상 한 가지의 선택지가 활성화 되어 있기 때문에 사용자가 아무것도 선택되지 않은 상태로 만들 수 있는 방법이 없습니다.

그렇기 때문에 아무 버튼도 선택되지 않은 상태로 선택지 목록을 제공하게 되면 사용자가 어느 한 선택지를 선택한 후 이를 되돌릴 수 없게 되는 것이죠.

그렇기 때문에 가장 일반적인 선택지가 선택된 상태로 제공하거나,  "선택안함" 과 같은 역할을 하는 옵션을 선택지 목록에 넣어 사용자가 이용에 어려움이 없도록 해야 할 것입니다.

04. 순서에 규칙을 주자

선택지는 의도에 따라 그 성격이 달라질 수 있습니다.

설문지의 경우 좋음에서 나쁨의 정도를 확인하기 위함이 될 수도 있고, 가입 양식에서는 사용자의 성향을 파악하기 위함이 될 수도 있습니다.

어느 경우에서든 사용자에게서 얻고자하는 정확한 정보를 얻거나, 사용자가 정확한 선택을 하도록 유도하기 위해서는 선택지를 잘 이해할 수 있도록 하는 것 또한 중요한 요소일 것입니다.

선택지의 순서 배열에 규칙을 주는 것은 한 가지 방법이 될 수 있습니다.

선택지의 시작에서부터 끝까지가 긍정적에서 부정적, 또는 복잡한 것에서부터 단순한 것, 수량이 많은 것에서부터 적은 것 등과 같은 규칙이 있다면 사용자가 이 항목의 의미를 파악하는 데 도움이 될 것입니다.