부트스트랩 5(Bootstrap 5) 알파버전(Alpha) 출시! 남들보다 빠르게 공부해보자!

🎉 Bootstrap 5 Alpha

드디어 부트스트랩 5 알파버전이 나왔습니다. 제가 학부시절에 부트스트랩 관련 글을 썼던게 엊그제 같은데 벌써 부트스트랩 5 알파가 나오다니.. 정말 세월이 빠른 것 같습니다.

[Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법 (bootstrap - grid system)

무려 16년도에 쓴 글이네요...;

 

사실 그동안 프론트엔드 개발자로서 회사생활을 하면서 부트스트랩은 사용하지 않고 몇 번씩 앤트디자인을 사용했던 기억이 납니다. 그래도 이렇게나마 부트스트랩을 오랜만에 보게 되어서 정말 반갑네요!

그럼 지금부터 부트스트랩 5 알파버전에서 어떤 부분이 달라졌는지 한번 살펴보도록 하겠습니다.

⚙️ 설치방법

우선 소개는 둘째치고 얼른 다운받아서 사용해보고 싶으신 분도 계실 수 있으니 아래 링크를 통해 CDN으로 구성해서 사용하실 수 있고, 그 아래 yarn이나 npm 패키지 매니저를 통해서 설치하실 수 있습니다.

Bootstrap

// npm
npm i bootstrap@next
npm i bootstrap@5.0.0-alpha

// yarn
yarn add bootstrap@next
yarn add bootstrap@5.0.0-alpha

하지만 아직 서비스에 도입하기에는 이른거 아시죠? 알파버전이라 충분히 사용되고 있는 API들이 변경될 가능성이 높습니다. 나중에 정식 릴리즈가 되었을 때 도입해주세요.

🧐 어떤 부분이 달라졌을까?

컬러 팔레트의 확장

부트스트랩의 컬러 팔레트가 굉장히 확장되었다.

제이쿼리(jQuery)와의 이별(제이쿼리 안녕!)

부트스트랩은 더이상 제이쿼리를 포함하고 있지 않습니다! 제가 생각하기에 제이쿼리를 드랍한 부분이 굉장히 큰 변화점이라고 생각합니다. 부트스트랩5가 나올 때 까지 꾸준히 제이쿼리와 함께 가고 있었는데 이제 제이쿼리와 이별을 선언했네요.

하지만 모든 JS 플러그인은 지원한답니다! 아마 jQuery의 소스들을 Vanilla JS로 리팩토링했겠죠? 최신 자바스크립트는 jQuery 못지않게 강력한 API를 제공하고 있으니까요!

제이쿼리를 드랍함으로써 파일의 용량도 절감되었습니다. 아 그리고 굉장히 큰 대형 호재가 있었네요! 바로

💎 Drop IE support!! 💎

그렇죠! 이렇게 큼지막한 프로젝트들이 먼저 브라우저 생태계의 발전과 변화를 위해서 레거시 브라우저들에 대한 지원을 끊어야 한다고 생각합니다.

모던 라이브러리들이 다들 이러한 추세를 맞춰가고 있죠. 그리고 굉장히 멋진 회사들의 서비스 구글의 유트브, 네이버의 네이버 서비스도 IE 지원을 중단한 것으로 알고 있는데 굉장히 박수를 쳐드리고 싶습니다. 감사합니다!🥰

CSS Custom Properties

이제 CSS 커스텀 속성들을 적극적으로 사용합니다! 아래의 예시들 처럼요!

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #28a745;
  --bs-teal: #20c997;
  --bs-cyan: #17a2b8;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

유틸리티 API (Utilities API)

유틸리티 API는 유틸리티 클래스를 생성하는 Sass 기반 도구입니다. 부트스트랩에서는 개발자들이 유틸리티 API를 활용해서 굉장히 효율적으로 코드를 작성할 수 있게 도와줍니다.

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );
 
 // 결과
.o-0 {
  opacity: 0;
}
.o-25 {
  opacity: .25;
}
.o-75 {
  opacity: .75;
}
.o-100 {
  opacity: 1;
}

강화된 그리드 시스템

xxl 사이즈가 새로 생겼습니다!

.gutter도 좀 더 사용하기 쉽게 .g*로 사용하도록 변경되었습니다.

gutter 사용 예시

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

gutter에 수직 클래스들도 추가되었습니다. .gy-*로 사용하면 됩니다.

수직 gutter 클래스를 사용한 예시

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

columns는 더이상 position: relative 속성을 가지고 있지 않습니다.

커스텀 아이콘 (Custom Icon)

기존보다 훨씬 다양한 아이콘들을 제공합니다.

커스텀 아이콘 라이브러리를 제공하는 모습

그 외에도 부트스트랩 문서 사이트를 Jekyll에서 Hugo로 변경했다고 하네요. 기존에 Jekyll을 사용하면서 퍼포먼스가 안좋았기 때문에 좀 더 좋은 퍼포먼스를 낼 수 있는 Hugo로 변경했다고 합니다. 공식문서를 활용할 때 기존보다 좀 더 좋은 사용자 경험을 낼 수 있다고 하네요. (저는 문서의 퍼포먼스가 좋아졌다는거는 별로 관심이 없어서...ㅎ)

👋 마무리

지금까지 부트스트랩 5 알파버전을 빠르게 살펴봤습니다. 기존에 사용할 때 불편했던 점들이 많이 개선된 것 같고, 기존에 레거시 코드와 브라우저의 지원을 드랍시키면서 굉장히 진보적인 선택을 했다는 것도 큰 점수를 주고 싶습니다. 부트스트랩이라고 하면 굉장히 예전부터 굉장히 유명한 프론트엔드 프레임워크라고 생각하는데 현실에 안주하지 않고 발전하는 모습을 보니 제가 다 뿌듯합니다.

앞으로도 부트스트랩 꾸준히 지켜보겠습니다. 그리고 조만간 시간을 조금 할애해서 부트스트랩 5 알파를 한번 쭉 다뤄보는 포스팅도 올리도록 하겠습니다!