[Bootstrap] 11. Breadcrumb, Spinner, Placeholder 이해하기

[Bootstrap] 11. Breadcrumb, Spinner, Placeholder 이해하기

이전 글에서는 Bootstrap의 List Group, Table, Pagination을 정리했습니다. 이번 글에서는 현재 위치를 보여주는 Breadcrumb, 로딩 상태를 표현하는 Spinner, 그리고 데이터가 불러와지기 전 임시 화면을 보여주는 Placeholder를 살펴보겠습니다.

이 세 가지는 화면의 흐름을 더 자연스럽게 만들어주는 컴포넌트입니다. 사용자가 지금 어디에 있는지, 작업이 진행 중인지, 데이터가 곧 표시될 예정인지 알려줄 때 유용합니다.

---

1. Breadcrumb란?

Breadcrumb는 사용자가 현재 사이트 안에서 어느 위치에 있는지 보여주는 경로 표시입니다. 보통 페이지 상단에 작게 표시되며, 홈에서 현재 페이지까지의 이동 흐름을 보여줍니다.

예를 들어 게시판 상세 페이지라면 아래처럼 표현할 수 있습니다.

홈 > 게시판 > 공지사항 > 상세보기

Breadcrumb는 특히 페이지 구조가 깊은 사이트에서 유용합니다. 관리자 페이지, 쇼핑몰, 문서 사이트, 게시판, 마이페이지처럼 여러 단계로 이동하는 화면에 잘 어울립니다.

---

2. Breadcrumb 기본 구조

Bootstrap에서는 nav, ol, li 구조를 사용해 Breadcrumb를 만들 수 있습니다.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">홈</a>
    </li>

    <li class="breadcrumb-item">
      <a href="#">게시판</a>
    </li>

    <li class="breadcrumb-item active" aria-current="page">
      공지사항
    </li>
  </ol>
</nav>

바깥에는 nav를 사용하고, 목록에는 breadcrumb 클래스를 붙입니다. 각 경로 항목에는 breadcrumb-item 클래스를 사용합니다.

클래스 또는 속성	역할
breadcrumb	Breadcrumb 전체 목록
breadcrumb-item	각 경로 항목
active	현재 위치 표시
aria-current="page"	현재 페이지임을 보조 기술에 전달

---

3. 현재 페이지는 링크로 만들지 않기

Breadcrumb에서 현재 페이지는 보통 링크로 만들지 않습니다. 이미 사용자가 보고 있는 페이지이기 때문입니다.

<li class="breadcrumb-item active" aria-current="page">
  상세보기
</li>

반면 이전 경로는 다시 이동할 수 있도록 a 태그를 사용하는 것이 자연스럽습니다.

<li class="breadcrumb-item">
  <a href="#">게시판</a>
</li>

즉, 이전 경로는 링크, 현재 위치는 텍스트로 구분하면 됩니다.

---

4. Breadcrumb 사용 예시

게시판 상세 페이지에서는 아래처럼 사용할 수 있습니다.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">홈</a></li>
    <li class="breadcrumb-item"><a href="#">커뮤니티</a></li>
    <li class="breadcrumb-item"><a href="#">공지사항</a></li>
    <li class="breadcrumb-item active" aria-current="page">상세보기</li>
  </ol>
</nav>

이 구조를 사용하면 사용자는 현재 페이지가 사이트 안에서 어떤 위치에 있는지 빠르게 이해할 수 있습니다.

---

5. Spinner란?

Spinner는 작업이 진행 중임을 보여주는 로딩 표시입니다. 데이터를 불러오는 중이거나, 저장 요청을 처리 중이거나, 화면 전환이 잠시 필요한 상황에서 사용할 수 있습니다.

사용자는 아무 표시가 없으면 화면이 멈춘 것처럼 느낄 수 있습니다. Spinner는 “지금 처리 중입니다”라는 신호를 주는 역할을 합니다.

---

6. 기본 Spinner

가장 기본적인 Spinner는 spinner-border 클래스를 사용합니다.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

role="status"는 현재 상태를 알려주는 요소라는 의미입니다. visually-hidden은 화면에는 보이지 않지만 보조 기술에는 전달되는 텍스트를 의미합니다.

클래스 또는 속성	역할
spinner-border	테두리 형태의 로딩 표시
role="status"	상태 표시 요소임을 전달
visually-hidden	화면에는 숨기고 보조 기술에는 전달

---

7. 색상이 있는 Spinner

Spinner에는 Bootstrap의 텍스트 색상 클래스를 함께 사용할 수 있습니다.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

색상은 상태에 맞게 사용하는 것이 좋습니다. 일반 로딩은 primary, 성공 처리 중은 success, 오류 복구 중은 danger처럼 의미를 맞추면 이해하기 쉽습니다.

---

8. Grow Spinner

Bootstrap에는 커지는 효과를 가진 Spinner도 있습니다. 이때는 spinner-grow 클래스를 사용합니다.

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

spinner-border는 원형 테두리가 회전하는 느낌이고, spinner-grow는 점점 커졌다가 작아지는 느낌입니다.

---

9. 작은 Spinner

버튼 안이나 좁은 영역에서는 작은 Spinner를 사용하는 것이 좋습니다.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

작은 Spinner는 버튼 안에서 저장 중, 삭제 중, 전송 중 같은 상태를 표현할 때 자주 사용됩니다.

---

10. 버튼 안에 Spinner 넣기

사용자가 버튼을 눌렀을 때 처리 중임을 보여주고 싶다면 버튼 안에 Spinner를 넣을 수 있습니다.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  저장 중...
</button>

disabled를 함께 사용하면 처리 중에 버튼을 다시 누르는 문제를 줄일 수 있습니다. 실제 프로젝트에서는 요청이 끝난 뒤 버튼을 다시 활성화하는 처리가 필요합니다.

