코드 편집과 미리보기

에스페이지에서는 코드 에디터에서 파일을 수정하고, 미리보기 화면에서 웹페이지에 표시되는 결과를 확인할 수 있습니다.

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

파일 열기 → 코드 편집 → 저장 → 미리보기에서 확인

일부 영역에는 실시간 미리보기(Live Preview)를 적용해 파일을 저장하기 전에도 코드의 변화를 바로 확인할 수 있습니다.

이 문서에서는 다음 내용을 알아봅니다.

• 파일을 열고 코드 편집하기
• 미리보기 화면 열기
• 저장한 변경사항 확인하기
• 미리보기에서 페이지 이동하기
• 다양한 화면 너비에서 페이지 확인하기
• 실시간 미리보기 사용하기
• 미리보기와 공개 사이트의 차이

파일을 열고 편집하기

코드 에디터의 왼쪽에는 프로젝트의 파일과 폴더를 확인할 수 있는 파일 탐색기가 있습니다.

파일 탐색기에서 편집할 파일을 선택하면 가운데 코드 편집 영역에 파일의 내용이 표시됩니다.

예를 들어 홈페이지를 편집하려면 다음 파일을 선택합니다.

/public/+page.essepage

코드 편집 영역에서 기존 내용을 수정하거나 새로운 코드를 추가할 수 있습니다.

<h1>Welcome to My Website</h1>

<p>This page was created with Essepage.</p>

편집한 내용을 저장하면 변경사항이 개발 환경의 작업용 버전에 반영됩니다.

파일을 저장하는 방법과 저장 상태에 관한 자세한 내용은 작업 저장하기에서 알아볼 수 있습니다.

미리보기 열기

미리보기는 개발 환경에 저장된 페이지가 웹브라우저에서 어떻게 표시되는지 확인하는 기능입니다.

페이지를 미리보기로 열려면 다음 순서로 진행하세요.

1. 파일 탐색기에서 +page.essepage 파일을 마우스 오른쪽 버튼으로 클릭합니다.
2. 미리보기(Preview)를 선택합니다.
3. 오른쪽 미리보기 화면에서 페이지를 확인합니다.

미리보기 화면이 이미 열려 있다면 선택한 페이지가 해당 화면에 표시됩니다.

미리보기할 수 있는 파일

미리보기는 공개된 +page.essepage 파일에서 사용할 수 있습니다. 공개된 페이지 파일은 파일 탐색기에서 녹색으로 표시됩니다.

프로젝트를 만들 때 템플릿으로 생성된 홈페이지는 이미 공개되어 있으므로 바로 미리보기로 열 수 있습니다.

새로 만든 페이지는 아직 공개되지 않았으므로 처음에는 미리보기를 사용할 수 없습니다. 새 페이지를 공개(Publish)한 뒤부터 미리보기로 열 수 있습니다.

예를 들어 다음 파일을 새로 만들었다면 먼저 공개해야 합니다.

/public/about/+page.essepage

페이지를 처음 공개한 이후에는 코드를 수정하고 저장해도 공개 사이트가 바로 변경되지 않습니다. 저장한 내용은 미리보기에서 먼저 확인하고, 준비가 끝났을 때 공개 사이트에 적용할 수 있습니다.

저장한 변경사항 확인하기

코드를 수정한 뒤 파일을 저장하면 미리보기 화면이 업데이트됩니다.

<h1>Welcome to My Website</h1>

제목을 다음과 같이 수정하고 저장해보세요.

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

오른쪽 미리보기 화면에서 변경된 제목을 확인할 수 있습니다.

저장하면 미리보기가 업데이트되지만 방문자가 보는 공개 사이트가 변경되지는 않습니다.

미리보기에서 페이지 이동하기

여러 페이지로 구성된 웹사이트는 미리보기 안에서도 링크를 사용해 이동할 수 있습니다.

예를 들어 레이아웃에 다음 메뉴가 있다고 가정해보겠습니다.

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

