웹 개발을 위한 10가지 CSS 프레임워크 추천

웹 개발을 위한 10가지 CSS 프레임워크 추천에 대해 알려드리겠습니다. 프레임 워크(framework)는 요즘 시대의 웹 개발자에게는 없어서 안 될 중요한 도구가 되었습니다. 미리 설계된 구성 요소와 반응형 그리드, 유틸리티 등을 제공해 개발 속도를 높여주고 웹 디자인의 일관성을 제공해 줍니다. 오히려 사용할 종류가 너무 많아서 선택이 어렵다 싶을 정도로 가장 인기 많은 10가지의 css 프레임워크를 소개 및 설명해 보겠습니다.

CSS 프레임워크 BEST10

자주 쓰이는 프레임워크 10가지를 소개하며 코드로 작성할 때 어떤식으로 쓰이는지 예시 코드도 함께 있으니, 복사하여 직접 실습해 보시는 것을 추천드립니다.

1. Bootstrap

부트스트랩(bootstrap)은 가장 대중적으로 쓰이는 css 프레임워크 중 하나입니다. 반응형 웹사이트 구축 시 필요한 간편 도구들을 제공해 주며 그리드나 홈페이지에 필요한 다양한 구성 요소들이 포함되어 있습니다.

• 정보가 많아서 사용성 용이함
• 반응형 시스템(java script 포함)
• 간격 및 정렬, 가시성에 효과적
• 템플릿이 만들어져 있어서 초보 분들이 쓰기에 쉽고 편리함

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div></div>

2. Tailwind

Tailwind CSS의 경우 ‘class’를 사용해 html 코드 안에서 직접 스타일을 지정할 수 있는 프레임 워크입니다. 자세하게 사용자 정의가 가능하고 템플릿으로부터 자유로운 편입니다.

• 맞춤형 디자인이 가능하고 실용성이 우선임
• 구성된 파일을 통해 세밀하게 사용자 정의가 가능함
• 사용하지 않는 클래스 제거 시 파일 크기가 작음
• 자유롭게 디자인 하고 싶은 개발자에게 적합함

<div class="p-4 bg-blue-500 text-white">
  This is a Tailwind-styled box.
</div>

3. Foundation

Foundation은 반응형 프론트엔드 프레임 워크로 고급 기능에 중점이 되어 있기 때문에 초보자 보다는 전문 개발자들이 주로 사용합니다.

• 반응형 그리드 방식
• 내장 접근성 지원 가능
• 프로토타이핑, 모듈형 구성 요소
• 대규모 프로젝트 구축을 주로하는 능숙한 개발자

<div class="grid-x grid-padding-x">
  <div class="cell small-6">Column 1</div>
  <div class="cell small-6">Column 2</div></div>

4. Bulma

bulma는 플렉스박스 기반의 그리드 시스템이며, 가볍고 트렌디한 css 프레임워크입니다. 초보자들이 사용하기에 쉽고 수정 또한 쉬운 편입니다.

• 고유 css(javascript 종속성 없음)
• flexbox 기반의 그리드 시스템
• 초보 개발자도 읽기 쉬운 문법
• 간단한 스타일을 적용시킬 때 사용하기 좋음

<div class="columns">
  <div class="column is-half">Column 1</div>
  <div class="column is-half">Column 2</div></div>

5. Materialize

materialise는 구글의 머터리얼 디자인을 구현해 웹 프로젝트 제작에 깔끔하고 트렌디함을 보여줍니다.

• 머터리얼 디자인이 지정된 요소임
• javascript 위젯 사용

<div class="card">
  <div class="card-content">
    <span class="card-title">Card Title</span>
    <p>This is a Materialize card.</p>
  </div></div>

6. UIKit

UIkit의 경우 가벼운 모듈식 css 프레임 워크로 빠른 프로토 타이핑이나 제작 준비가 완료된 디자인일 경우 사용합니다.

• 모듈식 구성으로 유연하게 사용 가능
• 반응형 그리드 및 클래스
• css, javascript 모두 지원
• 가벼운 프레임워크를 찾는 분들이 쓰기 좋음

<div class="uk-grid">
  <div class="uk-width-1-2">Column 1</div>
  <div class="uk-width-1-2">Column 2</div></div>

7. Spectre.css

spectre.css는 기본에 충실한 깔끔하고 가볍게 사용할 수 있는 미니멀 프레임워크입니다.

• 압축 시 10KB 미만일 정도로 가벼움
• 모던하고 심플한 디자인
• 기본 그리드 양식을 구성하고 있음
• 작은 프로젝트 사용 시 이용하는것 권장

<div class="columns">
  <div class="column col-6">Column 1</div>
  <div class="column col-6">Column 2</div></div>

8. Pure.css

pure.css는 가볍고 반응성이 좋아서 어떤 프로젝트에도 추가 및 호환할 수 있습니다.

• 가벼운 모듈식 스타일
• 크기가 작아서 부담이 적음
• 다른 프레임워크와 호환이 가능함
• 최소한의 용량으로 기본적인 스타일이 필요한 경우 사용

<div class="pure-g">
  <div class="pure-u-1-2">Column 1</div>
  <div class="pure-u-1-2">Column 2</div></div>

9. Skeleton

skeleton은 빠른 개발을 위해서 필요한 요소만 구성된 프레임워크로 작은 프로젝트에 쓰면 좋습니다.

• 400줄의 짧은 css
• 간단한 그리드와 타이포 그래피 스타일
• 가볍고 빠른편
• 프로토타이핑이나 작은 웹사이트에 활용

<div class="row">
  <div class="one-half column">Column 1</div>
  <div class="one-half column">Column 2</div></div>

10. Tachyons

tachyons는 빠른 속도와 모듈 방식을 강조해 다양하게 변형할 수 있는 디자인을 허용하는 기능적 css 프레임워크입니다.

• CSS에 기능적 접근 가능
• 유틸리티 클래스를 사용해 빠른 프로토 타이핑 가능
• 상세한 사용자 정의 수정 가능함
• 유연하게 기능들을 수정하기 원하는 개발자에게 적합

<div class="pa3 bg-light-blue">
  This is a Tachyons-styled box.
</div>

환경에 따라 선택하는 프레임워크

이렇게 다양한 10가지의 종류를 어떤 상황에 쓰는 것이 좋을까요? 주로 사용하는 환경의 예시로 몇 가지 추천해 보겠습니다.

• 프로젝트 크기(소/대) : 소규모 프로젝트의 경우 skeleton, spectre.css 같은 가벼운 것을 사용하는 것이 멈춤 증상 없이 잘 운영됩니다. 대규모 프로젝트는 bootstrap, foundation 등을 사용하는 편입니다.
• 디자인 수정 정도 : 자유롭게 모든 디자인을 컨트롤 하고 싶을 경우 tailwind css나 tachyons를 주로 이용하고, 제한된 머터리얼을 원할 경우 materialize를 사용합니다.
• 복잡성 : 초보자는 최대한 간편하고 쉬운 것을 이용해야 하는데요. bulma의 경우 복잡하고 문서가 많아서 bootstrap을 추천합니다.

CSS 프레임워크 FAQ

내용 총 정리

오늘은 총 10가지의 css 프레임 워크를 추천해 보았습니다. 웹 디자인 품질에 큰 영향을 주는 요소이기 때문에 자신이 코딩하고자 하는 프로젝트의 특성을 고려해서 이용해 보는 것을 추천드립니다. 높은 수준의 기술력이 없더라도 프레임 워크를 통해 빠르고 퀄리티 있는 사이트를 제작해 볼 수 있으니 이용해 보시기 바랍니다.