[Svelte 시리즈 8편] 레이아웃과 슬롯으로 화면을 짜맞추자

페이지가 늘어날수록 공통 영역을 따로 관리해야 일관성이 생깁니다. 이번 글은 레이아웃과 슬롯을 이용해 반복되는 UI를 구조적으로 유지하는 방법을 다룹니다.

이번 글에서 새로 나오는 용어

1. 레이아웃: 여러 페이지가 공유하는 껍데기로, 헤더·푸터 같은 공통 영역을 한 번에 배치하는 파일입니다.
2. 슬롯(slot): 레이아웃이 비워 두는 자리로, <slot /> 위치에 각 페이지의 본문이 꽂힙니다.
3. 네임드 슬롯: slot="sidebar"처럼 이름을 붙이는 슬롯으로, 특정 영역에만 콘텐츠를 넣도록 제한합니다.
4. svelte:fragment: 네임드 슬롯에 여러 요소를 묶어 넣을 때 사용하는 Svelte 전용 태그입니다.

개념

레이아웃은 여러 페이지가 공유하는 껍데기입니다. 루트 레이아웃에서 헤더와 풋터를 배치하고 하위 폴더마다 추가 레이아웃을 둘 수 있습니다. 슬롯(slot)은 레이아웃이 비워 두는 자리입니다. <slot />에 페이지 본문이 꽂히므로 공통 UI와 개별 UI를 자연스럽게 분리할 수 있습니다. 네임드 슬롯(named slot)은 이름이 붙은 슬롯으로 특정 영역에만 콘텐츠를 꽂도록 제한합니다. 이렇게 하면 사이드바나 하단 패널을 깔끔하게 재사용할 수 있습니다.

서버·클라이언트 경계 천천히 보기

• +layout.server.ts는 서버에서만 실행되어 데이터(예: 로그인 사용자)를 준비하고, +layout.svelte는 그 데이터를 받아 브라우저에서 렌더링합니다. 헷갈리면 파일 확장자를 먼저 확인하세요.
• 슬롯을 비워 둔 레이아웃은 부모-자식으로 중첩됩니다. 상위 레이아웃의 <slot />에 하위 레이아웃 전체가 들어가고, 다시 그 안의 <slot />에 실제 페이지가 들어갑니다. 이 흐름을 머릿속에서 천천히 따라가면 어느 부분이 언제 렌더링되는지 명확해집니다.
• 네임드 슬롯은 이름이 맞아야만 콘텐츠가 들어갑니다. 오타가 나면 Svelte가 조용히 빈 영역을 그리므로, slot="sidebar" 같은 문자열을 상수처럼 재사용하세요.

코드

루트 레이아웃과 대시보드 껍데기를 함께 살핍니다.

<!-- src/routes/+layout.svelte -->
<script>
  export let data;
</script>

<div class="shell">
  <AppHeader user={data.user} />
  <main>
    <slot />
  </main>
  <AppFooter />
</div>

모든 페이지는 기본 슬롯을 통해 <main> 영역에 그려집니다. 대시보드 섹션처럼 더 많은 영역이 필요하면 네임드 슬롯을 선언합니다.

<!-- src/routes/(dashboard)/+layout.svelte -->
<DashboardShell>
  <svelte:fragment slot="sidebar">
    <ProjectSidebar />
  </svelte:fragment>

  <slot />

  <svelte:fragment slot="bottom-panel">
    <RecentActivity />
  </svelte:fragment>
</DashboardShell>

DashboardShell 안에서는 이름이 맞는 슬롯만 채워집니다.

<!-- DashboardShell.svelte -->
<div class="dashboard">
  <aside>
    <slot name="sidebar" />
  </aside>
  <section class="content">
    <slot />
  </section>
  <footer>
    <slot name="bottom-panel" />
  </footer>
</div>

페이지를 바꿔도 헤더와 사이드바, 하단 패널은 그대로 남고 본문만 변합니다. 학생 서비스의 내비게이션, 과제 현황 패널, 알림 바 같은 영역이 자연스럽게 유지됩니다.

왜 중요한가

동아리 관리 패널이나 교내 배포용 앱은 대부분 같은 틀 안에서 페이지를 전환합니다. 레이아웃과 슬롯을 쓰면 새로운 페이지를 추가해도 기존 UI를 깨지 않고 재사용할 수 있습니다. 또한 네임드 슬롯으로 위치를 고정하면 컴포넌트가 서로 상대 위치를 몰라도 되고, 협업 시에도 “어디에 무엇을 꽂는지” 명확히 전달됩니다.

실습

• 따라 하기: 루트 레이아웃을 만들고 헤더·푸터·본문 슬롯을 배치한다.
• 확장하기: 대시보드용 레이아웃을 추가해 sidebar, bottom-panel 슬롯을 구성한다.
• 디버깅: 슬롯 내용이 보이지 않으면 slot 이름과 <slot /> 위치가 맞는지 확인한다.
• 완료 기준: 페이지 전환 시 헤더와 사이드바는 유지되고 본문 슬롯만 교체된다.

마무리

레이아웃과 슬롯은 UI 틀을 고정하고 페이지별 차이를 최소한으로 표현하게 도와줍니다. 다음 편에서는 이 틀 위에 전환과 애니메이션을 얹어 흐름을 더 부드럽게 만드는 방법을 살펴봅니다.