uiux·발행 2026.07.22
Badge, Banner, Alert, 알림 컴포넌트 3종
알림의 강도에 따른 3가지 패턴을 정리합니다. Badge(작음), Banner(중간), Alert(강함)의 사용처와 강도 위계를 함께 살펴봅니다.
한 줄로
알림의 강도에 따른 3가지 패턴입니다. Badge (작음, 정보), Banner (중간, 안내), Alert (강함, 경보).
Badge
군대 계급장에서 유래했습니다. 작은 동그라미·숫자로 항목 옆에 붙습니다.
- 아이콘에 "3" 같은 숫자.
- 메뉴 옆 "NEW" 라벨.
- 미세하지만 발견 가능.
사용처: 읽지 않은 메시지 수, 새 기능 강조.
Banner
신문 광고의 헤더에서 왔습니다. 화면 상단의 가로 띠입니다.
- 페이지 상단에 고정.
- 닫기 버튼 있음.
- 정보·경고·프로모션.
사용처: 쿠키 동의, 사이트 점검 안내, 약관 변경.
Alert
시스템 경보음에서 왔습니다. 사용자의 강한 주의가 필요한 모달 형태입니다.
- 보통 빨간색.
- 명시적 응답 필요.
- 흐름을 막음.
사용처: 결제 실패, 데이터 손실 위험, 보안 경고.
강도 위계
| 컴포넌트 | 시각적 무게 | 사용자 흐름 |
|---|---|---|
| Toast | 약함 | 안 막음 |
| Badge | 약함 | 안 막음 |
| Banner | 중간 | 안 막지만 닫아야 함 |
| Snackbar | 중간 | 안 막지만 액션 가능 |
| Alert | 강함 | 막음 |
| Modal | 강함 | 막음 |
바이브 메이커가 챙길 한 가지
알림은 강도에 맞춰 사용합니다. 사소한 정보를 Alert로 표시하면 사용자는 모든 alert를 무시하기 시작합니다. "늑대다"를 너무 자주 외치지 마세요.
관련
Notification · Toast · Modal
#UI/UX#용어사전#Badge#Banner#Alert#알림#어원
Comments
댓글 0
로그인 상태 확인 중…
댓글 불러오는 중…