Bulma를 선택한 이유

웹 UI를 만들때 적당한 CSS Framework를 사용하는 것은 좋은 선택이다. BootstrapFoundation은 유명하지만 기능이 너무 많아서 내가 만들려는 작은 서비스와 어울리지 않았다. mini css framework구글에서 검색하여 Bulma를 발견했다. 각 프레임워크가 자신을 어떻게 설명하는지 비교했다.

Bootstrap

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Foundation

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

Bulma

Bulma is a free and open source CSS framework based on Flexbox.

Bootstrap의 설명이 가장 길다. 그래서 제외한다. 그다음 파일 크기를 비교했다. 파일 크기가 크다고 기능이 많다고 볼 순 없지만 작은 프로젝트에는 고려할만해서 그다음으로 파일 크기가 큰 Foundation을 제외했다.

CSS 프레임워크 압축 파일 크기
bootstrap-4.0.0-beta.2.zip 2.7M
foundation-6.4.2-complete.zip 232K
bulma-0.6.1.zip 91K

Bulma가 가장 작다. 기능이 단순할 것 같은 느낌이 들었다. 간단한 기능엔 단순한 CSS Framework가 적당하다. 그러나 정작 Bulma를 선택한 치명적인 이유는 문서에 나와있는 철학이다.

Because Bulma solely comprises CSS classes, the HTML code you write has no impact on the styling of your page.

HTML 태그가 아닌 클래스에만 CSS가 적용된다는 의미다. 예를 들어 HTML 코드로 버튼을 하나 만들었다고 가정하면

<button>search</button>

Bootstrap 이나 Foundation을 적용할 경우 내가 원하지 않았는데도 버튼 크기가 변경된다. 그러나 Bulma는 정말 아무 일도 하지 않는다. 버튼 스타일을 바꾸고 싶다면 아래처럼 명시적으로 button 클래스를 사용하여 적용할 수 있다.

<button class="button">search</button>

클래스 지향(?)이다. 기존에 사용하던 CSS에 영향 주지 않는다. 한 가지 장점을 더 말한다면 Bulma는 하나의 파일만 필요하다는 것이다.

You only need 1 CSS file to use Bulma

3분도 안되는 Bulma 동영상을 보고나면 편리한 사용법에 깜짝 놀라게 될 것이다. 도서관 책을 누군가가 빌려갔는지 알기 위해서 웹 서비스1를 만들어 사용하고 있었다. 이 서비스를 개선하기 위해 기존에 사용하던 Bootstrap 대신 Bulma를 선택했다. 빠른 개발을 위해 무료 템플릿을 참조할 수도 있다.


  1. 무료 서버라 10초 정도 걸릴수 있다. 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.