[Bootstrap] 06. 알림창(Alert), 배지(Badge), 진행바(Progress)

[Bootstrap] 06. 알림창(Alert), 배지(Badge), 진행바(Progress)

이전 글에서는 Bootstrap의 유틸리티 클래스를 사용해 여백, 정렬, 색상, 크기 등을 빠르게 조절하는 방법을 정리했습니다. 이번 글에서는 화면에서 상태나 정보를 표현할 때 자주 사용하는 알림창(Alert), 배지(Badge), 진행바(Progress)를 살펴보겠습니다.

이 세 가지 컴포넌트는 기능 자체가 복잡하지는 않지만, 사용자에게 현재 상태를 전달하는 데 매우 중요합니다. 성공, 경고, 오류, 진행률, 새 알림 개수 같은 정보를 시각적으로 표현할 때 자주 사용됩니다.

---

1. 알림창(Alert)이란?

Alert는 사용자에게 안내 메시지, 성공 메시지, 경고 메시지, 오류 메시지를 보여줄 때 사용하는 컴포넌트입니다. 예를 들어 로그인 실패, 저장 완료, 삭제 확인, 입력 오류 안내 등에 사용할 수 있습니다.

<div class="alert alert-primary" role="alert">
  기본 안내 메시지입니다.
</div>

<div class="alert alert-success" role="alert">
  저장이 완료되었습니다.
</div>

<div class="alert alert-danger" role="alert">
  오류가 발생했습니다.
</div>

Alert는 기본적으로 alert 클래스와 색상 의미를 나타내는 클래스를 함께 사용합니다.

클래스	주로 사용하는 의미
alert-primary	일반 안내, 주요 정보
alert-success	성공, 완료
alert-warning	주의, 경고
alert-danger	오류, 실패, 위험
alert-info	부가 정보

색상은 단순한 장식이 아니라 메시지의 성격을 전달하는 역할을 합니다. 따라서 성공 메시지는 success, 오류 메시지는 danger처럼 의미에 맞게 사용하는 것이 좋습니다.

---

2. Alert 안에 링크 넣기

Alert 안에는 링크도 넣을 수 있습니다. 이때 alert-link 클래스를 사용하면 알림창 색상에 맞는 링크 스타일이 적용됩니다.

<div class="alert alert-warning" role="alert">
  비밀번호 변경이 필요합니다.
  <a href="#" class="alert-link">지금 변경하기</a>
</div>

알림 메시지에서 사용자가 바로 다음 행동을 할 수 있게 만들고 싶을 때 유용합니다.

---

3. 닫을 수 있는 Alert

사용자가 알림창을 직접 닫을 수 있게 만들 수도 있습니다. 이때는 alert-dismissible, fade, show, btn-close 클래스를 함께 사용합니다.

<div class="alert alert-success alert-dismissible fade show" role="alert">
  저장이 완료되었습니다.

  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

닫기 기능은 Bootstrap JavaScript가 필요합니다. CSS만 연결되어 있으면 모양은 보이지만, 닫기 버튼 동작은 작동하지 않을 수 있습니다.

---

4. 배지(Badge)란?

Badge는 짧은 상태값이나 개수를 표시할 때 사용하는 작은 표시 요소입니다. 새 글, 알림 개수, 상태 표시, 카테고리 표시 등에 자주 사용됩니다.

<span class="badge text-bg-primary">New</span>
<span class="badge text-bg-success">완료</span>
<span class="badge text-bg-danger">긴급</span>

Badge는 보통 span 태그와 함께 사용합니다. 짧은 텍스트를 강조하거나 상태를 빠르게 보여줄 때 좋습니다.

클래스	의미
badge	배지 기본 스타일
text-bg-primary	주요 배경색과 텍스트 색상 적용
text-bg-success	성공 상태 표시
text-bg-warning	주의 상태 표시
text-bg-danger	위험, 오류 상태 표시

---

5. 제목 안에서 Badge 사용하기

Badge는 제목 옆에 붙여서 새 항목이나 상태를 표시할 수 있습니다.

<h3>
  공지사항
  <span class="badge text-bg-danger">New</span>
</h3>

게시판, 공지사항, 상품 목록, 관리자 페이지에서 자주 볼 수 있는 형태입니다.

---

6. 버튼 안에서 Badge 사용하기

버튼 안에 Badge를 넣으면 알림 개수나 메시지 개수를 표시할 수 있습니다.

<button type="button" class="btn btn-primary">
  알림
  <span class="badge text-bg-light">4</span>
</button>

예를 들어 알림, 장바구니, 메시지, 댓글 개수를 보여줄 때 유용합니다.

---

7. 둥근 배지 만들기

배지를 더 둥글게 만들고 싶다면 rounded-pill 클래스를 사용할 수 있습니다.

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>

rounded-pill은 알약처럼 양쪽이 둥근 형태를 만들 때 사용합니다. 상태 태그나 카테고리 태그에 잘 어울립니다.

---

8. 진행바(Progress)란?

