상위 5 부트스트랩 대안

부트스트랩은 웹 개발에서 흔히 사용되지만, 모든 프로젝트에 최적의 선택은 아닐 수 있습니다. 여기, 부트스트랩을 대체할 훌륭한 대안들을 소개합니다!

최근 웹사이트의 프론트엔드 코드를 살펴보면 부트스트랩이 자주 등장합니다. `container-fluid`, `row`, `col-sm-6`과 같은 클래스에 익숙해져, 다른 스타일의 프론트엔드 개발을 상상하기 어려울 정도입니다. 그래서 다음 프로젝트를 시작할 때 무의식적으로 부트스트랩을 선택하게 되죠. 하지만 인기가 있다고 해서 모든 프로젝트에 부트스트랩이 적합한 것은 아닙니다.

특히 간결한 프론트엔드를 구축할 때, 부트스트랩의 CSS와 JavaScript는 상당한 용량을 차지할 수 있습니다. 부트스트랩 CSS 및 JS 파일은 생각보다 큰 영향을 미칠 수 있습니다.

이 글의 목적은 다음과 같습니다:

부트스트랩과 유사하지만 차별화된 라이브러리 대안을 제시합니다.
이러한 대안을 고려해야 하는 이유를 설명합니다.

대안을 선택해야 하는 이유에 대한 설명이 중요합니다. 많은 개발자가 문제를 인지하지 못하거나, 부트스트랩 사용이 오히려 작업을 더 어렵게 만들고 있다는 것을 모르고 있기 때문입니다. 이 글은 부트스트랩을 비판하려는 것이 아닙니다. 부트스트랩 4를 선호하며, 가능하면 언제든지 사용합니다. 하지만 개인 개발자로서 가장 인기 있는 솔루션이 항상 최선은 아니라는 점을 이해하고, UI 개발자가 아닌 만큼 프론트엔드 구축 시 과도한 걱정을 피하고 싶습니다.

그럼 이제 대안들을 살펴보겠습니다.

플렉스박스 그리드

부트스트랩을 계속 사용하는 가장 큰 이유는 그리드 시스템 때문일 것입니다. `row`, `col-md-6` 등의 클래스에 익숙해지기까지 시간이 걸렸지만, 이제는 행, 열, 오프셋으로 레이아웃을 설계하는 것이 자연스러워졌습니다.

솔직히 말해서, 부트스트랩의 다른 부분들은 작업하기 다소 복잡할 수 있습니다. 폼, 내비게이션, 버튼, 테이블 등 많은 클래스를 기억해야 합니다. 저처럼 그리드 시스템만 부트스트랩을 사용하고 나머지 CSS는 직접 작성하는 경우가 많을 것입니다.

이럴 때 플렉스박스 그리드가 더 나은 대안이 될 수 있습니다.

플렉스박스 그리드는 이름 그대로 CSS 플렉스박스 속성을 기반으로 합니다. CSS 기술을 추상화하여 요소 배치에만 집중할 수 있습니다. 클래스 이름이 부트스트랩 4와 유사하여 두 도구 사이를 전환할 때 어려움이 없습니다. 예를 들어, 플렉스박스 그리드에서 “주변 공간”을 지정하는 코드는 다음과 같습니다.

<div class="row around-xs">
  <div class="col-xs-2">
      <div class="box">
          around
      </div>
  </div>
  <div class="col-xs-2">
      <div class="box">
          around
      </div>
  </div>
  <div class="col-xs-2">
      <div class="box">
          around
      </div>
  </div>
</div>

이 그리드 시스템의 축소된 CSS 파일은 10.7KB에 불과하여 최종 다운로드 크기를 크게 줄여줍니다. 부트스트랩을 사용자 정의하기 어려울 때, 플렉스박스 그리드를 사용하여 필요한 부분만 직접 스타일링하는 것을 선호합니다.

여기에서 Flexbox 온라인 학습하기.

순수 CSS

부트스트랩이 필요한 모듈만 선택하여 사용할 수 있다면 좋지 않을까요?

순수 CSS는 웹사이트의 다양한 기능 영역을 다루는 모듈 세트입니다. 원하는 모듈을 개별적으로 또는 모두 다운로드할 수 있으며, 총 다운로드 크기는 3.7KB를 넘지 않습니다!

네, 맞게 읽으셨습니다.

gzip으로 압축된 모든 모듈의 크기는 3.7KB이며, 개별 모듈은 더 작습니다. 그리드 모듈은 0.8KB, 기본 모듈은 1.0KB입니다. PureCSS 개발팀은 모바일 기기를 염두에 두고 효율성을 최우선으로 고려하여 CSS 코드를 작성했다고 합니다.

만약 그리드 및 폼 모듈만 필요하다면, 이 두 모듈(기본 모듈 포함)을 다운로드하면 3.4KB 미만으로 해결됩니다! 버튼, 테이블, 메뉴 모듈을 사용하지 않을 경우, 해당 CSS를 포함할 필요가 없습니다.

PureCSS는 자체 클래스를 사용하며, 코드 결과는 부트스트랩과 다를 수 있습니다. 다음은 그 예입니다.

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
      <div class="l-box">
          <h3>Lorem Ipsum</h3>
      </div>
  </div>
  
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
     <div class="l-box">
         <h3>Dolor Sit Amet</h3>
     </div>
  </div>
  
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
     <div class="l-box">
         <h3>Proident laborum</h3>
     </div>
  </div>
  
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
     <div class="l-box">
         <h3>Praesent consectetur</h3>
     </div>
  </div>