미리보기 화면에서 About을 선택하면 /about 페이지로 이동하고, Contact를 선택하면 /contact 페이지로 이동합니다.

미리보기 상단의 홈 아이콘을 선택하면 웹사이트의 홈페이지로 돌아갈 수 있습니다.

다양한 화면 너비에서 확인하기

미리보기 화면의 너비를 조절하면 페이지가 다양한 화면 크기에서 어떻게 표시되는지 확인할 수 있습니다.

에디터 영역과 미리보기 영역 사이의 경계선에 마우스를 놓고 드래그하여 미리보기 화면 크기를 조정할 수 있습니다.

Tailwind CSS의 반응형 클래스를 사용했다면 화면 너비에 따라 배치가 변경되는 것도 확인할 수 있습니다.

<div class="grid gap-4 md:grid-cols-3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

이 코드는 작은 화면에서 콘텐츠를 한 열로 표시하고, 화면이 일정 크기 이상일 때 세 열로 표시합니다.

실시간 미리보기 사용하기

일반 미리보기는 파일을 저장해야 업데이트됩니다.

코드를 작성하는 동안 저장하지 않고도 변화를 바로 확인하고 싶다면 실시간 미리보기(Live Preview)를 사용할 수 있습니다.

실시간 미리보기를 적용하려면 HTML 요소의 id를 밑줄(_)로 시작하도록 지정합니다.

<div id="_main">
    <h1>Welcome to My Website</h1>

    <p>This page was created with Essepage.</p>
</div>

이제 _main 요소 안의 코드를 수정하면 저장하지 않아도 해당 영역이 미리보기 화면에서 바로 업데이트됩니다.

예를 들어 다음 제목을

<h1>Welcome to My Website</h1>

다음과 같이 수정해보세요.

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

코드를 입력하는 동안 미리보기 화면의 제목이 바로 변경됩니다.

실시간 미리보기의 적용 범위

실시간 미리보기는 밑줄로 시작하는 id가 지정된 요소와 그 안쪽 영역에 적용됩니다.

<section id="_intro">
    <h1>About Our Studio</h1>

    <p>We create simple and useful websites.</p>
</section>

이 예제에서는 _intro 영역 안의 제목과 문장을 수정할 때 결과가 바로 표시됩니다.

페이지의 다른 영역에는 일반 미리보기가 적용되므로 변경사항을 확인하려면 파일을 저장해야 합니다.

각 id는 한 페이지 안에서 중복되지 않도록 서로 다른 이름을 사용하세요.

<section id="_intro">
    ...
</section>

<section id="_services">
    ...
</section>

컴포넌트가 포함된 영역은 실시간 미리보기를 지원하지 않습니다.

실시간 미리보기 대상으로 지정한 HTML 영역 안에 <essepage-component>가 있으면 실시간 미리보기가 정상적으로 동작하지 않습니다.

컴포넌트는 페이지가 구성될 때 실제 HTML로 컴파일되며, 원래 작성한 <essepage-component> 요소는 미리보기 페이지에서 사라집니다. 이로 인해 편집 중인 코드와 미리보기의 HTML 구조가 달라져 해당 영역을 실시간으로 업데이트할 수 없습니다.

컴포넌트가 포함된 페이지에서는 파일을 저장해 미리보기 페이지를 다시 불러오거나, 컴포넌트를 실시간 미리보기 대상 영역 밖으로 분리하세요.

CSS를 실시간으로 미리보기

페이지 파일 안에 작성한 <style>에도 밑줄로 시작하는 id를 지정할 수 있습니다.

<style id="_css">
    h1 {
        color: royalblue;
        font-size: 48px;
    }
</style>

_css가 지정된 <style> 안에서 색상이나 크기를 수정하면 CSS 변경사항이 미리보기 화면에 바로 표시됩니다. 파일을 저장하지 않아도 제목의 색상이 바로 변경됩니다.

