클래스 101 앱은 어떻게 생겼을까?

모바일 클래스 앱 UX/UI 분석

자기가 진정으로 사랑하고 하고 싶은 일보다 더 동기부여가 되는 일은 없다

세상 모두가 자기가 사랑하는 일을 한다면, 세상에는 1000명의 모차르트와 1000명의 아인슈타인과 1000명의 피카소가 나올 수 있다.

ㅡ 클래스원오원 브런치 글 'Class101 온라인 클래스를 만들어야 하는 이유' 중에서 발췌

클래스 101이 뭐예요?

클래스 101은 "준비물까지 챙겨주는 온라인 클래스"라는 명확하고 차별화되는 슬로건을 포함해 공격적인 마케팅으로 떠오르는 취미 중심의 소셜 네트워킹 플랫폼 서비스입니다. 최근 워라밸을 중시하는 2030 세대를 겨냥해 놀라운 금액의 투자를 유치하며 신흥 비즈니스 카테고리로 부상하고 있습니다.

클래스 101을 설명하는 키워드 3가지

만일 여러분이 타겟군에 속한다면 페이스북과 인스타그램에서 클래스101 광고를 한 번쯤은 접해보셨을 겁니다. 최근에는 시그니처 코스를 런칭해 유튜버, 그레이 등의 유명 인사를 내세우며 적극적으로 고객을 유치하기도 했습니다.

다른 취미 플랫폼 서비스와 다른 점?

한 조사 결과에 따르면 취미생활 카테고리의 TOP 3는 스포츠, 어학, 재테크이며 공예, 미술 등의 취미 클래스가 그 뒤를 따르고 있습니다.

출처: 오픈서베이 취미생활·자기계발 트렌드 리포트 2019(7p)

이미 온/오프라인 시장이 형성되어 있는 어학시장과 스포츠를 메인으로 하는 프립, 마일로, TLX와 같은 타 서비스와 달리 클래스 101은 미술, 공예, 디지털 드로잉 등의 취미 카테고리를 집중적으로 타겟팅하고 있습니다. 취미 분야에서도 기존의 유튜브, 프로듀싱, 온라인 마켓으로 부수익 창출하기 등 새로운 분야의 클래스로 카테고리를 확장해가는 모습입니다.

또, 같은 취미 카테고리를 타겟팅하는 서비스 중에서도 1회성 성격의 원데이 클래스를 많이 보유하고 있는 웬지, 솜씨당과 다르게 클래스 101의 대부분의 상품은 최소 3~6개월에 달하는 수강기간과 20만원대 정도의 가격대가 형성되어 있습니다. 

온라인 취미 플랫폼 춘추전국시대..

물론, 업체별마다 컨텐츠 카테고리가 딱 정해진 것은 아니기에 사용자의 니즈에 따라 제공하는 콘텐츠의 카테고리와 가격대는 앞으로도 끊임없이 조정될 것입니다. 

클래스 101앱 살펴보기

그럼 공격적인 마케팅과 젊은 감각, 빠른 성장 속도로 유명한 클래스101의 서비스와 모바일 앱 UX/UI를 자세히 살펴보겠습니다.

1. 메인 메뉴

클래스101 메뉴 구조

클래스 101의 메인 메뉴 구조입니다. 콘텐츠 탐색에 중심을 둔 홈 화면과 둘러보기 메뉴, 찜했거나 수강중인 클래스 정보를 받는 알림 메뉴, 설정을 위한 마이페이지로 심플하게 구성되어 있습니다.

앱에서 가장 처음 접하는 홈 화면에서 눈길을 사로잡는 것은 커다란 광고 배너입니다. MD의 선택을 받은 클래스 광고와 할인 이벤트 소식 등을 볼 수 있습니다. 홈 화면에서 계속 아래로 스크롤을 내려보면 굉장히 많은 클래스 리스트가 끝없이 표시됩니다.

너무 콘텐츠가 많아서 전체 스크롤 캡쳐가 어려웠..

MD추천, 인기순, 신규클래스 등의 상위 3개 그룹은 각 그룹별로 콘텐츠 리스트를 1열로 배치해 가로 슬라이드를 할 수 있게 했습니다. 하지만, 더 아래에 배치한 클래스들은 가로 스크롤 없이 계속 내리면서 탐색할 수 있게끔 구성했습니다. 사용자의 행동을 세심하게 잘 고려한 설계입니다.

둘러보기 → 기획전 → 클래스 상세페이지

둘러보기 화면에서는 정확한 검색 키워드를 가진 고객을 위한 검색 기능과 그렇지 않은 고객을 위해 둘러보기 메뉴를 함께 제공합니다. 검색 영역 아래에 카테고리나 분야, 재료 등 상위 카테고리를 제공하고 있습니다. 상위 카테고리를 클릭하면 해당 카테고리의 기획전 페이지에서 콘텐츠 리스트를 따로 모아서 볼 수 있고, 다시 검색 버튼을 누르면 키워드에 따른 검색결과 페이지가 표시됩니다.

