ChatGPT로 Bulma 알아보기

ChatGPT로 Bulma 알아보기

이번 포스트에서는 ChatGPT로 CSS 프레임워크인 Bulma에 대해서 알아보고자 한다.

Bootstrap, Sass, LESS는 들어보기나 했지 필자의 경우엔 Bulma는 이번에 처음 들어보는 CSS 프레임워크이다.
ChatGPT에게 Bulma에 대해 설명을 요청해 보고 관련 샘플들을 받아서 한번 공부해 보자.
ChatGPT가 출력해 준 내용을 기반으로 내용을 정리해 보았다.

Bulma란?

Bulma는 모던하고 유연한 CSS 프레임워크이다.
이 프레임워크는 Sass를 기반으로 하며, Flexbox 레이아웃 모델을 사용한다.

✔ 특징

• 응답형 디자인: Bulma는 모바일 기기에서 데스크탑까지 다양한 스크린 사이즈에 대응할 수 있다.
• 모듈형: Bulma는 모듈형 구조를 가지고 있어 필요한 부분만 가져다 쓸 수 있다. 따라서 프로젝트에 필요한 코드만 포함시키므로 코드의 크기를 줄일 수 있다.
• 사용하기 쉬움: Bulma는 사용하기 쉬운 클래스명을 가지고 있으며, 복잡한 설정 없이 바로 사용할 수 있다.
• 확장성: Bulma는 테마나 요소들을 쉽게 수정하거나 추가할 수 있게 설계되어 있다.

Bulma는 다양한 컴포넌트를 제공하고 있다.
예를 들면, 버튼, 카드, 드롭다운, 네비게이션 바, 진행 표시줄, 탭 등 다양한 UI 컴포넌트를 제공하고 있다.
이런 컴포넌트들을 사용하여 웹사이트의 레이아웃을 구성할 수 있다.

Bulma는 웹 개발에 필요한 기본적인 요소들을 제공하는 동시에, 많은 커스터마이징을 가능하게 하므로 개발자들에게 큰 유연성을 제공한다.

(🔗 Bulma 공식 홈페이지)

Bulma Example

Bulma에서 제공하는 class 및 컴포넌트들에 대해서 간단하게 알아보았다.

✔ Button (🔗)
Bulma의 버튼 컴포넌트는 매우 유연허다. 다양한 크기, 색상, 상태를 가질 수 있다.

<button class="button is-primary">Primary Button</button>

[색상 변경]
is-{색상} 클래스를 사용하여 버튼의 색상을 변경할 수 있다.

<button class="button is-info">Info Button</button>
<button class="button is-success">Success Button</button>

[크기 변경]
is-{크기} 클래스를 사용하여 버튼의 크기를 변경할 수 있다.

<button class="button is-large">Large Button</button>
<button class="button is-small">Small Button</button>

[상태 변경]
is-{상태} 클래스를 사용하여 버튼의 상태를 변경할 수 있다.

<button class="button is-loading">Loading Button</button>
<button class="button is-focused">Focus Button</button>

ChatGPT가 is-disabled 클래스를 샘플로 주었으나 공식문서를 확인해보니 is-disabled는 이제 사용되지 않는다고 한다.
단, html 상의 disabled가 true인 경우 자동으로 style이 적용된다.

<button class="button is-primary" disabled>Disabled Button</button>

✔ Card (🔗)
Bulma의 카드 컴포넌트는 이미지, 제목, 내용 등을 담을 수 있는 컨테이너이다.

Card Title

@username

Card content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2023년 6월 26일

<div class="card">
  <div class="card-image">
    <figure class="image">
      <img src="your-image.jpg" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <p class="title is-4">Card Title</p>
        <p class="subtitle is-6">@username</p>
      </div>
    </div>

    <div class="content">
      Card content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <time datetime="2023-6-26">2023년 6월 26일</time>
    </div>
  </div>
</div>

[기본 카드]

"Hello World"

- Unknown

<div class="card">
  <div class="card-content">
    <p class="title">"Hello World"</p>
    <p class="subtitle">- Unknown</p>
  </div>
</div>

[이미지를 포함한 카드]

"Hello World"

- Unknown

<div class="card">
  <div class="card-image">
    <figure class="image">
      <img src="your-image.jpg" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <p class="title">"Hello World"</p>
    <p class="subtitle">- Unknown</p>
  </div>
