퀵 스타트에서는 홈페이지를 수정하고 공개 사이트에 변경사항을 적용해보았습니다.
이 페이지에서는 그 과정에서 사용한 프로젝트, 파일과 URL, 작업용 버전, 공개와 적용이 서로 어떻게 연결되는지 알아봅니다.
에스페이지에서는 프로젝트 안에 파일과 폴더를 만들고, 브라우저에서 코드를 작성해 웹사이트를 구성합니다.
작성한 코드는 먼저 개발환경에 저장되고 미리보기에서 결과를 확인한 뒤 공개 사이트에 반영할 수 있습니다.
전체 과정은 다음과 같습니다.
프로젝트 만들기 → 파일 구성하기 → 코드 작성하기 → 저장하고 미리보기 → 공개 또는 적용하기
프로젝트가 하나의 웹사이트입니다
에스페이지에서 웹사이트를 만들 때는 먼저 프로젝트를 생성합니다.
프로젝트를 생성할 때 입력한 프로젝트 코드(Project Code)는 기본 사이트 주소의 일부로 사용됩니다.
프로젝트 코드가 my-first-webpage라면 기본 사이트 주소는 다음과 같습니다.
https://espg.dev/my-first-webpage프로젝트에는 웹사이트를 구성하는 다음과 같은 파일이 포함됩니다.
- 웹페이지
- 레이아웃
- 컴포넌트
- CSS와 JavaScript
- 이미지와 기타 파일
- 프로젝트 설정
프로젝트를 만들면 웹사이트를 편집할 수 있는 코드 에디터와 방문자가 접속할 수 있는 사이트 주소가 함께 제공됩니다.
public 폴더가 웹사이트의 시작점입니다
방문자에게 제공되는 웹페이지는 프로젝트의 /public 폴더를 중심으로 구성됩니다.
예를 들어 다음과 같은 파일 구조가 있다고 가정해보겠습니다.
/public
├── +page.essepage
└── about
└── +page.essepage각 파일은 다음 페이지에 해당합니다.
/public/+page.essepage→ 웹사이트의 홈페이지/public/about/+page.essepage→/about주소의 페이지
폴더를 만들고 그 안에 페이지 파일을 배치하면 폴더 구조에 따라 웹사이트의 주소도 만들어집니다.
따라서 별도의 라우팅 설정 파일을 작성하지 않아도 파일 탐색기에서 웹사이트의 전체 구조를 확인할 수 있습니다.
페이지 파일의 종류와 URL이 만들어지는 자세한 규칙은 페이지와 URL 구성하기에서 알아볼 수 있습니다.
웹 표준 기술로 페이지를 만듭니다
에스페이지에서는 HTML, CSS, JavaScript와 같은 웹 표준 기술을 사용합니다.
페이지의 내용을 HTML로 작성하고, CSS로 디자인을 추가하며, 필요한 경우 JavaScript로 동작을 구현할 수 있습니다. 기존에 사용하던 CSS 프레임워크나 JavaScript 라이브러리도 프로젝트에 추가할 수 있습니다.
이렇게 코드를 입력하여 페이지를 만들기 때문에 간단한 홈페이지부터 여러 페이지로 이루어진 웹사이트와 외부 API를 사용하는 웹 애플리케이션까지 자유롭게 만들 수 있습니다.
개발 환경과 공개 사이트가 분리되어 있습니다
에스페이지에서는 작업용 개발 환경과 방문자에게 보이는 공개 사이트가 분리되어 있습니다.
코드를 수정하고 파일을 저장하면 변경사항이 개발 환경의 작업용 버전에 저장됩니다. 결과는 미리보기에서 확인할 수 있지만, 저장만으로 공개 사이트가 변경되지는 않습니다.
따라서 공개 사이트를 변경하지 않으면서도 자유롭게 저장하고 결과를 확인할 수 있습니다.
작업이 끝나면 다음 동작을 사용해 작업한 내용을 공개 사이트에 반영합니다.
- 공개(Publish): 아직 공개되지 않은 새 페이지를 처음 공개합니다.
- 변경사항 적용(Apply Changes): 이미 공개된 페이지에 저장된 변경사항을 반영합니다.
프로젝트를 생성할 때 템플릿으로 만들어진 홈페이지는 이미 공개된 상태입니다. 따라서 퀵 스타트에서는 홈페이지를 수정한 뒤 변경사항 적용을 사용했습니다.
새 페이지를 직접 만들었다면 처음에는 공개하고, 이후 수정할 때는 변경사항 적용을 사용합니다.
저장은 작업 내용을 작업용 버전에 보관하고 미리보기에서 확인하기 위한 동작입니다. 공개와 변경사항 적용은 방문자가 보는 공개 사이트를 변경하는 동작입니다.
미리보기에서 먼저 확인합니다
미리보기는 저장한 작업용 버전이 웹페이지에서 어떻게 보이는지 확인하도록 해줍니다.
코드를 수정하고 저장하면 공개 사이트를 변경하지 않고도 다음 내용을 확인할 수 있습니다.
- 페이지의 내용과 디자인
- 링크와 사용자 동작
- 다양한 화면 크기에서의 표시
- 레이아웃과 컴포넌트가 적용된 결과
- CSS와 JavaScript의 변경사항
미리보기에서 결과를 충분히 확인한 뒤 공개하거나 적용하면 작업 중인 내용이 방문자에게 바로 노출되는 것을 방지할 수 있습니다.
레이아웃과 컴포넌트로 코드를 재사용합니다
웹사이트가 커지면 여러 페이지에서 같은 메뉴, 헤더, 푸터 또는 콘텐츠 요소를 반복해서 사용하게 됩니다.
에스페이지에서는 이러한 공통 코드를 레이아웃과 컴포넌트로 분리할 수 있습니다.
- 레이아웃(Layout): 여러 페이지가 공유하는 전체적인 페이지 구조를 만듭니다.
- 컴포넌트(Component): 메뉴나 버튼처럼 반복해서 사용하는 요소를 만듭니다.
공통 코드를 한 곳에서 관리하면 같은 내용을 각 페이지에서 반복해서 수정하지 않아도 됩니다.
레이아웃이나 컴포넌트를 저장해도 이를 사용하는 공개 페이지가 자동으로 변경되지는 않습니다. 공개 사이트에 반영하려면 영향을 받는 페이지를 각각 적용해야 합니다.
여러 공개 페이지에 공통 변경사항을 한꺼번에 반영할 때는 전체 적용(Apply All)을 사용할 수 있습니다.
호스팅 서비스도 함께 제공합니다
에스페이지는 웹사이트 제작 환경뿐만 아니라 공개 사이트를 제공하기 위한 호스팅 서비스도 함께 제공합니다.
페이지를 공개하거나 변경사항을 적용하면 에스페이지가 해당 내용을 공개 페이지에 반영하여 방문자가 볼 수 있는 상태로 만듭니다.
따라서 사용자가 별도로 다음과 같은 서버 관련 작업을 할 필요가 없습니다.
- 웹 서버 설치하기
- 배포 프로그램 설정하기
- 파일을 서버에 직접 업로드하기
- 빌드 명령 실행하기
- 별도의 호스팅 서비스 연결하기
공개된 페이지는 프로젝트의 사이트 주소를 통해 접속할 수 있습니다.
변경사항을 적용한 직후에는 캐시가 갱신되는 데 최대 1분 정도 걸릴 수 있습니다. 공개 페이지에 이전 내용이 표시된다면 잠시 기다린 뒤 새로고침하세요.
에스페이지의 작업 흐름 정리
에스페이지에서 웹사이트를 만드는 기본 흐름은 다음과 같습니다.
- 프로젝트 안에 페이지 파일을 만듭니다.
- HTML, CSS, JavaScript로 페이지를 작성합니다.
- 파일을 저장합니다.
- 미리보기에서 결과를 확인합니다.
- 새 페이지는 공개하고, 기존 페이지의 변경사항은 적용합니다.
- 공개된 페이지에서 최종 결과를 확인합니다.
이 구조를 이해하면 페이지가 많아지거나 레이아웃과 컴포넌트를 사용하더라도 같은 흐름으로 웹사이트를 관리할 수 있습니다.
파일과 폴더로 사이트를 구성하고, 저장과 미리보기로 작업을 확인한 뒤, 준비된 페이지를 공개하거나 변경사항을 적용합니다.
다음 단계
에스페이지의 웹사이트 제작 방식을 이해했다면 다음 문서로 넘어가세요.
- 코드 에디터의 화면과 기능 알아보기: 에디터 기본 사용법
- 디자인이 적용된 페이지를 직접 만들어보기: 랜딩 페이지 만들기
- 파일과 폴더로 URL을 구성하는 방법 알아보기: 페이지와 URL 구성하기
- 공통 구조를 여러 페이지에서 사용하기: 레이아웃과 컴포넌트
- 페이지를 공개하고 관리하는 방법 알아보기: 공개와 사이트 관리