-
디지털 마케팅
- “라디오버튼이 필요 없다고?” 토스 아티클에 UI·UX 실무자들이 뿔난 이유
- 토스
- 라디오버튼
- 토스아티클
- UIUX
- 사용성테스트
- 토스테크
- MNK
- 02-10
- 115
“세 가지 유형의 질문을 준비해 사용성 테스트를 진행했으나 결과 수치가 어떻게 나왔길래 이런 결론에 도달했는지 알 수 없는 글입니다. (중략)충분한 근거 없이 단순히 소비자의 시각에서 작성된 것 같은 느낌이네요.”
-토스 아티클에 달린 댓글 중
얼마 전 토스 기술 블로그(토스 테크)에 올라온 한 아티클이 UI·UX 실무자들 사이에서 이슈였습니다. 지난달 20일 발행된 ‘[미디클] 라디오 vs 체크박스 뭐가 좋을까?’가 그 주인공인데요. 제목에서 짐작할 수 있듯, 두 옵션 선택 디자인 가운데 사용자에게 더 적절한 것을 실험을 통해 살펴본 내용입니다.
해당 아티클이 발행되자마자 순식간에 댓글 수십 개(현재 기준 95개)가 달렸고요. 그중 상당수가 본문 내용을 비판하고 있습니다. 공감하기 어렵다는 반응이 대부분이며, 번호를 매겨 조목조목 반박한 댓글도 어렵지 않게 찾아볼 수 있죠. 토스 테크는 평소에도 아티클마다 댓글이 10~20개씩 달릴 만큼 의견 공유가 활발한 편이지만요. 이 정도의 ‘후폭풍’은 이례적입니다.
UI·UX 디자이너, 개발자, 기획자들은 대체 왜 토스 테크 아티클에 불만을 쏟아낸 걸까요? 결론부터 말하면 “주장에 비해 근거가 부실했기 때문”인데요. 댓글을 하나하나 살펴보고, 현직 UI·UX 실무자들의 의견을 더해 자세한 내용을 정리했습니다.
주장 자체는 틀리지 않았지만…
이번 아티클은 토스 테크 시리즈 ‘미스터리디자인클럽(미디클)’의 첫 콘텐츠입니다. 토스 테크에 따르면, 미디클은 기존 디자인 요소를 새롭게 검증하는 시리즈로, “관성처럼 굳어진 UX 패턴의 진실을 파헤치며 더 나은 사용자 경험을 찾아간다”는 취지로 시작됐습니다. 요컨대 ‘단순하고 사용하기 쉬운 서비스’로 대변되는 토스의 UX 철학을 그대로 반영한 시리즈인데요.

이번 아티클은 “하나만 선택해야 하는 상황에서 꼭 라디오버튼을 고집해야 할까?”라는 문제를 제기하며, 대표 옵션 선택 UI 컴포넌트인 ‘라디오버튼’과 ‘체크박스’를 비교합니다. 전체 내용을 요약하면 다음과 같습니다.
웹 및 앱 개발자나 디자이너들은 전통적으로 하나의 선택지만 허용하는 경우 라디오버튼을, 다중 선택이 가능한 경우 체크박스를 사용해왔습니다. 이에 토스는 “손가락 끝으로 탭하는 모바일 환경에서는 작은 원형의 라디오버튼이 터치하기 어려워 사용자 경험에 부정적인 영향을 줄 수 있다”는 가설을 세우고 이를 확인하기 위해 사용성 테스트(Usability Test, UT)를 진행합니다. 그 결과 사용자는 버튼의 모양보다는 질문의 맥락에 따라 행동한다는 사실을 발견했고, 이를 근거로 “모바일 환경에서는 반드시 원형의 라디오버튼을 사용할 필요가 없으며, 사용자에게 명확한 맥락을 제공하는 것이 중요하다”는 결론을 내립니다.
*사용성 테스트(UT)란?UI·UX 컨설팅조직 닐슨노먼그룹에 따르면, 사용성 테스트는 대표적인 사용자 그룹을 대상으로 디자인이 얼마나 사용하기 쉬운지 테스트하는 방법으로, 사용자가 작업을 수행하는 과정을 관찰함으로써 디자인의 문제점을 발견하는 것을 목표로 한다.

이는 충분히 일리 있는 이야기입니다. 실제로도 다양한 모바일 환경에서 전통적인 라디오버튼의 대안이 널리 활용되고 있는데요. 대표적으로 애플 iOS에는 동그란 형태의 라디오버튼이 없습니다. 대신 자체 개발한 세그먼티드 컨트롤(Segmented Controls)이라는 컴포넌트나 피커뷰(Picker View), 체크 마크(Check Mark)가 적용됩니다. 이를 통해 탭 가능한 영역을 확대하면서도 미니멀한 스타일을 유지하는 등 사용자 경험과 애플 디자인 철학을 모두 충족할 수 있었죠.