---

11. Placeholder란?

Placeholder는 실제 데이터가 표시되기 전까지 임시로 보여주는 자리 표시 화면입니다. 카드, 목록, 프로필, 게시글, 이미지 영역 등이 아직 로딩 중일 때 사용할 수 있습니다.

Spinner가 “로딩 중”이라는 신호를 직접 보여준다면, Placeholder는 실제 화면 구조와 비슷한 형태를 먼저 보여주는 방식입니다.

---

12. 기본 Placeholder

Placeholder는 placeholder 클래스를 사용해 만들 수 있습니다.

<p class="placeholder-glow">
  <span class="placeholder col-6"></span>
</p>

col-6, col-8, col-12 같은 클래스를 함께 사용하면 Placeholder의 너비를 조절할 수 있습니다.

<p>
  <span class="placeholder col-12"></span>
  <span class="placeholder col-8"></span>
  <span class="placeholder col-6"></span>
</p>

---

13. 카드 Placeholder 예시

데이터가 들어오기 전 카드 형태를 먼저 보여주고 싶다면 아래처럼 작성할 수 있습니다.

<div class="card" aria-hidden="true">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>

    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>

    <a class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

이런 형태는 게시글 카드, 상품 카드, 프로필 카드처럼 데이터가 늦게 도착하는 화면에 잘 어울립니다.

---

14. Placeholder 애니메이션

Placeholder에는 로딩 느낌을 주기 위한 애니메이션 클래스를 사용할 수 있습니다. 대표적으로 placeholder-glow와 placeholder-wave가 있습니다.

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

클래스	의미
placeholder	자리 표시 요소
placeholder-glow	은은하게 깜빡이는 효과
placeholder-wave	물결처럼 지나가는 효과

애니메이션은 로딩 상태를 더 자연스럽게 보여줄 수 있지만, 한 화면에 너무 많이 사용하면 산만해 보일 수 있습니다.

---

15. Spinner와 Placeholder의 차이

구분	Spinner	Placeholder
역할	작업 진행 중임을 표시	데이터가 들어올 자리 표시
화면 느낌	로딩 아이콘 중심	실제 화면 구조를 미리 보여줌
사용 예시	저장 중, 전송 중, 검색 중	목록 로딩, 카드 로딩, 프로필 로딩
주의점	너무 오래 보이면 답답함	실제 구조와 너무 다르면 어색함

짧은 작업에는 Spinner가 어울리고, 화면 전체 데이터가 로딩되는 상황에는 Placeholder가 더 자연스러울 수 있습니다.

---

16. Breadcrumb, Spinner, Placeholder 함께 사용하기

실제 화면에서는 세 가지를 함께 사용할 수 있습니다. 상단에는 Breadcrumb로 현재 위치를 보여주고, 본문에서는 데이터가 준비될 때까지 Placeholder를 보여주며, 버튼에는 Spinner로 처리 상태를 표시할 수 있습니다.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">홈</a></li>
    <li class="breadcrumb-item"><a href="#">게시판</a></li>
    <li class="breadcrumb-item active" aria-current="page">상세보기</li>
  </ol>
</nav>

<div class="card" aria-hidden="true">
  <div class="card-body">
    <h5 class="placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>

    <p class="placeholder-glow">
      <span class="placeholder col-12"></span>
      <span class="placeholder col-8"></span>
    </p>

    <button class="btn btn-primary" disabled>
      <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
      불러오는 중
    </button>
  </div>
</div>

이처럼 Breadcrumb는 위치를, Placeholder는 화면 구조를, Spinner는 작업 상태를 담당한다고 보면 이해하기 쉽습니다.

---

17. 사용 시 주의할 점

• Breadcrumb의 현재 페이지에는 active와 aria-current="page"를 사용하는 것이 좋다.
• 현재 페이지는 링크보다 텍스트로 표시하는 것이 자연스럽다.
• Spinner에는 role="status"와 visually-hidden 텍스트를 함께 사용하는 것이 좋다.
• 버튼 처리 중에는 중복 클릭을 막기 위해 disabled 상태를 고려해야 한다.
• Placeholder는 실제 화면 구조와 비슷하게 만들어야 어색하지 않다.
• 로딩 표시가 너무 오래 지속되면 사용자가 불안해할 수 있다.

로딩과 위치 표시는 작은 요소처럼 보이지만 사용자가 화면을 이해하는 데 큰 영향을 줍니다. 화면이 멈춘 것인지, 처리 중인지, 현재 어디에 있는지 명확하게 보여주는 것이 중요합니다.

---

18. 정리

• Breadcrumb는 현재 페이지의 위치와 이동 경로를 보여준다.
• breadcrumb-item으로 각 경로를 구성하고, 현재 위치에는 active를 사용한다.
• Spinner는 로딩이나 처리 중 상태를 보여준다.
• spinner-border와 spinner-grow로 다른 로딩 형태를 만들 수 있다.
• 버튼 안에 작은 Spinner를 넣어 처리 중 상태를 표현할 수 있다.
• Placeholder는 데이터가 표시되기 전 임시 화면을 보여준다.
• placeholder-glow와 placeholder-wave로 로딩 느낌을 줄 수 있다.

이번 글에서는 Bootstrap의 Breadcrumb, Spinner, Placeholder를 정리했습니다. Breadcrumb는 위치를 알려주고, Spinner는 작업 중임을 보여주며, Placeholder는 데이터가 들어올 화면 구조를 먼저 보여줍니다.

다음 글에서는 Bootstrap에서 이미지와 비율을 다룰 때 자주 사용하는 Image, Figure, Ratio를 정리해보겠습니다.