저장 및 공개와 적용

에스페이지에서 코드를 수정한 뒤에는 작업 내용을 저장하고, 준비가 끝난 내용을 공개하거나 적용하여 공개 사이트에 반영합니다.

각 동작은 서로 다른 역할을 합니다.

• 저장(Save): 작업 내용을 개발 환경에 저장합니다.
• 공개(Publish): 새 페이지를 처음 공개합니다.
• 변경사항 적용(Apply Changes): 이미 공개된 페이지의 변경사항을 반영합니다.
• 전체 적용(Apply All): 여러 공개 페이지에 변경사항을 한꺼번에 반영합니다.

기본적인 작업 흐름은 다음과 같습니다.

코드 편집 → 저장 → 미리보기 → 공개 또는 적용 → 공개 페이지 확인

이 문서에서는 각 동작의 차이와 상황에 맞는 사용 방법을 알아봅니다.

저장과 공개는 서로 다릅니다

파일을 저장하는 것과 방문자가 보는 사이트를 변경하는 것은 서로 다른 작업입니다.

파일을 여러 번 저장해도 공개 사이트는 변경되지 않습니다.

방문자가 보는 페이지를 변경하려면 저장한 뒤 공개, 변경사항 적용 또는 전체 적용을 실행해야 합니다.

작업 내용 저장하기

코드를 수정한 뒤 파일을 저장하면 변경사항이 개발 환경의 작업용 버전에 반영됩니다.

파일을 저장하려면 다음 단축키를 사용하세요.

• macOS: Cmd + S
• Windows 또는 Linux: Ctrl + S

예를 들어 다음과 같이 제목을 수정했다고 가정해보겠습니다.

<h1>Welcome to My Website</h1>

다음과 같이 변경하고 파일을 저장합니다.

<h1>Welcome to My New Website</h1>

저장된 변경사항은 미리보기에서 확인할 수 있습니다. 하지만 방문자가 보는 공개 사이트에는 아직 이전 내용이 표시됩니다.

저장은 개발 환경의 작업 내용을 변경하지만 공개 사이트는 변경하지 않습니다.

따라서 작업하는 동안 파일을 자유롭게 저장하고 결과를 확인할 수 있습니다.

실시간 미리보기 후에도 저장해야 합니다

실시간 미리보기를 사용하면 파일을 저장하기 전에도 코드의 변화를 바로 확인할 수 있습니다.

하지만 미리보기 화면이 변경되었다고 해서 파일이 자동으로 저장되는 것은 아닙니다.

작업을 유지하려면 편집을 마친 뒤 반드시 파일을 저장하세요.

실시간 미리보기는 코드를 수정한 결과를 빠르게 보여주는 기능이며, 작업 내용을 저장하는 기능은 아닙니다.

저장하지 않은 상태에서 파일을 닫거나 페이지를 다시 불러오면 변경한 내용을 잃을 수 있습니다.

실시간 미리보기에 관한 자세한 내용은 편집과 미리보기에서 알아볼 수 있습니다.

새 페이지 공개하기

웹페이지를 만들기 위해 새 파일을 만들면 페이지는 아직 공개되지 않은 상태입니다.

예를 들어 다음과 같은 페이지 파일을 만들었다고 가정해보겠습니다.

/public/about/+page.essepage

파일을 저장한 뒤 공개하려면 다음 순서로 진행하세요.

1. 파일 탐색기에서 /public/about/+page.essepage 파일을 마우스 오른쪽 버튼으로 클릭합니다.
2. 공개(Publish)를 선택합니다.
3. 공개가 완료되면 페이지를 미리보기로 열거나 공개 페이지로 이동할 수 있습니다.

이 파일을 공개하면 /about 주소로 접속할 수 있는 페이지가 만들어집니다.

프로젝트의 기본 사이트 주소가 다음과 같다면:

https://espg.dev/my-website

공개된 페이지의 주소는 다음과 같습니다.

https://espg.dev/my-website/about

새 페이지는 먼저 공개해야 미리보기로 열 수 있습니다