국내 앱들도 비슷합니다. 토스의 경우 상품 주문 시 배송지를 선택하는 화면에서 체크 표시 디자인을 적용합니다. 아티클에서 제기했던 문제를 해결하기 위해 전통적인 라디오버튼을 사용하지 않은 모습이죠.
대표 배달 플랫폼인 배달의민족은 복수의 컴포넌트를 활용합니다. 결제수단 선택 시 ‘배민페이머니’ ‘신용/체크카드’ 등 1차 수단 선택 상황에는 전통적인 형태의 라디오버튼이 적용되지만요. 2차 선택 상황(기타 결제수단)에서는 탭 영역의 테두리 변화로 선택 여부를 표현합니다. 둘 모두 하나만 선택해야 하는 상황이지만, 사용자 경험과 디자인적 측면을 고려해 서로 다른 외형을 적용한 것이죠.
이처럼 최근 모바일 환경에서는 상황에 따라 다양한 형태의 버튼 디자인이 활용되고 있습니다. 이들 모두 기능적으로는 라디오버튼과 동일하니, 이를 테면 ‘라디오버튼의 얼굴이 바뀌고 있다’고 봐도 무방할 텐데요. 이런 측면에서 “동그란 라디오 버튼이 항상 최적이 아닐 수 있다”는 토스 아티클의 주장은 문제될 게 없어 보입니다.
하지만 독자들이 반발한 까닭은 따로 있습니다. 원문에서 보여준 토스의 주장이 꽤나 단정적인 데다, 결론을 도출하는 과정에서 몇 가지 논리적인 비약이 발견됐기 때문입니다.
특별한 결론에는 특별한 근거가 필요하다
사실 이번 토스 아티클에는 앞서 말한 내용 외에도 몇 가지 주장이 더 존재합니다. 구체적으로, 1. 동그란 라디오버튼은 모바일에서 최적의 형태가 아니다 2. 응답지를 선택할 때 버튼 모양보다 상황의 맥락이 더 중요하다 3. 동그란 라디오버튼을 고집하는 사람들은 오래된 관성에 따를 뿐이다입니다.
근거로는 직접 진행한 실험 결과가 제시됐는데요. 바로 여기가 실무자들이 반발하는 지점입니다. 앞서 말한 세 가지 주장을 뒷받침하기엔 해당 실험의 설계와 범위가 부족해 글의 설득력이 떨어진다는 이야기입니다.

이를 이해하기 위해선 먼저 아티클에서 진행된 사용성 테스트를 살펴봐야 합니다. 토스 테크는 사용자에게 위 이미지와 같이 세 가지 유형의 질문을 던진 뒤, 선택 버튼을 뒤섞는 실험을 진행했습니다. 예컨대, 답변을 하나만 선택해야 하는 유형1에서는 라디오버튼 대신 체크박스를, 답변을 한 개 이상 선택할 법한 유형2에서는 반대로 라디오버튼을 적용했습니다. 답변 개수가 애매한 유형3에서는 체크박스를 적용했죠. 그 결과 대부분의 사용자(15명 중 13명)가 버튼의 모양과 상관 없이 질문에 따라 답을 선택한 것으로 나타났습니다.
이에 아티클은 “사용자는 버튼의 모양과 상관 없이 하나를 묻는 질문에서 하나를, 여러 개를 묻는 질문에서 여러 개를 선택했다”며 ”동그란 라디오버튼을 쓰지 않는다고 해서, 사용자의 선택에 문제가 되지 않는다. 사용자는 버튼의 모양이 아닌 맥락에 더 큰 영향을 받기 때문이다. 반드시 동그란 라디오 버튼을 써야 한다고 생각했다면, 오래된 공식에 따르고 싶었던 디자이너의 관성일 수 있다”고 결론 내립니다.
그런데 말이죠. 실무자들의 생각은 조금 다릅니다. 해당 실험을 통해 도출할 수 있는 결론은 ‘동그란 라디오버튼은 모바일에서 최적의 형태가 아니다’는 점뿐이며, 그 이상의 주장을 이끌어내긴 어렵다는 것이죠.
가장 큰 이유로는 불분명한 변수와 비교군이 꼽힙니다. 테스트 전반에서 변수가 통제되지 않았고 명확한 비교 대상이 없어 결과가 정확히 어떤 요인으로부터 비롯되었는지 판단하기 쉽지 않다는 말인데요. 관련해 한 UI·UX 디자이너는 다음과 같이 설명합니다.
“이번 테스트를 통해 토스는 ‘버튼 모양’과 ‘맥락’의 상대적인 기여도를 살펴보고자 한 것 같아요. 따라서 이 두 가지 요소가 변수가 되어야 하는데, 실험에서는 이 두 요인이 충분히 통제되지 않았어요. 버튼 모양과 질문의 맥락이 동시에 작용하는 환경에서 실험이 진행됐죠. 게다가 비교군도 명확하지 않아서, 실험 결과가 무엇으로부터 유발되었는지 알기가 어려운 상황이에요.따라서 이번 테스트는 ‘특정 상황에서 버튼의 모양이 사용자 선택에 미치는 영향이 미미하다’는 사실을 보여줄 순 있어도, ‘맥락이 버튼 모양보다 중요하다’는 결론을 이끌어내기엔 부족합니다.”
또 다른 프로덕트 디자이너는 다음과 같은 이야기를 덧붙였습니다. “질문 맥락의 중요성을 파악하고 싶었다면, 버튼 UI를 통제한 상황에서 실험군을 두 그룹으로 나눈 뒤 한 쪽에는 맥락이 분명한 질문을, 다른 쪽에는 맥락이 모호한 질문을 던져 반응을 살폈다면 더 설득력 있는 결과가 나왔을 것 같습니다.”
평가 내용에 대한 아쉬움도 제기됩니다. 한 독자는 댓글에서 “사용자가 버튼 UI의 어색함이나 이상함을 견뎌내고 정보를 알맞게 입력했을 가능성을 고려해야 한다”며 정량적, 정성적인 평가가 추가되어야 글의 주장이 성립할 것이라고 했습니다. 이를 테면 사용자의 버튼 선택 시간이나 잘못 선택한 비율 같은 것들 말이죠.

