brunch

You can make anything
by writing

C.S.Lewis

by Mobiinside Apr 25. 2023

나이키가 동일 모델 다른 컬러를 보여주는 방법

기획자의 모바일 앱 뜯어보기




#카카오T-여행홈
#나이키-상세
#프로덕트헌트-행동유도
#네이버나우-상세  




1. 나이키가 상세화면에서 동일 모델 다른 컬러를 보여주는 방법 





리스트와 상세화면은 커머스에서 우리가 가장 많이 오가는 화면입니다. 리스트를 통해 기본적인 탐색을 하다가 자세히 보고 싶은 제품이 있다면 선택 후 상세화면으로 이동하게 되고, 장바구니에 담거나 결제를 하는 등의 행동 아니면 다시 이전 리스트로 돌아오는 경우가 많기 때문입니다.


이런 이동이 이제 많이 익숙해졌지만, 오가는 불편을 해결하기 위해 서비스들은 여러 노력을 기울이고 있는데요. 대표적인 방법이 동일한 제품일 경우 다른 옵션을 상세화면에서 바로 확인할 수 있도록 제공하는 것입니다. 나이키 역시 같은 맥락의 구성을 활용하는데요. 상세화면 진입 시, 선택한 제품(모델)의 이미지를 자세히 볼 수 있으며 바로 아래로 같은 모델 다른 컬러 제품의 썸네일을 제공합니다.


덕분에 탭 한 번으로 다른 컬러 제품은 어떤지 확인할 수 있어요. 패션 카테고리의 경우 무엇보다 제품의 이미지가 중요하고, 사이즈 등은 필터를 활용하거나 최초 입력된 정보를 바탕으로 리스트를 제공하는 경우가 많아 동일 모델의 여러 이미지를 빠르게 확인할 수 있도록 구성한 모습입니다.


또 하나 눈에 띄는 건, 캡처를 권한과 특정 기능으로 연결하는 방법입니다. 나이키 앱에서 캡처를 하면 사진 관련 권한을 요청하며, 수락 시 캡처와 동시에 갤러리 등으로 이동하지 않고도 바로 공유할 수 있는 기능을 활용할 수 있습니다. 권한 설정 시, 왜 필요한지에 대한 간략한 안내가 포함되고, 설정 시 바로 관련 기능(공유하기 및 찜하기)을 사용할 수 있도록 연결된 모습입니다.  




2. 네이버 나우가 연관 콘텐츠를 세 가지로 구분한 이유 





네이버 나우에서 영상 상세화면으로 들어가면 기존에는 ‘추천 영상’ 리스트를 살펴볼 수 있었어요. ‘추천’이라는 이름도, 상세화면 하단으로 쭉 이어지는 리스트도 익숙한 구성이라고 볼 수 있는데요. 이 구성이 얼마전 변경되었습니다.


가장 큰 변화는 리스트가 추가되었다는 점입니다. ‘추천 영상’ 하나로 제공된 내용이 ‘영상과 비슷한’, ‘인기 급상승’, ‘최근 시청’ 등 세 가지로 나뉜 모습이에요. 그중 기본은 ‘영상과 비슷한’ 리스트입니다. 추천 영상과 크게 다르지 않은데 표현 방식에 차이가 있는데요.


추천의 경우 리스트를 쭉 보다 이 영상이 왜 있지?라는 생각을 할 때가 있는데, 이는 추천 기준을 잘 모르는 상태에서 발생할 수 있어요. 그런데 ‘비슷한’이라는 표현을 활용하니 그 의미가 더 명확하게 다가옵니다. 추천은 서비스의 더 적극적인 ‘개입’의 의미가 포함되어 있기도 하고요.


지금 보고 있는 콘텐츠와 유사한 것과 이미 본 영상이 하나의 기준이고 또 하나 눈에 띄는 건 많은 사람들이 보고 있는 ‘인기 급상승’ 리스트입니다. 호기심으로 접근하기 좋고, 재생 후 영상이 마음에 들지 않을 경우에는 앞선 탐색을 다시 하기 귀찮거나, 비슷한 영상 역시 흥미를 느끼지 못할 가능성이 있기 때문입니다.


‘비슷한’이라는 표현을 사용하는 곳 중 ‘티빙’도 있는데요. 티빙은 상세화면에 세 가지 연관 콘텐츠 묶음을 제공하고 있는데, 첫 번째가 바로 ‘비슷한 콘텐츠’입니다. (자세히 보기)  




3. 프로덕트헌트가 유사 서비스를 보여주는 방법 