2. 가격 정보

클래스 101 앱을 탐색하면서 클래스 콘텐츠를 모아놓은 리스트에서 가격정보를 표시하지 않아 불편했습니다. 클래스 선택의 중요한 기준 중에 하나인 가격 정보를 탐색 단계에서 제공하지 않아서 일일히 들어가서 확인하거나, 가격 외 다른 정보로 클래스를 선택해야 합니다.

클래스101 메뉴 리스트와 타 서비스 비교

위 그림에서 보듯이 클래스 101 메인 메뉴에서는 클래스의 가격정보 대신 찜한 개수나 만족도, 수강 가능한 기간 정보만을 표시하고 있습니다. 할인 정보나 쿠폰 이미지가 붙어있는 콘텐츠에서도 가격 정보는 보이지 않습니다. 검색을 했을 때도 카테고리, 클래스 상태, 정렬순 필터는 있지만 가격에 관한 필터링은 제공하지 않습니다. 원데이 클래스를 제공하는 다른 경쟁사와 비교했을 때 가격군이 다르게 형성되어 있기 때문에 간접적으로 비교를 피하기 위해 숨긴 것은 아닐까하는 짐작도 해보았습니다.

분명히 같은 클래스인데 가격이 계속 바뀌니 복잡해...

상세 페이지에서 할인가와 쿠폰을 함께 제시하고 최대 받을 수 있는 할인가를 제시하고 있지만, 실제 신청하기 단계에서 옵션을 선택하면 최종 가격은 달라집니다. 가격에 민감한 필자의 경우 동일한 카테고리의 콘텐츠를 가격 기준으로 비교하기에 너무 많은 depth를 거쳐야 하기에 다소 아쉬운 부분이었습니다.

3. 클래스 상세 페이지

필자는 클래스의 다소 긴 기간과 비용에 대한 심리적 장벽을 넘지 못하고 이탈 유저가 되었습니다. 하지만 콘텐츠를 어떻게 제공하는지 알아보기 위해 클래스의 상세 페이지를 살펴보았습니다.

상세 페이지의 메뉴 탭

원하는 클래스를 선택하면, 해당 클래스의 상세 페이지로 이동합니다. 클래스에 대한 소개와 커리큘럼, 준비물 등이 포함된 패키지 소개, 할인혜택, 크리에이터 소개 메뉴로 나뉘어져 있고 클래스에 대한 상세한 정보를 볼 수 있습니다. 11번가와 같은 쇼핑몰 상세 페이지에서도 쉽게 볼 수 있는 Tab UI를 사용해서 필요한 내용으로 빠르게 이동할 수 있습니다.

클래스를 듣게 되면 커리큘럼에 따라 비디오 콘텐츠를 재생해서 수업을 진행할 수 있습니다. 또, 해당 강의를 클릭하면 새로운 페이지에서 동영상과 수업노트, 댓글을 통해서 같이 클래스를 듣는 사용자들과 소통을 할 수 습니다. 크리에이터가 열심히 댓글을 달아주면 수강생의 만족도와 의지도 함께 올라갈 수 있는 좋은 채널이라고 여겨집니다.

번외로, 클래스 찜하기를 신청해두면 강의 오픈시 문자로 알람이 오는 등 계속해서 클래스의 정보에 대해 노출이 됩니다. 

요약

전반적으로 앱을 훑어보면서 발견한 포인트는 다음과 같습니다.   

콘텐츠 탐색부터 클래스 수강 신청하기 페이지까지 과정이 심플하고 군더더기가 없다.

많은 정보를 표시할 때, 적절한 UI 요소를 활용해서 배치해 필요한 정보를 빠르게 찾아볼 수 있다.
(메인 화면의 가로 슬라이드, 상세 페이지의 메뉴탭 등)

클래스 선택의 중요한 기준인 가격정보 표시에 있어서 아쉬운 점이 있다.
1. 클래스 리스트에 가격정보가 빠져있어 클래스별 가격 비교가 어렵다. 
2. 상세페이지, 옵션 선택 페이지, 결제 페이지에 표시되는 가격 방식이 달라서 혼란을 준다.

온라인 취미 플랫폼의 특성에 맞게 비디어 플레이어, 커뮤니티, 1:1 문의 등 충분한 소통 채널을 제공한다.

 

참고 문서

오픈서베이 "취미생활·자기계발 트렌드 리포트 2019"

'클래스101'은 어떻게 '오늘의집'과 경쟁하고 있나 https://brunch.co.kr/@soundsgood/96

Class101 온라인 클래스를 만들어야 하는 이유 1,2,3 https://brunch.co.kr/@pedaling/15