<div id="readability-page-1" class="page"><div><h2 id="17da360d-33e3-80cc-9c42-d4cca2cc8d1f">타임머신이 있다면 어디로 가보고 싶나요?</h2><figure id="17da360d-33e3-8073-875b-c7ca80c9a11d"><img src="https://static.toss.im/ipd-tcs/toss_core/live/412a8209-8876-4b37-bc6e-9377b090340d/4.png" alt=""></figure>다들 고르셨나요? 오늘 미스터리 디자인 클럽에서는 ‘선택지를 고르는 화면’ 디자인에 대해 이야기해볼게요.*라디오 버튼이란? 옵션을 선택할 때 사용되는 UI 컴포넌트인데요. 라디오의 물리적 버튼에서 따와 만들어진 PC UI 문법으로, 옵션 중 하나를 선택해야 할 때 PC와 모바일 모두에서 많이 이용되고 있어요. <figure id="17da360d-33e3-8081-818f-c810388162cf"><img src="https://static.toss.im/ipd-tcs/toss_core/live/246912df-95f0-4635-866e-68e34ad152a0/5.png" alt=""></figure>A씨를 비롯한 많은 메이커들이 토스의 모바일 디자인 시스템에 라디오 버튼 컴포넌트를 추가하자는 이야기를 꺼내곤 했어요. ‘너무 일반적인 공식이기 때문에’, ‘다른 곳에서 모두 이렇게 하기 때문에’가 그 이유였어요. 그러나, 모바일에서 이 문법을 그대로 따르기엔 적합하지 않은 면이 있어요. 마우스 포인터로 버튼을 편하게 클릭할 수 있는 PC 환경에는 어울리지만, 손가락 끝으로 탭해야 하는 모바일 환경에서는 작은 원을 정확히 눌러야 할 것 같은 형태가 최선이라고 할 수 없어요. 실제로는 레이블을 눌러서 선택할 수 있다고 해도요. 그럼에도, ‘디자인적 증거’를 줘야겠다는 생각에, ‘하나만 선택되는 화면은 당연히 라디오 버튼을 써야하지 않을까?’라고 많은 분들이 생각했던 거에요. 여러분은 앞서 어떤 선택을 하셨나요? 
그리고, 다른 사용자들은 어떻게 선택했을까요? <figure id="17da360d-33e3-8044-b5f0-f7804a9d591e"><img src="https://static.toss.im/ipd-tcs/toss_core/live/dee71be6-dd48-4d36-8171-63e5960dd66f/6.png" alt=""></figure>세 가지 유형의 질문을 준비해 UT를 진행했어요. <ul><li id="17da360d-33e3-80ff-acae-d5be1c8e6d99">유형 1️⃣: 앞서 여러분이 선택한 ‘타임머신’ 질문처럼, 서로 배타적이어서 여러 개를 선택할 수 없는 것이 있어요. </li><li id="17da360d-33e3-80a3-af60-ff4c48d0206f">유형 2️⃣: ‘최근 1년간 감상한 콘텐츠를 선택하라’는 것처럼, 대부분 여러 개를 선택할 만한 질문이 해당돼요. </li><li id="17da360d-33e3-807c-ba24-daed430d2979">유형 3️⃣: 단일 혹은 중복 모두 선택할 수 있는 질문이 해당돼요. </li></ul>질문에서는 ‘모두 선택’, ‘하나만 선택’ 등 선택 개수를 안내하지 않았어요. 또한, 일반적인 공식과는 반대로, ‘하나만 선택’일 땐 체크박스, ‘중복 선택’일 땐 라디오 버튼을 주어 사용자가 어떻게 선택하는지 관찰했어요. <h2 id="17da360d-33e3-8090-8674-d1b903a2a60b">미스터리 디자인의 진실</h2>대부분의 사용자들은 버튼의 모양과 상관 없이 질문에 따라 답을 선택했어요. 버튼의 모양과 상관 없이 유형 1에서는 하나를, 유형 2에서는 여러 개를, 그리고 유형 3에서는 선택하고 싶은 만큼 선택한 건데요. 그렇게 선택한 이유가 무엇인지 물었을 때, 질문 자체에 집중해서 대답했어요. “나는 올빼미형 인간이다”, ‘”최근 1년간 영화, 드라마, 예능을 모두 봤다” 이렇게요. 유형 2나 3에서 ‘여러 개를 선택해도 되는지’ 묻는 분들이 계셨지만, 이들 또한 “질문에서 ‘중복 선택’이라는 말이 없어 헷갈린다”고 말했어요. 버튼의 모양을 언급하며 질문해도, 이 모양으로 인해 헷갈렸다고 말한 경우는 거의 없었어요. <blockquote id="17da360d-33e3-80ef-b269-dd064bcb4c1c">결론: 사용자들은 버튼의 모양으로 구분하는 것이 아니라, 맥락에 따라 선택해요. </blockquote>한 가지를 골라야 할 땐 하나를, 여러 개를 선택해야 할 땐 여러 개를 선택하는 거죠. 위 예시에서는 단 하나의 질문이 전체 맥락이 되지만, 실제 제품 내에서는 이전 화면, 라이팅, 설명글 등 훨씬 다양한 것이 사용자의 맥락이 될 수 있어요. 중요한 것은 사용자가 몇 개를 선택해야 할지 자연스럽게 알 수 있도록 친절한 맥락을 제공하는 것이에요. 실제로 토스 앱 내 화면으로 UT를 진행했을 때, 사용자는 더욱 명확하게 선택했어요. 버튼의 모양과 상관 없이 하나를 묻는 질문에서 하나를, 여러 개를 묻는 질문에서 여러 개를 선택했죠. 따라서, 많은 질문에 대한 답을 선택해야 하고, 질문에 따라 답의 개수가 달라지는 설문조사, 시험과 같이 특수한 경우가 아니라면, 모바일 제품에서 반드시 라디오 버튼을 쓸 필요는 없어요. 반드시 라디오 버튼을 써야한다고 생각했다면, 오래된 공식에 따르고 싶었던 디자이너의 관성일 수 있어요. 중요한 것은, ‘반드시 그래야 하는 것’은 사실 그렇지 않을 수 있다는 거예요. </div></div>

