"지금은 인만추의 시대야"
틴더에 숨어있는 UX 심리학
UX 심리학으로 분석해본 틴더(Tinder) #코드스테이츠 PMB 8기
여러분은 자만추, 인만추를 아십니까! ㅋㅋ 한때 인터넷을 휩쓸었던 이 두 단어. 인만추가 뭔지 아냐는 친구의 질문에 나는 "인터넷 만남 추구?"라고 답했더랬다. (PC통신 연애 같은 건가 생각했다..ㅋㅋ 쏘 올드...) 자만추는 자연스러운 만남 추구, 인만추는 인위적인 만남 추구의 줄임말이다.
어느 겨울, 나는 나이를 먹을수록 자만추만으론 연애 시작조차 어렵겠다- 깨달음을 얻었다. 하지만 인만추의 길은 험했다. 소개팅을 여러 번 받아 봤지만, 내가 생각하는 '이런 스타일'은 주선자의 눈이라는 필터를 거치며 '저런 스타일'로 바뀌곤 했다. 안 되겠다! 내가 나의 주선자가 되야겠다, '주체적인 인만추'를 하겠노라 결심하고 그렇게 나는 틴더를 처음 만났다. 이렇게 구구절절 인만추에 대한 이야기를 풀어내는 이유는, 내가 Smart 인만추 선봉장 틴더로 3년째 연애 중이기 때문이다 (ㅋㅋㅋ) 나에게 의미 있는 서비스다 보니, PM으로 직무전환 과정에서 한 번쯤은 분석해보고 싶다는 생각이 있었다.
그리고 3년 전의 틴더와 지금의 틴더는 어떻게 바뀌었을지 궁금함도 있었다. 당시엔 지금보다 소개팅 어플이 더 음지?에서 사용되는 느낌이 강했고, K-유교걸 유교보이들이 공개적으로 사용하기엔 허들이 많았다. 예를 들면 당시에 아만다는 연락처에 있는 사람 차단하는 기능이 있었지만 틴더에는 없었다. 물론 그때와 비교해 지금은 인식이 많이 바뀐 거 같지만, 당시에는 공공연하게 틴더를 써봤다는 얘기는 주변에서 조심스러워했던 거 같다. 친구 중 하나는 "틴더로 만났어!"라는 말에 "이거 ~한테는 일단 비밀로 할게"(?!)라는 반응을 보여주기도 했다 (귀여워...)
틴더, 한국에서 이런 K-심리적 허들을 극복하겠다고 이런저런 많은 노력을 했던 거 같다. 동네친구 캠페인도 그렇고, 구글 미국, 한국 검색만 봐도 미국에 비해 'Dating'과 관련된 단어가 강조되지 않은 것을 볼 수 있다. 최대한 코리안에게 캐주얼하게 다가가려는 틴더의 노력... 8ㅅ8 마케팅적인 부분 외에도, 서비스도 3년 전에 비해 한국인에게 신뢰를 줄 수 있는 부분들이 많이 늘어났다. 그래서 오늘은 UX 심리학을 접목해 틴더에 대해 분석해보고, K-허들을 극복하기 위한 틴더의 노력들도 찾아보자 : >
한 번에 한 명, 오른쪽 아니면 왼쪽으로 feat. 힉의 법칙
<힉의 법칙>
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다. 따라서 사용자 작업 완료 시간은 주어진 옵션의 개수가 많아질수록 증가한다. 이 옵션의 수를 줄일수록 기억하기 쉽고, 작업 완료 시간이 줄어든다.
e.g. 회원가입 단계를 여러 단계-화면으로 쪼개, 각 단계의 기입 사항을 줄이는 것
첫 시작의 유일한 옵션은 only 스와이프
틴더는 가입 이후에 바로 매칭 화면이 메인으로 노출된다. 가입 즉시 나는 화면에 보이는 이 사람을 오른쪽으로 넘겨 like할 것인지, 아니면 왼쪽으로 넘겨 dislike할 것인지 결정하도록 설계되어있다. '매칭'이라는 옵션 하나가 주어진 것이다.
바로 매칭으로 연결되는 메인 화면매칭 화면 안에서도 나에게 주어진 옵션은 단 '한 사람' 뿐이다. 단 '한 사람'의 프로필 이미지가 화면을 꽉 채운다. 여러 사람의 프로필을 한 화면에 띄우고, 탐색하다 선택하는 것이 아니다. 주어진 단 한 명의 옵션에 대해서 오른쪽으로 또는 왼쪽으로 넘기면 된다.
화면 전체를 채우는 매칭 성공 팝업 (하단만 잘랐다)심지어, 서로 Like를 눌러 매칭이 되면 매칭 성공 팝업이 화면 전체를 채워버린다. 팝업 안에서 바로 메시지를 보낼 수 있게 해 놓았는데, 매칭이 되었으면 > 대화를 나눠라 - 라는 단 하나의 옵션을 줘버린 셈이다.
상대평가가 아닌 절대평가
힉의 법칙이 적용된 틴더, 정말로 '매칭'에만 집중할 수 있도록 UI를 설계했다는 생각이 든다. 일단 단 하나의 선택지에 대해 쉽고/빠르고/하나의 선택만 하면 되니, 절대적으로 매칭 되는 양이 많아질 수밖에 없다. 각각의 매력을 평가하는 절대평가 매칭이라고 할 수 있을 것 같다 ㅋㅋ
만약 홈화면에 여러 명의 사용자 프로필을 노출시켰다면? 상대평가에서 A+를 몇 명만 받을 수 있는 것처럼 몇 명만 '선택'을 받을 수 있을 것이다. 사용자가 한 번 고민할 때마다 여러 명의 탈락자가 발생하게 될 것이다. 유저들이 많이 모여, 많이 매칭 되어야 활성화되는 플랫폼이니 만큼, 탈락자가 많아지는 건 부정적인 영향을 줄 것이다.
틴더만의 Swipe 사용법 feat. 제이콥의 법칙
<제이콥의 법칙>
사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
e.g. 사용자들은 X버튼을 누르면 화면이 꺼지고, 보통 모바일 화면의 왼쪽 가장자리를 스와이프를 하면 뒤로 갈 수 있을 거라 기대한다.
위와 같은 화면을 마주했을 때, 당신은 어떻게 반응하십니까? 우리는 보통 '여러 개의 이미지'가 있는 상황에서 옆으로 스와이프한다. 인스타그램, 카카오톡, 커머스 앱의 후기 이미지까지 우리는 이런 UI에 정말 익숙해져 있다. 그리고 틴더의 UI를 보자.
틴더의 프로필 카드에서 여러 장의 이미지가 포함되어 있으면 상단에 가이드가 뜬다. 하지만 Swipe 동작을 매칭에 이미 사용한 틴더는 제이콥의 법칙에서 조금 벗어난 것 같다.
더해진 불편한만큼, 가이드라인으로 돕기
제이콥의 법칙에서 살짝 벗어난 상태에서, 이미지 여러 장을 넘기려면 어떻게 해야 할까? 다음 이미지로 넘어가는 동작을 위해 틴더는 Touch를 사용했다. 하지만 터치는 짧게 일어나는 동작이기도 하고, 잘못 누르는 경우도 종종 생긴다. 그래서 이미 스와이프=사진넘기기에 익숙해진 사용자들을 위해 추가 가이드라인을 노출시켰다. 개인적으로 여전히 마냥 편한 UI는 아니지만, 틴더 사용에 익숙해진다면 사용성에 큰 불편함을 느낄 정도는 아닐 것 같다. 즉, 제이콥의 법칙에서 살짝 벗어나긴 했지만, 다른 추가적인 가이드라인을 주어 그 불편함을 최대한 상쇄시키려고 노력한 것이다.
뺄 수 없었던 최소한의 것 feat. 테슬러의 법칙
<테슬러의 법칙>
복잡성 보존의 법칙이라고 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
이 법칙의 핵심은 인터페이스의 복잡성을 줄이고자 무턱대고 시작 정보를 줄여버리면, 단서 부족으로 사용자가 프로세스를 정상적으로 진행할 수 없게 된다는 것이다. 스와이프 = 매칭 동작이 사용자들에게 익숙해졌을 지라도, 지금 하는 이 동작이 어떤 것을 수행하는지 최소한의 정보를 줘야 한다. 틴더는 프로필 카드에 워터마크 문구를 표시하고, 하단 버튼 색깔을 변경시켜 좌/우 동작의 의미를 전달하고 있다.
앗, 실수! 너그럽게 알려주기 feat. 포스텔의 법칙
<포스텔의 법칙>
자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게. 유저는 우리가 의도한 대로만 사용하지 않는다. 어떤 동작, 입력 시에도 공감하는 태도로 유연하고 관대하게 대처하라. 인터페이스의 안정성과 접근성을 보장하되, 입력/접근성/성능면에서 만반의 준비를 해야 한다.
e.g. SAVE 없이 X눌렀을 때 "정말로 떠나시겠습니까?" 묻는 팝업
리서치 중이었지만 주변인이 남자칭구가 있는 나를 발견하면 뭔가 뻘쭘(^^)하고 오해를 살까 봐 약간 걱정이 되던 중 '연락처 차단' 기능을 발견했다. 활성화하는 순간 연락처 접근 허용 알림이 나타났다. 처음 설치할 때 연락처 접근 허용을 꺼놓은 거였다. 그리고 설정 업데이트 버튼을 누르자마자 바로 아이폰 셋팅앱, 게다가 틴더 설정을 바로 변경할 수 있는 화면이 실행되었다!
바로 접근 권한 수정이 가능하도록 연결시켜주는 팝업여러 앱에서 카메라 허용, 위치정보 접근을 요구하는 비슷한 팝업을 만나게 되는데, 가끔 섬세하지 못한 알림을 만나는 경우가 종종 있었다. 접근을 허용해달라고 알림만 주고, 내가 직접 Setting앱으로 들어가서 > 아래로 쭈우우욱 내린 다음 > 해당 앱 > 접근 허용을 켜줘야 했기 때문이다. 몇 번 경험해본 뒤에는, 이런 팝업이 뜨면 그냥 서비스 사용을 관둬버리는 경우도 종종 있었다. 앗, 실수는 내가 했는데 이런 귀찮음을 피하게 해 준 틴더, 포스텔의 법칙이 적용된 참 세심한 사례라고 생각한다 <3
A/S는 못해줘도 사용설명서는 충분히 feat. 피크엔드의 법칙
<피크엔드의 법칙>
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
e.g. 일 년 간 잘 다녔던 회사에서 동료와의 갈등으로 퇴사 > 회사에서의 경험 전체가 불쾌한 경험으로 기억되게 된다.
틴더는 사람의 관계를 이어주는 어플이다. 앱에 대한 기억, 인상, 경험을 결정짓는 마지막 경험은 보통 앱 바깥에서 일어나게 된다. 매칭 이후의 경험으로 틴더 전체에 대한 인상이 나빠지는 경우도 정말 다양할 것이다. '알고 보니' 이상한 사람, 사기꾼, 생각했던 이상형과 달랐다던가. 신원이 확실하지 않은 인터넷상 만남이다 보니 여기에 적은 이상으로 위험하고 이상한 사례가 있을 수도 있겠다. 그렇기 때문에 틴더가 앱 개선만으로 컨트롤할 수 있는 '유저의 마지막 경험'의 폭은 한계가 있다. 그래서 틴더는 불상사를 '미리' 막아보고자 다양한 장치들을 설계해놓았다.
앱 첫 다운로드 시 가이드 노출 / 커뮤니티 가이드라인 제공 / 프로필마다 신고버튼 노출처음 앱을 사용하는 사람에게 가이드라인을 보여주고, 프로필마다 신고 버튼을 노출시켜 이상한 사람을 만나면 쉽게, 바로 신고할 수 있도록 했다.
사칭 문제를 해결하는 '얼굴 인증'
그리고 흥미로운 기능을 발견했는데, '본인 인증' 기능이다. 내 신원 자체를 인증하는 것은 아니고 '얼굴 인증'을 하는 기능이다. 생체 인식 기능?을 사용해서 올려둔 셀카가 본인인 것을 인증할 수 있다. 한참 인스타 셀럽들 사진으로 소개팅 어플에서 사칭하는 게 문제였는데, UI 이런 문제를 해결할 수 있다는 점이 인상 깊었다 : >
그 외에도 더 나은 매칭 경험을 위해 취향과 감성을 프로필에 드러내도록 해쉬태그를 지원하기도 한다. 백신 접종 상태에 따라 프로필에 인증 스티커를 붙일 수도 있는데 귀엽고 영리한 방법이라고 생각했다.
강조하고 싶은 건 금칠하기 feat. 본 레스토프 효과
<본 레스토프 효과>
비슷한 사물이 여러 개 있으면 그중에서 가장 차이나는, 차별화된 한 가지만 기억할 가능성이 크다.
사용자의 주의를 끌어야 하는 디자인 요소에 적용된 예시
e.g. 알림이 오면 앱에 빨간 배지 표시 / 인스타그램 스토리 올린 사용자의 프로필에 무지개 띠
내 프로필을 더 노출하고 싶거나, 나이를 숨기고 싶거나, 또는 이미 넘겨버린 프로필을 like했어야 했는데!!하는 아쉬움이 있다면 Tinder Plus를 구독할 수 있다. 그리고 틴더 플러스를 사용해야만 얻을 수 있는 혜택에는 '금칠'을 해두었다. 그라데이션까지 사용해서 금칠을 해두어서, 확실하게 눈에도 띄고 구분도 된다 ㅎㅎ.
첫 번째 이미지를 보면, 틴더 플러스 구독으로만 이용 가능한 기능들이 +금빛+으로 빛나고 있다. 하단 내비게이션에도 구독으로 만날 수 있는 새로운 남자가 99명 이상이라는 것을 ㅋㅋ 나에게 어필하고 있다.
'강조하고 싶은 것은 남다르게' 본 레스토프 효과를 적용한 또 다른 예시는 구독 상품 판매 팝업이다. 판매 중인 상품의 스킴이 3개씩 정렬되어 있는데, 그중 하나의 구독 상품에만 컬러와 스트로크로 강조 처리를 해두었다. Lock-in 시키기에 1개월은 짧고, 12개월은 사용자들이 구매하기 부담스러울 거 같은데.. 이런 점들을 고려하면서, 계산기도 두드려보고 강조 효과를 준 것이 아닐까 ㅎㅎ
기다려주세요, 레이더 가동 중입니다! feat. 도허티 임계
<도허티 임계>
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아진다. 이 속도보다 느려질 경우, 사용자에게 진행과정을 알려주어 여유를 가지게 하는 등의 설계가 필요하다.
e.g. 콘텐츠 로딩 시 빈 화면 대신 Skeleton UI를 보여주기 / 로딩바로 진행과정 %로 알려주기
콘텐츠 로딩 속도가 도허티 임계 밑으로 떨어지는 경우, 대부분의 앱들은 스켈레톤 UI를 노출시켜 이탈률을 감소시킨다. 틴더도 콘텐츠 노출 영역인 디스커버리 탭에서 스켈레톤 UI를 적용시켜 로딩이 진행 중이라는 의미를 전달한다.
틴더 Skeleton UI / 매칭 프로필 카드 로딩 중 화면Skeleton UI 외에도 귀여운 UX 하나가 더 있었다. 메인 화면에서 프로필 카드의 로딩이 길어지면 저렇게 핑크색 원이 커지는 모션을 보여준다. 나는 이 모션이 '카드를 불러온다'가 아니라 '상대를 탐색해 찾아온다'는 느낌을 주는 게 너무 귀여웠다. 틴더가 위치/거리 기반의 매칭 방식을 쓰고 있다 보니, 내가 있는 위치에서 레이더를 켜고 주변인을 찾아오는 느낌이었다ㅎㅎ 도허티 임계가 적용된 귀여운 사례 : >
님아 그 프로필 오른쪽으로 옮겨주오 feat. 피츠의 법칙
<피츠의 법칙>
대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다. 사용성에 불편을 느끼지 않도록, 버튼의 최소 크기/간격을 고려해 정확한 클릭을 유도해야 한다.
중요한 CTA일수록, 사용자의 손과 가깝고 커져야 한다. 유사하게 사용되는 기능/대상은 함께 배치하면 커서 이동이 줄어든다.
틴더에 포함된 아이콘, CTA 등은 클릭이 용이하도록 적당한 크기로 배열되어있다. 따로 불편한 점을 못 찾던 찰나, 프로필의 위치를 보게 되었다.
틴더 UI 상단 캡처틴더의 프로필은 왼쪽 상단에 있다. 왜? 잘 이해가 가지 않았다. 아이폰 12 미니 기준, 아래로 화면을 당겨보아도 오른쪽 엄지 클릭이 매우 어려웠다. 그리고 최근 틴더는 프로필 기능을 강화하고 있다. 영상도 넣을 수 있고, 스포티파이와 연동하면 좋아하는 노래를 등록할 수 있다. 인스타그램 연동으로 찍은 사진 몇 가지를 보여줄 수도 있다. 그런데 왜 왼쪽 상단에 프로필을 위치시켰을까? 궁금해하며 글을 작성하던 중, 갑자기 내비게이션 탭으로 프로필 위치가 이동했다!!!
그리고 한 시간 뒤 또다시 프로필 위치가 왼쪽 상단으로 이동했다. 나는 지금 틴더 A/B 테스트의 대상자가 된 것일까!!! 서비스 개선을 위한 테스트를 체험당하니? 신기한 기분이 들었다. 이후 정식 업데이트에 또 어떤 변화가 생길지 지켜봐야겠다 이후에 후기 글을 써봐야지 *ㅅ*
좋아 보여 잘 지내나 봐 : >
이태원역을 지나다 발견한 틴더 옥외 포스터좋아 보여~ 잘 지내나 봐~~~~~ 헤어스타일도 바뀌었네 역시 태가나~~~ 3년 만에 만난 틴더의 얼굴은 꽤나 많이, 그리고 좋은 방향으로 바뀌어 있었다. 좀 더 편한 마음으로, 걱정을 덜고 사용할 수 있는 모습으로 바뀌어 가고 있는 틴더의 모습이 나는 정말 반갑다 : >
앱 개선이 글로벌 차원에서 이뤄지는 건지, 아니면 현지화 전략이 함께 가는 건지는 찾아보지 않았지만 나는 K-허들을 조금씩 낮춰가는 틴더의 캐주얼한 마케팅 캠페인, 서비스 개선 앞으로도 기대가 된다. 앞으로도 좋은 관계를 만들고 싶어 하는 모든 사람들이 맘 편히 안전히 쓸 수 있는 즐거운 어플이 되었으면 ㅎㅅㅎ
안전하고 행복하게 틴더하세요 : >
갑자기 읽어주시는 분들이 늘어 통계를 살펴보니 서핏에 글이 소개되었네요!! *ㅅ*
앞으로도 꾸준히 재밌게 글 써보려고 하니 편하게 댓글 & 방문해주세요 읽어주신분들 감사해요 <3
