# Next.js 가이드 / 챕터 6: Global CSS로 전체 스타일 관리하기

학습자료/Next.js 초보자 학습 과정

# Next.js 가이드 / 챕터 6: Global CSS로 전체 스타일 관리하기

depilled 2025. 8. 9. 15:13

# 챕터 6: Global CSS로 전체 스타일 관리하기

## 서론

웹사이트를 만들다 보면 모든 페이지에 공통으로 적용되어야 하는 스타일들이 있습니다. 예를 들어, 기본 글꼴, 색상 테마, 여백 설정 등은 웹사이트 전체에서 일관되게 유지되어야 합니다. 매번 각 컴포넌트마다 이런 스타일을 반복해서 작성한다면 비효율적이고 유지보수도 어려워집니다. 이럴 때 필요한 것이 바로 Global CSS입니다.

Global CSS는 웹사이트 전체에 적용되는 기본 스타일을 한 곳에서 관리할 수 있게 해 줍니다. 마치 회사의 드레스 코드처럼, 모든 페이지가 따라야 할 기본 규칙을 정의하는 것입니다. 이번 챕터에서는 Next.js에서 Global CSS를 설정하고 활용하는 방법을 자세히 알아보겠습니다.

## 본론

### Global CSS의 개념과 필요성

Global CSS는 웹사이트의 모든 페이지와 컴포넌트에 자동으로 적용되는 스타일시트입니다. 이것은 웹사이트의 시각적 일관성을 유지하는 데 매우 중요한 역할을 합니다. 예를 들어, 여러분이 좋아하는 웹사이트를 떠올려보십시오. 어느 페이지를 방문하든 동일한 느낌과 스타일을 유지하고 있을 것입니다. 이것이 바로 Global CSS의 효과입니다.

Global CSS를 사용하면 다음과 같은 이점이 있습니다. 첫째, 코드 중복을 줄일 수 있습니다. 둘째, 스타일을 한 곳에서 관리하므로 유지보수가 쉽습니다. 셋째, 웹사이트 전체의 일관성을 보장합니다. 넷째, 브랜드 아이덴티티를 효과적으로 구현할 수 있습니다.

### Next.js에서 Global CSS 설정하기

Next.js 프로젝트를 생성하면 이미 global.css 파일이 app 폴더 안에 있을 것입니다. 이 파일을 열어보면 기본적인 CSS 리셋 코드가 들어있습니다. 이제 이 파일을 우리의 필요에 맞게 수정해 보겠습니다.

여기서 주의 할 점이 있습니다.

@import "tailwindcss";

globals.css 파일 내 이런 코드가 있을 겁니다. 이 코드는 다음 챕터에서 배울 tailwind CSS 사용과 관련이 있습니다. 이번 챕터를 배우는 동안 이 코드는 수정하지말고 유지해 주세요.

먼저 app/globals.css 파일을 열고 다음과 같이 작성해봅시다:

/* app/globals.css */

/* CSS 리셋 - 브라우저 기본 스타일 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 기본 글꼴과 색상 설정 */
body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  background-color: #ffffff;
}

/* 기본 제목 스타일 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  color: #2c3e50;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

/* 문단 스타일 */
p {
  margin-bottom: 1rem;
}

/* 링크 스타일 */
a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* 버튼 기본 스타일 */
button {
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 이미지 반응형 설정 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

이 Global CSS 파일은 app/layout.js에서 import되어 전체 애플리케이션에 적용됩니다:

// app/layout.js
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  )
}

Layout.js란 무엇인가요?

위의 코드에서 갑자기 등장한 layout.js 파일이 궁금하실 것입니다. 이 파일은 Next.js에서 매우 중요한 역할을 하는 특별한 파일입니다. 쉽게 설명하자면, layout.js는 웹사이트의 '골격'이나 '틀'을 정의하는 파일입니다.

건물을 짓는다고 생각해보십시오. 아무리 아름다운 인테리어를 해도 기초 골조가 없으면 건물이 될 수 없습니다. layout.js는 바로 이런 기초 골조 역할을 합니다. 모든 페이지가 공통으로 가져야 할 기본 구조를 정의하는 것입니다.

