Tailwind와 Bootstrap의 장점을 결합한 커스텀 CSS 프레임워크 구축기

핵심 기술: Bootstrap의 사용성에 불편함을 느끼고 Tailwind CSS의 복잡성 때문에 자체 CSS 프레임워크를 구축한 개발자의 경험을 공유하며, Sass(SCSS)를 활용한 반응형 그리드 시스템 구현 방법을 제시합니다.

기술적 세부사항:
* 기존 프레임워크의 한계: Bootstrap의 유틸리티 클래스 부족, SCSS 파일의 복잡성과 상호 의존성 문제로 인한 확장 어려움.
* Tailwind CSS에 대한 비판: 장황한 클래스명, 빌드 프로세스 요구, 터미널 사용의 불편함.
* 자체 프레임워크 구축: Tailwind와 Bootstrap의 장점을 결합하여 간결하고 유연한 프레임워크 제작.
* 반응형 브레이크포인트 설정: sm, md, lg 세 가지 주요 브레이크포인트로 데스크탑과 모바일 사용자에게 최적화.
scss $breakpoints: ( 'sm': 'min-width: 641px', 'md': 'min-width: 921px', 'lg': 'min-width: 1201px', );
* 기본 그리드 시스템 (.row): Flexbox 기반의 그리드 구현. gap 속성을 사용하지 않고 margin과 padding을 조절하여 컬럼 간 간격(--flex-gap-cols, --flex-gap-rows)을 관리.
scss .row { --flex-gap-rows: 0px; --flex-gap-cols: 20px; display: flex; flex-wrap: wrap; margin-left: calc( -0.5 * var(--flex-gap-cols)); margin-right: calc( -0.5 * var(--flex-gap-cols)); margin-top: calc(-1 * var(--flex-gap-rows)); > * { flex: 0 0 auto; width: 100%; padding-right: calc(var(--flex-gap-cols)* 0.5); padding-left: calc(var(--flex-gap-cols)* 0.5); margin-top: var(--flex-gap-rows); } }
* 컬럼 수 지정 클래스: .row-cols-auto 부터 .row-cols-12 까지 너비와 flex 속성을 지정.
scss .row-cols-2 > * { width: 50%; flex: 0 0 auto!important; } .row-cols-12 > * { width: 8.33333333%; flex: 0 0 auto!important; }
* 반응형 컬럼 클래스: Sass @each 루프를 사용하여 각 브레이크포인트에 대한 클래스(sm:row-cols-2, md:row-cols-4 등)를 자동으로 생성.
scss @each $breakpoint, $size in $breakpoints { @media ($size) { .#{$breakpoint}\:row-cols-2 > * { width: 50%; flex: 0 0 auto!important; } .#{$breakpoint}\:row-cols-12 > * { width: 8.33333333%; flex: 0 0 auto!important; } } }
* 빌드 프로세스 불필요: Codekit, Prepros 등과 같은 도구를 사용하여 Sass를 CSS로 컴파일하므로 별도의 빌드 도구(Webpack, Vite 등) 설정이 필요 없음.

개발 임팩트: 더 적은 클래스명으로 간결하게 UI를 구성할 수 있으며, Sass의 강력한 기능을 활용하여 반복적인 CSS 작성을 줄이고 유지보수성을 높일 수 있습니다. 특정 요구사항에 맞는 맞춤형 그리드 및 레이아웃 시스템을 효율적으로 구축할 수 있습니다.

커뮤니티 반응: 언급된 커뮤니티 반응은 없으나, 개발자의 개인적인 경험과 솔루션을 공유하는 형태로, 유사한 고민을 가진 개발자들에게 공감을 얻을 수 있습니다.

톤앤매너: 개인적인 경험을 바탕으로 솔직하고 실용적인 개발 팁을 공유하는 톤입니다.