</div>

[버튼을 포함한 카드]

"Hello World"

- Unknown

Save Edit Delete

<div class="card">
  <div class="card-content">
    <p class="title">"Hello World"</p>
    <p class="subtitle">- Unknown</p>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>

Bulma의 카드 컴포넌트는 이 외에도 헤더, 바디, 푸터 등 다양한 부분으로 나뉘어져 있어 매우 유연하게 사용할 수 있다.

✔ Modal (🔗)
모달은 현재 화면 위에 새 창을 띄우는데 사용되는 컴포넌트이다.
사용자의 주목을 특정 작업에 집중시키는데 유용하다.

Basic modal

<div id="modal1" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- MODAL CONTENT -->
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

[이미지를 포함한 모달]

<div id="modal2" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p class="image">
      <img src="your-image.jpg" alt="Placeholder image">
    </p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

[텍스트와 버튼을 포함한 모달]

Modal Title

Modal desc

<div id="modal3" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal Title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      Modal desc
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save</button>
      <button class="button">Cancle</button>
    </footer>
  </div>
</div>

단, 모달을 동작시키는 것은 JavaScript를 사용해야한다.

✔ Message (🔗)
메시지는 사용자에게 특정 정보를 전달하는 데 사용되는 컴포넌트이다.
경고, 정보, 성공, 오류 등 다양한 유형의 메시지를 만들 수 있다.

[기본 메시지]

Basic message

<article class="message">
  <div class="message-body">
    Basic message
  </div>
</article>

[제목이 있는 메시지]

Message title

Message body

<article class="message">
  <div class="message-header">
    <p>Message title</p>
  </div>
  <div class="message-body">
    Message body
  </div>
</article>

[닫기 버튼이 있는 메시지]

Warning message

Warning message body

<article class="message is-danger">
  <div class="message-header">
    <p>Warning message</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Warning message body
  </div>
</article>

각 메시지는 기본 형태이므로 필요에 따라 내용, 스타일, 구조 등을 자유롭게 변경할 수 있다.

사용방법 (🔗)

Bulma를 사용하는 방법은 매우 간단하다.
CDN 링크를 통해서도 사용가능하다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

해당 링크는 Bulma의 버전에 따라 변경될 수 있으니, 가장 최신의 버전을 사용하고 싶다면 Bulma의 공식 웹사이트나 Cloudflare의 웹사이트에서 최신의 링크를 확인해야한다.
CDN으로 사용하게 되면 Bulma의 모든 기능을 불러오기 때문에 웹페이지의 로딩 시간이 늘어날 수 있다.

또는 NPM package를 통해 설치가 가능하다.
만약 React에서 Bulma를 사용하려면,

npm install bulma

bulma를 설치해준 뒤에 index.js(ts)나 App.js(ts) 파일 등의 상위 레벨 컴포넌트에 Bulma를 import할 수 있다.

import 'bulma/css/bulma.css';

Bulma는 순수한 CSS 프레임워크이므로 React 컴포넌트에서 직접 사용할 수 있다.
그러나 일부 개발자들은 React 컴포넌트와 Bulma를 더 잘 통합하는데 도움이 되는 서드파티 라이브러리를 선호하기도 한다.
이러한 라이브러리의 한 예로 'react-bulma-components'가 있다.
이 라이브러리는 Bulma CSS 클래스를 React 컴포넌트의 props로 사용할 수 있게 해준다.

Bulma CSS 프레임워크에 대해서 알아보는 시간을 가졌다.
처음 봤을 때의 인상은 상당히 Bootstrap과 비슷하다는 것이었다.
다만, Bootstrap의 일부 구성 요소는 JavaScript(JQuery)를 필요로 하지만 Bulma는 순수한 CSS 프레임워크라는 것이 가장 큰 차이인 것 같다.
나중에 Bootstrap의 최신 버전 기준으로도 글을 작성해볼려 했는데, Bulma와의 차이점에 대해서도 자세하게 한번 알아봐야겠다.
개인적으론 컴포넌트의 스타일들이 내 취향이어서 Bootstrap와 Bulma 둘 중 하나를 선택해야 한다면 Bulma를 선택할 것 같다.
아 물론 모든 것을 고려한다면 역시 나는 Tailwind를 사용할 것이다. 😅