Bulma.css

💡 Bulma.css 우연히 어떤 사이트의 소스코드를 분석해보다가 알게된 CSS 프레임워크입니다. 가장 유명하고 자주 사용되는 CSS 프레임워크라고 하는데요, Flexbox를 기반으로 하는 무료 오픈소스인 Bulma.css의 장단점에 대해서 정리해보도록 하겠습니다.

Bootstrap과 비교해보기

입문자, 경력자 모두에게 친숙하고 그만큼 자주 사용하는 CSS 프레임워크인 Bootstrap과 비교했을 때, Bulma가 가지는 장점은 무엇이고 단점이 무엇인지에 대해서 알아보았습니다.

장점

1. Bootstrap에 비해서 가볍습니다. JavaScript 없이 CSS만을 사용하기 때문에 엄청 가볍다고 합니다.
2. CSS3의 최신 기술들인 Flexbox와 같은 기술을 활용하기 때문에 상황에 따라 굉장히 편리합니다.
3. Learning curve가 낮은 편입니다. Element에 class를 추가하는 형태로 동작하기 때문에 익히고 적용하기가 쉽습니다.
4. Customize가 쉽습니다. 애초에 customize를 많이 염두하고 만든 프레임워크이기 때문에 변수 선언을 통해 customize할 수 있습니다.
5. Bulma가 정해놓은 class를 지정해야지만 style이 적용되기 때문에 내가 정의한 다른 CSS를 오염시키지 않습니다. 이는 custom은 더 쉽게 만들고, CSS error를 쉽게 발견할 수 있도록 합니다.
6. Bootstrap보다 사용자가 적기 때문에, 참신한 느낌을 줍니다. 이미 사용자들은 Bootstrap으로 만든 웹사이트에 익숙해졌고, 개발자들은 디자인을 맞추기 위해 Bootstrap의 느낌을 빼는데 시간을 많이 투자합니다.

단점

1. 아무래도 JavaScript 없이 동작하기때문에 한계가 있습니다. 아직까지는 CSS만으로 인터렉티브한 효과를 적용하는데에는 제약이 존재합니다.
2. 브라우저 호환성이 낮습니다. JavaScript를 사용하지 않았고 CSS3의 최신 기술들을 활용하기 때문에 100% 호환되지 않는 브라우저들이 존재합니다. 이는 구형 브라우저 사용이 많은 한국에서는 특히나 심각한 단점입니다.
3. 한국어 가이드 문서를 구하기 어렵습니다.

사용 소감

👉 몇가지의 단점이 있지만 명확한 장점이 있기 때문에 아주 좋은 프레임워크라고 생각합니다.

Bootstrap은 스타일을 변경할 때 어려움이 있었는데 Bulma는 이런 스타일적인 제약이 없이 Flexbox와 같은 기술 사용에 집중할 수 있어서 마음에 들었습니다.

아무래도 혼자 프로젝트를 하다보면 디자이너 없이 혼자 웹 사이트를 만들때 레이아웃을 구성하기가 어려울 때도 많았는데 Bulma를 사용하면 비교적 빠른 작업이 가능해서 편리했습니다.