디자이너의 UX참고서, 듀오링고 전격 해부하기

·

공유 사이트 목록
카카오톡

카카오톡

바쁘다 바빠 현대사회! 현대 사회를 살아가는 사회인 중 절반 이상은 바쁜 일상 와중에도 자기 계발을 한다는 통계가 있습니다. 또한 35%는 자기 계발로 어학 공부를 한다고 해요. 필자 또한 그렇습니다.

필자는 일본어를 독학 중이었습니다. 도전만 N 회차죠. 학원 수강을 시작으로, 인터넷 강의도 시도했고 학습지까지 도전했었으나 부끄럽게도 결과라고 할 것이 없었습니다. 일본어를 배우고 싶은 이유는 단순했습니다. 일드와 만화를 즐겨 보았으며 일본 여행도 좋아했기에 유창하게 구사하고 싶었거든요. 세 번째 도전에 좌절하던 찰나, SNS에서 ‘듀오링고’라는 어플에 관한 밈을 우연히 보게 됩니다. 도대체 어떤 어플이길래 사용자들이 밈을 만들고 놀지..? 하는 호기심에 듀오링고를 설치하게 됩니다.

출처 커뮤니티
출처 커뮤니티

듀오링고는 언어를 학습할 수 있는 무료 앱인데요. 각 유닛의 학습량이 쪼개져 있어 핸드폰만 있으면 어디서나 간편하게 잠깐이라도 공부할 수 있다는 장점이 있어요. 물론 장점뿐만 아니라 단점도 있습니다. 한국어로 배울 수 있는 언어는 영어뿐이라 다른 언어를 배우려면 영어를 통해 배워야 한다는 점, 아주 가끔 발음이 부정확하다는 점 등이 있어요. 그런 단점에도, 필자는 약 한 달이 넘도록 매일매일 듀오링고로 학습을 이어가고 있어요. 심지어 유료 플랜까지 결제하였는데요. 가장 큰 이유는 몰입도를 높이는 UI/UX 덕분이었습니다. UI/UX 관점에서 분석하여 어떤 특징이 있는지 알아보도록 할까요?

POINT 1. 장벽을 낮추자!

동글동글하고 귀여운 UI / 게임을 모방한 UI (게이미피케이션)

출처 듀오링고

듀오링고로 배우고 싶은 언어를 선택하면 두 가지의 선택지가 등장합니다. 처음 언어를 배우는 학습자는 첫 번째 선택지를 택하게 되죠. 그 후 어떠한 테스트나 설명도 없이 곧장 오른쪽의 캡처처럼 맨 처음 학습코스로 랜딩됩니다.

사용자는 새로 접하는 언어가 다소 낯설게 느껴지고 긴장된 상태인데요. 화면을 구성하는 요소를 찬찬히 뜯어봅시다. 둥글둥글하고 밝은 톤의 일러스트, 각진 네모 대신 모서리가 둥근 버튼, 세리프체의 부드러운 폰트까지. 각지고 딱딱하며 자잘한 요소는 제거하여 처음 경험하는 사용자의 긴장을 풀어줍니다.

출처 듀오링고 디자인 가이드

실제로 듀오링고의 디자인 가이드에서도 모서리를 둥글게 처리해야 한다는 항목이 있을 만큼 듀오링고는 활기차고 부드러운 이미지의 진심이죠.

출처 듀오링고

맨 왼쪽의 캡처는 언어마다 크게 나누어져 있는 대단원입니다. 클릭하면 구불구불한 지도와 같이, 사용자가 학습해야 하는 소단원들이 등장해요. 여기서 퀴즈! 위의 UI는 어떤 UI를 표방했을까요? 아래 이미지를 보시면 알 수 있답니다.

출처 캔디크러쉬 UI

네. 각 소단원이 나열된 UI는 퍼즐 게임의 맵을 표방했어요. 학습을 게임처럼 느껴지도록 하는 게이미피케이션(Gamification) 매커니즘을 사용한 것이지요. 또한 이는 Laws of UX와 연관 지어 생각해볼 수도 있답니다.

참고!

Laws of UX는 미국의 디자이너인 존 야블론스키가 정의한 UX의 법칙입니다. 그 중 하나인 제이콥의 법칙(Jacob’s Law)은 “사용자는 익숙한 것에 안심하고, 새로운 변화에 불안을 느끼는 심리가 있다. 따라서 자신의 경험을 바탕으로 작동되길 바란다.” 라는 법칙이예요. 제이콥의 법칙에 따라, 듀오링고는 사용자들이 흔히 알고있는 캔디크러쉬 UI를 표방하여 언어 학습이 보다 게임처럼 느껴지길 기대한 것이죠.

POINT 2. 사용자 이탈 방지

지루함을 탈피하는 UI

모든 서비스를 통틀어 사용자가 많이 이탈하는 시점 중 하나는 “로딩”입니다. 특히나 처음 서비스를 접하는 사용자는 해당 서비스에 대해 정보가 없어서, 로딩이 길수록 이해하기 어렵습니다. 앞서 설명한 Laws of UX 중 하나인 도허티 임계(Doherty threshold)에서도 “사용자의 주의가 분산되는 것을 막고 생산성을 높이려면 시스템의 반응은 0.4초 이내에 이루어져야 한다.”고 정의했습니다.