표본 크기도 의문을 자아냅니다. 닐슨노먼그룹에 따르면 사용성 테스트에 필요한 최소 인원은 5명입니다. 토스는 총 15명을 대상으로 사용성 테스트를 진행했지만요. 과연 기존 디자인 관례를 부정하는 결론을 도출하기에 충분했는지에 대해선 의문이 든다는 게 전문가들의 목소리입니다. 관련해 작가 겸 15년차 UX 리서처이자 UX 전문 뉴스레터를 운영 중인 레드버스백맨님의 설명을 들어보시죠.
“닐슨의 ‘5명 규칙’에 따르면, 15명의 참가자는 주요 사용성 문제를 발견하기에 충분한 규모로 보입니다. 현업에서는 5명만 대상으로 UT를 해도 충분하다는 인식이 있죠. 사실은 시간 제약 때문에 그렇게 하는 경우가 많습니다. 정확하게 말하면 5명을 대상으로 한 UT는 3분의 1 확률로 나타날 수 있는 사용성 문제의 85%를 검증할 수 있습니다. 10분의 1 확률로 나타나는 사용성 문제의 85%를 검증하려면 18명을 대상으로 사용성 테스트를 해야 합니다.토스 아티클의 이번 실험은 기존의 디자인 관례를 부정하는 결론을 도출했습니다. 더 신중한 접근이 필요했다고 봐요. 정량적 측면에서 살펴보면 이번 실험은 Adjust Wald 신뢰구간(95% 기준, 약 61~98%)을 고려할 때 최대 39% 사용자 그룹의 잠재적 문제가 간과될 수도 있습니다.”
이처럼 이번 사용성 테스트는 변수, 비교군, 표본 크기에서 아쉬움을 지니고요. 따라서 ‘맥락이 버튼 모양보다 더 중요하다’는 주장을 검증하기에는 적절하지 못했다는 게 독자들의 주된 평가입니다. 이런 상황에서 동그란 라디오버튼을 사용하는 디자이너들을 ‘관성에 휩쓸린 사람’으로 치부해버리니 날 선 반응이 이어졌던 것이죠.
사용자는 토스만 쓰지 않는다
실무자들이 단순히 테스트 설계의 허점 때문에 이토록 분노한 건 아닙니다. 국내 UI·UX 산업의 최전선에 있는 토스의 영향력을 고려할 때, 이번 글의 결론이 자칫 “맥락만 통하면 버튼 모양은 뭐가 됐든 상관없다”는 뜻으로 와전될 수 있고, 이런 인식이 업계 전반에 퍼진다면 사용자의 일관된 경험을 해치는 리스크로 작용할 수 있기 때문입니다.
만약 누군가가 라디오버튼과 체크박스를 아무렇게나 혼용해 사용한다면, 두 버튼의 용도를 알고 있던 사용자는 오류가 발생했다며 혼란스러워하지 않을까요? 이처럼 이미 학습된 행동 양식을 변경하는 건 특별히 신중함을 요구하며, 신뢰도가 핵심인 금융 서비스에선 이 점이 특히 더 중요하다는 게 UI·UX 업계의 의견입니다. 한 독자는 댓글을 통해 이렇게 말했는데요.
“토스 같은 대형 플랫폼에서 UI의 보수적인 관성을 탈피한다는 이유로 통용되던 기존의 약속을 깨버리면요. 사용자들은 토스 서비스 안에서는 편리하다고 느낄지 모르나, 다른 앱을 사용할 때 혼란을 겪습니다. ‘토스에선 A가 B로 작동하는데, 다른 곳들은 왜 A로만 작동하지?’라고요.이를 감당해야 하는 건 다른 기획자, 디자이너, 개발자 등 현업 실무자들입니다. 글이 수정되기 전에는 더욱 급진적인 표현이 많았습니다. 자유로운 의견이라고 치부하기엔 토스는 영향력이 강하고 넓게 작용하는 플랫폼이라는 사실을 기억해야 하지 않을까요.”
결국 과감한 주장에는 그에 맞는 근거가 필요하다는 게 독자들이 반발한 가장 큰 이유인 셈입니다. 그럼 실험이 어떻게 진행됐어야 독자들을 충분히 설득할 수 있었을까요? 이를 묻는 질문에 레드버스백맨님은 다음과 같은 이야기를 전했습니다.
“보다 견고한 실험을 위해서는 설계 단계에서 몇 가지 요소를 고려했으면 좋았을 겁니다. 첫째, 다양한 디바이스 환경에서 검증이 필요합니다. 각 환경별 해상도와 터치 인터랙션의 차이를 고려한 태스크 시나리오 설계가 있어야죠. 둘째, 참가자 선정 시 라디오 버튼과 체크박스 등 관습적 디자인에 대한 사전 이해도를 기준으로 그룹을 세분화하여, 각 그룹별 행동 패턴과 오류율을 비교 분석해야 합니다. 셋째, ‘맥락’을 검증하기 위해서는 구체적인 사용 환경과 함께 모더레이터 스크립트, 태스크 성공 기준, 에러 케이스 정의 등이 포함된 상세한 실험 내용까지 제시되어야 합니다.
즉 사용자 경험에 대한 실험에서 실험의 제한사항을 명확히 인정하고, 특히 관습적 디자인 패턴의 변경을 제안할 때는 더욱 엄격한 검증 과정이 필요합니다. 물론 혁신은 중요하지만, 그것이 기존 사용자 경험의 안정성과 신뢰도를 저해하지 않는다는 것이 다각도의 검증을 통해 입증되어야 한다고 생각해요.”

