bulma는 flexbox를 기반으로 한 css 프레임워크로 소개됩니다. 버전은 아직 1.0도 안되었지만, 사용해보니 개인적으로는 무척 만족스러운 느낌입니다. 비록 자바스크립트에 의존하지 않은 순수한 css로만 구성된 프레임워크라 부트스트랩에 비해서는 다소 빈약하다고 느껴질 수도 있습니다.

bulma의 아주 간결한 column 레이아웃 구성

하지만 column 레이아웃을 구성하는 부분에서 반해버릴 수 밖에 없었습니다. 위의 사진처럼, bulma는 columns > column이라는 아주 단순한 구조로 레이아웃이 구성됩니다.

편리하긴 하지만, bulma에 비하면 다소 직관적으로 이해하기 어려운 bootstrap

그에 비하면 부트스트랩은 다소 구조가 좀 복잡합니다. container > row > col-sm 이라는 흐름을 갖고 있는데, col-sm이라는 것이 익숙한 사람에게는 column small이라고 이해되지만, 처음 보는 사람은 이게 무슨 의미인지 찾아봐야합니다. 러닝커브(learning curve)가 bulma보다는 조금 필요하다는것이죠.

세분화된 class 정의가 돋보이는 tailwind css

최근 개발자들 사이에서 인기를 끈다는 tailwind css framework는 사실 html 마크업에 class를 빙자하여 css를 인라인 방식으로 넣는 느낌입니다. 클래스만 넣는 것으로 디테일한 조절이 가능해 좋다고 하는 사람들도 있지만 inline 방식으로 넣던 스타일 정의를 css파일로 분리한 이유가 무엇일까 생각해보면, 이런 방식이 과연 유지보수/관리 면에서 타당한가 의문이 듭니다.

html마크업과 css, JS, php 소스코드를 짬뽕으로 한 파일에 섞어넣어 스파게티코드를 만든다고 원성을 사는 상황과 유사해 보였습니다.

물론 이런 부분은 bootstrap이나 tailwind css만의 문제는 아닙니다. bulma 또한 복잡한 레이아웃을 구성할 때면 class를 많이 삽입하게 됩니다. html 마크업이 지저분해지는 상황이 생기곤 하죠.

다만 bulma의 장점으로 꼽고 싶은 점은 사람이 읽기 좋은 방식으로 클래스가 정의되어있다는 것입니다.

클래스의 이름이 조금 길어지긴 하지만, 무슨 의미인지 바로 이해하기 좋은 구성입니다

디자이너가 접근하기에는 이런 면에서 bulma의 클래스 네이밍이 장점으로 다가옵니다. <h2 class=”title has-text-centered is-primary”>타이틀</h2> 라고 하면 primary로 정해진 컬러값으로 타이틀이 칠해지고, 가운데로 정렬되는 식입니다.

sass 커스터마이징도 지원합니다.

그리고 무엇보다 sass 커스터마이징이 가능한 환경을 제공하는 것도 무척 마음에 듭니다. 다른 프레임워크들도 지원하는 부분이긴하지만, 설정방법을 documentation에서 아주 상세하게 잘 설명해주고 있어서 webpack과 같이 개발자가 아니면 쉽게 손대기 어려운 부분들도 바로 활용할 수 있도록 실제 예시를 잘 소개해놨습니다. 소개된 소스를 그냥 긁어다 쓰기만 해도 부족함이 없을 정도입니다.

bulma의 장점을 개인적으로 간단하게 정리하자면 아래와 같습니다.

  • 사용이 간편하다
  • 사람이 읽기 좋게 클래스가 정의 되어있다.
  • sass 커스터마이징 환경을 제공한다.
  • 모바일,반응형 웹을 만들기 좋다
  • 매뉴얼(documentation)이 잘 되어있다.

아쉬운 점을 꼽자면 아래와 같습니다.

  • 햄버거 메뉴조차 자바스크립트 소스 코드가 내장되어있지 않다. (자바스크립트는 전무하다)
  • 여느 css 프레임워크들과 마찬가지로 결과물로 나오는 css 파일이 무겁다.
  • 마찬가지로 css 프레임워크 특징상 전형적인 디자인의 틀을 벗어나기 어렵다.
  • flexbox를 기반으로 한 레이아웃을 구성하기때문에 크로스브라우징 문제를 감안해야한다.(ie 10이상 버전에 한하여 부분지원)

하지만 css 프레임워크는 어디까지나 생산성을 염두에 두고 만들어지기때문에 스타일이 정형화되었다거나, 묵직하다는 위의 단점들은 달느 방법으로 또 해결할 수 있습니다.

완벽하다고는 할 수 없지만, 무척 좋은 인상을 받은 css프레임워크라 꼭 한 번 소개해보고 싶었습니다.

Bulma를 이용하여 웹페이지를 작성해보고 싶다면 다음글을 읽어보시길 바랍니다.