기술적으로 로딩 속도를 해결하기에는 한계가 있습니다. 그리하여 대부분 서비스는 우리가 잘 아는 Linear progress indicator(이미지 왼쪽) 혹은 Circular progress indicators(이미지 오른쪽) UI로 로딩 상태를 나타내곤 해요.

출처 MATERIAL DESIGN

하지만 듀오링고는 위의 기본적인 UI에서 그치지 않았습니다. 흔한 로딩 UI 대신 귀염뽀짝한 듀오링고 일러스트와 언어에 대한 정보 등으로 페이지를 채워 로딩 시간이 지루하지 않게 느껴지도록 했어요.

출처 듀오링고

로딩 페이지를 자세히 살펴볼까요? 기존의 일자 형태 로딩 바 혹은 뱅글뱅글 돌아가는 로딩 UI 대신 듀오링고 대표 캐릭터인 ‘듀오’가 다양한 표정을 짓고 발 빠르게 움직여요. 듀오링고는 어플 곳곳에 캐릭터를 자주 등장시키는데요. 실제로 듀오링고의 목표는 캐릭터를 통해 언어를 배우는 시간이 즐겁게 느껴지도록 하는 것이래요.

출처 듀오링고

듀오링고는 로딩 페이지뿐만 아니라, 학습을 진행하는 중에도 이탈을 방지하는 장치를 설정해놓았어요. 문제를 5개/10개/15개 단위로 풀고 나면, 1번 사진과 같이 격려하는 애니메이션이 등장해요. 학습 중에 중단하려는 사용자에게는 다시 한번 묻는 팝업을 띄우는데, 여기에도 캐릭터를 사용해 이탈하려는 사용자를 붙잡죠.

또한 학습을 끝내면, 바로 다음 학습으로 넘어가는 게 아니라 사용자가 며칠 동안 학습을 지속해왔는지 그래픽과 장표를 통해 보여줍니다.

POINT 3. 체류시간 상승 및 이탈 사용자 재참여 유도

좋은 서비스는 사용자 이탈을 방지하는 데에 그치지 않고 체류시간을 늘리거나, 이탈한 사용자가 돌아오게 하여야 합니다. 듀오링고는 체류시간 상승/이탈 사용자 재참여 유도에도 각각 명확한 예시가 있어요.

체류시간을 늘리는 요인 중 하나는 다른 사용자와 교류입니다. 실제로 듀오링고가 주는 팁 중 하나는 친구와 함께 언어를 공부하는 것이에요. 친구와 함께 학습하는 사용자는 학습을 끝마칠 확률이 그렇지 않은 사용자보다 70% 높다고 하는데요. 그 이유 때문인지는 몰라도 듀오링고에서 학습하다 보면 모르는 사용자가 팔로우하는 경우가 종종 있습니다.

출처 듀오링고

그러나 직접적으로 외국인 친구와 소통할 수 없다는 점에 대해 아쉬움이 있습니다. 경쟁 어플인 Busuu헬로우톡같이 언어 교환 기능이 추가된다면 언어 학습뿐만 아니라 언어 활용까지 기대할 수 있겠죠?

이탈한 사용자를 돌아오게 하려고 듀오링고가 사용하는 방법의 하나는 메일링입니다. 돌아오라는 늘 같은 내용의 형식적인 메시지에 캐릭터를 이용하여 살짝 노선을 틀었어요. 하루 이틀은 평범하게 “앱에 접속하여 같이 공부하자!”라는 메시지지만, 일주일이 지나면 “너를 기다리고 있어!”라는 부엉이 듀오의 꽤 슬픈 표정이 더해집니다. 그것도 일주일 정도는 다시 시작하면 괜찮아! 섬세한 격려 메시지와 함께요.

하지만 한 달이 지나면, 사용자에게 꽤 방법의 하나는 메일을 발송합니다. 부엉이 듀오는 “네가 없는 사이에도 듀오는 계속 언어를 배우고 있고, 매일 5분을 투자해 100개가 넘는 단어를 알아갔어!”라고 하네요. 감정 호소와 냉철한 위트가 번갈아 주어지는 해당 메일은, 필자가 밈으로 먼저 접했을 만큼 온라인상에서 크게 화제가 되었죠. 실제로 이메일 마케팅 사례로 자주 등장하는 것도 볼 수 있습니다.

사용자를 지속적으로 사용하게 만드는 UX의 중요성

출처 SignHouse 듀오링고 월간 사용자 수(MAU)

일본어 자막을 무리 없이 볼 수 있을까? 하던 막연한 목표는 점점 할 수 있다! 로 바뀌고 있어요. 앞으로 남은 유닛을 학습하며 조금씩 성장할 저 자신이 기대되기까지 해요. 다른 사용자도 마찬가지로 기대감을 품고 지속해서 서비스를 이용하게 되고, 서비스는 매년 MAU가 성장하는 유의미한 결과까지 보여주고 있어요. 결국, 사용자가 꾸준히 접속하는 서비스에는 일관성 있는 톤앤매너의 UI로딩 페이지부터 메일링까지 사용자의 심리를 이용한 UX까지 한 꼬집씩 다른 세세한 디테일이 핵심이랍니다.

About Author