Sass 통합

이전 절에서 Next.js의 CSS 모듈을 사용하여 컴포넌트 레벨의 스타일링을 안전하고 효율적으로 관리하는 방법을 살펴보았습니다. CSS 모듈만으로도 충분히 강력하지만, CSS 전처리기(Pre-processor)인 Sass (Syntactically Awesome Style Sheets) 는 CSS의 한계를 뛰어넘는 다양한 기능을 제공하여 스타일링 작업을 더욱 효율적이고 체계적으로 만들어 줍니다.

Next.js는 Sass와의 통합을 기본적으로 지원하며, .scss 또는 .sass 확장자를 가진 파일을 CSS 모듈과 함께 사용할 수 있도록 설정되어 있습니다. 이 절에서는 Sass가 무엇인지, 왜 필요한지, 그리고 Next.js 프로젝트에서 Sass를 어떻게 설정하고 활용하는지 자세히 알아보겠습니다.

Sass란 무엇인가요?

Sass는 CSS의 확장 언어로, 프로그래밍적인 기능을 CSS에 도입하여 스타일시트 작성을 더욱 강력하고 유연하게 만들어 줍니다. Sass는 자체적인 문법을 가지고 있으며, 작성된 Sass 코드는 웹 브라우저가 이해할 수 있는 표준 CSS로 컴파일(transpile)되어야 합니다.

Sass의 주요 기능

• 변수(Variables): $primary-color: #007bff;와 같이 색상, 폰트 크기, 간격 등 반복적으로 사용되는 값을 변수로 정의하여 관리합니다. 유지보수가 용이하고 일관된 디자인을 유지하는 데 도움이 됩니다.
• 중첩(Nesting): HTML 구조와 유사하게 CSS 선택자를 중첩하여 작성할 수 있습니다. 이는 코드의 가독성을 높이고, 연관된 스타일을 한눈에 파악하기 쉽게 만듭니다.
• 믹스인(Mixins): @mixin button-style { ... }과 같이 재사용 가능한 CSS 코드 블록을 정의합니다. 여러 곳에서 동일한 스타일 패턴을 반복해서 사용해야 할 때 유용하며, background-color, padding, border-radius 등 여러 속성을 묶어 한 번에 적용할 수 있습니다.
• 함수(Functions): @function calculate-rem($px) { ... }와 같이 값을 계산하고 반환하는 작은 함수를 정의합니다. 색상 조정(darken, lighten), 단위 변환 등 복잡한 계산에 활용됩니다.
• 확장/상속(Extend/Inheritance): @extend .base-button;와 같이 한 선택자의 스타일 규칙을 다른 선택자가 상속받을 수 있게 합니다. 중복 코드를 줄이고 코드 효율성을 높입니다.
• 부분(Partials) 및 임포트(Import): _variables.scss와 같이 파일명 앞에 언더스코어(_)를 붙여 부분 파일을 만들고, @import 'variables';와 같이 다른 Sass 파일에서 이를 불러와 사용할 수 있습니다. 스타일시트를 논리적으로 분리하고 모듈화하는 데 유용합니다.

Sass의 두 가지 문법

• SCSS (Sassy CSS): CSS와 가장 유사한 문법으로, 중괄호({})와 세미콜론(;)을 사용합니다. 대부분의 Sass 사용자가 선호하는 방식입니다. (.scss 확장자)
• Sass (Indented Syntax): 중괄호와 세미콜론 없이 들여쓰기와 줄 바꿈으로 구조를 나타내는 문법입니다. (.sass 확장자)

Next.js에서는 주로 SCSS 문법을 가진 .scss 파일을 사용합니다.

왜 Sass를 사용해야 할까요? (이점)

Sass는 기존 CSS의 단점을 보완하고 다음과 같은 이점을 제공합니다.

• 생산성 향상: 변수, 믹스인, 중첩 등을 통해 반복적인 작업을 줄이고 더 빠르고 효율적으로 스타일을 작성할 수 있습니다.
• 유지보수성 개선: 전역 변수나 믹스인을 활용하여 디자인 시스템을 쉽게 구축하고, 일관된 스타일을 적용하고 관리할 수 있습니다. 예를 들어, 브랜드 색상이 변경되면 변수 하나만 수정하면 됩니다.
• 코드의 재사용성: 믹스인, 함수, @extend를 통해 스타일 코드를 재사용하여 중복을 줄이고 코드량을 감소시킵니다.
• 가독성 향상: 중첩 문법은 HTML/React 컴포넌트 구조와 유사하게 스타일을 조직화하여 코드의 가독성을 높입니다.
• 코드 조직화: @import를 통해 스타일시트를 작고 관리하기 쉬운 여러 파일로 분할하여 관리할 수 있습니다.

Next.js에서 Sass 통합하기

Next.js는 Sass를 공식적으로 지원하므로, 설정 과정이 매우 간단합니다. 필요한 것은 단 하나, sass 패키지를 설치하는 것입니다.

