Badges
Components
Badge는 카운터 기능이 있는 Basic badge, 사용자의 액션에 따른 수정된 사항이 적용되었다는 표식인 Customized badge, 그리고 새로운 기능이나 섹션이 추가되었다는 표식의 Dot badge가 있습니다.
- A
- B
- C
Basic badge
Basic badge는 정보의 개수를 강조하기 위해 사용합니다. 장바구니 아이템 개수, 알림 개수 등 개수에 대한 표시가 필요한 경우에 활용되고 있으며 중요도에 맞게 CTA / Primary 컬러를 사용합니다.
Anatomy
Variants
Unit
1의 자리, 10의 자리+ 에 따라 형상이 다릅니다. 일의 자리의 경우 16 x 16의 정원형 내 중앙에 위치하며, 십의 자리+의 경우 좌우 4의 패딩을 가집니다.
Color
버튼의 정의와 동일하게 CTA 컬러는 이커머스에서 중요하게 여기는 동선(장바구니/쇼핑 알림)에 한해 사용되고 그 외 페이지 내에서 주요하게 쓰이는 요소에는 primary 컬러로 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Unit | 1unit, 10unit | 1unit |
| Color | CTA, Primary | CTA |
Usage Guidelines
Do : Basic badge 스마일 컬러 색상은 마이 페이지 한정 사용
일반적으로 그 중요성에 따라 CTA / Primary 컬러를 활용하지만, 마이 페이지에 한정하여 스마일클럽 회원이 가진 쿠폰 개수에 차별성을 두기 위해 스마일 컬러를 사용합니다.
Don’t : Basic badge 스마일 컬러 색상은 마이 페이지외 사용 금지
일반적으로 그 중요성에 따라 CTA / Primary 컬러를 활용하지만, 마이 페이지에 한정하여 스마일클럽 회원이 가진 쿠폰 개수에 차별성을 두기 위해 스마일 컬러를 사용합니다.
Do : 카운팅 개수가 없는 경우 뱃지 비노출
카운팅 개수가 없는경우 사용자에게 혼란을 주지 않고 직관적으로 빈 상태를 보여주기 위해 비노출 처리합니다.
Don’t : 카운팅 개수가 없는 경우, basic badge내 0으로 노출 금지
카운팅 개수가 없는경우 사용자에게 혼란을 주지 않고 직관적으로 빈 상태를 보여주기 위해 비노출 처리합니다.
Spec
Position - navigation icon
네비게이션에 사용되는 아이콘에 따라 위치가 상이합니다. 장바구니 아이콘의 경우 1의 자리는 우측에 2의 패딩을 갖고, 10의 자리는 우측 8의 패딩을 갖습니다. 알림 아이콘의 경우 1의 자리는 상/우의 패딩 없이 사용하며, 10의 자리의 경우 우측 8의 패딩을 갖습니다.
Position - button
버튼과 함께 사용하는 경우, 1의 자리 & 10의 자리 모두 상/우 6의 패딩을 갖습니다.
Interaction Area
장바구니 담기 인터랙션은 Lottie 파일로 화면 중앙에 0.2초간 진행되며 그 이후 사이즈 다운과 함께 헤더 내 badge 위치로 이동합니다. 장바구니 badge 내 숫자 카운팅이 이뤄집니다.
Customized badge
Customized badge는 해당 영역이 나의 관심사/ 쿠폰 등 적용에 의해 정보 변동이 일어났을때 알려주기 위한 요소로 사용됩니다.
Anatomy
Usage Guidelines
Do : 필터 기능이 있는 버튼에만 Customized badge를 사용
필터 기능이 있는 버튼에만 활용해야 하며, 또한 적용이 됐다는 것은 상태 값이 active 된 상태이므로 green-600을 사용해야 합니다.
Don’t : 단순 수식요소로 활용하지 않음
꾸밈 요소가 아니므로 필터 기능 이외의 버튼에는 활용하지 않습니다.
Spec
Position
G마켓 내 Customized badge는 적용되었다는 인지를 주기 위해 사용합니다. 현재는 장바구니 내 쿠폰 적용 시에만 활용되며, 해당 버튼 기능이 활성화되었기에 버튼 컬러는 active 상태인 green-600컬러, 버튼 상단/우측에 패딩 6을 두고 위치시킵니다.
Dot badge
Dot badge는 해당 영역이 새로운 정보가 포함된다는 알림이 필요할 경우 사용합니다.
Usage Guidelines
Do : 단발성의 기획전인 경우 사용자가 확인 시 미노출
단발성이 있는 배너 기획전 등 쉽게 생성되고 사라지는 영역에 활용할 경우 한번 클릭 이후에는 사라집니다.
Do : 신규 서비스 런칭시 일련의 홍보로 일정 기간 노출
서비스단 런칭시 일련의 홍보로 봐서 해당 서비스 진입 이후에도 일정 기간 노출됩니다.
Anatomy
Spec
Position with text
텍스트 박스 우측 상단에 여백 없이 위치시킵니다.
Position with button
버튼 우측 상단에 우측 상단에 2의 패딩을 갖습니다.
Position with circle
원 호에 맞춰 우측 상단에 위치시킵니다.
