배지 · 칩Badge · Chip

옷에 다는 배지처럼 짧은 정보를 붙여 두는 것입니다. 글자 한두 단어나 숫자 하나가 들어가고, 색으로 뜻을 나눕니다. 이 사이트의 관리자 화면 상태 표시·가격표의 "추천" 표시가 배지입니다.

언제 쓰나요

상태·분류·개수를 본문과 구분해서 한눈에 보여줄 때 씁니다. 결제 상태(완료·대기·실패), 글 분류(튜토리얼·사례), 읽지 않은 알림 수. 색은 의미와 짝을 맞춥니다. 초록은 성공, 노랑은 주의, 빨강은 오류·위험, 회색은 중립.

배지가 한 화면에 열 개를 넘어가면 아무것도 눈에 안 띕니다. 강조는 하나둘만. 색만으로 뜻을 전하지 말고 글자도 같이 둡니다. 색을 구분 못 하는 사용자도 있습니다.

AI에게 시키기

주문 목록의 상태 칸을 배지로 바꿔줘.
- 상태별 색: 완료=초록, 배송 중=파랑, 대기=회색, 취소=빨강. 배경은 연하게, 글자는 진하게
- 알약 모양, 글자 12px, 상태 이름을 반드시 텍스트로 (색만으로 구분하지 않게)
- 필터 영역에서 고른 조건은 x 버튼이 있는 칩으로 보여주고, 누르면 그 조건이 해제되게

"상태 표시해줘"라고 하면 글자 색만 바꿉니다. 배지라는 이름과 색 규칙, 그리고 텍스트 병기를 적어야 합니다.

혼동 주의

• 칩(Chip): 모양은 배지와 같지만 누를 수 있습니다. 필터에서 조건을 고르거나 x로 지우는 것이 칩입니다. 배지는 읽기만 합니다.
• 버튼: 칩과 헷갈리기 쉽습니다. 칩은 선택·해제 상태를 가진 작은 토글, 버튼은 동작을 실행합니다.
• 툴팁: 배지는 항상 보이고, 툴팁은 올렸을 때만 보입니다.
• 알림 점(Notification Dot): 숫자 없이 빨간 점만 찍는 것도 배지의 한 형태입니다. "새것이 있다"만 알릴 때 씁니다.