이 튜토리얼에서는 홈, 소개, 프로젝트 페이지로 구성된 개인 웹사이트를 만들어봅니다.
여러 페이지를 만들고 메뉴로 연결한 뒤, 모든 페이지에서 함께 사용하는 헤더와 푸터를 레이아웃으로 관리해보겠습니다.
이 튜토리얼에서 만드는 웹사이트에는 다음 내용이 포함됩니다.
- 홈 페이지
- 자신을 소개하는 소개 페이지
- 작업물을 보여주는 프로젝트 페이지
- 세 개의 페이지를 연결하는 메뉴
- 모든 페이지에서 사용하는 공통 헤더와 푸터
이 과정을 통해 에스페이지에서 파일과 URL이 연결되는 방식과 레이아웃을 사용해 공통 코드를 관리하는 방법을 익힐 수 있습니다.
전체 코드
이 튜토리얼을 끝까지 진행하면 아래와 같은 페이지가 완성됩니다.
시작하기 전에 완성된 결과와 전체 코드를 가볍게 살펴보세요. 지금 모든 코드를 이해할 필요는 없습니다. 코드를 하나씩 작성하고 수정하면서 각 부분이 어떤 역할을 하는지 알아보겠습니다.
시작하기 전에
에스페이지에 로그인하고 빈 템플릿(Blank)을 선택해 새 프로젝트를 만드세요.
프로젝트를 만들면 다음과 같은 홈페이지 파일이 생성됩니다.
/public
└── +page.essepage/public/+page.essepage는 웹사이트의 기본 홈페이지입니다.
프로젝트 대시보드에서 코드 에디터(Code Editor)를 선택해 에디터를 여세요.
1. 웹사이트의 파일 구조 알아보기
이번 튜토리얼을 완료하면 /public 폴더는 다음과 같은 구조가 됩니다.
/public
├── +layout.essepage
├── +page.essepage
├── about
│ └── +page.essepage
└── projects
└── +page.essepage각 페이지 파일은 다음 주소에 해당합니다.
/public/+page.essepage→//public/about/+page.essepage→/about/public/projects/+page.essepage→/projects
에스페이지에서는 /public 폴더 안에 폴더를 만들고 그 안에 +page.essepage 파일을 배치하면 폴더 이름에 따라 페이지 주소가 만들어집니다.
별도의 라우팅 설정을 작성하지 않아도 파일과 폴더를 사용해 여러 페이지로 구성된 웹사이트를 만들 수 있습니다.
2. 공통 레이아웃 만들기
홈, 소개, 프로젝트 페이지에는 모두 같은 메뉴와 푸터가 표시됩니다.
각 페이지에 같은 코드를 반복해서 작성하면 메뉴를 변경할 때마다 모든 파일을 수정해야 합니다. 에스페이지에서는 이러한 공통 부분을 레이아웃(Layout)으로 만들 수 있습니다.
파일 탐색기의 /public 폴더 안에 다음 파일을 만드세요.
/public/+layout.essepage+layout.essepage는 같은 폴더와 그 아래의 하위 폴더에 있는 페이지에 레이아웃이 적용되는 특별한 파일입니다.
다음 코드를 붙여넣으세요.
<head>
<title>My Personal Website</title>
<style>
body {
margin: 0;
padding: 0;
color: #333;
font-family: Arial, sans-serif;
}
header {
padding: 1rem;
background-color: #2c3e50;
text-align: center;
}
header a {
margin: 0 10px;
color: white;
font-weight: bold;
text-decoration: none;
}
header a:hover {
text-decoration: underline;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
footer {
padding: 2rem;
color: #666;
font-size: 0.8rem;
text-align: center;
}
</style>
</head>
<header>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/projects">Projects</a>
</header>
<main>
<essepage-slot></essepage-slot>
</main>
<footer>
© My Personal Website. Built with Essepage.
</footer>파일을 저장하세요.
- Windows 또는 Linux:
Ctrl + S - macOS:
Cmd + S
이 레이아웃에는 모든 페이지에서 함께 사용하는 메뉴, 스타일과 푸터가 들어 있습니다.
<essepage-slot>의 역할
레이아웃에서 가장 중요한 부분은 다음 코드입니다.
<essepage-slot></essepage-slot><essepage-slot>은 각 페이지의 내용이 표시될 위치를 지정합니다.
예를 들어 홈 페이지의 코드는 <essepage-slot>이 있는 위치에 들어가고, 레이아웃의 헤더와 푸터는 그 바깥에서 모든 페이지에 공통으로 표시됩니다.
공통 헤더
+
현재 페이지의 내용
+
공통 푸터레이아웃 파일은 방문자가 직접 접속하는 페이지가 아니므로 별도로 공개하지 않습니다. 레이아웃의 변경사항은 해당 레이아웃을 사용하는 페이지를 공개하거나 적용할 때 함께 반영됩니다.
3. 홈 페이지 만들기
이제 레이아웃 안에 표시할 각 페이지의 내용을 작성하겠습니다.
파일 탐색기에서 다음 파일을 여세요.
/public/+page.essepage기존 코드를 지우고 다음 코드를 붙여넣으세요.
<h1>Hello! I'm developer John Doe. 🚀</h1>
<p>Welcome to my personal website.</p>
<p>
Click the menu above to learn more about me
or explore the projects I've worked on.
</p>파일을 저장하면 오른쪽 미리보기 화면에 홈 페이지가 표시됩니다.
메뉴와 푸터는 +layout.essepage에 이미 작성했으므로 홈 페이지 파일에는 이 페이지에서만 사용하는 내용만 작성하면 됩니다.
4. 소개 페이지 만들기
이번에는 자신을 소개하는 페이지를 만들어보겠습니다.
/public 폴더 안에 다음 폴더를 만드세요.
aboutabout 폴더 안에 다음 파일을 만드세요.
+page.essepage완성된 파일의 위치는 다음과 같습니다.
/public/about/+page.essepage파일을 열고 다음 코드를 붙여넣으세요.
<h1>About Me 👤</h1>
<p>
I enjoy creating interactive and visually appealing websites.
</p>
<h3>Technologies I Use</h3>
<ul>
<li>HTML / CSS</li>
<li>JavaScript</li>
<li>Essepage ❤️</li>
</ul>파일을 저장하세요.
이 파일은 다음 주소의 페이지가 됩니다.
/about레이아웃에 작성한 About 메뉴의 주소도 /about이므로 메뉴를 선택하면 이 페이지로 이동합니다.
5. 프로젝트 페이지 만들기
이번에는 자신이 만든 작업물을 소개하는 페이지를 추가하겠습니다.
/public 폴더 안에 다음 폴더를 만드세요.
projectsprojects 폴더 안에 +page.essepage 파일을 만듭니다.
/public/projects/+page.essepage파일을 열고 다음 코드를 붙여넣으세요.
<h1>My Projects 💻</h1>
<div
style="
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
"
>
<h2>Landing Page</h2>
<p>
This is a stylish landing page I created
while learning Essepage for the first time.
</p>
</div>
<div
style="
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
"
>
<h2>Personal Website</h2>
<p>
This is the website you’re looking at right now!
</p>
</div>파일을 저장하세요.
이 파일은 다음 주소의 페이지가 됩니다.
/projects레이아웃의 Projects 메뉴를 선택하면 이 페이지로 이동합니다.
6. 새 페이지 공개하기
프로젝트를 만들 때 생성된 홈페이지는 이미 공개되어 있지만, 새로 만든 소개 페이지와 프로젝트 페이지는 아직 공개되지 않은 상태입니다.
새 페이지를 웹사이트에서 열려면 먼저 공개(Publish)해야 합니다.
다음 두 파일을 각각 공개하세요.
/public/about/+page.essepage
/public/projects/+page.essepage각 파일을 공개하는 방법은 다음과 같습니다.
- 파일 탐색기에서
+page.essepage파일을 마우스 오른쪽 버튼으로 클릭합니다. - 공개(Publish)를 선택합니다.
- 다른 페이지 파일도 같은 방법으로 공개합니다.
공개(Publish)는 새 페이지를 처음 공개할 때 사용합니다. 공개한 페이지를 나중에 수정하면 메뉴가 변경사항 적용(Apply Changes)으로 바뀝니다.
7. 미리보기에서 페이지 이동 확인하기
이제 메뉴를 사용해 세 페이지가 제대로 연결되는지 확인해보겠습니다.
오른쪽 미리보기 화면의 상단에서 홈 아이콘을 선택해 홈페이지를 여세요.
다음 내용을 차례대로 확인합니다.
- 홈 페이지에
Hello! I'm developer John Doe.가 표시되는지 확인합니다. - 상단 메뉴에서
About을 선택합니다. - 주소가
/about으로 변경되고 소개 페이지가 표시되는지 확인합니다. - 상단 메뉴에서
Projects를 선택합니다. - 주소가
/projects로 변경되고 프로젝트 페이지가 표시되는지 확인합니다. - 페이지를 이동해도 상단 메뉴와 하단 푸터가 그대로 유지되는지 확인합니다.
메뉴와 푸터는 레이아웃에서 가져오고, 가운데 내용만 각 페이지의 내용으로 변경됩니다.
8. 모든 변경사항 적용하기
미리보기에서 모든 페이지가 제대로 표시된다면 저장된 변경사항을 공개 사이트에 반영합니다.
이번에는 홈페이지뿐 아니라 여러 페이지에서 사용하는 레이아웃도 변경했습니다. 이처럼 공통 레이아웃의 변경사항을 여러 페이지에 한꺼번에 반영할 때는 전체 적용(Apply All)을 사용하면 편리합니다.
에디터 상단에서 전체 적용(Apply All)을 선택하세요.
전체 적용은 저장된 변경사항을 현재 공개되어 있는 모든 페이지에 다시 반영합니다.
적용이 끝나면 다음 방법으로 공개된 웹사이트를 확인할 수 있습니다.
- 에디터에서 페이지(Page) → 홈페이지 열기(Open Homepage) 선택하기
- 프로젝트 대시보드에서 사이트 주소(Site URL) 열기
- 각 페이지 파일에서 페이지 열기(Open Page) 선택하기
공개된 웹사이트에서 메뉴를 선택해 홈, 소개와 프로젝트 페이지가 모두 정상적으로 열리는지 확인하세요.
변경사항을 적용한 뒤 캐시가 갱신되는 데 최대 1분 정도 걸릴 수 있습니다. 공개 페이지에 이전 내용이 표시된다면 잠시 기다린 뒤 새로고침하세요.
웹사이트를 완성했습니다
지금까지 다음 작업을 진행했습니다.
- 홈, 소개와 프로젝트 페이지 만들기
- 폴더와 페이지 파일을 사용해 URL 구성하기
- 메뉴를 사용해 여러 페이지 연결하기
- 공통 헤더와 푸터를 레이아웃으로 만들기
<essepage-slot>으로 페이지 내용이 표시될 위치 지정하기- 새로 만든 페이지 공개하기
- 전체 적용으로 여러 페이지의 변경사항 반영하기
이번 튜토리얼에서는 각 페이지의 내용과 공통으로 사용하는 부분을 레이아웃을 이용하여 분리했습니다. 이 구조를 사용하면 페이지가 많아져도 메뉴와 푸터를 한 곳에서 관리할 수 있습니다.
이제 예제의 이름, 소개와 프로젝트 내용을 자신의 정보로 변경해보세요. 메뉴를 추가하고 새로운 폴더와 페이지 파일을 만들면 더 많은 페이지를 연결할 수도 있습니다.
다음 단계
개인 웹사이트를 완성했다면 다음 문서로 넘어가세요.
- 회사나 매장을 소개하는 사이트를 만들고 싶다면: 소규모 비즈니스 웹사이트 만들기
- 파일과 URL의 연결 방식을 자세히 알고 싶다면: 페이지와 URL 구성하기
- 레이아웃과 재사용 요소를 자세히 알아보고 싶다면: 레이아웃과 컴포넌트
- 페이지를 공개하고 관리하는 방법을 알고 싶다면: 공개와 사이트 관리