brunch

You can make anything
by writing

C.S.Lewis

by 비유Beyou Apr 18. 2021

UI 공부3. 라디오 버튼(Radio Button)

아는 것도 다시 보는 신입 UX기획자의 공부 노트

신입 UX기획자의 공부 노트


현명한 선택을 위한 UI 컴포넌트 잘 사용하기! 의 마지막의 주자는 라디오 버튼(Radio Button)입니다.

토큰, 체크 박스, 라디오 버튼은 모두 차이를 알고 사용하는 것이 중요하기 때문에 연속으로 다루고 털어(?) 내려고 합니다.

*새롭게 알게 되는 내용은 날짜를 달고 추가하려고 합니다^^



21.04.18


라디오 버튼은 사용자가  세트를 이루는 선택지  1가지를 선택  사용하는 UI 컴포넌트입니다. 또한, 모든 선택지가 노출되어야  경우에 사용합니다.


참고) 드롭다운

*만약 선택지가 너무 많은 경우 선택지를 모두 노출하지 않아도 되는 경우에는 드롭 다운 컴포넌트권장합니다.

다만, 드롭 다운은 여러 선택지를 선택 가능한 경우도 있어 기획하실 때 단일 선택의 경우와 복수 선택의 경우를  구분할  있도록 그리시면 좋을  같습니다.


https://www.pinterest.co.kr/pin/316096467577576706/





라디오 버튼 vs 토글

라디오 버튼은 선택지가 2가지일 경우에 토글과 대체되어 사용되기도 합니다.

하지만, 화면을 효율적으로 사용하기 어렵고.. 애매한 사용성 제시하게 되어 비추합니다.


예를 들어,

토글은 기능의 On/Off를 할 때에 주로 사용하기 때문에 이를 라디오 버튼으로 사용할 때엔

기능을 사용하시겠습니까?
1. 예
2. 아니오

공간을 좀 차지하지만, 이런 식으로 풀 수는 있습니다. 그리고 설문지를 할 때엔 저렇게 많이 쓰죠!

(모바일 앱의 기능에서는 예/아니오, 기능의 On/Off는 토글을 사용하는 것이 정석입니다.)


하지만, 질문의 내용이 달라져서

성별을 선택해주세요.
1. 남
2. 여

라고 했을 때에는 라디오 버튼을 사용해야 하고, 토글 스위치 사용은 비추천합니다.

(개발자 분들께서는 저 사례를 토글 스위치로 개발/구현할 수 있지만, 토글이 적절하게 쓰인 사례로 볼 수 없습니다.)



좌 : 라디오 버튼 / 우 : 드롭 다운(단일 선택)



UX/UI를 처음 공부하는 햇병아리 시절 라디오 버튼, 체크 박스의 차이를 몰라서 개발자와 이야기하다가 살짝 민망했던 경험이 있는데 사용자에게 좋은 선택 경험을 제공하고, 개발자와 능숙한 소통을 위해 차이를 알아두시면 좋을 것 같습니다!


요약하자면, 라디오 버튼은

1. 여러 세트 중 한 가지 선택만 가능

2. 모든 선택지 노출






여태까지 다루었던 토글, 체크박스, 라디오 버튼의 차이를 다시 정리해보겠습니다.

토글 : 한 가지 기능(주제)에 대한 스위치를 켜고 끄는 개념
라디오 버튼 : 한 가지 주제에 대해 여러 선택지가 존재하고, 그 선택지 중에 1가지만 선택이 가능함
체크 박스 : 한 가지 주제에 대해 여러 선택지가 존재하고, 그 선택지 중에 1가지 이상이 선택 가능함
Google material design - radio button (안드로이드/iOS 차이)



그리고

제가 그냥 재미 삼아..

모두 이해하셨는지 스스로 깨닫는 시간을 갖기 위해 3가지 상황 퀴즈를 내보겠습니다.

(출연자 : 비유, 선비)


1. 오늘 치킨 하나 시키자. 어떤 치킨 시킬까?

a. 교촌
b. BHC
c. BBQ
d. 푸라닭

비유 : 오늘 푸라닭 먹자!

선비 : 그래!

(푸라닭 마음에 안 드시면 여러분들은 각자의 맘 속 치킨을 선택하신 걸로><)


▶ 토글/라디오 버튼/체크박스 중 어떤 것일까요?!


2. 오늘 먹부림을 부려보자. 뭐 먹을까?

a. 피자
b. 치킨
c. 닭발
d. 떡볶이
e. 마라탕

비유 : 너무 배고파. 치킨이랑 마라탕 먹자.

선비 : 피자도 먹고 싶은데.. 치킨이랑 피자 먹고, 마라탕은 안주로 시켜먹자.

비유 : 그래!


▶ 토글/라디오 버튼/체크박스 중 어떤 것일까요?!


3. 콜라 시킬까? (답 2개)

a. 응
b. 아니


▶ 토글/라디오 버튼/체크박스 중 어떤 것일까요?!



정답은 긁어서 확인해주세요 :D

1. 라디오 버튼 2. 체크박스 3. 토글, 라디오 버튼


질문이나 피드백 주실 내용은 댓글 부탁드립니다.

공부하러 오신 여러분들 모두 화이팅입니다. 감사합니다!ㅎㅎ


https://material.io/components/radio-buttons

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari