주요 기능 바로가기? 공간의 활용? 국내 서비스들은 플로팅 아이콘을 어떻게 활용하고 있을까?

 

모바일앱과 웹을 사용하다보면 화면 오른쪽 하단에 다양한 종류의 아이콘이 위치한 것을 한 번쯤 보셨을 것 같은데요! 이는 PC와 비교하여 상대적으로 공간이 좁은 모바일 화면을 효율적으로 활용하기 위한 하나의 방법이라고 할 수 있습니다. 서비스 메뉴를 한 눈에 보고 원하는 곳으로 바로 이동할 수 있는 것이 PC 웹이라면, 모바일에서는 2-3번에 걸쳐 도달할 수 있기 때문이죠. 주요 기능을 바로 이용할 수 있게 유도하거나, 메인 화면의 공간을 효율적으로 활용하거나, 유저들과의 커뮤니케이션을 위한 기능을 넣는 등 서비스 성격에 따라 각기 다른 방법으로 우측 하단을 활용하게 됩니다. 그래서 오늘은 크게 4가지 성격에 맞춰 사례들을 정리해보려고 합니다.

 

 

1.유저와의 커뮤니케이션

 

 

첫 번째로 살펴볼 유형은 ‘유저와의 커뮤니케이션 및 피드백’입니다. 위의 사례는 ‘미래식당‘ 안드로이드 앱으로, 메인화면 우측 하단 ‘채팅 상담’ 아이콘이 자리잡고 있는데요. ‘Channel’을 활용한 채팅상담은 미래식당만의 특징에서 시작된 것으로 보입니다. 전국 맛집의 다양한 메뉴들을 집에서도 편하게 주문, 즐길 수 있는 서비스이기 때문이죠. 소비자 입장에서 내가 먹어보지 않은, 직접 방문해보지 않은 식당의 주요 메뉴들을 주문하는 과정은 구매 경험이 많은 마트 장보기에 비해 난이도가 높을 수 있습니다. 때문에 페이지 어디서든 확인 가능한 ‘채팅 상담’ 아이콘은 유저가 서비스를 이용하는데 있어 장벽을 낮춰줄 수 있는 중요한 역할을 해주지 않을까 싶습니다. 

 

 

 

두 번째 사례는 스타트업 및 소규모 법인을 위한 온라인 세무지원 서비스 자비스(JOBIS)’입니다. 소규모 기업에서는 보통 대표가 직접 세무 관련 업무를 챙기게 되는데, 대표를 포함 멤버들이 해야할 일이 많아질수록 부담이 되는 것이 사실입니다. 이런 부담을 덜어주는 서비스! 자비스 역시 PC와 모바일웹, 앱에서 언제든 담당자와 커뮤니케이션을 할 수 있는 아이콘을 배치하고 있습니다. 미래식당과의 차이가 있다면 미래식당은 ‘Channel’이라는 서비스를, 자비스는 ‘Intercom’이라는 서비스를 이용하고 있다는 정도 입니다. 자비스는 법인 별 담당 인원을 별도로 지정하고 있기에, 채팅을 통해 궁금한점이나 법인의 세무 관련 업무를 처리할 수 있도록 도와주고 있습니다.

 

 

 

‘챗봇’을 이용하는 서비스도 있었습니다. 현대카드 모바일 앱의 경우 지난 8월 인공지능 챗봇 서비스 ‘버디(Buddy)’를 출시한 바 있는데요. 사용중인 카드에 대한 궁금증을 실시간으로 상담해주는 역할을 하고 있습니다. 보유하고 있지 않지만, 소비 패턴에 맞는 맞춤카드 추천이나 슈퍼콘서트, 라이브러리 등 현대카드와 관련된 다양한 콘텐츠를 제공해주기도 하죠. 반년이 지난 지금, 완벽하게 녹아들었다고 판단하기엔 부족하다는 느낌이 강하긴 하지만 여전히 ‘복잡하고’ ‘어렵다’고 느끼는 금융서비스에 언제든 상담 가능한 기능이 있다는 점은 많은 도움이 되지 않을까 싶습니다.

 

 

2.주요 기능 바로가기

 

 

두 번째 유형은(가장 대표적 유형) ‘주요 기능 바로가기’입니다. 글쓰기 서비스에서 글쓰기 버튼이 우측 하단에 자리잡은 것과 같은 개념! 먼저 주말 저녁 저의 가장 큰 즐거움 중 하나인 ‘해외축구’를 Live로 볼 수 있는 네이버 TV 모바일 앱(위의 이미지는 iOS 기준)의 사례인데요. 페이지에 따라 각기 다른 아이콘이 위치하고 있습니다. 라이브 방송 피드에는 일정표를 확인할 수 있는 아이콘이, 일정을 시간의 흐름에 따라 확인할 수 있는 페이지에는 리스트를 원하는 조건에 따라 확인할 수 있는 필터링 아이콘이 있습니다. 스포츠 경기 뿐만아니라 공연, 오디오 콘텐츠 등 다양한 종류의 라이브 방송이 등록되어 있는만큼 유저들의 취향에 맞는 리스트를 빠르게 확인할 수 있는 기능은 꼭 필요하다고 할 수 있겠죠 🙂

 

 

 

네이버에 이어 카카오의 주요 서비스 사례입니다. 왼쪽부터 차례로 ‘카카오 장보기’, ‘카카오 맵’, ‘카카오 지하철’의 이미지인데요. 아직까지 ‘쇼핑’위주의 서비스는 상품 리스트 화면, 상품 상세 화면을 거쳐 장바구니에 상품이 담기는 경우가 많습니다. 카카오 장보기의 경우 메인 화면에서 바로 장바구니에 상품을 담을 수 있도록 구성되어 있고, 이로 인해 장바구니로 바로 이동할 수 있는 아이콘이 우측 하단에 자리잡고 있습니다. 바로 담고, 장바구니로 이동해 결제할 수 있어 유저 입장에서는 1-2단계를 덜 거쳐 원하는 목표를 달성할 수 있지 않을까 싶네요. 카카오맵과 카카오지하철은 현재 ‘유저’의 위치가 가장 중요한 기준이 되는 서비스입니다. 따라서 우측 하단에 모두 현재 위치를 바로 확인할 수 있는 아이콘이 위치하고 있습니다. 

 

 

 

다음은 최근 ‘취향저격’을 주요 키워드로 앞다퉈 서비스를 런칭한 줌인터넷의 ‘뉴썸(좌측 이미지, 안드로이드앱)’과 네이버의 ‘디스코(우측 이미지, iOS앱)’의 사례입니다. 뉴썸은 내가 읽은 뉴스, 설정한 관심 키워드에 맞춰 인공지능 기술을 활용해 꼭 읽어야 할 뉴스를 추천해주는 서비스이며, 디스코는 유저들이 직접 선별해 등록한 콘텐츠의 개별 선호도와 관심 키워드에 맞춰 적합한 콘텐츠를 추천해주는 서비스입니다. 서비스 성격에 맞게 디스코는 우측 하단 링크 추가가 가능한 아이콘이(유저들에 의해 콘텐츠가 쌓이게끔 구성되어 있기 때문), 썸리는 원하는 토픽(관심사 기반)을 바로 등록, 관리할 수 있는 아이콘이 자리잡고 있습니다.

 

 

 

다음은 ‘여행’관련 서비스 사례입니다. 왼쪽 두 장의 이미지는 종합 여행 정보를 제공해주는 ‘트리플’, 오른쪽 두 장의 이미지는 여행기를 작성, 공유할 수 있는 ‘여행일기’입니다. 트리플은 여행을 계획중인 ‘도시’를 바탕으로 정보를 확인할 수 있는데요. 예를 들어 베트남의 ‘호치민’을 선택할 경우 기본 가이드, 숙박, 관광, 맛집 등의 정보를 확인할 수 있습니다. 이들 모두 지도를 바탕으로 확인하는 것이 편리하기 때문에 지도에서 보기 아이콘이 눈에 띄는 곳에 있습니다. 트리플과 다르게 여행일기는 내가 다녀온 여행지에 대한 콘텐츠를 작성하는 것이 핵심입니다. 때문에 여행기를 바로 작성할 수 있는 아이콘으로 구성되어 있습니다.

 

 

 

비슷한 맥락에서 ‘해먹남녀’의 커뮤니티 페이지에는 글과 사진을 바로 등록할 수 있는 아이콘이, 시럽의 홈에는 카드 추가 및 이동, 삭제를 바로 할 수 있는 아이콘이 있습니다.

 

 

3.원하는 내용 바로 찾기

 

 

한 페이지에서 등록된 모든 상품을 확인할 수 있는 쇼핑몰은 없을 것 같습니다. 브랜드, 체형, 성별, 계절 등 다양한 상황과 조건에 맞춰 상품들이 다양하게 등록될 수 밖에 없는 곳이 ‘쇼핑몰’이기 때문이죠. 상품을 줄일 순 없으니 쇼핑앱이 선택할 수 있는 방법은 유저가 원하는 상품을 빠르게 찾을 수 있도로 도와주는 일이라고 생각합니다. 크게 두 가지 방법이 있을 것 같은데요. 하나는 얼마전 소개드렸던 ‘쇼핑 성공률을 높여주는 국내 서비스3‘와 같이 서비스 컨셉 자체를 ‘큐레이션 및 추천’에 맞추는 방법, 하나는 위의 ’29cm(iOS 앱)’과 같이 유저가 원하는 기본 조건(신상품, 베스트 상품, 최고가격, 최저가격 및 브랜드 별)에 따라 페이지를 구성해주는 방법입니다. 

 

 

 

‘에잇세컨즈(왼쪽 첫 번째 이미지, iOS 앱)’는 메인화면에선 미래식당과 같이 실시간 상담을 위한 아이콘이, 개별 리스트 페이지에는 ’29cm’와 같이필터 아이콘이 있었고 요일에 따라 브랜드 및 쇼핑몰 랭킹을 제공해주는 ‘요일(가운데, 오른쪽 이미지, iOS 앱)’은 왼쪽이라는 위치만 다를뿐 동일한 기능의 아이콘을 제공하고 있었습니다. 

 

 

4.효율적인 공간 활용

 

 

오늘 소개드릴 마지막 유형은 ‘공간의 효율적인 활용’입니다. 초반에 말씀드렸던 것처럼 모바일 화면은 PC와 태블릿에 비해 훨씬 작기 때문에 공간을 효율적으로 활용하는 것이 정말 중요합니다. 사용자 경험을 해치지 않는 선에서 말이죠. 대표적인 공간 활용 방법은 ‘시요일(위의 이미지, 미디어 창비, iOS앱)’과 같이 주요 메뉴를 필요할때만 불러내는 것입니다. 우측 하단에 위치한 아이콘을 클릭하면 홈화면 이동, 추천 시 보기, 검색, 시 목록, 마이페이지로 이동할 수 있는 메뉴바가 나오는 것이죠.(*시요일은 미디어창비에서 서비스중으로 3만 4천여편의 테마별 시를 앱으로 볼 수 있습니다.) 이는 앱을 통해 제공하려는 서비스 컨셉에 유저들이 더욱 집중할 수 있게 만드는 역할을 하기도 합니다.

 

 

 

애플에서 제공하는 기본 ‘메모앱’ 역시 주요 기능을 필요할 때만 불러올 수 있는데요. 우측 하단의 플러스 아이콘을 클릭하면 위의 오른쪽 이미지와 같이 필요한 기능을 선택해 바로 활용할 수 있습니다. 만약 키패드 위에 계속 노출된다면 메모한 내용을 그만큼 적게 볼 수 밖에 없고 내용을 입력하는데 있어 방해가 될 수 있겠죠?

 

 

마무리하며,

이 외에도 서비스 성격에 따라 소개하지 못한 사례와 유형은 다양하게 존재합니다. 오늘은 그 중에서도 대표적이라고 할 수 있는 내용들을 간략하게 정리해봤는데요. 분명한 사실은 다양한 종류의 서비스에서 플로팅 아이콘을 사용하고 있다는 점이며 무엇보다 중요한 것은 서비스의 성격에 맞게 구성하고 위치를 잡아야 한다는 점이었습니다. 만약 미래식당에서 ‘Channel’과 같은 실시간 상담 툴이 아닌 ‘일반 문의’ 1:1문의’ 아이콘을 넣었다면 유저 입장에서는 꼭 필요하다는 느낌보다 거추장스럽고 필요하지 않은 느낌을 받을 수 있지 않을까요? 또, 카카오맵이나 네이버맵에서 내 위치를 찾을 수 있는 아이콘을 플로팅이 아닌 메뉴 형태로, 어딘가 들어가서 확인할 수 있도록 구성 되어 있었다면! 초기 앱에서처럼 우측 하단(엄지손가락이 쉽게 닿을 수 있는 위치)이 아닌 우측 상단에 있었다면 훨씬 더 불편하게 느껴졌을거라는 생각이 듭니다. 

 

 

 

댓글 남기기