Next.js 기초 입문 5주차: CSS 스타일링 기초 (CSS Modules, Tailwind CSS)

📌 이번 회차 학습 목표

• Next.js 프로젝트에 CSS Modules를 적용하여 컴포넌트 스코프 스타일을 구현할 수 있습니다.
• Tailwind CSS를 Next.js 프로젝트에 설치하고 유틸리티 클래스를 활용하여 스타일링할 수 있습니다.
• 전역 CSS와 컴포넌트별 CSS의 적용 방식을 이해하고 적절히 활용할 수 있습니다.
• 다양한 CSS 스타일링 방법 중 프로젝트 특성에 맞는 방법을 선택할 수 있는 기초를 마련합니다.

📝 개념 설명

Next.js에서의 CSS 스타일링 개요

Next.js는 React 기반의 프레임워크로서, 웹 애플리케이션의 사용자 인터페이스를 구축하는 데 사용됩니다. UI를 시각적으로 매력적이고 기능적으로 만들기 위해서는 CSS(Cascading Style Sheets)를 통한 스타일링이 필수적입니다. Next.js는 다양한 CSS 스타일링 방법을 지원하며, 그중에서도 CSS Modules와 Tailwind CSS는 현대 웹 개발에서 널리 사용되는 효율적인 방법론으로 손꼽힙니다.

CSS Modules

CSS Modules는 CSS 파일을 모듈처럼 불러와서 사용하는 방식입니다. 이 방식의 가장 큰 특징은 로컬 스코프(Local Scope)를 자동으로 생성하여 CSS 클래스 이름 충돌을 방지한다는 점입니다. 즉, 특정 컴포넌트에서 정의된 스타일은 해당 컴포넌트에만 적용되며, 다른 컴포넌트에 영향을 주지 않습니다. 이는 대규모 애플리케이션에서 CSS를 관리할 때 매우 유용합니다.

• 장점: 클래스 이름 충돌 방지, 컴포넌트 기반 스타일링, 유지보수 용이성.
• 단점: 각 컴포넌트마다 별도의 CSS 파일을 관리해야 할 수 있음.

Tailwind CSS

Tailwind CSS는 유틸리티 우선(Utility-First) CSS 프레임워크입니다. 미리 정의된 수많은 유틸리티 클래스(예: text-blue-500, p-4, flex)를 HTML 마크업에 직접 적용하여 스타일을 구성합니다. 별도의 CSS 파일을 작성할 필요 없이 마크업 내에서 빠르게 스타일을 적용하고 수정할 수 있다는 점이 큰 장점입니다.

• 장점: 빠른 개발 속도, 일관된 디자인 시스템 구축 용이, 반응형 디자인 구현 용이.
• 단점: 마크업이 길어질 수 있음, 초기 학습 곡선 존재.

💡 예제 & 실습

1. CSS Modules 적용하기

먼저, Next.js 프로젝트를 생성합니다. (이전 회차에서 생성한 프로젝트를 사용해도 무방합니다.)

npx create-next-app my-app --ts
cd my-app

다음으로, components 폴더를 생성하고 그 안에 Button.tsx 컴포넌트와 Button.module.css 파일을 만듭니다.

components/Button.tsx

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

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
}

export default function Button({ children, onClick }: ButtonProps) {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
}

components/Button.module.css

.button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.button:hover {
  background-color: #0056b3;
}

이제 pages/index.tsx 파일에서 이 버튼 컴포넌트를 사용해봅니다.

pages/index.tsx

import Button from '../components/Button';
import styles from '../styles/Home.module.css'; // 전역 스타일 예시

export default function HomePage() {
  const handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  return (
    <div className={styles.container}>
      <h1>Next.js CSS 스타일링 기초</h1>
      <p>CSS Modules 예제:</p>
      <Button onClick={handleClick}>클릭하세요</Button>
      <p>전역 스타일 예제:</p>
      <div className='global-text'>이 텍스트는 전역 스타일이 적용됩니다.</div>
    </div>
  );
}

styles/Home.module.css (기존 파일 활용)

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
  text-align: center;
}

styles/globals.css (전역 스타일 추가)

html, body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.global-text {
  color: green;
  font-weight: bold;
  margin-top: 20px;
}

프로젝트를 실행하고 결과를 확인합니다.

npm run dev

버튼에는 Button.module.css의 스타일이 적용되고, ‘이 텍스트는 전역 스타일이 적용됩니다.’ 텍스트에는 globals.css의 global-text 스타일이 적용되는 것을 확인할 수 있습니다.

2. Tailwind CSS 적용하기

새로운 Next.js 프로젝트를 생성하거나 기존 프로젝트에 Tailwind CSS를 설치합니다.

npx create-next-app my-tailwind-app --ts
cd my-tailwind-app

Tailwind CSS와 PostCSS, Autoprefixer를 설치합니다.

npm install -D tailwindcss postcss autoprefixer

Tailwind CSS 설정 파일을 초기화합니다.

npx tailwindcss init -p

이 명령은 tailwind.config.js와 postcss.config.js 파일을 생성합니다.

tailwind.config.js 파일을 다음과 같이 수정하여 Tailwind가 JSX/TSX 파일을 스캔하도록 설정합니다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

styles/globals.css 파일에 Tailwind의 기본 지시문을 추가합니다. 기존 내용은 모두 지우고 다음 내용을 추가합니다.

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

이제 pages/index.tsx 파일에서 Tailwind CSS 유틸리티 클래스를 사용하여 스타일을 적용합니다.

pages/index.tsx

export default function HomePage() {
  return (
    <div className='min-h-screen flex flex-col items-center justify-center bg-gray-100'>
      <h1 className='text-5xl font-bold text-blue-600 mb-4'>
        Tailwind CSS 예제
      </h1>
      <p className='text-lg text-gray-700 mb-8'>
        이 텍스트는 Tailwind CSS로 스타일링되었습니다.
      </p>
      <button className='bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded'>
        Tailwind 버튼
      </button>
    </div>
  );
}

프로젝트를 실행하고 결과를 확인합니다.

npm run dev

Tailwind CSS 유틸리티 클래스가 적용되어 스타일이 나타나는 것을 볼 수 있습니다.

⚠️ 자주 틀리는 것 / 주의사항

🔗 다음 회차 예고

이번 회차에서는 Next.js에서 CSS Modules와 Tailwind CSS를 활용한 기본적인 스타일링 방법을 학습했습니다. 다음 6회차에서는 ‘데이터 페칭 기초’를 주제로 Next.js의 핵심 기능 중 하나인 데이터 가져오기(Data Fetching) 방법에 대해 심도 있게 다룰 예정입니다. getServerSideProps, getStaticProps, getStaticPaths와 같은 함수들을 통해 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 환경에서 데이터를 효율적으로 가져오는 방법을 학습할 것입니다. 이번 회차에서 배운 스타일링 지식을 바탕으로 다음 회차에서는 데이터를 시각적으로 표현하는 방법을 함께 익혀봅시다.