[Bootstrap] 13. Bootstrap Icons 이해하기

[Bootstrap] 13. Bootstrap Icons 이해하기

이전 글에서는 Bootstrap에서 이미지와 비율을 다루는 Image, Figure, Ratio를 정리했습니다. 이번 글에서는 화면에 아이콘을 넣을 때 사용하는 Bootstrap Icons를 살펴보겠습니다.

아이콘은 버튼, 메뉴, 알림, 입력창, 상태 표시처럼 다양한 UI에서 사용됩니다. 글자만 있는 화면보다 아이콘을 함께 사용하면 의미를 더 빠르게 전달할 수 있습니다.

---

1. Bootstrap Icons란?

Bootstrap Icons는 Bootstrap 팀에서 제공하는 아이콘 라이브러리입니다. 버튼, 메뉴, 폼, 카드, 알림, 관리자 화면 등에서 자주 쓰는 아이콘을 쉽게 사용할 수 있게 해줍니다.

중요한 점은 Bootstrap Icons가 Bootstrap CSS와 반드시 함께 사용되어야 하는 것은 아니라는 점입니다. Bootstrap을 사용하지 않는 일반 HTML, CSS 프로젝트에서도 아이콘만 따로 사용할 수 있습니다.

---

2. CDN으로 Bootstrap Icons 사용하기

가장 간단한 방법은 CDN 링크를 HTML의 head 영역에 추가하는 것입니다.

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

이 코드를 추가하면 HTML에서 bi 클래스를 사용해 아이콘을 바로 표시할 수 있습니다.

<i class="bi bi-house"></i>
<i class="bi bi-search"></i>
<i class="bi bi-person"></i>

처음 연습할 때는 CDN 방식이 가장 편합니다. 프로젝트가 커지거나 빌드 도구를 사용한다면 npm 설치 방식도 고려할 수 있습니다.

---

3. npm으로 설치하기

React, Vue, Vite 같은 환경에서는 npm으로 설치해서 사용할 수 있습니다.

npm install bootstrap-icons

설치 후 CSS 파일을 import하면 됩니다.

import 'bootstrap-icons/font/bootstrap-icons.css';

이렇게 설정하면 컴포넌트 안에서도 동일하게 아이콘 클래스를 사용할 수 있습니다.

<i class="bi bi-heart"></i>

---

4. 기본 아이콘 사용법

Bootstrap Icons는 보통 i 태그나 span 태그에 클래스를 붙여 사용합니다.

<i class="bi bi-alarm"></i>
<span class="bi bi-star"></span>

아이콘 클래스는 보통 bi bi-아이콘이름 형태입니다. 예를 들어 검색 아이콘은 bi-search, 집 아이콘은 bi-house, 사람 아이콘은 bi-person처럼 작성합니다.

아이콘	클래스	주로 쓰는 곳
검색	bi-search	검색 버튼, 검색창
홈	bi-house	메인 메뉴
사용자	bi-person	마이페이지, 로그인
하트	bi-heart	좋아요, 찜
휴지통	bi-trash	삭제 버튼

---

5. 아이콘 크기 조절하기

Bootstrap Icons는 글자처럼 취급되기 때문에 font-size로 크기를 조절할 수 있습니다. Bootstrap 유틸리티 클래스와 함께 사용할 수도 있습니다.

<i class="bi bi-star fs-1"></i>
<i class="bi bi-star fs-3"></i>
<i class="bi bi-star fs-5"></i>

fs-1은 큰 글자 크기, fs-6은 작은 글자 크기에 가깝습니다. 버튼 안에서는 너무 큰 아이콘보다 텍스트와 균형이 맞는 크기를 사용하는 것이 좋습니다.

---

6. 아이콘 색상 바꾸기

아이콘 색상도 텍스트 색상 클래스와 동일하게 조절할 수 있습니다.

<i class="bi bi-check-circle text-success"></i>
<i class="bi bi-exclamation-triangle text-warning"></i>
<i class="bi bi-x-circle text-danger"></i>
<i class="bi bi-info-circle text-primary"></i>

