#
서비스 기획
2022-12-21

당근마켓과 마켓컬리로 알아보는 내비게이션 바의 역할

최근에 만들어진 UX/UI가 잘 고려된 앱에 접속해보면, 상단 혹은 하단에 '내비게이션 바'가 있는 것을 볼 수 있습니다.

오늘은 이 내비게이션 바에 대한 이야기를 해보려고 합니다.

내비게이션 바란?

웹사이트/앱을  방문한 사용자의 이동 경로를, 하이퍼링크 형태로 모아서 보여주는 내비게이션 시스템입니다.

내비게이션 바는 화면의 상단에 위치하는 경우도 있고, 하단에 위치한 경우도 있어요.

어떨 때 어느 위치에 있는지 당근마켓과 마켓컬리의 사례를 보면서 알아보겠습니다.

당근마켓과 마켓컬리의 내비게이션 바

첫번째 이미지는 당근마켓의 홈화면입니다. 화면 최하단부를 보시면

'홈', '동네생활' '내 근처'. '채팅', '나의 당근'이라는 5개의 기능을 담은 내비게이션 바를 확인할 수 있습니다.

화면 하단에 위치한 내비게이션 바는 보통 어떤 화면으로 이동하더라도 고정적으로 위치하고 있습니다.

1~3번 이미지에서 모두 하단에 동일한 내비게이션 바가 있는 것을 볼 수 있습니다.

앱의 1depth가 되는 가장 중요한 카테고리를 하단 내비게이션 바에 배치하는 경우가 많습니다.

두번째, 세번째 화면은 동네생활과 내 근처 화면입니다.

'같이해요', '동네소식', '동네질문', '동네맛집'과 같은 내비게이션 바가 화면 상단에 위치한 것을 확인할 수 있습니다.

하지만 이 내비게이션 바는 동네 생활의 2depth에 해당하는 메뉴들이기 때문에 해당 페이지에서만 확인할 수 있습니다.

이러한 내비게이션 바는 주로 상단에 위치하고 있는 경우가 많아요. 위계의 차이를 주며 고객들의 이해를 높일 수 있습니다.

마켓컬리 역시 하단 네비게이션 바가 '홈', '카테고리', '검색', '마이페이지'로 구성된 것을 볼 수 있습니다.

상단에는 각 페이지에 해당하는 쇼핑 카테고리를 나열하여 페이지마다 다른 카테고리로 구성되어있습니다.

상단에 선택된 카테고리에 해당하는 상품이 하단에 나열되는 방식을 이루고 있죠.

당근마켓과 마켓컬리를 통해 내비게이션 바의 위치별 역할에 대해서 살펴보았어요.

이렇게 함께 놓고 비교를 하다보니 차이점도 보이는데요,

당근마켓과는 달리 텍스트를 넣지 않고 아이콘만으로 내비게이션 바를 구상한 게 차이점이라고 볼 수 있겠네요.

실제로 당근마켓은 텍스트와 이모티콘 또는 아이콘을 혼용하여 사용하는 경우가 많아 친숙한 이미지를 주는 데에 비해,

마켓컬리는 아이콘이 있다면 텍스트가 없고, 텍스트로 구성되어있다면 부가적인 아이콘 사용은 자제하여 깔끔하고 정갈한 이미지를 주고 있습니다.

디자인적 요소이지만, 기획자도 이런 구성을 알아놓는다면 우리의 메인타겟에 맞는 기획을 할 수 있겠죠?

유익했다면! 이어서 읽어보기:)
Screen Flow Chart 작성 시에 유의할 점!

스크린 플로우 차트를 잘그리려면 어떤걸 유의해야 할까요?

일런머스크가 보낸 '생산성을 위한 6가지 업무 규칙"

일런 머스크의 6가지 업무 규칙은 무엇이 있을까요?

'맞춤형 검색'

맞춤형 검색에 대해서

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.