[배경지식] CSS 프레임워크를 알아보자

이번에 알아볼 내용은 CSS 프레임워크이다.

프론트의 메타 자체가 빠르게 바뀌는 편이므로 작성일을 기준으로

많이 쓰이는 프레임워크 기준으로 정리를 해 두었다

+ 이 글에서 쓰인 수치들은 별도의 명시가 없을 시 2021년 데이터 수치를 작성해 둔 것이다

 

 

CSS 프레임워크란?

미리 개발 해 둔 완성형 디자인을 쉽게 가져다 쓸 수 있도록 한 것

바로 아래에 이전년도까지의 만족도, 흥미, 사용률을 나타내는 사이트에서 정보를 얻어왔다

The State of CSS 2021: CSS Frameworks

사진 보며 확인해보기

 

2021 기준 만족도가 높은 순서대로 알아보도록 하겠다

---

Tailwind CSS

만족도 78, 흥미 51, 사용률 39의 수치를 가지고 있는 프레임워크로
특이사항이 있다면 2년동안 사용률이 9th -> 2rd 로 굉장히 빠르게 치고 올라간 부분을 주목할 수 있다

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

• 컨셉
  • Utility-First
  • BootStrap과 비슷하게 m-1, mt-5 등 미리 세팅된 유틸리티 클래스를 활용한다
  • HTML 코드 내에서 스타일링을 할 수 있다
• 장점
  • Utility-First
    • 스타일 코드도 HTML 안에 있기 때문에 CSS파일을 별도로 관리할 필요가 없다
    • 화면을 분할해서 코딩을 할 필요가 없어진다
    • 태그의 스타일을 변경하기 위해 일일히 검색해서 찾는 수고를 덜 수 있다
    • 랩핑 태그의 클래스명을 따로 지정하지 않아도 된다
    • styled-component보다 두 배 이상 빠른 개발속도를 낼 수 있다
  • 일괄된 디자인
    • 모든 곳에서 동일한 색상, 사이즈, 간격 등의 유틸리티 클래스 이용
    • -> 일관된 스타일로 구현하기 쉬워진다
  • 쉽고 자유로운 커스텀 디자인
    • 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀 할 수 있다
    • 다크 모드 구현이 간편하다
  • 로우 레벨의 스타일까지 제공
  • JavaScript 코드와 완전히 분리
• 단점
  • 못생긴 코드
    • 직관적이긴 하지만 코드가 못생겼다
    • -> 진입장벽
  • 개발 내내 익혀야 하는 클래스명에 따른 스타일
    
    • 기존 CSS와 비슷하고 자동완성을 지원하는 플러그인(Intelli Sense)에 도움받을 수 있다
  • JavaScript 코드 사용 불가능
    
    • 동적 스타일링을 설정해야 할 경우 굉장히 번거로운 작업을 진행해야 함
  • HTML + CSS 동시 사용
    • 장점이자 단점이 될 수 있다

---

PureCSS

만족도 70, 흥미 39, 사용률 9의 수치를 가지고 있는 프레임워크로
특이사항이 있다면 사용률(8th)에 비해 꾸준히 높은 만족도(2nd)와 흥미(2nd) 순위라고 볼 수 있다

Pure

• 컨셉
  • 모든 모듈이 사용될 때 3.7KB(압축 기준)의 작은 용량만을 사용한다
  • 모든 웹 프로젝트에 추가 가능한 재사용 가능하고 반응이 빠른 CSS모듈 제공
• 장점
  • 가벼움
    • 가볍고 성능이 좋다
  • 사용자 정의 가능
    • 모듈 방식으로 가져와서 필요한 것만 구현할 수 있다
  • 높은 지원률
    • Yahoo에서 지원하는 프로젝트이므로 장기간 프로젝트에 사용하기에 좋다
  • 구성 요소
    • 최신 웹용으로 제작된 반응형 구성 요소와 함께 제공된다
• 단점
  
  • 숙련자 최적화 프레임워크
    • 프레임워크를 사용하기 위해서 자신만의 디자인을 만들어야한다
    • -> 경험이 부족하거나 소규모 팀에는 적합하지 않다

---

Ant Design

만족도 56, 흥미 29, 사용률 16의 수치를 가지고 있는 프레임워크로
특이사항으로는 만족도가 6th -> 3rd로 상승한 점을 볼 수 있다

Ant Design - The world's second most popular React UI framework

