[Bootstrap] 09. Offcanvas와 Toast 이해하기

[Bootstrap] 09. Offcanvas와 Toast 이해하기

이전 글에서는 Bootstrap의 Collapse와 Carousel을 정리했습니다. 이번 글에서는 화면 옆에서 열리는 Offcanvas와 짧은 알림을 보여주는 Toast를 살펴보겠습니다.

Offcanvas는 사이드 메뉴, 필터, 장바구니, 설정 패널처럼 화면 밖에 숨겨두었다가 필요할 때 열어 보여주는 UI입니다. Toast는 저장 완료, 복사 완료, 알림 도착처럼 짧은 메시지를 가볍게 보여줄 때 사용합니다.

---

1. Offcanvas란?

Offcanvas는 화면의 왼쪽, 오른쪽, 위쪽, 아래쪽에서 슬라이드처럼 열리는 패널입니다. 기본 화면을 유지하면서 추가 메뉴나 정보를 보여줄 수 있다는 점이 특징입니다.

모바일 메뉴, 상품 필터, 사용자 설정, 장바구니 미리보기 같은 화면에서 자주 사용됩니다.

<button class="btn btn-primary" type="button"
  data-bs-toggle="offcanvas"
  data-bs-target="#menuOffcanvas">
  메뉴 열기
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="menuOffcanvas">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">메뉴</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>

  <div class="offcanvas-body">
    여기에 메뉴 내용이 들어갑니다.
  </div>
</div>

버튼의 data-bs-target 값과 Offcanvas 영역의 id 값이 연결됩니다. 위 예시에서는 버튼이 #menuOffcanvas를 열도록 연결되어 있습니다.

---

2. Offcanvas 기본 구조

클래스 또는 속성	역할
offcanvas	Offcanvas 전체 영역
offcanvas-header	제목과 닫기 버튼 영역
offcanvas-title	패널 제목
offcanvas-body	실제 내용 영역
data-bs-toggle="offcanvas"	Offcanvas를 여는 트리거 지정
data-bs-dismiss="offcanvas"	Offcanvas를 닫는 버튼 지정

Offcanvas는 Bootstrap JavaScript가 있어야 열고 닫는 동작이 정상적으로 작동합니다. CSS만 연결되어 있으면 디자인은 일부 보일 수 있지만 클릭 동작은 작동하지 않을 수 있습니다.

---

3. Offcanvas 열리는 방향

Offcanvas는 어느 방향에서 열릴지 정할 수 있습니다. 가장 많이 쓰는 방향은 왼쪽과 오른쪽입니다.

클래스	열리는 방향
offcanvas-start	시작 방향에서 열림
offcanvas-end	끝 방향에서 열림
offcanvas-top	위쪽에서 열림
offcanvas-bottom	아래쪽에서 열림

<div class="offcanvas offcanvas-end" tabindex="-1" id="cartOffcanvas">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">장바구니</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>

  <div class="offcanvas-body">
    장바구니 내용이 들어갑니다.
  </div>
</div>

예를 들어 메뉴는 offcanvas-start, 장바구니나 설정 패널은 offcanvas-end가 자연스럽게 보일 수 있습니다.

---

4. Offcanvas 안에 메뉴 넣기

Offcanvas 안에는 단순 텍스트뿐 아니라 메뉴 목록, 버튼, 폼, 카드 등을 넣을 수 있습니다. 모바일 메뉴를 만든다면 아래처럼 구성할 수 있습니다.

<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileMenu">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">MySite</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>

  <div class="offcanvas-body">
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">홈</a>
      <a href="#" class="list-group-item list-group-item-action">게시판</a>
      <a href="#" class="list-group-item list-group-item-action">문의하기</a>
      <a href="#" class="list-group-item list-group-item-action text-danger">로그아웃</a>
    </div>
  </div>
</div>

화면이 좁은 모바일에서는 상단 네비게이션에 모든 메뉴를 펼쳐두기 어렵습니다. 이때 Offcanvas를 사용하면 메뉴를 깔끔하게 숨겨두었다가 필요할 때만 보여줄 수 있습니다.

---

5. Offcanvas 배경 클릭 동작

Offcanvas가 열리면 뒤쪽 화면에 어두운 배경이 깔리는 경우가 많습니다. 사용자가 배경을 클릭했을 때 닫히게 할 수도 있고, 닫히지 않게 할 수도 있습니다.