npm install sass
# 또는
yarn add sass

실습: Sass 변수와 중첩을 사용한 버튼 스타일링

이전 절의 StyledButton 예제를 Sass로 리팩토링하여 Sass의 기능을 활용해 봅시다.

// src/app/sass-integration/page.tsx

import SassStyledButton from './SassStyledButton'; // 클라이언트 컴포넌트 임포트
import pageStyles from './page.module.scss'; // 페이지에 전역적으로 적용될 Sass 모듈 임포트

export default function SassIntegrationPage() {
  return (
    <div className={pageStyles.container}>
      <h1 className={pageStyles.title}>Sass 통합 예제</h1>
      <p className={pageStyles.description}>
        아래 버튼들은 Sass 변수, 중첩, 믹스인 등을 사용하여 스타일링되었습니다.
      </p>
      <div style={{ display: 'flex', gap: '20px', marginTop: '30px', justifyContent: 'center' }}>
        <SassStyledButton label="기본 버튼" />
        <SassStyledButton label="강조 버튼" variant="primary" />
        <SassStyledButton label="경고 버튼" variant="warning" />
      </div>
    </div>
  );
}

/* src/app/sass-integration/page.module.scss */
.container {
  padding: 40px;
  max-width: 800px;
  margin: 20px auto;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  color: #333;
  margin-bottom: 15px;
  font-size: 2.5em;
}

.description {
  color: #666;
  font-size: 1.1em;
  line-height: 1.6;
}

// src/app/sass-integration/SassStyledButton.tsx
"use client";

import React from 'react';
import buttonStyles from './SassStyledButton.module.scss'; // 🚨 .scss 확장자 사용

interface SassStyledButtonProps {
  label: string;
  variant?: 'default' | 'primary' | 'warning'; // 버튼 종류 추가
  onClick?: () => void;
}

export default function SassStyledButton({ label, variant = 'default', onClick }: SassStyledButtonProps) {
  return (
    <button
      // variant prop에 따라 동적으로 클래스 적용
      className={`${buttonStyles.btn} ${buttonStyles[variant]}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

/* src/app/sass-integration/SassStyledButton.module.scss */

// Sass 변수 정의
$default-color: #007bff;
$primary-color: #28a745;
$warning-color: #ffc107;
$text-light: white;
$text-dark: #333;

// 재사용 가능한 믹스인 정의
@mixin button-base {
  padding: 12px 25px;
  font-size: 1.1em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
}

.btn {
  @include button-base; // 믹스인 포함

  // 기본 버튼 스타일 (중첩)
  background-color: $default-color;
  color: $text-light;

  &:hover {
    background-color: darken($default-color, 8%); // Sass 함수 사용
  }
}

.primary {
  background-color: $primary-color;
  color: $text-light;

  &:hover {
    background-color: darken($primary-color, 8%);
  }
}

.warning {
  background-color: $warning-color;
  color: $text-dark; // 경고 버튼은 어두운 텍스트

  &:hover {
    background-color: darken($warning-color, 8%);
  }
}

실습 확인

• 세 가지 다른 색상의 버튼이 표시되는 것을 확인할 수 있습니다.
• 개발자 도구를 열어 클래스 이름을 확인하면 CSS 모듈과 동일하게 고유한 해시값이 붙어 있는 것을 볼 수 있습니다. 이는 Sass로 작성된 스타일이 성공적으로 CSS 모듈로 컴파일되었음을 의미합니다.

Sass를 활용한 스타일 관리 팁

• 전역 변수 파일: $primary-color, $font-size-base 등 프로젝트 전반에서 사용되는 변수들을 src/styles/_variables.scss와 같은 별도의 파일로 관리하고, 필요한 곳에서 @import 'styles/variables';로 불러와 사용합니다. (_ 접두사는 부분 파일임을 나타냅니다.)
• 믹스인 라이브러리: 자주 사용되는 CSS 패턴(예: 버튼 스타일, 플렉스 박스 레이아웃, 반응형 미디어 쿼리)을 믹스인으로 정의하여 재사용성을 높입니다.
• 구조화된 파일 시스템: 스타일시트를 기능, 컴포넌트, 페이지별로 논리적인 디렉토리 구조로 분리하여 관리합니다. (예: styles/base/_reset.scss, components/_button.scss, pages/_home.scss)
• 테마 관리: Sass 변수를 활용하여 다크 모드, 브랜드 색상 변경 등 테마 시스템을 효과적으로 구축할 수 있습니다.

Next.js에서 Sass를 통합하는 것은 매우 간단하며, CSS 모듈과 함께 사용하여 컴포넌트 기반 개발의 이점을 극대화할 수 있습니다. Sass의 강력한 기능들은 스타일 코드를 더 간결하고, 재사용 가능하며, 유지보수하기 쉽게 만들어 줄 것입니다.