라디오버튼, 드롭다운 사용 구분

Radio buttons allow users to select one option from a set. – material.io

지인이 페북에 공유한 브런치글(https://brunch.co.kr/@toqha7822/10 中 3. 옵션이 적을 경우 라디오, 옵션이 많을 경우 셀렉트 UI를 활용하자)을 보면서, 예전부터 정리하려고 했던 내용이 떠올랐다. (위 브런치글에서 셀렉트 UI라고 지칭한 것을 아래에서는 ‘드롭다운-dropdown’으로 지칭한다.)

고객사에서 만든 UI Guide Document(굳이 구분한 것은 GUI 작업은 수행사에서 했기 때문)를 전달 받아 화면설계서(스토리보드)를 작성한 적이 있다. 거기는 프로젝트 준비를 오랫동안 준비하면서 UX 전문인력을 채용하여 TF에 있었고, 운영 경험도 많아 세부적인 UI Component까지 사전 정의가 되어 있었다. 물론 서비스 전면개편으로 적용하다 보니 세부 항목들이 수정, 추가되기도 하고, Guide에 정의된 각 Component를 어떤 경우에 사용할 지는 계속 논의를 했는데 그 중 대표적인 것이 선택 UI였다.

체크박스(Checkboxes)는 다중 선택이 가능한 경우, 라디오버튼(Radio buttons)은 단일 선택이 가능한 경우로 하여 기능적인 차이가 명확하여 별 이견이 없었다. 그러나 드롭다운 역시 단일 선택 기능을 제공하므로 라디오버튼과 드롭다운의 경우는 구분이 필요했다.

초기 정리되었던 기본 원칙은 다음과 같다.

  1. 선택 항목이 적고 단답형인 경우 라디오버튼으로 한다. ex) 예/아니오, 남/여, 동의/미동의
  2. 선택 항목이 많은 경우 드롭다운으로 한다. ex) 출생년도, 전화국번, 이메일 목록

그러나 선택사항의 많고 적음으로만 구분하는 경우 몇개까지를 라디오버튼으로 할지에 대한 추가 논의가 필요하다. 또한 선택 항목의 내용이 긴 문장형으로 구성이 필요한 경우 드롭다운 형태로 할 때 문장 길이에 따라 들쭉날쭉하고 보기가 불편한 점이 발생한다(모바일 UI일 때 더욱 그러하다). 하여 선택 항목에 대한 사용자의 인지 여부와 가독성을 두고 다음과 같이 보완을 한다.

선택 항목을 한눈에 파악하고 빠르게 판단이 필요한(가능한) 경우 라디오 버튼으로 한다.

  • 예/아니오, 동의/비동의는 부정(아니오)에 대한 선택이 가능함을 보여주기 위해서 라디오 버튼 형식이 유효하다.
  • 설문 문항과 같이 선택항목의 내용이 긴 문장형으로 구성되거나 항목간 비교가 필요한 경우 라디오 버튼 형식이 효율적이다.
  • ‘예’만 선택 가능한 경우에는 체크박스 형태로 구성한다. ex) 약관동의 UI

선택 항목에 대해 이미 인지하고 있고, 단순 선택하는 경우 드롭다운으로 한다.

  • 전화국번, 이메일주소-도메인, 국적, 은행, 통화 등 항목은 다수이나 선택 내용이 명확하고 무엇을 선택해야 하는지 관습적으로 이미 아는 경우
  • 성별(남/여) 선택과 같이 항목이 적은 경우는 드롭다운 형태도 가능하나 터치(클릭) 액션을 한번 줄이는 효과를 고려하여 라디오 버튼으로 한다.

대략 위와 같이 기준을 정하고 UI 설계를 진행하면서 필요한 경우 개별 논의를 하기로 했으나, 추가 검토는 발생하지 않았던 것으로 기억한다. 이후 다른 프로젝트에서 UI Guide를 논의할 때 위 내용으로 제안하였고 큰 이견들 없이 진행되었다.

정보의 양에 따라 위 기준처럼 각 항목을 단순히 나열(드롭다운)해도 될 것이고, 해당 항목에 대한 보다 자세한 설명을 제공(라디오버튼)할 필요도 있다. PC 또는 모바일 기기별 해상도에 따라 구성이 달라질 수도 있을 것이다. 중요한 것은 기능적인 접근이 아니라 ‘선택(Select)의 순간에 필요한 정보를 어떻게 보여주는 것이 사용자의 결정에 도움이 될까?’라는 질문인 것 같다.

뱀발1: material.io Component에 selection-control(체크박스, 라디오버튼, 스위치)이 별도의 메뉴로 제공되었는데 현재는 사라지고 각각의 메뉴로 제공된다. 다만 구글에서 검색을 하면 다음 url로 접속이 가능하다. https://material.io/components/selection-controls meterial.io 내용이 수시로 바뀌는 것 같으니 가끔 찾아봐야겠다.

뱀발2: select box와 dropdown 의 차이에 대해서도 정리해봐야겠다.

글쓴이

iamagoguma

UX/UI,Product Designer,Project Manager,Communicator & Coordinator.