Layout.js의 주요 기능:

HTML 문서의 기본 구조 정의: <html>, <body> 태그 등 모든 페이지에 필요한 기본 HTML 구조를 제공합니다.
전역 스타일 적용: Global CSS 파일을 import 하여 모든 페이지에 기본 스타일을 적용합니다.
공통 레이아웃 요소: 네비게이션 바, 푸터 등 모든 페이지에 공통으로 나타나야 할 요소들을 포함할 수 있습니다.
메타데이터 설정: 웹사이트의 기본 제목, 설명 등을 설정할 수 있습니다.

예를 들어, 더 실용적인 layout.js는 다음과 같이 만들 수 있습니다:

// app/layout.js
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <head>
        <title>내 웹사이트</title>
        <meta name="description" content="Next.js로 만든 멋진 웹사이트" />
      </head>
      <body>
        {/* 모든 페이지에 공통으로 나타날 네비게이션 */}
        <nav style={{ padding: '1rem', backgroundColor: 'var(--bg-primary)' }}>
          <h2>내 웹사이트</h2>
        </nav>
        
        {/* 각 페이지의 실제 내용이 여기에 들어갑니다 */}
        <main>
          {children}
        </main>
        
        {/* 모든 페이지에 공통으로 나타날 푸터 */}
        <footer style={{ padding: '1rem', textAlign: 'center', backgroundColor: '#f8f9fa' }}>
          <p>© 2025 내 웹사이트</p>
        </footer>
      </body>
    </html>
  )
}

여기서 {children}이 핵심입니다. 이 부분에 각 페이지(page.js)의 내용이 자동으로 들어갑니다. 마치 액자 안에 다양한 그림을 넣는 것처럼, layout.js라는 틀 안에 각 페이지의 내용이 들어가는 것입니다.

이렇게 하면 새로운 페이지를 만들 때마다 HTML 기본 구조나 내비게이션을 반복해서 작성할 필요가 없습니다. layout.js에서 한 번만 정의하면 모든 페이지에 자동으로 적용되므로, 개발이 훨씬 효율적이 됩니다.

### CSS 변수로 테마 관리하기

CSS 변수(CSS Custom Properties)를 사용하면 색상, 크기 등을 변수로 정의하여 재사용할 수 있습니다. 이는 테마를 일관되게 유지하고 쉽게 변경할 수 있게 해 줍니다:

/* app/globals.css에 추가 */

:root {
  /* 색상 변수 */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --danger-color: #e74c3c;
  --warning-color: #f39c12;
  --info-color: #16a085;
  
  /* 텍스트 색상 */
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-light: #95a5a6;
  
  /* 배경 색상 */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-dark: #2c3e50;
  
  /* 여백 크기 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* 둥근 모서리 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* 그림자 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
}

/* CSS 변수 사용 예시 */
.button-primary {
  background-color: var(--primary-color);
  color: var(--bg-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: none;
}

.card {
  background-color: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-md);
}

코드를 보시면 :root라는 것이 등장합니다. 이것이 무엇인지 궁금하실 텐데요, :root는 CSS에서 가장 최상위 요소를 의미합니다. 쉽게 말해서 HTML 문서 전체의 '뿌리(root)'가 되는 부분입니다.

회사의 조직도를 생각해보세요. 최고 경영자가 정한 정책은 모든 부서에 적용되죠? :root도 마찬가지입니다. 여기에 정의된 CSS 변수들은 웹사이트의 모든 요소에서 사용할 수 있습니다.

:root를 사용하는 이유:

전역 접근성: :root에 정의된 변수는 어떤 요소에서든 사용할 수 있습니다.
중앙 집중 관리: 모든 색상과 크기를 한 곳에서 관리할 수 있어 수정이 쉽습니다.
일관성 보장: 같은 변수를 사용하므로 실수로 다른 색상을 쓸 일이 없습니다.

예를 들어, 웹사이트의 주 색상을 파란색에서 초록색으로 바꾸고 싶다면, :root에서 --bg-primary 값만 바꾸면 됩니다. 그러면 이 변수를 사용한 모든 요소의 색상이 자동으로 바뀝니다!

:root {
  /* 색상 변수 */
  --primary-color: #3498db;
  /* ... */
}

이제 컴포넌트에서 이러한 CSS 변수를 활용할 수 있습니다:

export default function Home() {
  return (
    <div style={{ padding: 'var(--spacing-lg)' }}>
      <h1 style={{ color: 'var(--text-primary)' }}>
        CSS 변수를 활용한 테마 적용
      </h1>
      <p style={{ color: 'var(--text-secondary)' }}>
        일관된 색상과 여백을 유지할 수 있습니다.
      </p>
      <button className="button-primary">
        주요 버튼
      </button>
    </div>
  )
}

### 유틸리티 클래스 만들기

자주 사용되는 스타일을 유틸리티 클래스로 만들어두면 개발 속도가 빨라집니다:

/* app/globals.css에 추가 */

/* 텍스트 정렬 유틸리티 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* 디스플레이 유틸리티 */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }

/* Flexbox 유틸리티 */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* 여백 유틸리티 */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-sm); }
.m-2 { margin: var(--spacing-md); }
.m-3 { margin: var(--spacing-lg); }
.mt-1 { margin-top: var(--spacing-sm); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }

/* 너비 유틸리티 */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }

/* 컨테이너 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

### 반응형 디자인을 위한 미디어 쿼리

Global CSS에서 미디어 쿼리를 정의하여 모든 페이지에서 일관된 반응형 디자인을 구현할 수 있습니다:

/* app/globals.css에 추가 */

/* 모바일 우선 접근법 */
/* 기본 스타일은 모바일용 */

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-lg);
  }
  
  h1 {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2.5rem;
  }
  
  /* 태블릿에서만 보이는 요소 */
  .d-md-block {
    display: block !important;
  }
  
  .d-md-none {
    display: none !important;
  }
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
  
  .container {
    padding: 0 var(--spacing-xl);
  }
  
  /* 데스크톱에서 2열 레이아웃 */
  .row {
    display: flex;
    gap: var(--spacing-lg);
  }
  
  .col {
    flex: 1;
  }
}

코드를 보시면 @media라는 새로운 개념이 등장합니다. 이것은 CSS의 '미디어 쿼리(Media Query)'라는 기능으로, 쉽게 말해서 "화면 크기에 따라 다른 스타일을 적용하겠다"는 의미입니다.

@media의 작동 방식:

조건 확인: 현재 화면의 너비가 특정 크기 이상인지 확인합니다.
스타일 적용: 조건에 맞으면 해당 블록 안의 스타일을 적용합니다.
우선순위: 나중에 정의된 스타일이 이전 스타일을 덮어씁니다.

@media (min-width: 768px): "화면 너비가 768px 이상일 때"라는 뜻입니다.
768px은 일반적으로 태블릿 크기의 시작점으로 여겨집니다.
1024px은 데스크톱 크기의 시작점입니다.
각 구간에서 필요한 스타일만 추가로 정의하면 됩니다.

### 실습: Global CSS를 활용한 페이지 만들기

이제 우리가 정의한 Global CSS를 활용하여 실제 페이지를 만들어봅시다:

