Next.js 글로벌 레이아웃(Global Layout) 설정하기

 

🔹 1. 글로벌 레이아웃이란?

**글로벌 레이아웃(Global Layout)**이란, 애플리케이션의 모든 페이지에서 공통적으로 적용되는 UI를 의미합니다. 일반적으로 헤더(Header), 푸터(Footer), 메인 콘텐츠(Main Content) 등이 포함됩니다.

예를 들어, 아래와 같은 UI 구조를 가진다면 글로벌 레이아웃을 설정하는 것이 좋습니다.

--------------------------------------
| Header (공통)                      |
--------------------------------------
| Main Content (페이지별 내용)       |
--------------------------------------
| Footer (공통)                      |
--------------------------------------

이렇게 설정하면 모든 페이지에서 일관된 UI를 제공할 수 있으며, 중복되는 코드 작성을 방지할 수 있습니다.

---

🔹 2. 글로벌 레이아웃 컴포넌트 생성

우선, components/global-layout.tsx 파일을 생성하여 글로벌 레이아웃을 정의합니다.

📌 components/global-layout.tsx

import { ReactNode } from "react";
import Link from "next/link";
import style from "./global-layout.module.css";

export default function GlobalLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <div className={style.container}>
      <header className={style.header}>
        <Link href={"/"}>📚 ONEBITE BOOKS</Link>
      </header>
      <main className={style.main}>{children}</main>
      <footer className={style.footer}>제작 @winterlood</footer>
    </div>
  );
}

✅ 코드 설명

• ReactNode: children 속성을 사용하여 각 페이지의 콘텐츠를 동적으로 삽입할 수 있도록 설정합니다.
• <header>: 페이지 상단에 **헤더(로고 및 네비게이션 링크 포함)**를 배치합니다.
• <main>: 페이지별 콘텐츠가 들어갈 메인 영역입니다.
• <footer>: 페이지 하단에 **푸터(제작 정보 포함)**를 배치합니다.
• style: global-layout.module.css 파일을 불러와 CSS 스타일을 적용합니다.

---

🔹 3. 글로벌 레이아웃 적용하기

Next.js에서는 _app.tsx 파일을 수정하여 글로벌 레이아웃을 적용할 수 있습니다.

📌 pages/_app.tsx

import GlobalLayout from "@/components/global-layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GlobalLayout>
      <Component {...pageProps} />
    </GlobalLayout>
  );
}

✅ 코드 설명

• GlobalLayout을 App 컴포넌트에 래핑하여 모든 페이지에 글로벌 레이아웃을 적용합니다.
• <Component {...pageProps} />: 현재 활성화된 페이지 컴포넌트를 렌더링합니다.
• globals.css: 전체 애플리케이션에 적용될 글로벌 스타일을 불러옵니다.

이제 모든 페이지에서 GlobalLayout이 자동으로 적용됩니다.

---

🔹 4. 글로벌 레이아웃 스타일링

글로벌 레이아웃에 스타일을 적용하기 위해 global-layout.module.css 파일을 작성합니다.

📌 styles/global-layout.module.css

.container {
  background-color: white;
  max-width: 600px;
  min-height: 100vh;
  margin: 0 auto;
  box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px;
  padding: 0px 15px;
}

.header {
  height: 60px;
  font-weight: bold;
  font-size: 18px;
  line-height: 60px;
}

.header > a {
  color: black;
  text-decoration: none;
}

.main {
  padding-top: 10px;
}

.footer {
  padding: 100px 0px;
  color: gray;
}

✅ 스타일 설명

• .container: 전체 레이아웃의 **최대 너비(600px)와 최소 높이(100vh)**를 설정하여 중앙 정렬합니다.
• .header: 헤더의 높이(60px), 글자 크기(18px), 폰트 굵기 등을 지정합니다.
• .header > a: 헤더 내 링크 색상을 검은색으로 설정합니다.
• .main: 상단 여백을 10px 추가합니다.
• .footer: 푸터의 색상을 회색으로 설정하여 차별화합니다.

---

🔹 5. 글로벌 레이아웃이 적용된 페이지 예제

이제 글로벌 레이아웃을 적용한 페이지를 만들어 봅시다.

📌 pages/index.tsx

export default function Home() {
  return <h1>환영합니다! 📖</h1>;
}

위 코드를 실행하면 다음과 같이 표시됩니다.

--------------------------------------
| 📚 ONEBITE BOOKS (헤더)           |
--------------------------------------
| 환영합니다! 📖 (메인 콘텐츠)      |
--------------------------------------
| 제작 @winterlood (푸터)           |
--------------------------------------

---

🔹 6. 글로벌 레이아웃의 장점

✅ 1) 중복 코드 제거

• 모든 페이지에서 **공통 UI(Header, Footer 등)**를 별도로 작성할 필요가 없습니다.
• 유지보수가 쉬워집니다.

✅ 2) 일관된 디자인 유지

• 모든 페이지에서 일관된 레이아웃과 스타일을 적용할 수 있습니다.

✅ 3) 구조적인 코드 작성 가능

• _app.tsx에서 전역 설정을 관리할 수 있으므로, 개발 생산성이 증가합니다.

---

🔹 7. 마무리

이번 포스트에서는 Next.js에서 **글로벌 레이아웃(Global Layout)**을 적용하는 방법을 알아보았습니다.

📌 정리

1. components/global-layout.tsx를 생성하여 레이아웃 구조를 정의합니다.
2. _app.tsx에서 글로벌 레이아웃을 적용합니다.
3. global-layout.module.css를 사용하여 스타일을 설정합니다.
4. 모든 페이지에서 일관된 레이아웃이 유지됩니다.