<div class="offcanvas offcanvas-start"
  data-bs-backdrop="static"
  tabindex="-1"
  id="staticOffcanvas">

  <div class="offcanvas-header">
    <h5 class="offcanvas-title">중요 설정</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>

  <div class="offcanvas-body">
    배경을 클릭해도 닫히지 않는 Offcanvas입니다.
  </div>
</div>

data-bs-backdrop="static"을 사용하면 사용자가 배경을 클릭해도 Offcanvas가 닫히지 않습니다. 중요한 입력이나 확인이 필요한 화면에 사용할 수 있습니다.

---

6. Toast란?

Toast는 화면 한쪽에 잠깐 나타나는 작은 알림 메시지입니다. 사용자의 작업 흐름을 크게 방해하지 않고 결과나 상태를 알려줄 때 사용합니다.

예를 들어 저장 완료, 복사 완료, 메시지 도착, 업로드 성공 같은 짧은 알림에 적합합니다.

<div class="toast" role="alert" id="basicToast">
  <div class="toast-header">
    <strong class="me-auto">알림</strong>
    <small>방금 전</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>

  <div class="toast-body">
    저장이 완료되었습니다.
  </div>
</div>

Toast는 단순히 HTML만 작성한다고 자동으로 나타나지 않습니다. 보통 JavaScript로 표시 동작을 실행해야 합니다.

---

7. Toast 기본 구조

클래스 또는 속성	역할
toast	Toast 전체 영역
toast-header	제목, 시간, 닫기 버튼 영역
toast-body	알림 내용 영역
data-bs-dismiss="toast"	Toast 닫기 버튼 지정
role="alert"	알림 역할 지정

Toast는 짧고 가벼운 알림에 적합합니다. 중요한 오류나 반드시 확인해야 하는 내용은 Toast보다 Alert나 Modal이 더 적합할 수 있습니다.

---

8. 버튼을 눌러 Toast 보이기

Toast를 실제로 보여주려면 Bootstrap JavaScript를 사용해 show 메서드를 실행할 수 있습니다.

<button type="button" class="btn btn-primary" id="showToastBtn">
  Toast 보기
</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" id="liveToast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">알림</strong>
      <small>방금 전</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>

    <div class="toast-body">
      작업이 완료되었습니다.
    </div>
  </div>
</div>

<script>
  const toastButton = document.getElementById('showToastBtn');
  const toastElement = document.getElementById('liveToast');

  if (toastButton) {
    const toast = new bootstrap.Toast(toastElement);

    toastButton.addEventListener('click', function () {
      toast.show();
    });
  }
</script>

toast-container는 Toast가 화면 어디에 나타날지 잡아주는 영역입니다. 위 예시는 화면 오른쪽 아래에 Toast가 나타나도록 구성한 예시입니다.

---

9. Toast 위치 조절하기

Toast는 position 유틸리티 클래스를 함께 사용해 위치를 조절할 수 있습니다.

<div class="toast-container position-fixed top-0 end-0 p-3">
  오른쪽 위 Toast 영역
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  오른쪽 아래 Toast 영역
</div>

<div class="toast-container position-fixed bottom-0 start-0 p-3">
  왼쪽 아래 Toast 영역
</div>

일반적으로 알림은 오른쪽 위나 오른쪽 아래에 배치하는 경우가 많습니다. 모바일에서는 화면을 가리지 않는지 함께 확인하는 것이 좋습니다.

---

10. 자동 닫힘 설정

Toast는 일정 시간이 지나면 자동으로 닫히게 만들 수 있습니다. data-bs-delay 값을 사용하면 닫히는 시간을 조절할 수 있습니다.

<div class="toast" id="delayToast" role="alert" data-bs-delay="3000">
  <div class="toast-header">
    <strong class="me-auto">알림</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>

  <div class="toast-body">
    3초 뒤 자동으로 닫힙니다.
  </div>
</div>

data-bs-delay="3000"은 약 3초를 의미합니다. 너무 빨리 사라지면 사용자가 내용을 읽기 어렵고, 너무 오래 남아 있으면 화면이 답답해질 수 있습니다.

---

11. 자동으로 닫히지 않는 Toast