Tailwind CSS 클래스를 사용하는 경우에는 실시간 미리보기가 적용된 요소 안에서 클래스를 수정해 결과를 확인할 수 있습니다.

<div id="_main">
    <h1 class="text-4xl font-bold text-rose-600">
        Bloom Flower Studio
    </h1>
</div>

text-rose-600을 text-blue-600으로 변경하면 글자 색상이 바로 바뀝니다.

실시간 미리보기도 저장은 필요합니다

실시간 미리보기는 코드를 입력하는 동안 결과를 빠르게 확인하기 위한 기능입니다. 미리보기 화면이 변경되더라도 파일의 내용이 자동으로 저장되는 것은 아닙니다.

작업을 유지하려면 편집이 끝난 뒤 반드시 파일을 저장해야 합니다.

실시간 미리보기는 결과를 바로 보여주는 기능이며, 작업 내용을 저장하는 기능이 아닙니다.

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

미리보기와 공개 사이트의 차이

에스페이지에서는 작업 중인 내용을 확인하는 미리보기와 방문자가 보는 공개 사이트가 분리되어 있습니다.

파일을 여러 번 저장하고 미리보기에서 확인해도 공개 사이트는 변경되지 않습니다.

작업이 끝난 뒤 공개(Publish) 또는 변경사항 적용(Apply Changes)을 실행해야 방문자가 보는 사이트에 반영됩니다.

공개와 적용에 관한 자세한 내용은 공개와 적용에서 알아볼 수 있습니다.

기본 작업 흐름

코드를 편집하고 결과를 확인하는 기본 흐름은 다음과 같습니다.

1. 파일 탐색기에서 편집할 파일을 엽니다.
2. 페이지 파일을 미리보기로 엽니다.
3. 코드를 작성하거나 수정합니다.
4. 필요한 영역에서는 실시간 미리보기로 변화를 확인합니다.
5. 파일을 저장합니다.
6. 일반 미리보기에서 저장된 결과를 확인합니다.
7. 링크와 다양한 화면 너비에서 페이지를 확인합니다.
8. 작업이 끝나면 공개 사이트에 변경사항을 적용합니다.

편집 → 실시간 확인 → 저장 → 미리보기 → 공개 사이트에 적용

미리보기가 동작하지 않을 때

미리보기가 열리지 않거나 변경사항이 표시되지 않는다면 다음 내용을 확인하세요.

미리보기 메뉴가 표시되지 않습니다

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

새로 만든 페이지라면 먼저 공개(Publish)하세요.

수정한 내용이 표시되지 않습니다

일반 미리보기에는 저장된 내용이 표시됩니다. 파일을 저장했는지 확인하세요.

실시간 미리보기가 동작하지 않습니다

다음 내용을 확인하세요.

• 미리보기 화면이 열려 있는지
• 요소에 id가 지정되어 있는지
• id가 밑줄(_)로 시작하는지
• 수정하는 코드가 해당 요소 안에 있는지
• 같은 id가 페이지에서 여러 번 사용되지 않았는지

미리보기에는 표시되지만 공개 사이트에는 표시되지 않습니다

정상적인 동작입니다.

미리보기는 개발 환경의 작업 내용을 보여주고, 공개 사이트는 파일을 공개하거나 적용한 버전을 보여줍니다.

작업이 끝났다면 변경사항 적용(Apply Changes)을 사용해 공개 사이트에 반영하세요.

다음 단계

편집과 미리보기 사용법을 이해했다면 다음 문서로 넘어가세요.

• 파일을 저장하고 저장 상태를 확인하는 방법: 작업 저장하기
• 페이지를 처음 공개하거나 변경사항을 반영하는 방법: 공개와 적용
• 프로젝트의 파일과 폴더를 관리하는 방법: 파일과 폴더 관리
• 오류와 실행 메시지를 확인하는 방법: 콘솔과 디버깅