프로덕트헌트는 전 세계 다양한 서비스(툴)를 만나볼 수 있는 곳입니다. 국내에는 디스콰이엇이 유사한 서비스이자 커뮤니티로 알려져 있는데요. 저 역시 매일 업데이트(소개)되는 여러 서비스와 소식을 접하고자 안드로이드 앱을 기준으로 사용하고 있는 공간입니다.


프로덕트 헌트의 홈화면은 하루를 기준으로 인기가 많은(업보트를 많이 받은) 서비스 리스트로 구성되어 있는데요. 리스트에서 특정 서비스를 선택해 상세화면에 들어갔다가, 다시 리스트로 돌아오면 유사한 서비스를 추천해주는 방법을 활용하고 있습니다.


‘컬러 관련 서비스’를 봤다면, 동일 카테고리의 서비스 3개를 방금 봤던 서비스 아래로 보여주는 방법입니다. 다크모드 상태에서 캡처를 해 아주 잘 보이진 않지만 별도 배경과 타이틀이 적용되어 있으며, 리스트로 돌아오는 순간에 생성되어 내용을 바로 확인할 수 있습니다.


물론 상세화면에도 유사 서비스 확인이 가능하지만, 전체 내용을 보지 않고 리스트로 돌아온 경우 다시 한번 안내하는 역할을 하지 않을까 싶어요. 특정 카테고리의 서비스를 탐색하고 있다는 것을 상세화면 진입을 기준으로 잡고, 계속해서 유사 서비스를 확인할 수 있는 기회로 활용할 수 있는 방법이라고 생각합니다.  




4. 카카오T가 여행화면을 개선한 이유 





카카오T는 홈화면을 기준으로 ‘마이카’와 ‘여행’화면을 함께 활용하고 있습니다. 기존에는 홈 화면 내 ‘이동’과 관련된 여러 서비스를 한 번에 제공하고 있었는데, 2021년 여름 업데이트를 통해 홈 / 마이카 / 여행 등 사용 성격에 따라 탭이 생겼습니다. 카카오T는 택시 호출 서비스로 시작해 이동에 관한 서비스를 하나씩 추가, 확장했어요. 바이크, 대리, 주차, 셔틀은 물론 이제는 기차와 항공권, 기차 예약까지 가능합니다. 서비스가 계속 추가 되다 보니 홈 화면에서 확인, 선택할 수 있는 대상 역시 많아질 수 밖에 없었는데요. 이번 업데이트를 통해 사용 성격에 따라 내용을 확인하고 서비스를 이용할 수 있게 되었습니다. 이후 확장 역시 탭에 따라 상대적으로 쉽게 진행될 수 있는 여지가 생겼고요. (카카오T 홈화면 개편 자세히 보기)


위의 내용은 벌써 1년 반 전의 업데이트 내용인데요. 이후에도 카카오T는 세 가지 화면을 성격에 따라 개선해왔고 이번에는 ‘여행’화면 내 변화가 있었습니다. 기존에는 여행 화면 내 항공, 차량호출, 괌택시, 시티투어 등 13개 주요 서비스가 숏컷 형태로 제공되었어요. 업데이트 후에는 ‘어디에서’ 사용할 수 있는지를 기준으로 해외와 국내 등 크게 두 가지로 구분되었습니다.


이는 구체적인 기능을 선택한 뒤에야 사용 지역 등을 확인할 수 있다는 불편을 줄이기 위한 방법이라고 생각합니다. 예를 들어 ‘셔틀 버스’는 국내 주요 도시를 기준으로 예약하게 되는데 기존 화면에서는 시티투어를 선택해야 국내만 대상으로 한다는 사실을 알 수 있었습니다. 이제는 해외/국내 등을 먼저 확인한 뒤 특정 기능(서비스)으로 이동할 수 있어 목적에 따라 더 명확한 사용이 가능하지 않을까 싶네요.


여행을 기준으로 어떤 서비스가 있고, 내게 맞는건 뭐지?라는 질문에 대한 답을 더 빠르게 찾을 수 있다는 점도 현재 화면이 지닌 장점입니다. 기존에도 숏컷 우측 상단에 ‘해외’등의 안내를 제공했지만, 빠르게 확인할 수 없다는 아쉬움이 있었고, 이동을 다루는 서비스 특성 상 숏컷이 비슷하게 디자인 되어 각 기능을 구분하기 어렵다는 아쉬움이 있었는데요. 13개 이상의 내용 중 하나를 선택하는 것이 아닌, 해외와 국내로 구분된 선택지 중 하나를 선택할 수 있게 되어 구분이 훨씬 편리해진 모습입니다.  




한성규님의  ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한 번 더 소개합니다.  





매거진의 이전글 서비스 기획자, UX에 매몰되지 않기를
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari