[제로베이스 UIUX스쿨] 5주차_4

당근마켓의 클론디자인을 진행하고 각 UI가 필요한 이유를 10가지 이상 작성해야하는 5주차 과제!

당근마켓의 UI를 촘촘하게 뜯어볼 수 있었던 기회였다. 이 참에 레퍼런스 분석도 당근마켓으로 해볼까 생각중이다.🤨

하나하나 보면 정말 뜯어볼 게 많았지만 .. 마켓컬리와 무신사도 있으니 요종도만 ㅎㅎ

클론디자인은 생각보다 쉽지만서도 어려웠는데 다음차 과제때는 대충이라도 디자인시스템을 잡고 들어가야할 거 같다.

이번에는 엉망진창쓰 .ㅎ.ㅎ

1.Tab bar: 하단 내비게이션 탭 바에 앱의 가장 중요한 기능을 담는다.
당근마켓은 가장 중요한 홈, 동네생활, 내 근처, 채팅, 나의 당근 
이렇게 5가지의 기능을 직관적인 아이콘과 함께 배치했다.

 

2.FAB: 메뉴 바 밖의 컨텐츠 화면 위에 떠다니는 액션 버튼.
플로팅 버튼은 앱의 핵심기능과 관련 있는 때에 사용하거나 사용자가 많이 쓰길 바라는 기능에 주로 사용한다.
당근마켓은 동네홍보와 중고거래를 넣어 2가지 기능이 많이 쓰이고자했다.

 

3.상품 이미지 모듈: 상품의 이미지를 볼 수 있는 영역이다.
당근마켓의 경우 네비게이션 바까지 확장한 상품 이미지 모듈을 확인할 수 있었다.

 

4.이미지 갯수: 투명도가 적용된 작은 원형으로 사진의 갯수를 알려주고 있다.

 

5.CTA버튼: Call to action 이라는 이름에서 알 수 있듯, 어떤 화면의 목적을 달성하도록 사용자의 행동을 유도하는 버튼이다.
사용자간의 채팅을 유도하고 있다.

 

6.케밥 메뉴: 케밥 메뉴는 점들이 세로로 정렬되어 있는데, 옵션 등을 담는데 사용된다.
당근마켓의 케밥 메뉴에서는 해당 대화의 알림설정, 차단, 신고, 채팅방 나가기가 가능하다.

 

7.뱃지: 확인해야 할 새로운 것이 있음을 알려주는 역할이다.

 

8.GNB: Global navigation bar의 약자로 서비스 최상의 전체 공통 네비게이션이다.

대부분 상단에 위치하며 당근마켓에선 위치를 알려주거나 사용자가 있는 페이지를 알려준다.

 

9.Tag: 당근 마켓에서는 연관 태그를 사용하여 리스트나 이미지 등의 컴포넌트와 함께 활용되어
해당 컴포넌트의 부가 정보를 나타내는 동시에 클릭을 통해 연관 콘텐츠에 빠르게 접근할 수 있도록 돕는다.

 

10.텍스트 인풋 필드: 텍스를 입력할 수 있는 영역이다. 중고거래를 원하는 사용자와 대화를 나눌 수 있는 핵심 기능이다.

 

 

11.카드 캐루셀: 하나의 화면에서 두 개 이상의 콘텐츠를 보여주는 방식으로 콘텐츠를 나열해서 보여줄 때에 주로 사용한다.
당근마켓은 카드 형식의 캐루셀과 버튼을 함께 사용하여 쿠폰북의 역할을 나타낸다.

 

12.아이콘: 아이콘은 사용자에게 직관적으로 정보를 전달하기 위해 사용되는 간단한 이미지를 말한다.
당근마켓의 아이콘은 직관적인 형태로 컨텐츠를 더 잘 전달하는데 도움이 되거나 특정 작업을 실행하고 전달할 수 있다.