📍 카카오맵이 장소 상세화면을 개선한 이유는?

📮 업데이트 소식의 '다음'에 대한 의견을 남겨주세요!

9월 중, 업데이트 소식 뉴스레터에 많은 변화가 있을 예정이에요. 더 나은 모습으로 구독자 분들을 만날 수 있도록 잠시만 시간을 내 의견을 남겨주세요! 열 분을 추첨해 3분에게는 '10년차 IT 기획자의 노트 - 전자책'을, 7분에게는 커피 쿠폰을 선물로 드려요! 

참여하고 선물받기

👀 오늘 소개할 서비스와 기능

1. 카카오맵 장소 상세

카카오맵에서 장소 검색 시 보이는 장소 상세 영역이 개편되었어요. 전반적인 디자인 개선으로 시인성이 높아졌고, 필요한 정보를 쉽고 빠르게 확인할 수 있도록 편의성도 좋아졌는데요. 어떤 변화가 있을지 함께 살펴볼게요.

(1) 장소를 검색하면 하단에 바텀 팝업이 노출되는데요, 업데이트 전에는 좁은 영역에 많은 정보를 넣으려 하다 보니 시인성이 좋지 못했고, 전체 영역 대비 아이콘이 차지하는 영역도 넓었어요. 업데이트 후에는 이러한 점을 보완하기 위해 바텀 팝업 영역을 넓게 잡았고, 각각의 정보들을 적절히 위치시켜 업데이트 전과 동일한 내용임에도 훨씬 눈에 잘 들어오는 걸 확인할 수 있어요.

기능 아이콘도 동일선상에 위치시켜 보기 좋게 하였고, 관련 사진을 일부 보여주어 지루함을 없앴어요. 주유소 검색 시, 업데이트 전에는 스크롤해야만 보이던 가격 정보를 바텀 팝업에서 한눈에 볼 수 있도록 표 형태로 노출하고 있어 더욱 편리해졌답니다.

(2) 업데이트 전에는 지도상에 단순히 핀 모양으로 위치를 표시했었는데요, 업데이트 후에는 식당/카페의 경우 평점을 노출, 주유소는 가격을 노출하여 검색 목적에 따라 사용자들이 가장 알고 싶은 정보인 평점과 가격을 바텀 팝업을 보지 않더라도 지도상에서 확인할 수 있도록 제공하고 있어요.

(3) 정보 상세 TAB 구조에도 변화가 있어요. 업데이트 전에는 랭킹, 후기 순으로 노출되었는데 업데이트 후에는 후기, 랭킹 순으로 순서가 변경되었어요. 아마 랭킹보다는 후기 클릭률이 더 높기 때문이지 않을까 싶어요.

(4) 후기 TAB이 우선순위가 높아지면서 UI에도 변화가 있었는데요. 업데이트 전에는 추천 포인트를 숫자로만 노출하던 형태에서 그래프 형태로 변경하여 한눈에 추천 포인트를 확인할 수 있어요.

(5) 또한 길 찾기, 공유, 저장 등의 기능이 하단 바로 고정되어 있어 스크롤을 내려도 언제든 손쉽게 접근할 수 있도록 편의성이 개선되었습니다.

1-1. 구글맵, 우리동네GS, 에어비앤비

이번 카카오맵 업데이트에서 가장 인상적이었던 부분은 평점, 유가, 전기차 충전 현황 등을 지도상에 핀으로 나타낸 부분인데요. 이러한 UI를 활용한 다른 앱을 살펴봤어요.

구글맵은 카카오맵과 동일하게 지도상에 평점을 함께 보여주고 있어요. 특히 해외여행을 갔을 때 구글맵의 평점을 보고 식당을 찾는 경우가 많은데요, 카카오맵도 구글맵을 참고하여 업데이트에 반영한 것이 아닌가 싶어요.

우리 동네 GS에서는 편의점 재고를 찾는 기능이 있는데요. 원하는 상품을 검색하면, 내가 원하는 위치에 있는 편의점의 상품 재고 수를 ‘N개’ 형태로 보여주고 있어요. 에어비앤비 또한 원하는 장소를 입력하면 지도상에 가격을 함께 보여주고 있고요.

식당/카페에서 맛있는 음식을 먹고자 하는 사용자에게는 높은 평점이, 편의점에서 원하는 상품을 구매하고자 하는 사용자에게는 재고 수가, 가성비 좋은 숙소를 원하는 사용자에게는 합리적인 가격이 중요하기에 각각의 앱에서는 이러한 니즈를 고려하여 지도상에 가장 먼저 노출하고 있는 것으로 보여요.

1-2. 함께 읽어볼만한 글

2. 네이버 : 올림픽 메달 순위 (리스트)