토스테크

미스터리 디자인 클럽은? 
사용자 경험 속 크고 작은 궁금증을 사용자 리서치, 실험 등 다양한 방법으로 탐구하는 모임이에요. '왜 이렇게 디자인해야 할까?'라는 질문을 시작으로, 관성처럼 굳어진 UX 패턴의 진실을 파헤치며 더 나은 사용자 경험을 찾아가고 있어요. 
타임머신이 있다면 어디로 가보고 싶나요?
다들 고르셨나요? 오늘 미스터리 디자인 클럽에서는 ‘선택지를 고르는 화면’ 디자인에 대해 이야기해볼게요.
“화면 디자인을 하다보면 사용자가 선택지를 고르는 화면을 많이 구성하게 되는데요. 때에 따라 단 하나만 선택되거나, 여러 개를 선택할 수 있는 경우가 있어요. 그럴 때, ‘하나만 선택되는 화면은 당연히 *라디오 버튼으로 디자인 해야하지 않나?’라는 생각이 먼저 들어요. 사용자에게 ‘디자인적 증거’를 줘야겠다는 생각이 들기 때문이에요.” - 토스 프로덕트 디자이너 A
*라디오 버튼이란?  옵션을 선택할 때 사용되는 UI 컴포넌트인데요. 라디오의 물리적 버튼에서 따와 만들어진 PC UI 문법으로, 옵션 중 하나를 선택해야 할 때 PC와 모바일 모두에서 많이 이용되고 있어요. 
A씨를 비롯한 많은 메이커들이 토스의 모바일 디자인 시스템에 라디오 버튼 컴포넌트를 추가하자는 이야기를 꺼내곤 했어요. ‘너무 일반적인 공식이기 때문에’, ‘다른 곳에서 모두 이렇게 하기 때문에’가 그 이유였어요. 
그러나, 모바일에서 이 문법을 그대로 따르기엔 적합하지 않은 면이 있어요. 마우스 포인터로 버튼을 편하게 클릭할 수 있는 PC 환경에는 어울리지만, 손가락 끝으로 탭해야 하는 모바일 환경에서는 작은 원을 정확히 눌러야 할 것 같은 형태가 최선이라고 할 수 없어요. 실제로는 레이블을 눌러서 선택할 수 있다고 해도요. 
그럼에도, ‘디자인적 증거’를 줘야겠다는 생각에, ‘하나만 선택되는 화면은 당연히 라디오 버튼을 써야하지 않을까?’라고 많은 분들이 생각했던 거에요. 
여러분은 앞서 어떤 선택을 하셨나요? 
그리고, 다른 사용자들은 어떻게 선택했을까요? 
세 가지 유형의 질문을 준비해 UT를 진행했어요. 
유형 1️⃣: 앞서 여러분이 선택한 ‘타임머신’ 질문처럼, 서로 배타적이어서 여러 개를 선택할 수 없는 것이 있어요. 
유형 2️⃣: ‘최근 1년간 감상한 콘텐츠를 선택하라’는 것처럼, 대부분 여러 개를 선택할 만한 질문이 해당돼요. 
유형 3️⃣: 단일 혹은 중복 모두 선택할 수 있는 질문이 해당돼요. 
질문에서는 ‘모두 선택’, ‘하나만 선택’ 등 선택 개수를 안내하지 않았어요. 또한, 일반적인 공식과는 반대로, ‘하나만 선택’일 땐 체크박스, ‘중복 선택’일 땐 라디오 버튼을 주어 사용자가 어떻게 선택하는지 관찰했어요. 
미스터리 디자인의 진실
대부분의 사용자들은 버튼의 모양과 상관 없이 질문에 따라 답을 선택했어요. 버튼의 모양과 상관 없이 유형 1에서는 하나를, 유형 2에서는 여러 개를, 그리고 유형 3에서는 선택하고 싶은 만큼 선택한 건데요. 
그렇게 선택한 이유가 무엇인지 물었을 때, 질문 자체에 집중해서 대답했어요. “나는 올빼미형 인간이다”, ‘”최근 1년간 영화, 드라마, 예능을 모두 봤다” 이렇게요. 유형 2나 3에서 ‘여러 개를 선택해도 되는지’ 묻는 분들이 계셨지만, 이들 또한 “질문에서 ‘중복 선택’이라는 말이 없어 헷갈린다”고 말했어요. 버튼의 모양을 언급하며 질문해도, 이 모양으로 인해 헷갈렸다고 말한 경우는 거의 없었어요. 
결론: 사용자들은 버튼의 모양으로 구분하는 것이 아니라, 맥락에 따라 선택해요. 
한 가지를 골라야 할 땐 하나를, 여러 개를 선택해야 할 땐 여러 개를 선택하는 거죠. 
위 예시에서는 단 하나의 질문이 전체 맥락이 되지만, 실제 제품 내에서는 이전 화면, 라이팅, 설명글 등 훨씬 다양한 것이 사용자의 맥락이 될 수 있어요. 중요한 것은 사용자가 몇 개를 선택해야 할지 자연스럽게 알 수 있도록 친절한 맥락을 제공하는 것이에요. 실제로 토스 앱 내 화면으로 UT를 진행했을 때, 사용자는 더욱 명확하게 선택했어요. 버튼의 모양과 상관 없이 하나를 묻는 질문에서 하나를, 여러 개를 묻는 질문에서 여러 개를 선택했죠. 
따라서, 많은 질문에 대한 답을 선택해야 하고, 질문에 따라 답의 개수가 달라지는 설문조사, 시험과 같이 특수한 경우가 아니라면, 모바일 제품에서 반드시 라디오 버튼을 쓸 필요는 없어요. 
반드시 라디오 버튼을 써야한다고 생각했다면, 오래된 공식에 따르고 싶었던 디자이너의 관성일 수 있어요. 중요한 것은, ‘반드시 그래야 하는 것’은 사실 그렇지 않을 수 있다는 거예요.

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

댓글