md 파일을 읽어서 여러 태그들로 쪼개놓는 작업을 했었습니다. 이제 이 태그에 대한 스타일을 정의해야합니다. 보통 css 파일을 이용해서 정의합니다만, 좀 더 쉽고 편하게 작업할 수 있도록 도와주는 도구들이 있습니다.

Tailwind CSS

Next.js에서는 설치할 때부터 Tailwind CSS을 사용할 건지 물어봅니다.

Tailwind CSS는 className를 통해 css를 작성하지 않고도 HTML에 스타일을 적용할 수 있게 해줍니다. 아래와 같이 말이죠. 그때 그때 필요한 것들을 빠르게 가져다 쓸 수 있다는게 좋습니다.

<div class="flex flex-col items-center gap-6 p-7 md:flex-row md:gap-8 rounded-2xl">
  <div>
    <img class="size-48 shadow-xl rounded-md" alt="" src="/img/cover.png" />
  </div>
  <div class="flex items-center md:items-start">
    <span class="text-2xl font-medium">Class Warfare</span>
    <span class="font-medium text-sky-500">The Anti-Patterns</span>
    <span class="flex gap-2 font-medium text-gray-600 dark:text-gray-400">
      <span>No. 4</span>
      <span>·</span>
      <span>2025</span>
    </span>
  </div>
</div>

(개인적으로 레이아웃을 짜거나 할 때는 정말 편했지만 모든 컴포넌트에 일관된 디자인을 적용하기엔 조금 불편했습니다. 전체적인 테마 색상이나 통일된 디자인은 CSS 파일을 따로 만들어서 적용하는게 좋은 것 같습니다.)

SASS/SCSS

Sass/Scss는 css를 확장하여 더 효율적이고 유연한 스타일 작성이 가능하게 만드는 CSS 전처리기(preprocessor)입니다.

npm install --save-dev sass

sass 패키지 설치

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

이런 식으로 작성하면 아래와 같은 css로 적용됩니다.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

이것 말고도 더 많은 기능이 있으니 공식 문서 한 번 둘러보시길!

(개인적으로 tailwindcss하고 scss를 같이 쓰니 빠르게 css 작성이 가능하더군요. @apply를 쓰면 tailwind 문법을 그대로 가져다 쓸 수 있습니다.)

그런데 직접 모든 태그의 스타일을 작업하는게 시간이 오래걸리고 꽤나 힘든 일입니다. 그런 분들은 아래와 같은 것을 가져다 쓰는 것도 좋은 선택일겁니다.

(저는 제대로 써보진 않았기에 간단하게 소개만 하겠습니다.)

tailwind TYPOGRAPHY

tailwindcss-typography 는 Markdown으로 작성된 콘텐츠나 CMS에서 가져온 HTML과 같은 기본 HTML에 적합한 타이포그래피 기본값을 제공합니다.

npm install -D @tailwindcss/typography

먼저 typography를 설치한 다음

tailwind.config.ts

import type { Config } from "tailwindcss";
import typography from "@tailwindcss/typography";

export default {
	//...
	plugins: [typography], // 여기에 추가
} satisfies Config;

tailwind.config.ts 파일을 수정해줍니다.

<article className="prose md:prose-lg lg:prose-xl">{{ markdown }}</article>

컴포넌트의 className을 이런 식으로 수정하시면 적용됩니다.

다른 테마를 적용하거나 커스텀하는 방법은 tailwindcss-typography github에 정리되어있으니 직접 찾아보시는 걸 추천드립니다.

Ant Design

https://ant.design/

Bootstrap

https://getbootstrap.com/

daisyUI

https://daisyui.com/

이 3개는 미리 디자인된 테마와 반응형 디자인 컴포넌트를 제공해줍니다. 그래서 빠른 개발이 가능하지만 커스텀이 조금 힘들 수 있습니다.

Material UI

구글의 Material Design을 구현한 오픈소스 React 컴포넌트 라이브러리입니다.
- Material Design: UI/UX 디자인의 일관성을 유지하기 위해 생긴 가이드라인과 원칙들로, 색상, 타이포그래피, 애니메이션, 구성 요소 등을 포함한 디자인 철학을 제공합니다.
일관성있는 디자인과 부드러운 모션을 제공해줍니다.
단점은 패키지가 좀 무겁고 커스터 마이징이 좀 힘듭니다... 그리고 문서가 좀 많고 제공하는 API도 많아 학습에 오랜 시간이 걸릴 수 있습니다.

3. CSS 작업