안녕하세요 여러분, 피피팀 시원
입니다.
입니다.이번 주에는 실무에서 자주 마주치지만 자주 헷갈리는 UI 컴포넌트, 뱃지(Badge)와 칩(Chip)의 차이를 정리해보려고 해요.
비슷해 보이지만 구성과 역할, 사용 맥락에서 제법 차이가 있답니다.
Badge (뱃지)
뱃지는 상태나 수치를 간결하게 전달하는 작은 UI 요소예요.
알림 개수, 상태 표시처럼 눈에 띄게 정보를 강조할 때 사용돼요.
보통 인터랙션 없이 읽는 용도로만 쓰이고, 다른 컴포넌트에 부착되어 함께 움직이는 경우가 많아요.
ex. 알림 아이콘 옆 숫자, 상품 상태 표시 등 Chip (칩)
칩은 정보를 분류하거나 사용자 선택을 보여주는 데 쓰이는 컴포넌트예요.
텍스트나 아이콘으로 정보를 담고 있고, 클릭하거나 삭제할 수 있는 인터랙션을 포함하는 경우도 많아요.
ex. 선택된 필터, 관심사 태그, 사용자 목록 등 요약하자면,
뱃지는 ‘읽기 전용’의 정보를 작고 눈에 띄게 전달하는 용도,
칩은 ‘상호작용 가능한’ 정보를 덩어리로 표현하고 선택하거나 제거할 수 있는 용도예요.둘 다 작고 간결한 UI 컴포넌트이지만, 기능과 목적이 다르기 때문에 상황에 맞게 구분해서 사용하는 게 중요하겠죠?
오늘도 다들 화이팅하세요! :)
