실제 프로젝트에 맞는 CSS 프레임워크

최고의 CSS 프레임워크란 없고, 특정한 종류의 프로젝트에 맞는 프레임워크가 있을 뿐입니다. 화면 200개짜리 대시보드와 랜딩 페이지는 거의 공통점이 없습니다.

이 일곱 가지가 완결된 디자인 시스템부터 붙여놓고 잊어버리는 스타일시트까지 전 구간을 덮습니다.

유틸리티 우선

Tailwind CSS

규모 있는 앱에서 가장 안전한 선택. CSS를 쓰지 않게 되니 CSS가 자라지 않습니다.

tailwindcss.com

컴포넌트

Bootstrap

이번 주 안에 완성도 있고 접근성 좋은 관리자 화면이 필요하다면 여전히 적수가 없습니다.

getbootstrap.com

컴포넌트

Bulma

Bootstrap만큼 읽기 좋지만 자바스크립트 짐은 없습니다. 순수 CSS라 덮어쓰기도 쉽습니다.

bulma.io

디자인 토큰

Open Props

간격, 색, 그림자를 위한 CSS 변수 모음. 특정 프레임워크에 묶이지 않습니다.

open-props.style

클래스 없이

Pico CSS

시맨틱 HTML만으로도 보기 좋습니다. 문서와 프로토타입에 특히 잘 맞습니다.

picocss.com

아토믹 엔진

UnoCSS

필요할 때만 유틸리티를 생성해, 이 목록에서 가장 작은 결과물을 냅니다.

unocss.dev

Tailwind 컴포넌트

daisyUI

Tailwind 위에 실제 컴포넌트와 테마를 얹어 마크업을 덜 쓰게 해줍니다.

daisyui.com

프로젝트 수명으로 고르세요. 오래 갈수록 완제품 컴포넌트보다 토큰과 유틸리티가 낫습니다.

고르는 것에서 끝나지 않고, 만들어야 한다면?

웹 앱, API, 인프라, 인터페이스. 바르셀로나 기반 프리랜서, 어디에 있는 클라이언트든 환영합니다.

연락하기


코멘트

Leave a Reply

Your email address will not be published. Required fields are marked *