// app/page.js
export default function Home() {
  return (
    <div className="container">
      <header className="text-center p-3">
        <h1>Global CSS가 적용된 웹사이트</h1>
        <p style={{ color: 'var(--text-secondary)' }}>
          일관된 스타일로 아름다운 페이지를 만들었습니다
        </p>
      </header>
      
      <main className="row">
        <article className="col card">
          <h2>첫 번째 카드</h2>
          <p>
            CSS 변수와 유틸리티 클래스를 활용하면 
            빠르고 일관된 스타일링이 가능합니다.
          </p>
          <button className="button-primary">
            자세히 보기
          </button>
        </article>
        
        <article className="col card">
          <h2>두 번째 카드</h2>
          <p>
            미디어 쿼리로 반응형 디자인도 
            쉽게 구현할 수 있습니다.
          </p>
          <button className="button-primary">
            자세히 보기
          </button>
        </article>
      </main>
      
      {/* 유틸리티 클래스 활용 예시 */}
      <section className="p-3 m-2">
        <div className="d-flex justify-center align-center" style={{ minHeight: '200px' }}>
          <div className="text-center">
            <h3 style={{ color: 'var(--primary-color)' }}>유틸리티 클래스 활용</h3>
            <p style={{ color: 'var(--text-secondary)' }}>
              Flexbox 유틸리티로 중앙 정렬된 컨텐츠
            </p>
            <div className="d-flex justify-between mt-1">
              <button className="button-primary">버튼 1</button>
              <button className="button-primary">버튼 2</button>
            </div>
          </div>
        </div>
      </section>
      
      {/* 반응형 요소 예시 */}
      <div className="p-2">
        <div>
          <p className="text-center" 
          style={{ 
            color: 'var(--text-light)',
            backgroundColor: 'var(--bg-secondary)',
            borderRadius: 'var(--radius-md)' }}> 
          화면의 좌우 너비를 조절해 보세요</p>    
          <p style={{ color: 'var(--text-primary)' }}>
            📱 모바일에서만 보이는 메시지입니다
          </p>
        </div>
        
        <div className="d-none d-md-block text-center"
             style={{ 
               backgroundColor: 'var(--bg-secondary)', 
               padding: 'var(--spacing-lg)',
               borderRadius: 'var(--radius-lg)'
             }}>
          <p style={{ color: 'var(--text-primary)' }}>
            💻 태블릿과 데스크톱에서만 보이는 메시지입니다
          </p>
        </div>
      </div>
      
      <footer className="text-center mt-3 p-2" 
              style={{ 
                backgroundColor: 'var(--bg-primary)',
                borderTop: `1px solid var(--text-light)`
              }}>
        <p style={{ color: 'var(--text-light)' }}>
          © 2024 My Website. All rights reserved.
        </p>
      </footer>
    </div>
  )
}

## 결론

Global CSS는 웹사이트 전체의 기초를 다지는 중요한 도구입니다. 이번 챕터에서 우리는 CSS 리셋, 기본 스타일 설정, CSS 변수를 통한 테마 관리, 유틸리티 클래스 생성, 그리고 반응형 디자인을 위한 미디어 쿼리까지 Global CSS의 다양한 활용법을 배웠습니다.

Global CSS를 잘 설계하면 개발 속도가 빨라지고, 유지보수가 쉬워지며, 웹사이트 전체의 일관성을 유지할 수 있습니다. 특히 CSS 변수를 활용하면 테마 변경이나 다크 모드 구현 같은 고급 기능도 쉽게 추가할 수 있습니다.

다음 챕터에서는 Tailwind CSS라는 강력한 유틸리티 기반 CSS 프레임워크에 대해 알아보겠습니다. Tailwind CSS는 우리가 만든 유틸리티 클래스의 개념을 극대화한 도구로, 더욱 빠르고 효율적인 스타일링을 가능하게 해 줍니다!

'학습자료 > Next.js 초보자 학습 과정' 카테고리의 다른 글

# Next.js 가이드 / 챕터 8: Tailwind CSS 실전 활용법 (7)	2025.08.09
# Next.js 가이드 / 챕터 7: Tailwind CSS 시작하기 (2)	2025.08.09
# Next.js 가이드 / 챕터 5: CSS 기초 - 웹페이지에 스타일 입히기 (6)	2025.08.08
# Next.js 가이드 / 챕터 4: HTML 기본 태그 완전 정복 (7)	2025.08.08
# Next.js 가이드 / 챕터 3: HTML의 기본 개념과 div 태그 이해하기 (1)	2025.08.08

현재글# Next.js 가이드 / 챕터 6: Global CSS로 전체 스타일 관리하기

depilled

유용한 웹사이트 정보 및 학습 가이드를 제공합니다.

Today :
Yesterday :

depilled