색상은 의미에 맞게 사용하는 것이 좋습니다. 완료는 success, 주의는 warning, 오류는 danger처럼 사용하면 사용자가 상태를 더 쉽게 이해할 수 있습니다.

---

7. 버튼 안에 아이콘 넣기

아이콘은 버튼과 함께 자주 사용됩니다. 버튼의 의미를 더 빠르게 전달할 수 있기 때문입니다.

<button type="button" class="btn btn-primary">
  <i class="bi bi-save"></i>
  저장
</button>

<button type="button" class="btn btn-danger">
  <i class="bi bi-trash"></i>
  삭제
</button>

아이콘과 글자 사이가 너무 붙어 보이면 margin 유틸리티를 함께 사용할 수 있습니다.

<button type="button" class="btn btn-primary">
  <i class="bi bi-save me-1"></i>
  저장
</button>

me-1은 아이콘 오른쪽에 약간의 여백을 주는 클래스입니다. Bootstrap 5에서는 left, right보다 start, end 개념을 사용하므로 me는 margin-end를 의미합니다.

---

8. 아이콘만 있는 버튼

수정, 삭제, 닫기, 검색처럼 아이콘만 있는 버튼을 만들 수도 있습니다.

<button type="button" class="btn btn-outline-secondary" aria-label="검색">
  <i class="bi bi-search"></i>
</button>

<button type="button" class="btn btn-outline-danger" aria-label="삭제">
  <i class="bi bi-trash"></i>
</button>

아이콘만 있는 버튼은 화면상으로는 의미가 보일 수 있지만, 보조 기술에서는 버튼의 목적을 알기 어려울 수 있습니다. 그래서 aria-label을 함께 작성하는 것이 좋습니다.

---

9. 입력창에 아이콘 함께 사용하기

검색창이나 이메일 입력창에는 아이콘을 함께 배치하면 입력 목적이 더 명확해집니다. Input Group과 함께 사용할 수 있습니다.

<div class="input-group mb-3">
  <span class="input-group-text">
    <i class="bi bi-search"></i>
  </span>

  <input type="text" class="form-control" placeholder="검색어를 입력하세요">
</div>

input-group-text 안에 아이콘을 넣으면 입력창 앞쪽에 자연스럽게 아이콘이 붙습니다. 검색, 이메일, 비밀번호, 전화번호 입력창에서 자주 사용할 수 있습니다.

---

10. 네비게이션 메뉴에 아이콘 넣기

Navbar나 사이드 메뉴에도 아이콘을 넣을 수 있습니다. 메뉴가 많을 때 아이콘을 함께 사용하면 각 메뉴의 성격을 빠르게 구분할 수 있습니다.

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="bi bi-house me-1"></i>
      홈
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-card-list me-1"></i>
      게시판
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-person me-1"></i>
      마이페이지
    </a>
  </li>
</ul>

아이콘은 메뉴를 꾸미는 역할도 하지만, 사용자가 메뉴를 빠르게 인식하도록 도와주는 역할도 합니다.

---

11. 카드 안에서 아이콘 사용하기

카드 안에서는 상태나 핵심 정보를 강조할 때 아이콘을 사용할 수 있습니다.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">
      <i class="bi bi-bell text-primary me-1"></i>
      알림 설정
    </h5>

    <p class="card-text text-muted">
      새로운 댓글이나 메시지가 도착하면 알림을 받을 수 있습니다.
    </p>

    <button class="btn btn-primary">
      <i class="bi bi-check2 me-1"></i>
      설정하기
    </button>
  </div>
</div>

아이콘을 제목 앞에 넣으면 카드의 주제를 더 빠르게 전달할 수 있습니다. 다만 모든 문장마다 아이콘을 넣으면 화면이 복잡해질 수 있으므로 핵심 위치에만 사용하는 것이 좋습니다.

---

12. Badge와 아이콘 함께 사용하기

알림, 메시지, 장바구니처럼 개수를 함께 보여주는 UI에서는 아이콘과 Badge를 함께 사용할 수 있습니다.

