에스페이지(Essepage)를 이용해 웹사이트를 구축하고 배포하는 과정을 빠르게 확인해 보겠습니다.
Step 1. 준비하기
프로젝트를 시작하기 위해 먼저 계정에 로그인합니다.
아직 계정이 없다면 회원가입을 먼저 진행해 주세요.
Step 2. 프로젝트 시작하기
에스페이지는 템플릿을 이용하여 쉽고 간편하게 프로젝트를 시작합니다.
- 템플릿 선택
로그인 후, [새 프로젝트] 버튼을 누르고 원하는 기본 템플릿을 선택합니다.

- 프로젝트 정보 입력
프로젝트의 '제목'과 웹사이트 주소로 사용될 '고유한 프로젝트 코드'를 입력한 뒤, [프로젝트 만들기] 버튼을 클릭하면 프로젝트가 생성됩니다.

Step 3. 프로젝트 대시보드 확인
프로젝트가 만들어지면 대시보드로 이동합니다. 이곳에서 다음 두 가지를 확인해 주세요.
- 사이트 URL: 프로젝트 생성과 함께 만들어진 웹사이트의 실제 주소입니다.
- 코드 에디터: 에스페이지에 내장된 에디터 환경으로 이동합니다.

Step 4. 홈페이지 편집하기
[코드 에디터] 버튼을 눌러 에디터로 이동한 뒤, 홈페이지 파일을 열어 내용을 수정합니다.
- 왼쪽 파일 탐색기에서 홈페이지 파일을 클릭하여 소스코드를 불러옵니다.
/public/+page.essepage- 파일이 열리면 기존 내용을 지우고, 아래의 간단한 코드를 입력해 보세요.
<h1>Hello, Essepage!</h1>
<p>This is my first page.</p>
Step 5. 미리보기
파일을 저장하면, 작성한 코드가 실제 웹페이지에서 어떻게 보이는지 오른쪽 미리보기 창에서 바로 확인할 수 있습니다.
미리보기는 다음 두 가지 방법으로 실행할 수 있습니다.
- 단축키 사용:
CMD + S(Mac) 또는Ctrl + S(Windows)를 눌러 파일을 저장하면, 오른쪽 미리보기 창에 변경된 화면이 즉시 표시됩니다. - 마우스 사용: 왼쪽 파일 탐색기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고, [미리보기] 메뉴를 선택하여 명시적으로 열어볼 수도 있습니다.

Step 6. 변경사항 반영하기
미리보기로 작업 내용을 확인했다면, 이를 실제 웹사이트에 퍼블리싱(배포)합니다.
- 왼쪽 파일 탐색기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭한 후, [변경사항 적용] 메뉴를 클릭하여 작업 내역을 실제 페이지에 반영합니다.
💡 참고하세요
변경사항을 적용한 뒤, 서버의 캐시가 갱신되어 실제 화면에 반영되기까지 최대 1분 정도 소요될 수 있습니다.

Step 7. 실제 페이지 확인하기
이제 방금 수정한 내용이 실제 페이지에 잘 반영되었는지 확인해 봅니다.
- 왼쪽 파일 탐색기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭한 후, [페이지 열기] 메뉴를 클릭하면 새 창이 열리며 실제 라이브 웹사이트를 확인할 수 있습니다.
- 또는, 사이트 URL로 직접 접속하거나, 이미 창이 열려있다면 페이지를 새로고침(리로드)하셔도 됩니다.

🎉 축하합니다!
성공적으로 첫 웹페이지를 만들고 세상에 공개했습니다. 이제 에스페이지의 다양한 기능을 활용해 더욱 멋진 웹사이트를 만들어보세요!

📺 동영상 가이드
글보다 영상이 편하신가요? 아래 영상을 통해 전체 과정을 한눈에 확인해 보세요.
(비디오 가이드 영상 삽입)