4장 프레임워크

CSS 프레임워크 도입 판단

CSS 프레임워크는 빠른 UI 구축을 돕지만 프로젝트 요구, 커스터마이징 비용, 접근성 기준을 함께 따져야 합니다.

01

Need

프로젝트가 빠른 프로토타입인지, 장기 운영 제품인지 먼저 구분합니다.

02

Model

컴포넌트 중심인지 유틸리티 중심인지 팀의 작업 방식과 맞춥니다.

03

Customize

브랜드 색, 간격, 컴포넌트 변형을 어디까지 바꿀지 정합니다.

04

Maintain

사용하지 않는 CSS, 버전 업데이트, 문서화 비용을 관리합니다.

Bootstrap

준비된 컴포넌트와 레이아웃 규칙으로 빠르게 형태를 잡습니다.

Tailwind CSS

유틸리티 클래스로 디자인 결정을 마크업 가까이에 조합합니다.

직접 작성

작은 프로젝트나 고유한 디자인 시스템에는 가벼운 CSS가 더 낫습니다.

접근성

컴포넌트가 제공하는 ARIA와 키보드 동작을 그대로 믿지 말고 확인합니다.

속도·일관성·자유도 선택

속도, 일관성, 자유도 중 어떤 가치가 이번 프로젝트에서 가장 중요한지 정합니다.

CSS 실수 방지

프레임워크 문법을 외우는 데 그치지 말고 생성되는 HTML과 CSS를 이해합니다.

CSS 프레임워크 도입 판단

같은 카드 UI를 프레임워크와 순수 CSS로 비교해 장단점을 설명합니다.