미리보기는 한 번 이상 공개된 +page.essepage 파일에서 사용할 수 있습니다.

따라서 새 페이지를 만들었을 때는 처음부터 모든 내용을 작성하기보다, 기본적인 내용을 작성하고 저장한 뒤 먼저 공개하는 방법이 좋습니다.

<h1>About</h1>

<p>Welcome to the About page.</p>

페이지를 공개한 다음에는 미리보기에서 결과를 확인하면서 계속 수정할 수 있습니다.

이후 파일을 저장해도 공개 사이트가 바로 변경되지는 않습니다. 준비가 끝났을 때 변경사항 적용(Apply Changes)을 사용하면 됩니다.

처음에는 공개, 이후 수정할 때는 변경사항 적용을 사용합니다.

페이지를 숨긴 상태에서 작업하기

새 페이지는 먼저 공개(Publish)해야 미리보기로 열 수 있습니다.

페이지를 공개하면 해당 주소를 통해 공개 사이트에서도 페이지에 접속할 수 있습니다. 새로 만들어진 주소를 다른 사람이 알기는 어렵지만, 페이지를 완성하기 전에 방문자에게 노출되는 것이 걱정될 수 있습니다.

이럴 때는 페이지를 공개한 직후 파일을 마우스 오른쪽 버튼으로 클릭하고 페이지 숨기기(Hide from Public)를 선택하세요.

페이지를 숨기면 개발 환경에서는 계속 공개된 페이지로 취급되므로 미리보기를 사용하면서 작업할 수 있습니다. 하지만 공개 사이트에서는 해당 페이지가 없는 것으로 처리되어 방문자가 접속할 수 없습니다.

숨긴 페이지에서 작업하는 흐름은 다음과 같습니다.

1. 새 페이지 파일을 만들고 저장합니다.
2. 파일을 공개(Publish)합니다.
3. 공개된 파일을 마우스 오른쪽 버튼으로 클릭합니다.
4. 페이지 숨기기(Hide from Public)를 선택합니다.
5. 미리보기에서 확인하면서 페이지를 편집하고 저장합니다.
6. 작업이 끝나면 변경사항 적용(Apply Changes)을 실행합니다.
7. 페이지 표시하기(Show to Public)를 선택합니다.
8. 공개 페이지에서 최종 결과를 확인합니다.

파일 생성 → 저장 → 공개 → 페이지 숨기기 → 편집과 미리보기 → 변경사항 적용 → 페이지 표시하기

페이지 숨기기는 공개 상태 자체를 취소하지 않습니다. 공개 사이트에서 방문자가 페이지에 접근할 수 없도록 일시적으로 숨기는 기능입니다.

페이지 숨기기는 공개를 대신하는 기능이 아닙니다. 페이지를 먼저 공개한 뒤, 작업하는 동안 공개 사이트에서만 접근할 수 없도록 만드는 기능입니다.

공개된 페이지에 변경사항 적용하기

이미 공개된 페이지를 수정했다면 변경사항 적용(Apply Changes)을 사용합니다.

프로젝트를 만들 때 템플릿으로 생성된 홈페이지는 이미 공개된 상태입니다. 따라서 홈페이지를 수정한 뒤에는 공개가 아니라 변경사항 적용을 사용합니다.

변경사항을 적용하려면 다음 순서로 진행하세요.

1. 파일을 저장합니다.
2. 미리보기에서 저장된 결과를 확인합니다.
3. 파일 탐색기에서 해당 +page.essepage 파일을 마우스 오른쪽 버튼으로 클릭합니다.
4. 변경사항 적용(Apply Changes)을 선택합니다.
5. 적용이 끝나면 페이지 열기(Open Page)를 선택해 공개된 페이지를 확인합니다.

예를 들어 홈페이지를 수정했다면 다음 파일에 변경사항을 적용합니다.

/public/+page.essepage

변경사항 적용은 선택한 페이지에만 영향을 줍니다. 다른 공개 페이지는 변경되지 않습니다.

