기획자의 모바일 앱 뜯어보기(2)
① 채널톡이 회원가입 페이지를 스플릿 UI 형태로 만든 이유
우리는 일상적으로 스플릿 UI를 접합니다. 예를 들어 슬랙은 좌측에 채널과 참여 중 멤버 리스트를 배치하고 우측에 채팅창을 배치합니다. 라인은 좌측에서 친구 리스트와 선택된 채팅창을 보여주면서 우측에서 채팅창을 제공하죠. 왼쪽에는 정보를 확인하거나 탐색할 수 있는 프라이머리 패널, 오른쪽에는 실제 선택된 내용을 확인하고 다른 행동을 할 수 있는 세컨더리 패널을 배치해 동시에 보는 구성입니다.
지메일도 그렇습니다. 왼쪽에는 사용자가 지정한 라벨이나 받은 편지, 중요한 편지 등으로 구분하고 오른쪽에는 구분값에 따라 최신순으로 나열된 메일을 보여줍니다.
물론 모든 스플릿 UI가 위와 같은 방식으로만 사용되는 건 아닙니다. 얼마 전에 알게 된 채널톡 사례가 그랬죠. 채널톡에 관리자 계정으로 가입하면서 재밌는 점을 발견했습니다. 이메일을 입력하고 영어 이름을 입력하는 순간 그 이름이 어떻게 보이는지 오른쪽에서 바로 보여주는 것입니다. 오른쪽에는 사용자들이 우리 서비스로 진입했을 때 어떤 화면을 보는지 표시해주고 있는데요. 비록 이름 하나지만 담당자인 내 이름이 사용자들에게 어떻게 보이는지 미리 확인할 수 있는 것이 꽤 매력적인 경험이었습니다.
한쪽에는 가입에 필요한 정보를 입력하게 하고, 다른 한쪽으로는 입력한 정보가 어떻게 노출되는지 명확하게 보여주죠. 뿐만 아니라 채널톡을 쓰면 무엇이 좋은지 정리한 내용을 함께 배치해 뒀네요(개발자, 디자이너 없이도 빠른 적용. 효과 측정 및 테스트도 간편하게!). 서비스가 줄 수 있는 가치를 가입 과정에서 느끼도록 하는 게 그리 쉬운 일은 아닌데 말이죠. 데스크톱 환경이었지만 오랜만에 회원가입 과정에서 디테일의 중요함을 느꼈습니다.
② 엣시(Etsy)가 신규 기능에 툴팁을 활용하는 방법
한국에 아이디어스가 있다면 미국에는 엣시(Etsy)가 있습니다. 모두 수공예 제품을 다루는 서비스죠. 2005년에 시작된 엣시는 세계 최대 핸드메이드 마켓이기도 합니다. 얼마 전, 엣시 iOS 버전 앱에 재밌는 기능이 업데이트 됐습니다. 바로 가상으로 제품을 미리 배치해볼 수 있는 기능입니다. 애플이 제공하고 있는 AR Kit을 활용한 것으로 보입니다. 몇몇 제품을 갖고 벽에 배치해보고, 식탁 위에도 배치해봤습니다. 단순히 상세 페이지 내 설명과 제공하는 이미지만 보는 것보다 구매 결정에 더 큰 영향을 줄 수 있겠다는 생각이 들었습니다. 구글 아트앤컬쳐 앱이 저 멀리 있는 박물관, 미술관의 작품을 눈 앞에서 보는 것처럼 느끼게 해주는 것과 같은 맥락에서 말이죠.
더 재밌는 건 해당 내용을 업데이트한 사실을 알려주기 위해 툴팁을 활용하는 방법이었습니다. 사실 앱을 새로 설치하거나 실행할 때 또는 기능이 새로 업데이트 됐을 때 자주 활용되는 방식이지만 몇 가지 눈에 띄는 점이 있었습니다.
먼저 ‘베타’라는 표시입니다. 베타 버전임을 나타내는 건 사용자들의 기대감을 낮추는 효과가 있습니다. 온라인 게임에 자주 활용되는 클로즈 베타, 오픈 베타 같은 단계에선 버그가 발견돼도 사용자는 비교적 너그러운 태도를 보이죠. ‘우리 이런 기능을 업데이트 했으니 써봐!’가 아니라, ‘우리 이런 기능을 업데이트 했는데 아직 베타라 불안정 할 순 있어!’라고 했을 때 해당 서비스에 대한 사용자의 태도가 다를 수 있다는 것입니다.
또 이 아이콘이 무엇인지, 아이콘을 탭했을 때 확인할 수 있는 내용은 무엇인지 핵심만 뽑아 설명해줍니다. 군더더기 없이 깔끔해요. “카메라를 활용해 특정 공간에 아이템이 놓인 모습을 미리 확인해볼 수 있다.” 툴팁은 보통 최초 1회에 한정되니, 이 정도 안내라면 낯선 아이콘이라도 다음에 다시 활용해볼 가능성이 생기지 않을까요.
명확한 행동 유도 버튼들의 구성도 좋습니다. 사실 새로운 기능을 안내하는 툴팁이라도 서비스가 원하는 행동으로 이어져야 목표 달성에 가까워지는데요. 보통 툴팁은 ‘안내’ 역할에서 끝나는 경우도 많기에, ‘써볼게!’에 해당하는 버튼을 강조한 모습이 매력적이었습니다.
툴팁에 초점을 맞춰 얘기했지만, 사실 AR를 활용한 이 기능이 시사하는 바는 또 있습니다. 판매자와 구매자에게 모두 적용되는 부분인데요. 판매자이자 제작자는 자신이 만든 제품이 어디에 어떻게 쓰이면 좋을지를 이미 알고 있어요. 다만 그걸 표현하는 방법에 한계가 있습니다. 텍스트, 영상, 이미지 정도로 상세 페이지 내 표현하는 것. 아쉬움이 많을 수 밖에 없죠. 구매자에게도 아쉬움이 있습니다. 우리집에 잘 어울릴지, 내가 원하는 공간에 잘 맞을지 상상해 보는 수밖에 없기 때문이죠. 이케아가 일찌감치 이러한 방법을 활용한 것도 우리집을 어떻게 꾸미면 좋을지에 대한 상상을 현실에 가깝게 만들어주기 위해서였다는 사실을 떠올려 보면 될 것 같네요.
③ 넷플릭스는 왜 셔플기능을 테스트하고 있을까?
음원 스트리밍 서비스 얘기를 먼저 해볼까요. 바이브는 사용자가 자신이 원하는 음악을 찾아 듣는 게 아니라, ‘좋아요’를 누르거나 실제 들었던 음악들을 바탕으로 비슷한 음악을 계속해서 재생해줍니다. 믹스테입 개념을 잘 활용하고 있기도 해요. 이렇게 만들어진 플레이리스트를 셔플 기능으로 섞어 듣곤 하는데요. 두 가지 목적이 있습니다. 같은 플레이리스트를 다르게 느낄 수 있고, 내 취향에 맞게 추천되는 리스트에서 어떤 노래가 나올 지 묘한 기대감이 생기죠.
이처럼 음원 스트리밍 서비스에서 주로 활용하던 셔플 기능이 넷플릭스에 등장했다는 소식을 듣게 됐습니다. 어라? 추천 알고리즘을 논할 때 빠지지 않는 넷플릭스가 셔플을? 내가 본 영화나 드라마 등을 바탕으로 추천 리스트를 만들어주는게 아니라 랜덤으로 재생시킨다고? 별 생각이 다 들었죠. 일단 해당 기능은 특정 국가의 일부 사용자를 대상으로 테스트하는 단계인 듯합니다. 사용자들의 반응이 꽤 재미있었어요. 이미 본 걸 셔플로 만나면 어쩌냐고 묻기도 하고, 유용할 것 같다는 얘기도 있어요. 혼돈 그 자체라며 당황스러워 하는 사람도 있고요.
요즘 그런 말을 많이 듣죠. 넷플릭스에서 가장 오래 머무는 페이지가 볼 영상을 고르는 페이지라는 말이요. 유튜브와 네이버 등 정보 탐색의 역할을 하는 서비스에서 넷플릭스 추천 영화, 드라마 등에 대한 검색이 꽤 많이 일어나기도 하죠. 돈은 매달 나가는데, 뭘 봐야 할지는 모르겠고, 그렇다고 넷플릭스가 탐색에 최적화되진 않았으니, 네이버에 검색이나 해보자! 이런 흐름이 존재한다는 증거이기도 합니다. 그렇다면 넷플릭스는 셔플 기능을 왜 TV에서만 테스트하고 있을까요? 제가 흥미로웠던 점은, 셔플 기능을 테스트 한다는 사실보다 TV만 대상으로 테스트를 한다는 점이었습니다.
TV를 켰어요. 볼 만한 프로그램이 없네요. 열심히 채널을 돌립니다. 채널 버튼을 위로, 아래로 누르면서요. 수십 개 채널을 지나칩니다. 그런데도 볼 게 없어요. 우리 앞에는 저녁이, 야식이 기다리고 있는데 말이죠. TV 앞에서 발생하는 상황입니다. 다들 한 번쯤은 해봤을 경험 아닐까요? 그럼 넷플릭스나 IPTV로 진입하거나 편성표를 보고 지금 방송 중인 프로그램을 확인합니다. 혹시나 하고 말이죠. 이렇게 5~10분을 소비하면, 슬슬 열이 받아요(아 물론 이건 제 개인적인 경험입니다). 그렇게 적지 않은 시간을 투자해 겨우 채널 하나를 고정하곤 금방 다른 일에 빠집니다. 스마트폰을 보거나 하는 등 말이죠.
그런데 그냥 버튼 하나만 눌러서 프로그램을 추천 받으면 어떨까요? 적어도 내가 어떤 종류의 콘텐츠를 봤는지 누구보다 잘 알고 있는 녀석이 하나, 하나, 하나 추천해준다면? 앞의 행동 보다 더 빠르게 원하는 콘텐츠를 찾을 수 있지 않을까요? 시간을 벌어주는 개념으로 받아들일 수 있겠다는 생각이 처음 들었고, 예상치 못한 콘텐츠를 만나볼 수 있겠다는 생각도 들었습니다. 물론 부작용이 없진 않겠죠. 무작위라는 걸 알고 눌렀지만, 그래도 내가 좋아하는 스타일이 아닌 콘텐츠를 만나게 된다면? 한 두 번은 넘어갈 수 있지만 연달아 같은 상황이 발생한다면? 서비스에 대한 신뢰도에도 영향이 있지 않을까? 넷플릭스의 강점은 시청 기록을 바탕으로 여러 종류의 콘텐츠를 쭉 펼쳐주는 거 아냐? 그런데 무작위로 재생을 하라고? 당황스러운 마음도 생기지 않을까?
여러분은 어떻게 생각하시나요? 지금 TV로 넷플릭스를 켰는데 프로필 하단에 셔플 버튼을 발견했다면? 일단 한 번 눌러보시겠어요? 아니면 그냥 프로필을 하나 선택해 들어가시겠어요?
④ 네이버 지도는 왜 탭 위치를 포함한 UI를 개선했을까?
네이버 지도가 주요 화면을 업데이트 했습니다. (지난 7월) 기존에는 지도와 맞닿은 부분에 ‘탭’ 구분이 되어 있었는데요. ‘지도 – 탭 – 관련 기능 또는 콘텐츠’ 구성으로 말이죠. 업데이트 후 ‘지도 – 관련 기능 또는 콘텐츠 – 하단 탭’ 구성으로 변경되었습니다.
(1) 내비(길안내 탭)
내비를 랜딩 화면으로 갖는 네이버 지도. 기존에는 사용자가 즐겨찾기 한 장소 세 곳을 화면 내에서 확인할 수 있었는데, 변경 후에는 세 곳 외에 집과 회사가 추가됐습니다. 집, 회사 등으로 가기 위한 주요 경로 내 도로명을 표기해주는 것도 달라진 점!
또 길찾기 버튼이 상단 검색창 옆으로 배치됐습니다. 별도 전환 없이 바텀 시트를 끌어 올려 최근 방문했던 장소를 격자형으로 확인할 수 있게 됐고요. 해상도에 따라 다르겠지만, 12~15개 정도의 장소를 한 눈에 볼 수 있는 구성이죠. 보통의 내비가 버튼이나 탭 등을 한 번 더 눌러 최근 방문, 입력 장소를 보여주는 것에 비해 더 빠르게 찾을 수 있습니다.
(2) 주변 탭
대중교통, 내비와 함께 주요 탭을 구성하는 ‘주변 탭’에도 큰 변화가 있었습니다. 기존에는 지도 화면 상단과 주변 탭에 음식점, 카페 등 동일한 구분이 노출되고 있었는데요. 업데이트 후에는 검색창 하단에만 구분이 남아있고, 지도 탭에는 스마트어라운드가 적용됐습니다.
스마트어라운드는 2018년 출시됐으며 AI가 적용된 기능을 통해 사용자 개인의 위치와 시간대, 성별과 연령대 등에 맞춰 가볼 만한 곳을 추천해줍니다. 기존에는 네이버 앱에서 제공됐는데 이번 업데이트를 통해 지도에도 적용된 것이죠. 스마트어라운드가 적용된 것은, 네이버가 앞으로 네이버 지도를 어떻게 활용할 것인지에 대한 힌트를 제공해줍니다. 주변 ‘장소’를 중심으로 하기에 쇼핑은 물론 할인 등 생활 혜택을 연동할 수 있기 때문입니다.
③ 대중교통 탭
대중교통 탭 역시 변화가 있었습니다. 집, 회사 등 저장한 장소를 보여준다는 점에서 내비 탭과 유사하지만, 특정 장소로 이동하기 위한 대중교통 승차 정보와 소요 시간만 제공하던 기존 구성과 달리 버스가 도착하는 시간을 실시간으로 보여줍니다. 바텀 시트를 끌어 올리면 내비 탭과 동일하게 최근 검색 장소를 보여주고, 해당 장소를 탭하면 바로 대중교통으로 갈 수 있는 길안내 서비스를 제공합니다.