• 컨셉
  • 완성도 높은 UI 프레임워크를 쓰고 싶다
  • 좋은 UX를 만들고 싶다
  • 현실적인 디자인 원칙
    • 근접성(Proximity)
    • 정렬(Alignment)
    • 대조(Contrast)
    • 반복(Repetition)
    • 직관적인 제작(Make it Direct)
    • 화면에 머무름(Stay on the Page)
    • 가벼운 유지(Keep it Lightweight)
    • 가이드 제공(Provide an Invitation)
    • 트랜지션 사용(Use Transition)
    • 즉각적인 반응(React Immediately)
• 장점 
  • 아는 만큼 더 좋게 만들어지는 UX
    
    • 플랫폼 별 제품 제공
      • 리액트와 앵귤러로 구현한 컴포넌트만 해도 54개이다
    • 기본적인 버튼, 그리드, 폼 컴포넌트가 잘 나와서 어드민 만들기에 좋다
    • 달력, 자동 완성, 스핀 같은 컴포넌트가 기본으로 제공된다
  •  레이아웃을 잡는 데 걸리는 시간 3분
    • 굉장히 간단한 과정 이후에 레이아웃이 완성된다
  • 온디맨드 번들링
    • 많은 컴포넌트 결과
    • 큰 번들링 결과
    • react-app-rewired와 함께 사용 시 쉽게 환경 구성이 가능하다
  • 테마 변경
• 단점
  • 기본 언어 = 중국어
    • 알리바바 자회사에서 개발
    • 대부분의 정보가 중국어이기에 정보를 얻기가 어렵다
  • 부족한 정보
    
    • 한국에서는 거의 쓰지 않는 프레임워크
    • 정보의 부족은 프레임워크 사용의 어려움으로 연결된다

 

---

Bulma

만족도 54, 흥미 28, 사용률 19의 수치를 가지고 있는 프레임워크로
특이사항으로는 사용률 순위는 일정하지만 만족도와 흥미도가 2년에 걸쳐 지속적으로 떨어진 모습을 볼 수 있다

Bulma: Free, open source, and modern CSS framework based on Flexbox

• 컨셉
  • 오픈소스이다
  • CSS Framework이지만 BootStrap보다 가볍다
• 장점
  
  • 가볍다
    • Only CSS, Not JavaScript
    • 가장 큰 장점
  • 편리하다
    
    • CSS3 최신 기술들로 제작되었다
  • 러닝커브가 낮다
    
    • Element에 class를 추가하는 형태로 동작한다
  • 커스터마이징 난이도가 낮다
    • 변수 선언을 통해 커스터마이즈 할 수 있다
  • 문법을 따라해도 CSS가 오염되지 않는다
    • Bulma에서 제공하는 class를 적용시키지 않으면 변화가 없도록 설계되어있다
    • -> 더 쉬워진 custom, CSS error 찾기
• 단점
  • 제한적인 기능
    • 순수 CSS로만 구성되어있다
    • JavaScript 없이 동작한다
  • 낮은 브라우저 호환성
    
    • 최신 CSS3을 활용하였기에 100% 호환되지 않는 브라우저들이 존재한다
    • 구형 브라우저들이 많은 한국에서 치명적인 단점으로 작용한다
  • 적은 정보
    • 한국어로 된 가이드 문서는 거의 없다
    • 영어 자료에 익숙하다면 크게 문제 없다

---

Semantic UI

만족도 47, 흥미 35, 사용률 16의 수치를 가지고 있는 프레임워크로
특이사항으로는 만족도와 흥미도가 2년에 걸쳐 지속적으로 떨어진 모습을 볼 수 있다

Semantic UI

• 컨셉
  • 간단한 클래스 이름과 격자 구조
  • CSS기반 사용자 인터페이스 개발 프레임워크
  • 대화형 사용자 인터페이스를 원활하게 생성하고 싶다
• 장점
  • 간단하고 직관적인 사용법
  • 수용성 및 풍부한 UI 구성 요소
  • 선택 가능한 수많은 테마
  • 타 프레임워크에 비해 덜한 복잡함
• 단점
  • 모든 모바일 장치를 지원
    • 처리속도 감소
  • 낮은 브라우저 호환성
  • 초심자에게는 권장하지 않음

---

Materialize CSS

만족도 46, 흥미 25, 사용률 32의 수치를 가지고 있는 프레임워크로
특이사항으로는 2~3위에 머무르는 높은 사용률이라 할 수 있다

Documentation - Materialize

• 컨셉
  • Material 소재를 대입해서 UI/UX의 관계를 쉽게 하였다
  • 사용자가 알기 쉬운 디자인 추구
  • Object의 움직임을 중요하게 본다
    • 움직임을 위해 여러 객체에 대한 다이나믹한 애니메이션 추가
