모바일앱 공유 페이지에서 다운로드 버튼은 어디에 있나요
모바일앱 공유 페이지의 앱 다운로드 혹은 가입 유도 유형 정리
자신이 사용하던 앱에서 뭔가를 발견하고 공유한 적, 다들 있으시지요? 공유하기 기능은 앱의 인지도를 높이는 것은 물론 오가닉 유저* 또한 모을 수 있는 중요한 기능입니다. 최근 회사에서 공유하기 기능에 대한 스프린트를 진행했고 그 때문에 여러 사례들을 모아봤습니다. 그중 모바일앱 공유 페이지에서 앱 다운로드 혹은 conversion으로 어떻게 유도하는지 정리한 유형들을 공유합니다.
*오가닉 유저 organic user: 광고 없이 자연적으로 유입이 되는 유저들을 말합니다. 대체로 광고로 들어오는 유저보다 앱의 충성도가 높은 것으로 알려져 있습니다.
텍스트 콘텐츠 플랫폼:
일단은 몰입 먼저, 가입은 콘텐츠 탐색 후에
많은 텍스트 콘텐츠 플랫폼의 공유 화면은 다운로드 버튼이나 배너 같은 방해 요소들이 최소화되어 있는데, 이는 유저들이 해당 글에 바로 몰입할 수 있게 해 줍니다. 예를 들면, 브런치는 공유 페이지에서 다운로드나 로그인 버튼을 찾을 수 없지만, 상단의 로고를 누르면 다운로드 페이지로 넘어가게 구성이 되어 있습니다. 미디움 또한 별 다른 허들 없이 유저들이 글을 바로 읽을 수 있도록 "Open in app"버튼을 상단에 배치한 것을 볼 수 있습니다. 그리고 이 두 플랫폼 모두 관련된 주제의 글을 화면 하단에 나열해 유저들에게 서비스를 탐색할 기회를 제공합니다. 콘텐츠가 마음에 든 유저는 앱을 다운로드하여 가입을 할 거라 예상됩니다.
하지만 커리어리와 뉴욕타임스의 경우는 조금 다른 UX를 보입니다. 커리어리는 글을 읽기 전에 팝업을 띄워 앱 다운로드를 한 번 유도합니다. 그리고 그 글을 끝까지 읽으면 하단에 커리어리에 가입하면 읽을 수 있는 콘텐츠들을 요약해서 보여주고 "지금 무료로 보기" 버튼으로 다운로드를 다시 한번 더 유도하고 있습니다. 뉴욕타임스는 링크를 눌러 해당 콘텐츠로 들어가면 2초 정도 뒤에 하단에 subscibe now 버튼 섹션이 위로 올라옵니다. 그 안에는 구독 가격과 할인 혜택이 나와 있습니다. 두 서비스 모두 앱에서 중요하게 생각하는 액션(다운로드, 구독)을 먼저 권유하고 콘텐츠를 보여주고 있는 경우이고, 이는 텍스트 콘텐츠 플랫폼의 보편적인 공유 UX를 자신들의 서비스에 맞게 개선한 사례라고 생각합니다.
동영상, 사진을 공유할 때: 역시 콘텐츠가 제일 중요
그렇다면 동영상이나 사진 같은 미디어를 공유할 때는 어떨까요? 동영상의 경우는 역시나 해당 영상이 가장 잘 보이도록 메인에 배치를 했습니다. 유튜브는 Sign in 버튼을 화면 상단에, 비메오와 케이크는 앱으로 가는 버튼을 하단 고정 배너(sticky bottom banner)에 위치시켰습니다. 두 경우 모두 버튼의 위치가 영상을 보는데 무리가 없습니다. 하지만 하단 고정 배너의 경우는 유저가 화면을 조작할 때마다 버튼을 의식하겠지요. 이는 버튼의 주목도를 높인다는 관점에서는 좋은 UI이지만, 스크롤을 내려야 하는 화면에서 자칫하면 유저의 행동을 방해할 수도 있을 거라 생각합니다.
하지만 케이크는 공유된 콘텐츠가 영상과 간단한 카드로 구성돼 있어 화면에서 스크롤을 내릴 필요가 없습니다. 하단 고정 배너가 유저를 귀찮게 하지 않고 주목도를 확보한 셈이죠. 하단 고정 배너 외에도 "앱에서 따라 하기" 버튼을 넣어 앱 다운로드를 한 번 더 유도합니다. 또한 배너에 적힌 문구 "Cake에서는 매일 새로운 표현이 무료!"로 아직 서비스를 경험하지 못한 유저들에게 앱에 대한 기대감을 높이고 있습니다. 이러한 구성은 모든 요소들이 화면에 효과적으로 배치된 좋은 사례라고 생각합니다.
사진이나 이미지 콘텐츠를 공유하는 경우도 동영상을 공유할 때와 많이 다르지 않습니다. 상단에 사인 업이나 앱으로 가는 버튼을 배치했고, 하단 고정 배너를 띄우는 경우도 있습니다. 그렇지만 핀터레스트는 조금 다른 UI 구성을 보이는데요, 상단 헤더 바로 밑에 이 이미지를 공유한 사람의 이름이 나옵니다. 그리고 화면을 스크롤 다운하면 상단에 앱을 다운로드하라는 배너가 하나 뜨는데 스크롤을 내리면 사라집니다. 조금 더 스크롤을 내리면 화면 하단에서 팝업이 올라오는데, 여기에 이 페이지를 공유한 사람의 이름이 또 한 번 언급됩니다. 배너와 팝업이 연속적으로 나와 이미지를 보기에는 다소 산만하지만, 소셜 프루프(social proof)를 적용해 가입을 적극적으로 유도하는 플로우는 재미있는 아이디어라 생각합니다.
커머스, C2C 플랫폼:
하단에 CTA 버튼, 혜택도 같이 보여주기
대부분의 커머스, C2C 플랫폼의 공유 페이지에서는 CTA 버튼과 혜택(할인, 쿠폰 등)을 함께 보여줘 적극적으로 앱 다운로드나 회원가입을 유도하고 있습니다. 쿠팡은 무료배송을 에이블리, 29cm, 아이디어스는 할인과 쿠폰을 내세워 회원가입과 구매를 하도록 공유 화면을 구성해 놓은 것을 볼 수 있는데요. 이러한 UI는 하단의 CTA 버튼으로 유저들의 다음 액션을 유도하고, 그 옆의 혜택(할인, 쿠폰 등)이 유저가 그 액션을 더욱 하고 싶게 뒷받침해주는 구조라고 볼 수 있습니다.
소셜 미디어: 콘텐츠 종류에 따라 달라지는 화면 구성
우리가 많이 쓰는 소셜미디어의 공유 화면들을 살펴보면, 플랫폼의 미디어에 따라 구성이 조금씩 다른 것을 알 수 있습니다. 페이스북과 인스타그램은 각 포스팅을 많이 가리지 않는 선에서 Log in이나 Switch to the App 버튼을 넣었습니다. 반면에 틱톡과 스냅챗은 영상이 화면에 full로 들어갔고, 앱 오픈 버튼이 영상 시청을 방해하지 않는 우측 상단 혹은 하단 중앙에 있는 것을 볼 수 있습니다.
*비즈니스 소셜 미디어: connect 하려면 가입하세요
링크드인, 커리어리 등 비즈니스 소셜 미디어의 공유 화면에서는 서비스의 가입을 유도하는 버튼과 문구들이 인상적입니다. 링크드인의 "Join to Connect"나 "View full profile" 버튼은 이 서비스에서 할 수 있는 액션을 앞세워 가입으로 유저를 유도하고 있습니다. 프로필의 유저와 connect 하고 싶거나 프로필을 더 보고 싶다면 가입을 하겠지요. 여기에 스크린 샷을 추가하지는 않았지만, 로켓펀치도 링크드인과 비슷한 가입 유도 플로우를 보입니다. 그런데 커리어리는 링크드인과는 조금 다르게 유저를 가입으로 유도합니다. "팔로우", "연결하기"처럼 가입을 버튼에 언급하지는 않고 버튼의 액션에 대해서만 얘기를 합니다. 두 버튼을 누르면 모두 사인 업 페이지로 넘어가게 돼있습니다. 아마 가입을 직접적으로 언급을 한다면 유저들이 부담을 느낄 것을 우려하여, 이를 뒷 페이지에만 넣은 것이 아닐까 생각합니다.
마치며
이렇게 몇 가지 사례를 보니, 서비스의 유형과 공유되는 콘텐츠에 따라 화면 구성이 많이 다른 것을 알 수 있었습니다. 정답은 없지만 자신의 서비스와 공유되는 콘텐츠에 맞게 효율적으로 화면을 구성해 서비스를 더욱 매력적으로 보이게 하는 것이 제일 중요하다고 생각합니다. 읽어주셔서 감사합니다!