UI·UX 디자인은 논리적인 작업이다
토스 테크는 많은 실무자들이 즐겨 찾는 기술 블로그입니다. 아티클을 통해 UI·UX에 진심인 토스의 철학과 가치관을 널리 공유하려 애쓰고 있고요. 실무자들도 의견을 활발히 공유하며 국내 UI·UX 업계 발전에 기여하고 있습니다.
이번 아티클도 비록 사용성 테스트 문제로 반발을 사긴 했지만요. 글의 취지, 그러니까 ‘사용자 경험을 위해 관습적인 UI 패턴을 새롭게 바라볼 필요가 있다’는 메시지 자체에 반대하는 독자는 없었습니다. 이런 주제를 던지고 도전적인 시도를 해나가는 토스를 응원하는 목소리도 적지 않았고요.
결국 이번 해프닝이 시사하는 점은, UI·UX 업계가 설득력 있는 사용성 테스트를 무척 중요하게 여긴다는 점입니다. 나아가 UI·UX 디자인의 본질은 단순한 미적 감각이 아니라 철저한 논리와 검증에 있다는 사실을 재확인할 수 있는 기회이기도 했고요.
물론 토스가 이 같은 사실을 모를 리 없을 텐데요. 다만 아티클을 작성하는 과정에서 독자의 이해를 돕기 위해 비교적 간소화된 형태의 사용성 테스트를 소개했고, 메시지를 강조하고자 주장을 다소 단정적으로 표현한 점이 독이 됐던 것으로 짐작됩니다. 토스가 간과한 게 있다면 생각보다 많은 독자가 토스 아티클을 진지하게 읽고 있었다는 점이 아닐까요.
미디클 시리즈는 이번이 첫 번째 순서였는데요. 이를 통해 더욱 양질의 콘텐츠가 발행되는 계기가 되길 기대해봅니다.
제작 장준영
마케팅 어떻게 진행할지 막막하신가요?
핫소스에게 마케팅 SOS 요청해보시기 바랍니다!
핫소스 마케팅 문의
070-7775-9540
작성자 |양유정 (070-7775-9540)
해당 글에 대한 문의 사항은 언제든지 연락주시기 바랍니다.