• 장점
  
  • 사람들에게 친숙한 Material 디자인 룩앤필을 쉽게 구현할 수 있게 해준다
  • 사전제작된 template들
    • 시간을 절약할 수 있다
  • 모바일 친화적인 구성 요소들이 많다
  • Sass와 호환이 잘 된다
  • 애니메이션
    • 사용자 친화적인 속도
    • 액션을 기점으로 하여 Object의 이동 변형
    • 출현에 연속성 부여
• 단점
  • Material 디자인에 엄격하게 맞춰져 있으므로 다른 디자인을 추구한다면 이점이 없다
  • 기업 지원이 없는 소규모 독립 프로젝트이다
  • 무료 이용 시 기능 한계가 존재한다

---

UIKit

만족도 45, 흥미 25, 사용률 6의 수치를 가지고 있는 프레임워크로
특이사항으로는 모든 방면에서 2년 전에 비해 한 단계 상승한 순위로 볼 수 있다

UIkit

• 컨셉
  • IOS application의 UI를 구현하고 이벤트를 관리하는 프레임워크
  • storyBoard 지원
  • IOS 기본 UI 프레임워크
  • 명령형 프레임워크
  • 이벤트 중심
    • 이벤트가 발생하면 UI를 새로 그려줌
• 특이사항
  • Apple에서 UIKit -> SwiftUI로 전환하는 추세이므로 자세한 정보는 생략하였다

---

Primer

만족도 42, 흥미 22, 사용률 2의 수치를 가지고 있는 프레임워크로
특이사항으로는 만족도가 2년 사이에 꼴지에서 4단계가 상승했다는 점을 들 수 있다

Primer CSS

• 컨셉
  • 오픈 소스 CSS 프레임워크이다
  • 깃허브 웹사이트의 넓은 스펙트럼을 제공하기 위해 만들어졌다
• 장점
  
  • 충분한 유연성
    • 쉽게 구축할 수 있는 일관적인 사용자의 경험
    • 광범위한 Github 웹 사이트를 지원
  • 재사용 가능한  구성요소와 유틸리티
    • 다양한 레이아웃을 구현하는 데 사용할 수 있다
  • 보장된 스타일 일관성, 상호 운용성
  • 기본요소 + 3가지 주요 테마로 분류되는 스타일
    • 타이포그래피 스타일
    • 버튼
    • 네비게이션
• 단점
  • 한글로 된 정보를 얻기 힘듬
  • 부족한 정보

---

Tachyons

만족도 42, 흥미 22, 사용률 5의 수치를 가지고 있는 프레임워크로
특이사항으로는 모든 수치가 2년 사이 크게 하락했다

TACHYONS - Css Toolkit

• 컨셉
  
  • 100% 반응형
  • 100% 호환성
  • 속도 최대한 빠르게
  • 쉬운 디자인
  • 기존 인터페이스에 녹아드는 쉬운 변경
  • 재사용성 높이고 반복 줄이기 
  • 문서화
  • 가능한 적은 양의 코드
• 장점
  • 모바일 우선 CSS 아키텍처
  • 490개의 접근 가능한 색상 조합
  • 8px 기준 그리드
  • 레이아웃 문제를 줄이기 위한 여러 디버깅 유틸
  • 단일 목적 클래스 구조
  • 경량화(~14KB)
  • 여러 프로젝트에서 사용 가능
  • 높은 호환성
  • 무한 중첩 가능
• 단점
  • 한글 정보 부족

---

BootStrap

만족도 41, 흥미 16, 사용률 85의 수치를 가지고 있는 프레임워크로
특이사항으로는 압도적인 사용률로 인해 흥미를 느끼지 않는다(?) 라고 볼 수 있다

Bootstrap

• 컨셉
  
  • 압도적인 사용률
  • 친숙함
  • 반응형
  • 그리드
  • 구성 요소들 제공
    • 버튼, 모델 등의 페이지 구성 요소
  • 테마
• 장점
  
  • 내부 클래스를 알고있으면 쉽게 여러 형태의 페이를 만들 수 있다
    • 작업속도의 감소로 이어진다
  • 다양한 해상도 대응이 처리되어있다
    • 반응형을 만드는 것이 어렵지 않다
  • 나쁘지 않은 퀄리티
