6장: Next.js 앱 스타일링하기 (CSS 모듈, 테일윈드 등)

alpha2025-04-30 01:38

Next.js에서 스타일링의 시작

Next.js 15를 활용해 앱을 개발하면서 스타일을 입히는 과정은, 웹사이트의 분위기와 사용자 경험을 결정짓는 가장 중요한 단계 중 하나입니다. 이 장에서는 대표적인 스타일링 기법인 CSS Modules와 Tailwind CSS를 중심으로, Next.js에서 손쉽게 스타일을 관리하고 적용하는 방법을 살펴봅니다.

CSS Modules: 컴포넌트 기반 스타일의 정석

Next.js 15에서는 CSS Modules를 기본적으로 지원합니다. 각각의 컴포넌트에 독립된 스타일을 부여할 수 있어, 파일 간 스타일 충돌 걱정 없이 관리가 쉽습니다. 사용 방법은 간단합니다. 예를 들어, Button 컴포넌트에만 적용할 스타일이 필요하다면, 같은 폴더에 Button.module.css라는 파일을 만들고 아래처럼 작성하면 됩니다.

/* Button.module.css */
.container {
  background-color: #3182ce;
  color: white;
  padding: 0.8em 1.5em;
  border-radius: 6px;
}

그리고 컴포넌트에서는 이렇게 import해서 활용합니다.

import styles from './Button.module.css';

export default function Button({ children }) {
  return <button className={styles.container}>{children}</button>;
}

이처럼 CSS Modules를 이용하면, 동일한 클래스명이 프로젝트 내 어디에서든 충돌하지 않고 각 컴포넌트에만 적용됩니다. 자연스럽게 규모가 커진 프로젝트에서도 스타일의 유지보수가 한결 수월해집니다.

Tailwind CSS: 유틸리티 퍼스트 스타일링

최근 많은 Next.js 개발자들이 Tailwind CSS를 적극 활용합니다. Tailwind는 '유틸리티 클래스'만으로 스타일을 조립하는 방식이라, 별도의 CSS 파일 없이 JSX 코드 위에서 곧바로 시각 디자인을 완성할 수 있습니다.

설치는 npm으로 간단히 할 수 있습니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

생성된 tailwind.config.js에서 커스텀 설정을 할 수 있으며, globals.css(또는 원하는 전역 CSS)에 아래 세 가지 지시문을 추가해야 합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

설정이 끝나면, 컴포넌트에서 클래스 이름만 나열해 필요한 스타일을 바로 입힐 수 있습니다.

export default function Card({ children }) {
  return (
    <div className="bg-white shadow-md rounded-xl p-6">
      {children}
    </div>
  );
}

Tailwind의 장점은 빠른 시각적 피드백과 일관된 디자인 시스템 구축에 있습니다. 개발 속도를 비약적으로 높일 수 있게 해주며, 디자이너와의 협업이나 반응형 대응도 매우 편리합니다.

글로벌 vs 모듈 vs 유틸리티, 무엇을 언제 써야 할까?

Next.js 15에서는 여러 스타일링 방식을 함께 쓸 수 있습니다. 전역 스타일(Global CSS)은 사이트 전체에 필요한 기본값이나 Reset, 공통 색상 정의에 주로 활용되고, CSS Modules는 컴포넌트별 세밀한 제어에, Tailwind는 빠른 프로토타입 제작이나 일관성 있는 레이아웃 구성에 적합합니다.

프로젝트에 따라, 또 팀의 선호에 따라 이 방법들을 적절히 혼합해 사용하는 것이 현실적입니다. 중요한 것은 '명확한 구분'과 '일관된 관리'입니다.

정리하며

Next.js 15에서는 CSS Modules와 Tailwind CSS의 공식 지원 덕분에, 초보 개발자도 최신 스타일링 기법을 부담 없이 적용할 수 있습니다. 작은 버튼부터 복잡한 대시보드까지, 프로젝트 규모와 성격에 맞춰 유연하게 도구를 선택하세요. 이 장을 통해 Next.js의 스타일링에 한 걸음 더 가까워졌기를 바랍니다.