따라서 한 페이지만 수정했다면 해당 페이지에서 변경사항 적용을 사용하는 것이 가장 간단합니다.

여러 페이지에 변경사항 적용하기

레이아웃과 컴포넌트는 여러 페이지에서 공통으로 사용할 수 있습니다.

예를 들어 다음과 같은 요소를 레이아웃에 작성할 수 있습니다.

• 사이트 메뉴
• 헤더
• 푸터
• 공통 페이지 구조

레이아웃의 메뉴를 수정하면 해당 레이아웃을 사용하는 여러 페이지가 함께 영향을 받습니다.

이처럼 공통 코드의 변경사항을 여러 공개 페이지에 반영하려면 전체 적용(Apply All)을 사용하는 것이 편리합니다.

전체 적용을 사용하기 전에 다음 내용을 확인하세요.

1. 변경한 파일을 저장합니다.
2. 영향을 받는 페이지를 미리보기에서 확인합니다.
3. 준비가 끝나면 전체 적용(Apply All)을 실행합니다.
4. 주요 공개 페이지를 열어 결과를 확인합니다.

전체 적용은 공개된 모든 페이지를 다시 적용하므로, 한 페이지만 수정했다면 해당 페이지에서 변경사항 적용을 사용하는 편이 좋습니다.

여러 페이지를 각각 수정한 뒤 변경사항을 한꺼번에 반영할 때도 전체 적용(Apply All)을 사용할 수 있습니다.

레이아웃이나 컴포넌트처럼 여러 페이지에 함께 사용되는 코드를 수정했다면 전체 적용을 사용하세요.

어떤 동작을 사용해야 하나요?

작업 상황에 따라 다음과 같이 선택할 수 있습니다.

새 페이지를 만들었습니다

저장 → 공개 → 미리보기

새 페이지는 먼저 공개(Publish)해야 미리보기로 열 수 있습니다.

처음 공개한 뒤 추가로 수정한 내용은 저장하고 미리보기에서 확인한 다음 변경사항 적용을 사용합니다.

새 페이지를 공개 사이트에 표시하지 않고 작업하고 싶습니다

저장 → 공개 → 페이지 숨기기 → 미리보기 → 변경사항 적용 → 페이지 표시하기

미리보기를 사용하려면 페이지를 먼저 공개해야 합니다.

페이지를 완성하기 전에 방문자에게 노출되는 것이 걱정된다면 공개 직후 페이지 숨기기(Hide from Public)를 사용하세요.

이미 공개된 페이지를 수정했습니다

저장 → 미리보기 → 변경사항 적용

템플릿으로 만들어진 홈페이지를 수정하거나 이미 공개한 페이지를 변경할 때 사용하는 흐름입니다.

저장과 미리보기만으로는 공개 사이트가 변경되지 않으므로, 작업이 끝날 때까지 변경사항을 적용하지 않아도 됩니다.

레이아웃이나 컴포넌트를 수정했습니다

저장 → 관련 페이지 미리보기 → 전체 적용

공통 코드의 영향을 받는 여러 공개 페이지를 한꺼번에 업데이트할 때 사용합니다.

적용 후 공개 페이지 확인하기

공개하거나 변경사항을 적용한 뒤에는 실제 공개 페이지에서 결과를 확인하세요.

파일 탐색기에서 녹색으로 표시되는 공개된 페이지 파일을 마우스 오른쪽 버튼으로 클릭하고 페이지 열기(Open Page)를 선택하면 공개된 페이지가 새 탭에서 열립니다.

다음 방법으로도 확인할 수 있습니다.

• 프로젝트 대시보드의 사이트 주소(Site URL) 열기
• 브라우저에서 공개 페이지 주소 직접 열기
• 이미 공개 페이지가 열려 있다면 새로고침하기

변경사항을 적용한 직후에는 캐시가 갱신되는 데 최대 1분 정도 걸릴 수 있습니다.

공개 페이지에 이전 내용이 표시된다면 잠시 기다린 뒤 새로고침하세요.