</div>

12열 그리드가 아닌, 열 너비를 지정하는 그리드 시스템을 사용합니다. `pure-u-lg-1-4`는 큰 화면에서 사용 가능한 너비의 1/4 또는 25%를 차지해야 함을 의미합니다. 1/5 단위의 너비도 사용 가능합니다.

PureCSS는 필요에 따라 선택할 수 있는 유연하고 훌륭한 CSS 도구입니다. 하지만 새로운 작업 방식에 익숙해져야 합니다.

PureCSS도 자체 클래스와 기본 스타일을 가지고 있어 부트스트랩과 완전히 다르다고 볼 수는 없습니다.

지밋

지밋 프레임워크는 조금 특이합니다. UI 구축을 위한 프레임워크지만, 특정 유형의 UI인 목업을 대상으로 합니다.

제품 기능을 보여주기 위한 프론트엔드를 개발해야 할 때가 있습니다. 이상적인 방법은 UI 디자이너/개발자와 함께 고급 와이어프레임 도구(Moqups, Blasmic 등)로 목업을 만드는 것이지만, 현실에서는 혼자 모든 것을 해야 할 때가 많습니다. 이때 필요한 것이 다음과 같은 프레임워크입니다.

HTML/CSS로 코딩 가능
가벼움
기본 컴포넌트의 다양한 컬렉션 제공
일관된 스타일 제공
와이어프레임의 “회색” 톤과 유사한 디자인
배우기 쉬움
CSS 전처리기 내장

지밋은 이러한 모든 조건을 충족합니다. 크기는 84KB에 불과하며, 다양한 컴포넌트를 제공합니다. 다음은 제가 특히 매력적으로 생각하는 몇 가지 예입니다.

트리 뷰

브레드크럼

탭

더 많은 기능은 여기에서 확인할 수 있습니다.

지밋의 그리드 시스템은 다음과 같습니다.

<div class="row">
   <div class="c12">
      <div class="row">
         <div class="c4">4 columns</div>
         <div class="c4">4 columns</div>
      </div>
      <div class="row">
         <div class="c4">4 columns</div>
         <div class="c4">4 columns</div>
      </div>
   </div>
</div>

`c`는 column을 의미하며, `c4`는 4개 단위를 차지하는 열을 의미합니다. 부트스트랩과 유사하게 12개의 그리드 시스템을 사용합니다.

지밋은 반응형 UI 프로토타입을 개발하기 위한 간편한 프레임워크입니다. 프로토타이핑 목적으로는 부트스트랩보다 다운로드 용량이 작고 디자인이 더 깔끔하여 유용합니다.

HTML 킥스타트

대부분의 프로젝트에서 개발 속도는 중요합니다. 웹 개발 속도를 늦추는 주된 원인은 프론트엔드 개발이며, 특히 인터랙티브 컴포넌트를 코딩하는 데 많은 시간이 소요됩니다. 컴포넌트 동작 방식과 관리해야 할 화면 크기가 다양하기 때문에 개발자에게는 어려울 수 있습니다.

HTML 킥스타트는 이러한 문제에 대한 대안을 제시합니다.

간단히 말해, HTML 킥스타트는 프로젝트에 바로 적용하여 개발 시간을 크게 단축할 수 있는 세련된 컴포넌트 모음입니다. 다음은 몇 가지 예시입니다.

드롭다운

버튼

탭 (중앙 및 아이콘 포함)

머티리얼라이즈

부트스트랩이 일반적인 웹 디자인 문제를 해결하는 데 유용하지만, 머티리얼 디자인 스타일을 선호한다면 머티리얼라이즈를 사용해 보세요.

머티리얼라이즈는 12포인트 그리드 시스템, 오프셋, 폼, 카드 등 부트스트랩과 유사한 컴포넌트를 제공합니다. 하지만 몇 가지 장점이 있습니다.

푸시/풀

머티리얼라이즈 CSS의 푸시/풀 기능을 사용하면 열 순서를 변경할 수 있습니다. 이는 새로운 CSS 그리드 표준을 연상시킵니다.

<div class="row">
  <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
  <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>

결과는 다음과 같습니다.

열의 위치가 변경된 것을 알 수 있습니다. 기존 부트스트랩 기반 CSS로는 불가능한 기능입니다.

자바스크립트

머티리얼라이즈는 툴팁, 토스트(Android 알림과 유사), 패럴랙스, 압정 등 여러 JavaScript 기능과 효과를 제공합니다. 특히 FeatureDiscovery는 특정 이벤트(예: 버튼 클릭) 발생 시 페이지 요소를 강조 표시하여 사용자 주의를 끌 수 있는 효과입니다. 자세한 내용은 https://materializecss.com/feature-discovery.html에서 확인할 수 있습니다.

머티리얼라이즈는 부트스트랩의 훌륭한 대안이며, 모든 기능을 갖춘 머티리얼 디자인 CSS 프레임워크를 원하는 사람들에게 적합합니다.

결론

부트스트랩은 반응형 디자인의 대명사입니다. “모바일 우선 디자인”이라는 용어를 대중화하고, 이를 구현하는 방법을 보여주었습니다. 하지만 부트스트랩이 대부분의 작업을 완료할 수 있지만, 항상 충분하지 않을 수 있습니다. 부트스트랩이 제한적이라고 느껴지거나, 특수한 요구사항이 있다면 여기서 소개된 옵션 중 하나가 도움이 될 수 있을 것입니다. 🙂