주니어 디자이너를 위한 UI 컴포넌트 설명서 [뱃지&칩편]

안녕하세요 여러분, 피피팀 시원🌊입니다.

이번 주에는 실무에서 자주 마주치지만 자주 헷갈리는 UI 컴포넌트, 뱃지(Badge)와 칩(Chip)의 차이를 정리해보려고 해요. 비슷해 보이지만 구성과 역할, 사용 맥락에서 제법 차이가 있답니다.

✔️ Badge (뱃지) 뱃지는 상태나 수치를 간결하게 전달하는 작은 UI 요소예요. 알림 개수, 상태 표시처럼 눈에 띄게 정보를 강조할 때 사용돼요. 보통 인터랙션 없이 읽는 용도로만 쓰이고, 다른 컴포넌트에 부착되어 함께 움직이는 경우가 많아요. ex. 알림 아이콘 옆 숫자, 상품 상태 표시 등

✔️ Chip (칩) 칩은 정보를 분류하거나 사용자 선택을 보여주는 데 쓰이는 컴포넌트예요. 텍스트나 아이콘으로 정보를 담고 있고, 클릭하거나 삭제할 수 있는 인터랙션을 포함하는 경우도 많아요. ex. 선택된 필터, 관심사 태그, 사용자 목록 등

👉 요약하자면, 뱃지는 ‘읽기 전용’의 정보를 작고 눈에 띄게 전달하는 용도, 칩은 ‘상호작용 가능한’ 정보를 덩어리로 표현하고 선택하거나 제거할 수 있는 용도예요.

둘 다 작고 간결한 UI 컴포넌트이지만, 기능과 목적이 다르기 때문에 상황에 맞게 구분해서 사용하는 게 중요하겠죠?

오늘도 다들 화이팅하세요! :)