이번주 일요일이 되면, 3년 만에 개최된 파리 올림픽이 마무리되는데요. 오늘은 올림픽 관련 페이지를 네이버와 다음 그리고 네이트가 어떻게 구성하고 있는지 살펴보려 해요. 선거 때만큼 보여줄 정보와 표현 방법이 다양한 상황에서 각 서비스는 정보를 어떻게 보여주고, 사용자에게 어떤 행동을 바라는지 확인해 보세요!

뒤에서 같이 살펴볼 예정이지만, 세 서비스 모두 대한민국이 획득한 메달과 순위를 먼저 보여준 뒤 국가별 메달 현황을 제공하고 있어요. (1) 네이버는 대한민국의 메달 종목을 미리 펼쳐서 보여주고 있는데, 덕분에 전체 메달 수와 어떤 종목에서 어떤 메달을 획득했는지 빠르게 확인할 수 있어요. 또 각 종목을 의미하는 픽토그램을 맨 앞에 적용해 종목 간 구분도 쉬워요.

(2) 이어서 메달리스트는 최신순을 기본으로 선수, 종목, 메달 정보가 포함되어 있는데, 선수를 선택하면 (3) 메달을 획득한 경기 정보와 영상, 응원과 오픈톡 등 선수와 관련된 다양한 기능을 활용할 수 있죠. 정리해 보면 네이버는 메달 현황 - 메달리스트 - 선수 정보로 이어지는 흐름을 갖고 있으며, 응원이나 오픈톡 등을 핵심 기능으로 활용하는 모습이네요.

2-1. 네이트, 다음

(1) 네이트도 네이버와 같이 메달순위 - 대한민국의 정보를 미리 펼쳐 보여줘요. 네이트는 종목에 대한 정보를 텍스트로만 구분해 놨는데, 네이버가 픽토그램을 적용한 것과 다른 모습이죠. 메달 현황 하단에는 메달리스트 보기 버튼이 적용되어 있어, 상단 탭으로 이동하지 않고도 최신순에 따른 정보를 빠르게 확인할 수 있어요.

(2) 한 가지 눈에 띄는 건, 메달리스트를 선수에 초점을 맞추는 것이 아니라 뉴스를 보여준다는 점인데요. 상세 정보를 확인할 수 있다는 점에서는 좋지만, 선수에 대한 정보를 확인할 수 없다는 점은 아쉬웠어요.

다음은 (1) 대한민국의 메달 현황을 사용자가 직접 펼쳐서 확인하는 방법을 활용하고 있어요. (2) 펼치면 각 종목별 링크가 적용되어 있는데요. 처음 기대는 종목별 메달리스트를 확인할 수 있겠구나- 였는데, (3) 실제로는 전체 메달리스트 화면으로의 이동이었어요.

(3) 메달리스트 화면은 최근에 메달을 획득한 선수를 기준으로 전체 리스트를 볼 수 있으며 응원하기에 집중하기 위해 별도의 상세 페이지는 제공하지 않아요. 정리해 보면 다음은 메달 순위 - 메달리스트 - 응원하기의 흐름을 갖고 있으며, 응원하기 외 기능은 활용하지 않는 모습이네요. 아무래도 카페 등에서도 응원하기를 활용하고 있고, 익숙하게 느낄 가능성이 높다는 판단이 적용된 것으로 보여요.

또 하나 비교해 보면 좋은 건, 오늘의 경기 일정인데요. (1) 네이버는 첫 경기를 먼저 보여주고 하단 ‘NOW’ 버튼을 통해 현재 진행 중인 경기로 이동할 수 있어요. (2) 다음 역시 같은 방법을 활용하는데, 문구가 ‘진행 중인 경기’로 적용되어 있죠. (3) 네이트는 아예 현재 진행 중인 경기를 먼저 보여주고 있어요.

2-2. 함께 읽어볼만한 글

3. 우리의식탁 검색

우리의식탁은 200만 유저가 사용 중인 요리 레시피 앱인데요. 최근 AI 기능을 통해 냉장고 속 재료로 요리 레시피를 추천해 주는 기능을 도입하기도 했었는데, 이번 업데이트에서 검색 필터 기능이 개선되어 전반적인 검색 기능이 어떻게 달라졌는지 함께 살펴보고자 해요.

(1) 검색 진입 화면부터 살펴보겠습니다. 최근 검색어, 인기검색어, 추천 검색어에 대한 기능을 제공 중인데요. 특정 상품을 추천하기보다는 ‘키워드’ 중심으로 사용자에게 보여주고 있는 점이 눈에 띄어요. 텍스트의 경우 정해진 크기의 화면 내에서 여러 내용을 담을 수 있다는 장점이 있지만 사용자가 모든 내용을 확인하고 인지하는 데에 시간이 필요하기 때문에 각 기능별 텍스트를 다른 UI로 보여주거나 이미지를 섞어 노출한다면 이런 부분도 보완될 수 있을 것 같아요.

