부트스트랩 5 베타 버전 출시 Bootstrap v5.0.0-beta1

현재 웹에서 가장 많이 사용하는 CSS 프레임워크이자 대표주자인 부트스트랩이 5.0 베타 버전이 출시되었습니다. 

 

6년만에 블로그를 다시 시작하면서 부트스트랩으로 다시 글을 시작하게 되었습니다. 

사실 필자는 부트스트랩에 대한 책도 하나 저술했고, 그 책이 사실 부트스트랩을 다룬 한국내 첫 책이자 가장 잘 팔린(?) 책이었습니다. 그 책은 부트스트랩 3.X 버전 이었고 부트스트랩에 대해서 나름 잘 설명한 책이었습니다. 라고 자찬하고 싶습니다. 사실 부트스트랩을 알고 나서는 필자가 제작하는 모든 웹 사이트는 부트스트랩을 기초로 만들고 있습니다. 

 

부트스트랩 이후에 상당히 많은 CSS 프레임워크들이 세상에 출현했고, 나름 의미 있는 사용자 층을 이루고 있지만, 실상 부트스트랩 만한  CSS 프레임워크도 없습니다. 나름 다른 CSS 프레임워크들은 딱 필요한 부분만 넣고 있어서 부트스트랩 보다 가볍고 빠르다는 것을 장점으로 내세우고 있지만, 부트스트랩은 범용성에서 최고의 솔루션인것 만은 틀림 없고,버전 4에 이르러서는 SaSS  기반으로 소스를 제공함으로써, 개발자가 필요한 부분만 SaSS 에 import 를 해서 사용할 수 있기 때문에 실제 SaSS 를 알고 있는 개발자는 다른 프레임워크를 사용할 이유가 없어졌습니다. 

필자는 또 SaSS 관련 서적도 한권 집필했습니다. ^^ (roadbook.co.kr/164) 

 

이제 간단하게 부트스트랩 버전 5와 버전 4의 차이점에 대해서 설명해 보겠습니다.

 

1. 부트스트랩 5는 더이상 jQuery를 사용하지 않습니다. 

부트스트랩 5는 바닐라 자바스크립트(Vanilla JavaScript) 를 이용해서 jQuery가 더 이상 사용되질 않습니다. 

jQuery 때문에 개발자 사이에서 사실 부트스트랩은 말이 많았습니다. 요금 대세가 React, VueJS 등 자바스크립트 프레임워크와 부트스트랩을 같이 사용하려면 jQuery와의 충돌 등이 문제가 되었는데, 버전 5에서는 그런 문제가 없어진 것입니다.

 

2. IE 10 와 11 에 대한 지원이 더이상 없습니다.

이제 부트스트랩 5에서는 IE 계열에 대한 더 이상의 지원은 없습니다. 마이크로소프트에서도 더 이상 IE는 지원하지 않고  Edge를 밀고 있죠. 부트스트랩도 5 부터는 IE에 대한 지원은 없기 때문에 IE 계열 브라우저를 사용하려면 부트스트랩 4을 사용해야 하고, IE10 이하의 버전도 지원하려면 부트스트랩 3 버전을 사용해야 합니다.

 

3. CSS 커스텀 속성 지원 

Internet Explorer에 대한 지원이 중단 된 덕분에 부트스트랩 버전 5는 이제 사용자 지정 CSS 속성을 지원합니다. 부트 스트랩 4에서는  루트 변수가 색상과 글꼴에만 존재했습니다. 부트스트랩 5는 이제 몇 가지 구성 요소 및 레이아웃 옵션으로 CSS 변수를 제공합니다. 

 

4. 컬러 팔렛트가 확장되어 더 많은 색상을 지원합니다. 

부트스트랩 5에서는 이제 색상 팔레트를 확장하여 이전 버전보다 더 많은 색상을 적용할 수 있습니다. Tailwind와 같은 많은 CSS 프레임 워크는 개발자에게  광범위한 색상 팔레트 세트를 제공합니다. 이제 부트스트랩 5에서도 이전 버전보다 훨씬 많은 색상 정보를 제공하게 되었습니다.

 

5. 업데이트 된 폼 컨트롤

부트스트랩 버전 5에서는 사용자 지정 디자인 양식 컨트롤이 포함되어 있습니다. 부트스트랩 4에서 폼 컨트롤은 각 브라우저가 제공하는 기본값을 사용해서 브라우저 마다 폼 부분이 조금씩 틀리게 보였습니다만, 버전 5에서 사용하는  폼 컨트롤은 사용자 정의 디자인으로 인해 모든 브라우저에서 훨씬 더 일관된 모양과 느낌을 제공합니다.

 

6. 유틸리티 API 

새로운 유틸리티 API가 버전 5에 내장되었습니다. Sass를 사용하여 자신 만의 유틸리티를 만들 수 있습니다. Bootstrap의 유틸리티 API를 사용하여 기본 유틸리티 클래스를 수정하거나 제거 할 수도 있습니다.

아래의 예제를 보시죠.

"width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),

이제 state 옵션을 사용하여 : hover 및 : focus와 같은 유사 클래스 변형을 생성 할 수도 있습니다. 예 :

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

위와 같은 SaSS 코드가 아래와 같이 CSS 설정됩니다. 와우!! 

.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }

7. 향상된 그리드 시스템

