세미프로젝트 시작 전에 2인 프로젝트 진행시 Spring boot 2.7.xx 에 tiles 을 활용하였습니다. 하지만 tiles 는 Spring boot 3.x 대로 넘어오면서부터 duplicated 되었고, 이를 대신하여 사용되는 서버사이드랜더링 방식은 thymeleaf 였습니다. 따라서 우리는 Spring boot 3.2.6 에 thymeleaf 를 사용하여 전체적인 레이아웃을 잡기로 결정하였습니다.
주요 기능 페이지 선정
NCP(Naver Cloud Platform) 를 활용하여 진행되는 프로젝트 이기 때문에 팀 컬러는 네이버가 가지고 있는 시그니쳐 색상을 가져가기로 하였습니다. `#003C00` 전체적인 레이아웃은 https://untree.co/ 에서 제공해주는 무료 템플릿을 참고하여 제작하였습니다. 해당 페이지에서 제공해주는 template 는 html 로 작성되어 있기 때문에 thymeleaf 로 사용하기 위해서는 커스텀 제작을 해야 합니다.
Thymeleaf layout
Thymeleaf 의 layout 을 사용하면 공통 layout 파일을 정의하고 여러 페이지에서 이를 확장하여 일관된 디자인과 구조를 유지할 수 있습니다. Thymeleaf layout 의 렌더링 방식은 아래와 같습니다.
1. 레이아웃 템플릿 정의
레이아웃 템플릿은 모든 페이지에서 공통적으로 사용할 구조를 정의한다. 일반적으로 Header, Footer 등 반복되는 요소를 포함한다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div th:replace="~{fragments/header::header}"></div>
<div layout:fragment="content"></div>
<div th:replace="~{fragments/footer::footer}"></div>
</body>
</html>2. 프래그먼트 정의
레이아웃 템플릿에서 사용할 프래그먼트를 정의한다. 프래그먼트는 템플릿의 일부분으로, 재사용 가능한 HTML 블록이다.
<!-- fragments/header.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="header">
<div>
<h1>Header</h1>
</div>
</div>
</html>
<!-- fragments/footer.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footer">
<div>
<h1>Footer</h1>
</div>
</div>
</html>3. 개별 페이지에서 레이아웃 사용
개별 페이지에서는 레이아웃을 확장하고, 특정 페이지 컨텐츠를 삽입한다.
<!-- home.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}">
<div layout:fragment="content">
<h1>Home</h1>
</div>
</html>
<!-- review.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}">
<div layout:fragment="content">
<h1>Review</h1>
</div>
</html>- 레이아웃 템플릿 로드 :
브라우저가 특정 페이지를 요청하면, Thymeleaf 는 해당 페이지의 HTML 파일을 먼저 로드한다. 이 HTML 파일은 <th:replace> 속성을 사용하여 레이아웃 템플릿을 가르킨다. - fragment 삽입:
레이아웃 템플릿이 로드되면, <th:include>, <th:replace>, <th:insert> 속성을 통해 지정된 위치에 fragment 를 삽입한다. 이 과정에서 필요한 fragment 가 별도로 로드되고 레이아웃 템플릿에 삽입된다. - 메인 컨텐츠 삽입:
레이아웃 템플릿의 <th:insert> 위치에 개별 페이지의 메인 컨텐츠가 삽입된다. - 최종 HTML 생성:
모든 삽입과 교체 작업이 완료되면 최종적으로 브라우저에 전달된 완전한 HTML 페이지가 생성된다.
Header
헤더에는 로고를 기반으로 메인페이지로 이동하는 Home, 리뷰게시판으로 이동할 Review, 포트폴리오 공유 게시판으로 이동할 Portfolio, 문의게시판으로 이동할 QnA, 그리고 회원가입과 로그인 기능을 담당하는 버튼을 추가하기로 하였습니다. 이때 로그인이 된 상태와 로그인이 되지 않은 상태를 헤더에서 구분하기 위해 아래와 같이 차이점을 주기로 하였습니다.
Main
메인 페이지에서는 크게 세가지로 분류하기로 하였습니다. 첫번째 섹션은 학원과 관련된 광고 이미지가 슬라이드 형식으로 이동 , 두번째 섹션은 포트폴리오 게시판에서 작성된 게시글 5개를 무작위로 가지고 와 띄우게 할것이고, 마지막 세번째 섹션에서는 두번째와 비슷한 방식으로 리뷰게시판에서 작성된 리뷰 3개를 무작위로 가지고 와 출력시킬 계획입니다.
Fotter
푸터에서는 템플릿에서는 페이지와 관련된 부가사항 정도를 나타내어 주는 것으로 계획하였습니다.
'Project > DevCampUs' 카테고리의 다른 글
| [Semi-Project]Spring Security & JWT & OAuth2(6) (0) | 2024.06.23 |
|---|---|
| [Semi-Project]Jenkins 를 통한 배포 (5) (0) | 2024.06.21 |
| [Semi-Project] API 명세서 작성 및 ERD 수정 (3) (0) | 2024.06.13 |
| [Semi-Project] Git전략 & WBS 수정(2) (0) | 2024.06.12 |
| [Semi-Project] WBS 와 ERD 설계 (1) (0) | 2024.06.11 |