• 단점
  • 미리 짜여진 스타일로 인한 정형화된 디자인, 기능
    • 창의적인 기능과 디자인을 만들려고 하는 경우 많은 시간을 작업하게 만든다
  • 굉장히 무거운 프로그램
    • 타 프로젝트에 비해 느린 로딩 속도
    • 10%의 코드를 위해 100%의 코드를 함께 로딩한다
  • 러닝 커브가 높다
    
    • 미리 정의된 클래스를 하나씩 다 분석해야 한다
    • 각 해상도마다 어떻게 반응하는 지 파악해야 한다

---

Halfmoon

만족도 41, 흥미 36, 사용률 1의 수치를 가지고 있는 프레임워크로
특이사항으로는 21년도에 출시되어 높은 관심을 받고 있는 것으로 보인다

Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and to

• 컨셉
  • 많은 유용하고 흥미로운 것들을 가지고 있는 프레임워크
• 장점
  • 다크 모드가 내장되어있다
  • 고도로 표준화된 구성 요소들
    • 모든 것들에 대해 날렵하고 유용하다
  • 다양한 웹 구축 도구들
    
    • 네비게이션 바
    • 5가지 유형의 사이드 바
    • 전방향 드롭다운 기능
    • 토스트(Toast)
    • 그 외 수많은 유틸리티 등
  • JavaScript 없이 작동하는 구성 요소들
• 단점
  • 한글 정보가 없다시피 하다

---

Foundation

만족도 28, 흥미 20, 사용률 27의 수치를 가지고 있는 프레임워크로
특이사항으로는 모든 수치 순위가 2년에 걸쳐 2단계씩 떨어진 모습을 볼 수 있다

The most advanced responsive front-end framework in the world. | Foundation

 

• 컨셉
  • 반응형 웹 페이지 구성을 위한 기능들 제공
• 장점
  
  • 화면 크기별 CSS 적용
  • 화면 크기 또는 화면 방향에 따른 표시 여부 설정 가능
  • 다양한 레이아웃을 화면 크기에 따라 적용할 수 있는 영역 설정
  • 화면 크기에 따라 컨텐츠 블럭의 배열을 조정할 수 있는 영역 설정법
  • 화면 크기 변경에 따라 JavaScript이벤트가 발생하여 상황에 맞게 처리될 수 있다
• 단점
  • 한글 자료 거의 없음

---

End

 

 

참고자료

https://velog.io/@lzns960/CSS-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%ACBootstrap%EB%9E%80

CSS 프레임워크(Bootstrap)란

https://codens.info/2466

Best CSS Frameworks 2022(바로 적용)

https://2021.stateofcss.com/en-US/technologies/css-frameworks/

The State of CSS 2021: CSS Frameworks

https://wonny.space/writing/dev/hello-tailwind-css

Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log

https://acstory.tistory.com/409

[CSS] 2021년 최고의 CSS 프레임워크 9가지

https://jeonghwan-kim.github.io/2018/10/13/ant-design-101.html

앤트 디자인 - 어드민 개발을 위한 프레임웍

https://jeesub.github.io/blog/css-framework-Bulma-%EC%86%8C%EA%B0%9C/

CSS-framework-Bulma-소개

https://grahams.tistory.com/289

[Bulma]벌마 CSS 프레임워크

https://lullulu.tistory.com/21

Semantic UI : 소개 ~ js가 필요한 컴포넌트의 사용법

https://ko.savtec.org/articles/web-design/build-responsive-websites-faster-with-semantic-ui.html

시맨틱 UI로보다 신속하게 대응할 수있는 웹 사이트 구축 / 웹 디자인

https://hashdork.com/ko/best-frameworks-to-build-user-interfaces/

10년 사용자 인터페이스를 구축하기 위한 2022가지 최고의 프레임워크 - HashDork

https://velog.io/@aideneverywhere/CSS-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC

CSS 프레임워크

https://penguingoon.tistory.com/275

[Sass] Sass란 뭘까? Sass를 사용하는 이유? Sass와 SCSS의 차이는?

https://no-dev-nk.tistory.com/69

SwiftUI vs UIKit

https://velog.io/@wh5929/UIKit-%EA%B7%B8%EB%A6%AC%EA%B3%A0-SwiftUI

UIKit 그리고 SwiftUI

https://www.geeksforgeeks.org/primer-css/

Primer CSS - GeeksforGeeks

http://www.incodom.kr/Bootstrap 

생물정보 전문위키, 인코덤

https://aimho.tistory.com/94

Bootstrap 소개 장단점 및 설치방법

https://www.gethalfmoon.com/docs/introduction/

Introduction - Halfmoon