사용자가 직접 닫을 때까지 Toast를 유지하고 싶다면 data-bs-autohide="false"를 사용할 수 있습니다.

<div class="toast" id="manualToast" role="alert" data-bs-autohide="false">
  <div class="toast-header">
    <strong class="me-auto">확인 필요</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>

  <div class="toast-body">
    사용자가 직접 닫아야 하는 알림입니다.
  </div>
</div>

다만 반드시 확인해야 하는 중요한 내용이라면 Toast보다 Modal이나 Alert가 더 적합할 수 있습니다. Toast는 가벼운 알림이라는 성격을 유지하는 것이 좋습니다.

---

12. Offcanvas와 Toast 함께 사용하기

실제 화면에서는 Offcanvas와 Toast를 함께 사용할 수 있습니다. 예를 들어 장바구니 Offcanvas에서 상품을 삭제한 뒤, Toast로 삭제 완료 알림을 보여줄 수 있습니다.

<button class="btn btn-outline-primary"
  data-bs-toggle="offcanvas"
  data-bs-target="#cartPanel">
  장바구니 열기
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="cartPanel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">장바구니</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>

  <div class="offcanvas-body">
    <p>상품 1개가 담겨 있습니다.</p>
    <button class="btn btn-danger" id="removeItemBtn">삭제</button>
  </div>
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" id="cartToast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">장바구니</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>

    <div class="toast-body">
      상품이 삭제되었습니다.
    </div>
  </div>
</div>

Offcanvas는 작업 공간을 제공하고, Toast는 작업 결과를 짧게 알려주는 역할로 함께 사용할 수 있습니다.

---

13. 사용 시 주의할 점

• Offcanvas의 data-bs-target과 id가 정확히 연결되어야 한다.
• Offcanvas는 중요한 본문 정보를 무조건 숨기는 용도로 쓰지 않는 것이 좋다.
• Toast는 짧고 가벼운 알림에 적합하다.
• 중요한 오류나 확인이 필요한 내용은 Alert나 Modal이 더 적합할 수 있다.
• 두 컴포넌트 모두 Bootstrap JavaScript가 있어야 정상적으로 동작한다.
• 모바일 화면에서 Offcanvas와 Toast가 화면을 과하게 가리지 않는지 확인해야 한다.

Offcanvas와 Toast는 화면을 깔끔하게 유지하면서 필요한 순간에만 정보를 보여주는 컴포넌트입니다. 다만 숨김과 알림을 과하게 사용하면 오히려 사용자가 흐름을 놓칠 수 있으므로 필요한 곳에만 사용하는 것이 좋습니다.

---

14. Offcanvas와 Toast 비교

구분	Offcanvas	Toast
주요 역할	숨겨진 패널을 열어 보여줌	짧은 알림 메시지를 보여줌
사용 예시	모바일 메뉴, 필터, 장바구니, 설정	저장 완료, 복사 완료, 알림 도착
화면 영향	화면 일부를 크게 차지함	작은 영역에 잠깐 표시됨
주의점	중요 정보를 과하게 숨기지 않기	중요한 안내를 너무 빨리 사라지게 하지 않기

---

15. 정리

• Offcanvas는 화면 옆에서 열리는 숨김 패널이다.
• offcanvas-start, offcanvas-end, offcanvas-top, offcanvas-bottom으로 열리는 방향을 정할 수 있다.
• Offcanvas는 모바일 메뉴, 필터, 장바구니, 설정 패널에 자주 사용된다.
• Toast는 화면 한쪽에 잠깐 표시되는 짧은 알림 메시지다.
• Toast는 JavaScript로 show 동작을 실행해 표시할 수 있다.
• Toast는 저장 완료, 복사 완료, 알림 도착처럼 가벼운 상태 안내에 적합하다.
• 두 컴포넌트 모두 Bootstrap JavaScript가 필요하다.

이번 글에서는 Bootstrap의 Offcanvas와 Toast를 정리했습니다. Offcanvas는 화면 공간을 효율적으로 쓰기 위한 숨김 패널이고, Toast는 사용자의 작업 결과를 가볍게 알려주는 알림 컴포넌트입니다.

다음 글에서는 Bootstrap에서 데이터를 보기 좋게 정리할 때 자주 사용하는 List Group, Table, Pagination을 정리해보겠습니다.