부트스트랩 5는 부트스트랩 4에 도입 된 그리드 시스템 구조를 유지하지만 새로운 클래스를 추가하여 개선합니다. 이는 그리드 구조를 이전 버전에서 최신 버전으로 이동하는 데 더 적은 노력이 필요함을 의미합니다. 다음은 부트스트랩 5 그리드 시스템에서 변경된 사항입니다 : 

• 새로운 xxl 그리드 계층. 
• Gutter 클래스는 .g * 유틸리티를 사용하여 그리드에 추가 할 수 있습니다. 
• form 레이아웃 옵션이 새로운 그리드 시스템으로 대체되었습니다. 
• 기존에는 수평 위주 였던것을 수직 간격 클래스가 추가되었습니다.
• Columns 은  더 이상 position 속성은 relative 속성을 기본으로 처리합니다.

 

8. RTL 지원

이 속성은 뭐 한국어를 와 영어 등을 사용하는 문자권에서는 의미없지만, 텍스트를 오른쪽에서 왼쪽으로 쓰는 중동 지역에서는 반드시 필요한 옵션입니다. RTL 이란 의미가 right to left  란 의미입니다. 

다음 그림을 보시죠 

 

9. 더 쉬운 사용자 정의 및 테마

부트스트랩 5는 부트스트랩의 소스 SaSS 파일 위에 빌드하기위한 더 많은 콘텐츠와 코드 스니펫이 포함 된 v4의 테마 페이지에서 확장되는 새로운 맞춤 설정 섹션을 제공합니다. npm 스타터 프로젝트도 제공되어 Bootstrap 사용자 지정을 더 빠르게 시작하는 데 도움이됩니다.

 

10. 네임 스페이스 데이터 속성 

부트스트랩은 HTML 속성을 사용하여 JavaScript 동작을 활성화합니다. 부트스트랩 5에서는 이러한 모든 속성의 이름이 data- *에서 data-bs- *로 변경되었습니다. 따라서 부트스트랩 5의 모든 데이터 속성에는 bs가 중위로 포함되지 않습니다. 부트스트랩 4에서 5로 이동할 때 모든 데이터 속성을 대체해야하지만 앞으로는 부트스트랩의 데이터 속성 이름을 다른 라이브러리 나 자신의 라이브러리에서 요구하는 것과 별개로 유지합니다.   

이 부분 마이그레이션 할 때 중요합니다. 

제가 프로젝트에 부트스트랩을 적용하면서 부트스트랩 코드를 복사해서 붙혀넣기 했는데 보니까 버전이 5을 적용한 상태요였고, 코드는 그대로 놔두고 부트스트랩 4 버전으로 변경했더니 동작을 안해서 보니 data-  속성이 5에서는 data-bs-  로 변경되었다는 것을 코드를 보고 알았네요. 하하핫!!! ㅠㅠ

 

11. Popper.js V2

부트스트랩 버전 4 부터 툴팁과 팝오버에서 사용하는 자바스크립트 라이브러리는 Popper.js 를 사용했었습니다. 부트스트랩 5에서는 더욱 강력해진 기능을 가진 Popper.js 버전 2가 채용되었습니다.

 

12. SVG 아이콘 라이브러리 

부트스트랩은 이제 코드에 쉽게 통합 할 수있는 1,000 개의 아이콘으로 구성된 SVG 라이브러리를 제공합니다. 인라인 코드 또는 SVG 스프라이트로 이러한 아이콘을 추가 할 수 있습니다. 부트스트랩 버전 3까지는 웹 폰트 형식으로 제공되었던 것을 버전 4부터는 웹 폰트 또는 SVG 형대로 별도 제공되고 있습니다. 버전 4부터는 별도의 웹 사이트 제공됩니다. 이제 필요한 아이콘만  SVG 형태로 다운로드 받아서 사용할 수도 있고, 이전 처럼 웹 폰트 형식으로 사용할 수도 있습니다.  자세한 내용은 icons.getbootstrap.com/

 

 

 

 

결론 : 부트스트랩 4 와 부트스트랩 5  어떤걸 사용해야 할까요? 

 

아래의 상황이라면 무조건 버전 4을 사용해야 합니다. 

• 여러분의  프로젝트에 IE 10 및 IE 11에 대한 지원이 필요합니다. 
• 프로젝트는 jQuery에 의존하며 Bootstrap 5의 새로운 기능이 필요하지 않습니다. 
• Bootstrap 5는 아직 알파 버전이며 안정적인 버전이 출시 될 때까지 기다리려고합니다.

근데 아래의 상황이라면 버전 5 사용을 심각하게 고려해 봐야 합니다.

• 현재 단일 프로젝트나 앱을 개발하는데 있어서  React 또는  Vue.js 사용하고 jQuery 전혀 필요없다. 
• 확장된 색상 팔레트, 향상된 그리드 시스템, 사용자 지정 유틸리티 그리고  RTL 지원이 반드시 필요하다. 

 

자 필자인 경우는 뭘 사용할까요?? 전 일단 무조건 버전 4를 사용합니다.

대한민국이 생각보다 IE 사용 인구가 지금도 많아요. 윈도우 10을 사용해도 인터넷은 IE에서만 되는 줄 아는 분들이 많은 이상. 버전 4가 아무래도 1년 또는 3년까지 사용해야 되지 않을까 보입니다.