<button type="button" class="btn btn-outline-primary position-relative">
  <i class="bi bi-bell"></i>

  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
    3
    <span class="visually-hidden">새 알림</span>
  </span>
</button>

이런 형태는 알림 버튼이나 메시지 버튼에서 자주 사용됩니다. visually-hidden을 함께 사용하면 화면에는 보이지 않지만 보조 기술에 의미를 전달할 수 있습니다.

---

13. SVG 코드로 직접 사용하기

Bootstrap Icons는 아이콘 폰트 방식뿐 아니라 SVG 코드로 직접 사용할 수도 있습니다. SVG 방식은 아이콘 하나를 더 세밀하게 제어하고 싶을 때 유용합니다.

<svg xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  fill="currentColor"
  class="bi bi-heart-fill text-danger"
  viewBox="0 0 16 16"
  aria-hidden="true">

  <path d="..."></path>
</svg>

실제 path 값은 Bootstrap Icons 사이트에서 원하는 아이콘을 선택하면 확인할 수 있습니다. 간단한 화면에서는 아이콘 폰트 방식이 편하고, 세밀한 제어가 필요하면 SVG 방식을 사용할 수 있습니다.

---

14. 접근성에서 주의할 점

아이콘을 사용할 때는 이 아이콘이 장식인지, 의미를 전달하는 요소인지 구분해야 합니다.

1) 장식용 아이콘

글자 옆에 단순히 꾸미는 용도로 들어가는 아이콘이라면 보조 기술에서 읽지 않아도 됩니다.

<button class="btn btn-primary">
  <i class="bi bi-save me-1" aria-hidden="true"></i>
  저장
</button>

2) 의미가 있는 아이콘 버튼

아이콘만 있는 버튼처럼 아이콘이 의미를 직접 전달한다면 aria-label을 추가하는 것이 좋습니다.

<button class="btn btn-outline-danger" aria-label="삭제">
  <i class="bi bi-trash"></i>
</button>

즉, 텍스트가 이미 의미를 설명하고 있다면 아이콘은 숨기고, 아이콘만으로 의미를 전달한다면 버튼에 설명을 붙여야 합니다.

---

15. 자주 하는 실수

• Bootstrap CSS만 연결하고 Bootstrap Icons CSS는 연결하지 않는 경우
• bi 클래스를 빼고 bi-search만 작성하는 경우
• 아이콘만 있는 버튼에 aria-label을 작성하지 않는 경우
• 아이콘 크기와 텍스트 크기가 맞지 않아 버튼이 어색해지는 경우
• 모든 메뉴와 문장에 아이콘을 과하게 넣어 화면이 복잡해지는 경우
• 삭제, 경고, 성공 아이콘의 색상을 의미와 다르게 사용하는 경우

아이콘은 적게 써도 화면 이해도를 높여줄 수 있습니다. 하지만 너무 많이 사용하면 오히려 시선이 분산되므로 중요한 동작과 상태에 중심을 두고 사용하는 것이 좋습니다.

---

16. 정리

• Bootstrap Icons는 Bootstrap 팀에서 제공하는 아이콘 라이브러리다.
• CDN이나 npm 설치 방식으로 사용할 수 있다.
• 기본 사용법은 bi와 bi-아이콘이름 클래스를 함께 쓰는 것이다.
• 아이콘 크기는 fs 클래스나 font-size로 조절할 수 있다.
• 색상은 text-primary, text-success, text-danger 같은 유틸리티 클래스로 조절할 수 있다.
• 버튼, 입력창, 네비게이션, 카드, 배지와 함께 자주 사용된다.
• 아이콘만 있는 버튼에는 aria-label을 작성하는 것이 좋다.

이번 글에서는 Bootstrap Icons를 정리했습니다. 아이콘은 작은 요소처럼 보이지만, 화면의 의미를 빠르게 전달하고 사용성을 높이는 데 큰 역할을 합니다.

다음 글에서는 Bootstrap의 색상, 여백, 둥근 모서리, 그림자 등을 조합해 간단한 UI 섹션을 직접 구성하는 실전 예제를 만들어보겠습니다.