(2) 다음은 검색 결과 화면인데요. 우리의식탁 앱 내에서 제공 중인 레시피, 키친가이드, 상품, 스타일 서비스를 탭 형식으로 구분해 보여주고 있어요. 레시피 탭에서 가장 눈에 띄었던 부분은 각 재료를 활용해 만들 수 있는 음식의 난이도와 조리 시간을 리스트 내에서 노출하고 있던 점인데요. 음식을 조리할 때 조리 난이도나 시간 등 중요 정보를 리스트 내 배치해 사용자가 검색결과를 조회할 때해당 정보를 참고해 원하는 결과만 확인할 수 있도록 하고 있어요.

(3) 마지막으로 상품 탭인데요. 우리의식탁 서비스 내에서 여러 음식 레시피 정보도 확인할 수 있지만, 각 레시피에 쓰인 음식들을 직접 구매할 수 있도록 개별 상품도 앱 내에서 판매하고 있는데요. 상품 썸네일 내에 카운트다운 배지를 통해 특가 마감 정보를 노출해 사용자의 구매를 유도하고 있던 점이 가장 눈에 띄어요.

(1) 검색 진입 화면에선 ‘가장 인기 있는 상품’ 항목이 추가되었는데요. 기존엔 화면 내 여러 정보들을 텍스트 형식으로만 노출했던 부분을 보완해 인기 상품을 보여주고 있어요. 상품 정보로 이미지와 상품명 정도만 노출되고 있는 점은 다소 아쉽게 느껴졌는데요. 가격 정보나 장바구니 담기 등을 통해 사용자에게 구매 행동으로 이어질 수 있도록 유도하는 방식으로 제공되어도 좋을 것 같아요.

(2) 다음은 검색결과 화면인데요. 업데이트 전엔 각각 별개 탭으로 구분되어 특정 탭을 터치해서 확인하지 않을 경우 다른 탭을 브라우징 할 수 없는 구조로 제공되고 있었던 점을 보완해 전체 탭이 추가된 점이 인상적이었어요. 사용자가 검색한 검색어와 관련된 정보를 전체 탭 내에서 일부 정보를 먼저 확인할 수 있도록 구성해 계속해서 상품을 탐색할 수 있도록 유도하고 있는 점인 눈에 띄어요.

(3) 검색결과 화면에서 업데이트 후 크게 달라진 부분은 없었지만 필터명에 변화가 있었는데요. 업데이트 전 가격 낮은 순/높은 순 명칭이 업데이트 후 낮은/높은 가격순의 형태로 변경되어 사용자가 낮은/높은 등의 형용사만 보고 가격 정보 필터 기능을 유추해 사용할 수 있도록 한 점이 인상적이었어요.

3-1. 만개의 레시피, 컬리, 오아시스

(1) 만개의 레시피는 우리의식탁 서비스처럼 여러 음식 레시피를 등록하고 확인할 수 있는 서비스를 제공하고 있는데요. 사용자가 입력한 식재료로 만들 수 있는 메뉴를 검색결과 상단에서 추천키워드 형태로 제안해 주고 있어요. 검색결과 내에 보이는 메뉴들은 사용자가 직접 업로드한 레시피들인데, 다양한 레시피들이 여러 제목 형태로 노출되고 있어서 원하는 재료만 확인하기 어려운 점을 보완한 기능이라고 보입니다.

(2) 다음은 커머스 플랫폼의 검색결과 필터 사례를 살펴보겠습니다. 가장 먼저 컬리의 사례인데요. 어떤 식재료를 입력하냐에 따라 각각 다른 카테고리 필터로 추가검색할 수 있도록 제공하고 있던 점이 가장 인상적이었어요.

(3) 신선식품 새벽배송 플랫폼 오아시스의 경우에도 배송방법, 혜택정보, 특가유형 등에 따라 사용자가 원하는 필터로 검색할 수 있도록 구성해 두었는데요. 한 가지 아쉬웠던 부분은 배송방법에 대한 차이를 인지하기 어려웠던 점이에요. 오아시스의 배송방법 필터의 경우 새벽배송, 직영택배, 판매자택배 등으로 배송 방식이 다른데요. 사실 사용자의 입장에선 배송 방법에 대한 방식보다는 주문한 상품이 얼마나 빨리 오는지가 더 중요할 것 같아요. 때문에 각각이 어떻게 다른지 배송완료 기준으로 며칠 정도 소요되는 배송방법인지 등에 대한 안내가 필요해 보입니다.

3-2. 함께 읽어볼만한 글

🗞 서비스 소식 큐레이션

팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

멤버십 콘텐츠 중 '캠핑'편은 무료로 체험하실 수 있어요!