[미디클] 라디오 vs 체크박스 뭐가 좋을까? EP.1

타임머신이 있다면 어디로 가보고 싶나요?

다들 고르셨나요? 오늘 미스터리 디자인 클럽에서는 ‘선택지를 고르는 화면’ 디자인에 대해 이야기해볼게요.

*라디오 버튼이란? 옵션을 선택할 때 사용되는 UI 컴포넌트인데요. 라디오의 물리적 버튼에서 따와 만들어진 PC UI 문법으로, 옵션 중 하나를 선택해야 할 때 PC와 모바일 모두에서 많이 이용되고 있어요.

A씨를 비롯한 많은 메이커들이 토스의 모바일 디자인 시스템에 라디오 버튼 컴포넌트를 추가하자는 이야기를 꺼내곤 했어요. ‘너무 일반적인 공식이기 때문에’, ‘다른 곳에서 모두 이렇게 하기 때문에’가 그 이유였어요.

그러나, 모바일 환경에서는 이 형태가 적합하지 않은 면이 있어요. 마우스 포인터로 버튼을 편하게 클릭할 수 있는 PC 환경에는 어울리지만, 손가락 끝으로 탭해야 하는 모바일 환경에서는 작은 원을 정확히 눌러야 할 것 같은 형태가 최선이라 하기 어렵기 때문이에요. 실제로는 레이블을 눌러서 선택할 수 있다고 해도요.

iOS에서도 원형의 라디오 버튼은 존재하지 않아요. 대신 세그먼티드 컨트롤(Segmented Controls)이라는 컴포넌트를 이용하거나, 위 이미지처럼 체크박스를 사용해 PC의 라디오 버튼과 같은 기능을 구현하고 있어요. 탭 가능한 큰 영역을 제공하고, 미니멀한 스타일을 유지하기 위해 대안을 제시한 거죠.

이렇듯 모바일에서 최선의 형태가 아님에도 불구하고, ‘하나만 선택되는 화면은 반드시 라디오 버튼을 써야하지 않을까?’라고 많은 분들이 생각했던 거에요.

여러분은 앞서 어떤 선택을 하셨나요? 그리고, 다른 사용자들은 어떻게 선택했을까요?

세 가지 유형의 질문을 준비해 UT를 진행했어요.

• 유형 1️⃣: 앞서 여러분이 선택한 ‘타임머신’ 질문처럼, 서로 배타적이어서 여러 개를 선택할 수 없는 것이 있어요.
• 유형 2️⃣: ‘최근 1년간 감상한 콘텐츠를 선택하라’는 것처럼, 대부분 여러 개를 선택할 만한 질문이 해당돼요.
• 유형 3️⃣: 단일 혹은 중복 모두 선택할 수 있는 질문이 해당돼요.

질문에서는 ‘모두 선택’, ‘하나만 선택’ 등 선택 개수를 안내하지 않았어요. 또한, 일반적인 공식과는 반대로, ‘하나만 선택’일 땐 체크박스, ‘중복 선택’일 땐 라디오 버튼을 주어 사용자가 어떻게 선택하는지 관찰했어요.

미스터리 디자인의 진실

대부분의 사용자들은 버튼의 모양과 상관 없이 질문에 따라 답을 선택했어요 (15명 중 13명) 유형 1에서는 하나를, 유형 2에서는 여러 개를, 그리고 유형 3에서는 선택하고 싶은 만큼 선택한 건데요.

그렇게 선택한 이유가 무엇인지 물었을 때, 질문 자체에 집중해서 대답했어요. “나는 올빼미형 인간이다”, ‘”최근 1년간 영화, 드라마, 예능을 모두 봤다” 이렇게요. 유형 2나 3에서 ‘여러 개를 선택해도 되는지’ 묻는 분들이 계셨지만, 이들 또한 “질문에서 ‘중복 선택’이라는 말이 없어 헷갈린다”고 말했어요. 버튼의 모양을 언급하며 질문해도, 이 모양으로 인해 헷갈렸다고 말한 경우는 거의 없었어요.

물론, 모든 사용자가 라디오 버튼의 역할을 모른다는 것은 아니에요. 인터뷰의 의도를 설명하고 버튼의 모양에 대해 물었을 때, ‘설문 조사, 시험’ 등에서 본 것 같다고 답한 분들도 계셨어요. 그럼에도 불구하고, 유형 1에서는 하나를, 유형 2에서는 여러 개를 선택했고 어색하게 느끼지 않았다고 했어요.

결론: 동그란 라디오 버튼을 쓰지 않는다고 해서, 사용자의 선택에 문제가 되지 않아요.

사용자는 버튼의 모양이 아닌 맥락에 더 큰 영향을 받기 때문이에요.

위 예시에서는 단 하나의 질문이 전체 맥락이 되지만, 실제 제품 내에서는 이전 화면, 라이팅, 설명글 등 훨씬 다양한 것이 사용자의 맥락이 될 수 있어요. 중요한 것은 사용자가 선택해야 할 개수를 자연스럽게 이해할 수 있도록, 최선의 UI로 친절한 맥락을 제공하는 것이에요. 실제로 토스 앱 내 화면으로 UT를 진행했을 때, 사용자는 더욱 명확하게 선택했어요. 버튼의 모양과 상관 없이 하나를 묻는 질문에서 하나를, 여러 개를 묻는 질문에서 여러 개를 선택했죠.

모바일에서도 반드시 동그란 라디오 버튼을 써야한다고 생각했다면, 오래된 공식에 따르고 싶었던 디자이너의 관성일 수 있어요. 중요한 것은, ‘반드시 그래야 하는 것’은 사실 그렇지 않을 수 있다는 거예요.

여러분은 어떻게 생각하시나요? 댓글로 의견을 남겨주세요.