1. Thymeleaf로 관리자 페이지 만들기

wjd15sheep·2025년 7월 7일

Spring boot

Spring Boot

목록 보기

16/19

SSR 방식으로 공통 레이아웃 구성부터 유저 관리까지

이번 포스트에서는 Thymeleaf를 활용한 서버 사이드 렌더링(Server Side Rendering, SSR) 방식을 직접 서버를 띄워보며 실습 중심으로 다뤄보겠습니다.

🧠 Thymeleaf란?

Thymeleaf는 서버에서 HTML 뷰를 렌더링한 뒤 클라이언트에 전달하는 서버 사이드 렌더링(SSR) 템플릿 엔진입니다.

이 방식은 사용자가 페이지에 접근했을 때 이미 완성된 HTML을 받아보기 때문에 초기 렌더링 속도가 빠르다는 장점이 있습니다.
하지만 페이지 내에서 동적인 클릭이나 입력 이벤트가 발생하면 전체 페이지를 다시 렌더링해야 하므로, 인터랙션에 있어 지연이 발생할 수 있는 단점도 존재합니다.

이러한 특성 때문에 관리자 페이지처럼 안정성과 정확성이 중요한 경우, SSR 기반의 Thymeleaf 방식이 자주 사용됩니다.

🎯 실습 목표

기존 프로젝트에 Thymeleaf 기반의 관리자 페이지를 구성해보겠습니다.
이번 실습에서는 아래 기능을 구현할 예정입니다.

✅ 유저 목록 테이블 출력
✅ 유저 삭제 기능
✅ 유저 정렬 (이름, 생성 날짜 등)
✅ 유저 검색 기능

spring boot로 진행합니다.

1. 의존성 추가

build.gradle에 Thymeleaf 관련 의존성을 추가합니다.

	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

2. 폴더 구성

resources/ 폴더 내에 다음 구조로 디렉토리를 생성합니다:

src/
 └── main/
      └── resources/
           ├── static/
           │    └── globals.css
           └── templates/
                ├── fragments/
                │    └── common.html
                ├── index.html
                └── users.html

🧱 3. 공통 레이아웃 만들기 (common.html)

<!-- fragments/common.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
  <meta charset="UTF-8" />
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
  <link href="globals.css" th:href="@{/globals.css}" rel="stylesheet" />
  <title th:text="${title}">hello K-FreeMarket</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-dark" th:fragment="navibar">
    <div class="container">
      <a class="navbar-brand text-white" href="/admin">K-FreeMarket</a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active text-white" th:href="@{/admin}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" th:href="@{/admin/users}">유저</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" th:href="@{/admin/products}">상품</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" th:href="@{/admin/events}">이벤트</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>
</html>

4. index.html, users.html에서 공통 레이아웃 사용

이제 공통 레이아웃을 실제 페이지에서 불러와 사용합니다.

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/common :: head('K-FreeMarket 관리자 홈')"></head>
<body>
  <nav th:replace="fragments/common :: navibar"></nav>

  <main class="container p-5">
    <h2>관리자 홈 페이지</h2>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>