각 서비스가 새로운 소식을 알리고 유입을 유도하는 방식
삼쩜삼 디자이너들이 찾은 각 서비스 사례
들어가며
안녕하세요, 삼삼오오 스터디장이자 삼쩜삼에서 프로덕트 디자인을 하고 있는 HE입니다.
먼저 저희 삼삼오오 스터디에 대해 알려 드릴게요.
삼: 삼쩜삼 디자이너들이
삼: 삼삼오오 모여
오: 오늘도 재밌는 서비스 탐험하며,
오: 오순도순 후기 나누는 스터디
문자 그대로, 이 스터디의 목표는 다양한 서비스를 조사하며 레퍼런스를 수집하고, 그에 대한 의견을 교환하면서 상호발전하는 것입니다. 그러는 동안 삼쩜삼 프로덕트에 도움이 될 만한 아이디어도 발굴할 수 있다면 더할 나위 없겠죠.
스터디 구성은 간단합니다. 주제는 스터디장이 선정하고, 격주마다 한 자리에 모입니다. 90분간 서비스 선정부터 레퍼런스 수집, 발표까지 진행하고 나면 전혀 몰랐던 서비스와 사례를 알아갈 수 있습니다. (추가로, 각 UI/UX 요소에 대한 디자이너들의 사족도 함께합니다. 솔직한 발언을 위해 실명을 살짝 가린 점, 참고해주세요!)
이 유익함을 저희만 누리기 아쉬워 브런치 세상으로 나왔는데, 이 글을 읽으시는 분들께도 도움이 된다면 좋겠습니다. 브런치는 3주 간격으로 발행할 예정이고, '삼쩜삼 디자인팀'을 구독하시면 글이 발행될 때마다 알림을 받아보실 수 있습니다!
각 서비스가 새로운 소식을 알리고
유입을 유도하는 방식
스터디 첫 번째 주제는 '새로운 소식'입니다. 이는 앱 버전 업데이트, 신규 기능, 새로운 이벤트 소식 등 넓은 범위의 '소식'을 의미합니다. 과연 각 서비스는 새로운 소식을 어떻게 알리고 있을까요?
배달의 민족 (발표: NS)
NS: 배달의 민족은 주로 '알림센터'를 이용해 새로운 소식을 알려주고 있어요. 알림센터 최상단의 '주문이 접수되었습니다' 알림처럼, 배달 현황의 경우에는 '홈' 화면과 'my배민'에도 같은 내용을 노출해서 유저가 쉽게 찾아볼 수 있도록 했어요. 또, '알림센터'에서 주문과 혜택 card가 다른 UI인 것이 눈에 띄는데, 성격별로 알림을 구분해 보여주려는 의도가 아닐까 싶어요.
JH: 'my배민' 화면은 디자인의 강약 조절이 필요해 보여요. 배민 특유의 키치한 아이콘이 다양한 UI와 섞여서, 서로의 간섭 요소가 되는 느낌이에요.
HE: 저는 'my배민' 화면에서 '배민클럽' card가 자리 차지를 많이 해서, 같이 묶여있어야 할 '주문내역/나의 찜/리뷰관리'와 '쿠폰함/포인트/받은 선물' 사이의 gap이 너무 커 보인다고 생각했어요.
NS: 해당 '배민클럽' card 아래 또 광고 banner가 있어서, 받은 쿠폰(쿠폰함)을 찾으려고 할 때 어디로 가야 할지 헷갈리네요.
NS: 새로운 메뉴 및 카테고리는 'N' 뱃지를 이용해 표현하고 있어요. 이 뱃지는 클릭해서 들어갔다 나와도 사라지지 않아요.
뱅크샐러드 (발표: HE)
HE: 뱅크샐러드는 '홈' 화면에 이벤트 card를 띄우는 방식으로 신규 이벤트를 알리고 있어요. 이 card가 아래 메뉴를 밀면서 나타나는 interaction을 써서, 확실히 그쪽으로 시선이 가요. 이 이벤트는 '전체' 화면 상단의 '신규' 카테고리에서도 볼 수 있어요.
HE: '자산' 화면에 들어가면 신규 기능인 '종잣돈 모으기'의 온보딩이 곧바로 시작되고, 그 이후 바로 '모으기'를 할 수 있는 bottom sheet가 떠요.
NS: 화면에 진입하자마자 bottom sheet로 유입시키는 것은 리스크가 있을 것 같아요.
HE: 맞아요. 직접 써보니 기능을 강요한다는 느낌이 들어서 아쉬웠어요.
HS: 저는 온보딩의 애니메이션이 종잣돈이랑 어떤 관련이 있는지 이해가 잘 가지 않았어요.
JH: 차라리 탭 이름이 '자산'이 아니라 '종잣돈'이었으면 온보딩의 의미가 있었을 것 같네요.
컬리 (발표: HE)
HE: 컬리는 '홈' 화면에서 'N' 뱃지를 이용해 새로운 메뉴를 표현하고 있어요. 또, '홈' 화면 하단에 '컬리멤버스 무료이용권' 혜택과 기한을 알리는 UI를 두어서 새로 나온 '컬리멤버스'로 유입시키려 하고 있어요.
HS: '컬리멤버스' UI와 비슷한 사례를 꽤 많이 봤어요. 삼쩜삼에서도 마감 기한이 분명한 것들은 이런 UI를 활용해 좀 더 유입을 유도해볼 수 있을 것 같아요. 같은 프로모션이라도 다른 화면보다 '홈'이 더 눈에 잘 띄니까요.
JH: 삼쩜삼에서는 전체 고객에게 노출시키는 방법보다 타깃 고객에게만 노출하는 방법이 더 적절할 수 있겠네요.
쿠팡이츠 (발표: WA)
WA: 쿠팡이츠는 'my이츠' 화면에서 tooltip을 사용해 새로운 이벤트가 추가되었음을 알리고 있어요. 같은 tooltip이라도, 색상을 달리 해서 '친구 초대'에 활용하고 있기도 했어요.
HS: 색상을 다르게 해서 'NEW'와 'EVENT'의 성격을 분리한 것이 좋아 보여요.
JH: 보통은 이런 경우에 뱃지를 쓰는데, tooltip을 쓴 것이 특이하네요.
WA: 보통은 '신규' 속성에 red 색상을 부여하는데, 쿠팡이츠는 왜 blue를 사용했을까요?
HE: 그렇게까지 깊게 생각하지 않았을지도 몰라요. '우리 primary color는 blue니까, blue로 해야겠다.'였을지도요.
WA: 쿠팡이츠 디자인팀은 연구를 굉장히 많이 하는 것으로 알고 있는데, 정말 그런 이유일까요?
(혹시 이유를 아는 분이 있다면 댓글 부탁드립니다!)
트립닷컴 (발표: WA)
WA: 최근 서울 여행을 준비하던 도중에 이탈했는데, 앱에 재진입하니 '홈' 화면에 '서울 여행 완벽 준비하기'라는 UI가 생겨 있더라고요. 항공부터 관광까지 단계별로 예약할 수 있는 것 같은데, 현재 준비 상황을 직관적으로 알 수 있는 점이 좋았어요. 추가로, 아래 '픽업 서비스 예약'은 광고 banner인데 꼭 기능처럼 보이네요.
WA: 스터디 주제와 별개로, 스크롤하다 보면 하단의 '홈' 버튼이 '맨 위로'로 변경되는 점이 신기했어요.
JH: 어차피 '홈' 버튼을 누르면 맨 위로 갈 테고, 우측 'GENIE'라는 floating 버튼 때문에 '맨 위로' 버튼을 추가로 넣기가 힘드니까 이렇게 한 것 아닐까요?
WA: 한국에서 만든 앱이 아니라 이렇게 신기한 UX가 존재할 수 있는 것 같아요. 한국에서는 새로운 pattern이기 때문에 유저가 인지하지 못할 가능성이 높아 보여요.
다이소 (발표: HS)
HS: 다이소에서는 하단 '오늘의발견'에 red dot을 노출하고, 거기에 깜빡거리는 animation을 넣어서 시선을 끌고 있어요. 이 animation은 들어가도 사라지지 않아서, 처음에는 라이브 방송중인 줄 알았어요.
HE: 깜빡거리는 animation은 몇 번이면 충분하다고 생각해요. 상품을 보는 중에도 animation에 시선이 가니까, '상품을 본다'는 본질이 흐려지는 느낌이에요.
카카오페이 (발표: HS)
HS: 카카오페이는 '혜택' 화면에서 주로 red dot을 사용해 유입을 유도하고 있어요. 이 red dot은 들어갔다 나오면 사라지는데요, '많이 모으는 혜택' floating 버튼의 red dot은 비노출 조건이 '모든 red dot이 사라지는 것'이에요. 그 때문에 모든 메뉴를 한 번씩은 눌러봐야 하죠.
추가로, 어떤 메뉴를 들어갔다가 나오면 해당 메뉴가 리스트의 최하단으로 내려가요. 이미 한 번 본 메뉴는 다시 볼 이유가 없다고 생각해서인 것 같아요.
HE: 개인적으로 floating 버튼은 거슬리지 않을 정도의 UI여야 한다고 생각해요. 어쩔 수 없이 눈에 계속 띄니까요. 그런데 '많이 모으는 혜택' 버튼은 필요에 비해 너무 큰 것 같아요.
JH: 저는 '많이 본 혜택'까지 red dot을 붙이는 건 과도하다고 생각해요.
HE: 어떤 모바일 게임은 시작하기도 전에 좌우/상하단에 red dot을 띄워서 클릭하다가 지치는 느낌이 드는데, 이 사례가 딱 그런 느낌이에요.
JH: 메뉴를 누르면 최하단으로 내려가는 것, 즉 위치가 계속해서 바뀌는 것은 과연 좋은 UX일까요?
HS: 한 번 눌러봤으면 다음에도 또 눌러볼 수 있다는 뜻인데, 왜 위치를 바꿔서 다시 찾기 힘들게 만들었는지 모르겠어요. 특히 '많이 보는 혜택'은 retention 목적일 것 같아서 더 의아해요.
GJ: '매일 모으는 혜택', 즉 list의 첫 번째 항목은 제휴 광고 영역인 것 같은데, 6개의 list를 전부 펼치지 않고 pagination으로 묶은 점이 신기했어요.
WA: 그렇게 함으로써 banner blindness 현상(광고처럼 보이는 banner는 유저가 자연스럽게 읽지 않고 건너뛰는 현상)을 잘 피해간 것 같아요. 리스트 형식으로 보여주니까 광고 같지 않아서 좋아 보여요.
NS: 우측 '2원' 버튼도 받을 수 있는 금액을 바로 보여주니까 더 눌러보고 싶은 마음이 드네요.
디스코드 (발표: GJ)
GJ: 디스코드는 앱 진입 시마다 게임 추천, 새로운 app icon 스타일, 앱 theme 변경 등 다양한 소식을 full modal/bottom sheet UI로 보여주고 있어요.
HE: 저는 진입 시마다 뜨는 화면들이 전면을 덮을 정도로 중요한지 잘 모르겠어요.
GJ: 하지만 저는 사용하면서 거슬린다는 느낌을 받진 못했어요.
JH: 저도요. 광고라는 느낌보다는 새로운 서비스가 출시됐구나, 하는 정도의 느낌만 받았어요. 놀이와 관련된 서비스여서 그런 것 같아요.
HE: 그렇다면, 삼쩜삼이 디스코드처럼 앱 진입 시에 '가족 환급 신청', '종소세 신청' 등의 화면을 띄우면 어떻게 느껴질 것 같은가요?
GJ: 그러면 거부감을 느낄 것 같아요. 왜냐하면 디스코드는 서비스 내 용어가 가볍고, 재미있는 느낌이 있어서요. 삼쩜삼은 디스코드와 서비스 무게 자체가 다르다고 생각해요.
NS: 툴처럼 사용하는 서비스인지, 아닌지에 따라 달라질 문제 같아요. 슬랙이나 카카오톡에서 이런 UX를 사용했다고 하면 광고라기보다 서비스 설명처럼 느껴지지 않을까요?
HS: 디스코드는 게임을 하려고 들어가는 서비스니까, 애당초 유저들이 서비스에 우호적인 태도를 가지고 있어서 광고처럼 느껴지지 않을 거로 생각해요.
HE: 그렇다면, 삼쩜삼에서 '신청하세요'가 아니라 기능에 대한 설명을 해도 유저가 우호적일까요?
JH: 권유하는 게 기능이라면요. 예를 들어 '당신의 소득이 대한민국 국민 중 몇 등인지 알아보세요'처럼요.
카카오톡 (발표: GJ)
GJ: 카카오톡은 '더보기' 화면에 '카톡설명서'를 넣어서 업데이트 내역을 상세히 알리고 있어요. '친구' 화면 상단에 '톡설명서' 진입점을 넣어서 그쪽으로 유도하기도 하고요.
HS: '카톡설명서'가 있는 줄 몰랐어요. 새로운 내용이 있으면 푸시로 좀 더 확실하게 알려줬으면 좋겠네요.
삼쩜삼에서는 스터디를 비롯해 업무적으로 발전할 수 있는 다양한 서포팅 프로그램을 운영하고 있습니다.
더나은 '나'를 향한 발걸음, 삼쩜삼과 함께 해요!
☞ 삼쩜삼 채용 (모든 공고를 한 눈에 볼 수 있어요!)