Progress는 작업이 얼마나 진행되었는지 시각적으로 보여주는 컴포넌트입니다. 파일 업로드, 설문 진행률, 설치 진행률, 학습 완료율, 목표 달성률 등에 사용할 수 있습니다.

<div class="progress">
  <div class="progress-bar" style="width: 60%;">
    60%
  </div>
</div>

바깥 영역에는 progress 클래스를 사용하고, 안쪽 실제 진행 영역에는 progress-bar 클래스를 사용합니다.

클래스	역할
progress	진행바 전체 영역
progress-bar	실제 진행률을 표시하는 영역

진행률은 보통 width 값으로 조절합니다. 예를 들어 width: 25%는 25% 진행, width: 80%는 80% 진행을 의미합니다.

---

9. 색상이 있는 Progress

진행바에도 Bootstrap 배경색 클래스를 적용할 수 있습니다.

<div class="progress mb-3">
  <div class="progress-bar bg-success" style="width: 75%;">
    75%
  </div>
</div>

<div class="progress mb-3">
  <div class="progress-bar bg-warning" style="width: 50%;">
    50%
  </div>
</div>

<div class="progress">
  <div class="progress-bar bg-danger" style="width: 25%;">
    25%
  </div>
</div>

진행 상태가 긍정적인지, 주의가 필요한지, 위험한 상태인지에 따라 색상을 다르게 사용할 수 있습니다.

---

10. 줄무늬 Progress

진행바에 줄무늬 효과를 주고 싶다면 progress-bar-striped 클래스를 사용할 수 있습니다.

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 70%;">
    70%
  </div>
</div>

줄무늬 효과는 현재 작업이 진행 중이라는 느낌을 조금 더 강하게 줄 수 있습니다.

---

11. 움직이는 Progress

줄무늬 진행바에 애니메이션을 추가하려면 progress-bar-animated 클래스를 함께 사용합니다.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 80%;">
    80%
  </div>
</div>

업로드 중, 처리 중, 로딩 중처럼 작업이 계속 진행되고 있다는 느낌을 줄 때 사용할 수 있습니다. 다만 너무 많은 애니메이션은 화면을 산만하게 만들 수 있으므로 필요한 곳에만 사용하는 것이 좋습니다.

---

12. 여러 구간이 있는 Progress

하나의 Progress 안에 여러 개의 progress-bar를 넣으면 구간별 진행률을 표현할 수 있습니다.

<div class="progress">
  <div class="progress-bar bg-success" style="width: 40%;">완료</div>
  <div class="progress-bar bg-warning" style="width: 30%;">진행중</div>
  <div class="progress-bar bg-danger" style="width: 20%;">위험</div>
</div>

작업 상태를 여러 단계로 나누어 보여주고 싶을 때 유용합니다. 예를 들어 서버 사용량, 설문 응답 분포, 프로젝트 상태 등을 표현할 수 있습니다.

---

13. Alert, Badge, Progress 함께 사용하기

이 세 가지 컴포넌트는 단독으로도 사용할 수 있지만, 함께 사용하면 상태 표현이 더 명확해집니다.

<div class="alert alert-info" role="alert">
  프로필 완성도가 아직 낮습니다.
  <span class="badge text-bg-primary">60%</span>
</div>

<div class="progress">
  <div class="progress-bar bg-primary" style="width: 60%;">
    60%
  </div>
</div>

Alert로 안내 메시지를 보여주고, Badge로 핵심 수치를 강조하고, Progress로 진행 상태를 시각화할 수 있습니다.

---

14. 사용 시 주의할 점

• Alert 색상은 메시지 의미에 맞게 사용해야 한다.
• 닫을 수 있는 Alert는 Bootstrap JavaScript가 필요하다.
• Badge는 너무 긴 문장보다 짧은 단어나 숫자에 적합하다.
• Progress는 실제 진행률과 시각적 표시가 일치해야 한다.
• 애니메이션 Progress는 꼭 필요한 곳에만 사용하는 것이 좋다.

상태를 표현하는 컴포넌트는 사용자에게 빠르게 의미를 전달해야 합니다. 그래서 화려하게 꾸미기보다, 의미가 분명하게 보이도록 사용하는 것이 중요합니다.

---

15. 정리

• Alert는 안내, 성공, 경고, 오류 메시지를 보여줄 때 사용한다.
• Badge는 짧은 상태값이나 개수를 표시할 때 사용한다.
• rounded-pill을 사용하면 둥근 배지를 만들 수 있다.
• Progress는 작업 진행률이나 목표 달성률을 보여줄 때 사용한다.
• progress-bar-striped와 progress-bar-animated로 진행바 효과를 줄 수 있다.

이번 글에서는 Bootstrap에서 상태를 표현할 때 자주 사용하는 Alert, Badge, Progress를 정리했습니다. 이 컴포넌트들은 작은 요소처럼 보이지만, 사용자가 현재 상황을 이해하는 데 큰 도움을 줍니다.

다음 글에서는 Bootstrap에서 화면 위에 정보를 겹쳐 보여주는 Dropdown, Tooltip, Popover를 정리해보겠습니다.