기본 작업 흐름

이미 공개된 페이지를 수정하는 기본 흐름은 다음과 같습니다.

편집 → 저장 → 미리보기 → 변경사항 적용 → 공개 페이지 확인

새 페이지를 만드는 기본 흐름은 다음과 같습니다.

기본 내용 작성 → 저장 → 공개 → 미리보기 → 편집과 저장 → 변경사항 적용

새 페이지를 방문자에게 표시하지 않고 작업하려면 공개 직후 페이지를 숨깁니다.

파일 생성 → 저장 → 공개 → 페이지 숨기기 → 편집과 미리보기 → 변경사항 적용 → 페이지 표시하기

레이아웃이나 컴포넌트처럼 여러 페이지에 영향을 주는 파일을 수정했다면, 미리보기에서 결과를 확인한 뒤 전체 적용(Apply All)을 사용합니다.

저장과 공개의 차이를 이해하면 작업 중인 내용을 방문자에게 노출하지 않고 안전하게 웹사이트를 수정할 수 있습니다.

자주 혼동하는 상황

파일을 저장했지만 공개 사이트가 변경되지 않습니다

정상적인 동작입니다.

저장한 내용은 개발 환경에만 반영됩니다. 공개 사이트를 변경하려면 공개, 변경사항 적용 또는 전체 적용을 실행해야 합니다.

새 페이지에 미리보기 메뉴가 표시되지 않습니다

미리보기는 한 번 이상 공개된 +page.essepage 파일에서 사용할 수 있습니다.

새 페이지라면 먼저 파일을 저장하고 공개(Publish)하세요.

페이지를 완성하기 전에 공개 사이트에 노출되는 것이 걱정된다면, 공개 직후 페이지 숨기기(Hide from Public)를 선택하세요. 페이지를 숨겨도 개발 환경에서는 미리보기를 계속 사용할 수 있습니다.

공개 메뉴 대신 변경사항 적용이 표시됩니다

해당 페이지가 이미 공개된 상태이기 때문입니다.

이미 공개된 페이지를 수정했을 때는 변경사항 적용(Apply Changes)을 사용합니다.

변경사항 적용 메뉴 대신 공개가 표시됩니다

해당 페이지가 아직 한 번도 공개되지 않은 상태이기 때문입니다.

새 페이지를 처음 공개할 때는 공개(Publish)를 사용합니다.

페이지를 숨겼지만 미리보기를 사용할 수 있습니다

정상적인 동작입니다.

페이지 숨기기는 공개 사이트에서 방문자의 접근만 차단합니다. 개발 환경에서는 계속 공개된 페이지로 취급되므로 미리보기와 변경사항 적용을 사용할 수 있습니다.

레이아웃을 수정했지만 일부 공개 페이지가 변경되지 않습니다

레이아웃이나 컴포넌트처럼 여러 페이지에서 사용하는 파일을 수정했다면 전체 적용(Apply All)을 사용하세요.

전체 적용이 끝난 뒤 주요 공개 페이지를 다시 확인합니다.

적용했지만 공개 페이지에 이전 내용이 표시됩니다

캐시가 아직 갱신되지 않았을 수 있습니다.

최대 1분 정도 기다린 뒤 공개 페이지를 새로고침하세요.

실시간 미리보기에서 확인한 내용을 잃었습니다

실시간 미리보기는 파일을 자동으로 저장하지 않습니다.

편집을 마친 뒤 Cmd + S 또는 Ctrl + S를 사용해 파일을 저장하세요.

다음 단계

저장, 공개와 적용의 차이를 이해했다면 다음 문서로 넘어가세요.

• 프로젝트의 파일과 폴더를 관리하는 방법: 파일과 폴더 관리
• 오류와 실행 메시지를 확인하는 방법: 콘솔과 디버깅
• 파일과 폴더가 페이지 주소로 연결되는 방식: 페이지와 URL 구성하기
• 여러 페이지에서 공통 코드를 사용하는 방법: 레이아웃과 컴포넌트