FSD : Page layouts

안녕하세요! 웹사이트를 만들다 보면 모든 페이지에 똑같이 들어가는 부분들이 있죠? 예를 들어 상단 메뉴바(Header)나 하단 정보(Footer), 왼쪽 사이드바 같은 것들이요.

이런 **"공통 디자인 틀(Layout)"**을 FSD에서는 어떻게 관리해야 하는지, 학교에서 자주 쓰는 **PPT(파워포인트)**나 학교 교복에 비유해서 설명해 드릴게요.

---

🖼️ PPT 마스터 슬라이드로 이해하는 "레이아웃(Layout)"

여러분이 조별 과제 발표용 PPT를 만든다고 상상해 보세요.
모든 슬라이드마다 일일이 학교 로고를 박고, 페이지 번호를 넣으면 너무 귀찮겠죠? 실수로 위치가 조금씩 달라질 수도 있고요.

그래서 우리는 '마스터 슬라이드' 기능을 씁니다. 배경과 로고는 딱 한 번만 정해두고, 각 페이지(슬라이드)에는 내용만 채워 넣는 거죠.

FSD에서 레이아웃(Page Layout)이 바로 이 '마스터 슬라이드' 역할을 합니다.

---

🏗️ FSD가 제안하는 3단 분리법

FSD에서는 이 레이아웃을 그냥 통짜로 만들지 않고, 세 가지 역할로 나눠서 조립합니다.

1. 🦴 Shared/UI: "텅 빈 액자 틀" (Layout 컴포넌트)

• 역할: 아무 기능 없이 위치만 잡아주는 뼈대입니다.
• 내용: "위쪽에 50px 비워두고, 왼쪽에 200px 비워두고, 나머지는 내용으로 채워!"라는 CSS 스타일만 가지고 있습니다.
• 비유: 그림 없는 빈 액자나 칸만 나눠진 빈 시간표 종이입니다. 여기에 뭘 넣을지는 아직 정해지지 않았습니다.
  • 📂 위치: shared/ui/Layout

2. 🧩 Widgets: "실제 부품들" (Header, Sidebar)

• 역할: 레이아웃 구석구석에 들어갈 실제 덩어리들입니다.
• 내용: 로고, 메뉴 버튼, 내 프로필 사진, 로그아웃 기능 등이 포함된 완성된 부품입니다.
• 비유: 시간표의 '국어', '수학' 자석이나, 액자에 끼울 장식품들입니다.
  • 📂 위치: widgets/Header, widgets/Sidebar

3. 📄 Pages/App: "조립 및 완성"

• 역할: 위의 1번(틀)과 2번(부품)을 합치고, 그 안에 페이지 내용(Content)을 쏙 넣습니다.
• 내용: "이 페이지는 MainLayout을 쓰고, 그 안에 HomePage 내용을 보여줘"라고 연결합니다.
• 비유: 빈 시간표 종이(Shared)에 국어/수학 자석(Widgets)을 붙이고, 빈칸에 오늘 할 일(Page Content)을 적어서 책상 위에 올려두는(App/Router) 과정입니다.

---

❓ 왜 이렇게 귀찮게 나누나요?

"그냥 페이지마다 복사해서 붙여넣기 하면 안 되나요?"라고 물을 수 있어요. 하지만 FSD 방식대로 하면 이런 상황에서 엄청 편해집니다.

상황 1. "선생님: 우리 학교 홈페이지 디자인 싹 바꿉니다!"

• 옛날 방식: 페이지 100개를 다 열어서 메뉴바 위치를 고쳐야 합니다. (야근 확정 😱)
• FSD 방식: Shared/UI에 있는 '빈 액자 틀' 코드 하나만 수정하면, 모든 페이지가 동시에 싹 바뀝니다.

상황 2. "로그인한 사람만 사이드바가 보였으면 좋겠어요."

• FSD 방식: Widgets 단계에서 조건을 걸어주거나, Layout을 두 개(로그인용/비로그인용) 만들어서 갈아 끼우기만 하면 됩니다. 페이지(Page) 코드는 건드릴 필요가 없어요.

---

💡 Next.js 같은 최신 기술을 쓴다면?

요즘 많이 쓰는 Next.js라는 도구는 layout.tsx라는 파일이 이미 존재합니다. FSD는 이것과 싸우지 않고 사이좋게 지냅니다.

1. Next.js의 app/layout.tsx: 이곳은 그냥 입구 역할만 합니다.
2. 실제 코드는: FSD 규칙대로 widgets/Header나 shared/ui/MainLayout을 불러와서 조립만 합니다.

이렇게 하면 Next.js 기술에 너무 얽매이지 않으면서도, FSD의 깔끔한 정리 정돈 습관을 유지할 수 있습니다.

📝 세 줄 요약

1. **페이지(Page)**는 자기 내용(본문)에만 집중하게 하세요. 겉테두리 신경 쓰지 않게!
2. **레이아웃(틀)**은 Shared에, 그 안에 들어가는 **메뉴바(Header)**는 Widgets에 만드세요.
3. 이렇게 하면 디자인이 바뀌어도 레고 블록 갈아 끼우듯 쉽게 바꿀 수 있습니다.

* 본 문서는 google ai studio를 통해 작성되었습니다. (원본 : https://feature-sliced.github.io/documentation/docs/guides/examples/page-layout )