에디터 기본 사용법

에스페이지의 코드 에디터는 웹사이트의 파일을 관리하고 코드를 작성하는 브라우저 기반 작업 공간입니다.

퀵 스타트에서는 홈페이지 파일을 열고 코드를 수정한 뒤 저장과 미리보기, 변경사항 적용을 진행했습니다. 이 문서에서는 에디터의 화면 구성과 기본적인 사용 방법을 살펴봅니다.

에디터 열기

프로젝트 대시보드에서 코드 에디터(Code Editor) 버튼을 선택하면 해당 프로젝트의 에디터가 열립니다.

에디터에서는 다음 작업을 할 수 있습니다.

• 프로젝트의 파일과 폴더 확인하기
• 페이지 파일 열고 편집하기
• 새로운 파일과 폴더 만들기
• 변경사항 저장하기
• 작업 중인 페이지 미리보기
• 페이지 공개 및 변경사항 적용하기
• 공개된 페이지 열기

모든 작업은 브라우저에서 이루어지므로 별도의 코드 편집기를 설치할 필요가 없습니다.

에디터 화면 구성

에디터는 크게 다섯 부분으로 구성됩니다.

• 상단 메뉴: 파일 편집, 화면 구성, 페이지 작업과 에디터 설정에 사용하는 메뉴입니다.
• 파일 탐색기: 프로젝트의 파일과 폴더를 확인하고 관리합니다.
• 코드 편집 영역: 선택한 파일의 코드를 작성하고 수정합니다.
• 미리보기 화면: 개발 환경에 저장된 페이지가 어떻게 보이는지 확인합니다.
• 콘솔 화면: 콘솔화면이 없는 브라우저에서 디버그등의 결과를 볼 수 있습니다.

화면 크기와 작업 상황에 따라 미리보기 화면을 열거나 닫고 필요한 영역에 집중할 수 있습니다.

상단 메뉴

에디터 상단에는 다음 메뉴가 표시됩니다.

• 파일(File): 파일을 만들거나 저장하는 등 파일과 관련된 작업을 합니다.
• 편집(Edit): 실행 취소, 다시 실행, 검색 등 코드 편집에 필요한 기능을 사용합니다.
• 보기(View): 에디터의 화면과 작업 영역 표시를 조정합니다.
• 페이지(Page): 페이지 미리보기, 공개, 변경사항 적용과 같은 페이지 작업을 합니다.
• 테마(Theme): 에디터의 화면 테마를 변경합니다.
• 도움말(Help): 에디터 사용에 필요한 도움말과 관련 정보를 확인합니다.

자주 사용하는 기능은 상단 메뉴뿐만 아니라 파일의 마우스 오른쪽 버튼 메뉴나 키보드 단축키로도 실행할 수 있습니다.

파일 탐색기 사용하기

화면 왼쪽의 파일 탐색기(File Explorer)에는 현재 프로젝트의 파일과 폴더가 표시됩니다.

폴더를 선택하면 폴더를 열거나 닫을 수 있고, 파일을 선택하면 해당 파일이 코드 편집 영역에 열립니다.

프로젝트의 구성은 선택한 템플릿과 만드는 사이트에 따라 달라질 수 있지만 일반적으로 다음과 같은 파일이 포함됩니다.

• /public 폴더와 +page.essepage 페이지 파일
• CSS와 JavaScript 파일
• ads.txt 및 sitemap.xml 등의 기타 파일
• 레이아웃과 컴포넌트
• 프로젝트 설정 파일

파일과 폴더의 위치는 웹사이트의 구조와 페이지 URL에 영향을 줄 수 있습니다. 파일을 새로 만들거나 이동하기 전에 페이지와 URL 구성하기에서 파일 이름과 경로 규칙을 확인하세요.

파일 메뉴 열기

파일이나 폴더를 마우스 오른쪽 버튼으로 클릭하면 해당 항목에서 사용할 수 있는 메뉴가 표시됩니다.

페이지 파일에서는 다음과 같은 작업을 할 수 있습니다.

• 미리보기(Preview): 개발 환경에 저장된 페이지를 미리보기로 엽니다.
• 공개(Publish): 아직 공개되지 않은 새 페이지를 공개합니다.
• 변경사항 적용(Apply Changes): 이미 공개된 페이지의 변경사항을 공개 사이트에 반영합니다.
• 페이지 열기(Open Page): 공개된 페이지를 새 탭에서 엽니다.

표시되는 메뉴는 파일의 종류와 페이지의 공개 상태에 따라 달라질 수 있습니다.

파일 열기 및 편집하기

파일 탐색기에서 파일을 선택하면 코드 편집 영역에 새로운 탭으로 열립니다.

여러 파일을 열어두고 탭을 선택하면서 이동할 수 있습니다. 현재 선택한 탭의 파일이 코드 편집 영역에 표시됩니다.

코드 편집 영역에서는 파일 종류에 따라 HTML, CSS, JavaScript, Markdown 등의 코드를 작성할 수 있습니다.

코드는 줄 번호와 문법에 따른 색상으로 표시되므로 페이지의 구조와 내용을 쉽게 구분할 수 있습니다.

기본 단축키

다음 단축키를 사용하면 자주 사용하는 작업을 빠르게 실행할 수 있습니다.

브라우저와 운영체제에 따라 일부 단축키의 동작이 다를 수 있습니다.

변경사항 저장하기

코드를 수정한 뒤에는 파일을 저장해야 합니다.

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

저장한 코드는 개발 환경에 반영되며 미리보기에서 결과를 확인할 수 있습니다.

파일을 저장해도 방문자가 보는 공개 사이트는 변경되지 않습니다.

공개 사이트에 작업내용을 반영하려면 페이지를 공개하거나 변경사항 적용을 실행해야 합니다.

작업 중에는 변경사항을 자주 저장하고 미리보기에서 결과를 확인하는 것이 좋습니다.

미리보기 사용하기

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

미리보기는 두가지 모드가 있습니다.

• 프리뷰 영역 표시 모드: 에디터 화면 오른쪽 프리뷰 영역에 프리뷰가 표시됩니다.
• 브라우저 탭 표시 모드: 브라우저의 새 탭으로 프리뷰가 표시됩니다.

기본적으로 에디터를 열면 프리뷰 영역에 표시되는데, 프리뷰 영역의 새창으로 프리뷰 열기 아이콘을 클릭하면 새로운 탭으로도 프리뷰가 열립니다.

프리뷰 영역은 모바일 화면을, 탭 프리뷰는 PC화면을 디자인 하는 용도로 동시에 사용하는것도 가능합니다.

페이지 파일을 저장하면 열려 있는 미리보기 화면도 업데이트됩니다.

미리보기가 열려 있지 않다면 다음 방법으로 열 수 있습니다.

1. 에디터의 상단 메뉴 오른편의 프리뷰 영역 아이콘을 눌러 프리뷰를 활성화 합니다.
2. 파일 탐색기에서 확인할 페이지 파일을 찾습니다.
3. 파일을 마우스 오른쪽 버튼으로 클릭합니다.
4. 미리보기(Preview)를 선택합니다.

미리보기는 공개된 +page.essepage 파일만 가능합니다. CSS, JavaScript, 레이아웃 또는 컴포넌트처럼 페이지를 지원하는 파일은 공개를 할 필요가 없습니다.

미리보기는 개발 환경의 내용을 보여줍니다. 방문자가 보는 공개 페이지와는 내용이 다를 수 있습니다.

페이지를 공개 사이트에 반영하기

공개 사이트에 작업내용을 반영하는 두가지 경우를 알아봅니다.

새로운 페이지를 만들기 위하여 파일을 새로 만들었다면, 아직 공개가 진행되지 않았으므로, 공개를 하여 반영하고, 이미 공개된 페이지를 수정하고 반영하기 위해서는 적용을 하여 반영합니다.

그러므로, 새로운 페이지를 만들고 미리보기를 하기 위해서는 일단 페이지를 공개하고, 업데이트 하면서 미리보기에서 결과를 확인한 뒤 적용하여 공개 사이트에 반영할 수 있습니다.

공개 및 적용은 같은 기능 입니다.

새 페이지 공개하기

직접 만든 새로운 페이지는 아직 방문자가 접속할 수 없는 상태입니다.

파일 탐색기에서 페이지 파일을 마우스 오른쪽 버튼으로 클릭하고 공개(Publish)를 선택하면 페이지가 처음으로 공개됩니다.

공개된 페이지 업데이트하기

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

파일 탐색기에서 페이지 파일을 마우스 오른쪽 버튼으로 클릭하고 변경사항 적용을 선택하면 저장된 변경사항이 공개 페이지에 반영됩니다.

페이지를 수정하고 저장하면 해당 파일에 보라색 인디케이터가 나타나므로 적용을 해야할 파일임을 한눈에 알 수 있습니다.

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

꼭 작업하는 파일마다 저장하고 적용할 필요는 없습니다. 미리보기를 보면서 여러 페이지의 작업을 모두 마친 후, 한번에 모두 적용하는 방법이 있습니다.

특히, 레이아웃이나 컴포넌트처럼 여러 페이지에서 사용되는 파일을 수정하면 해당 파일을 사용하는 페이지를 모두 적용해 주어야 하는데, 이러한 공통 변경사항을 여러 공개 페이지에 한꺼번에 반영하려면 전체 적용(Apply All)을 사용할 수 있습니다.

공개된 페이지 확인하기

페이지를 공개하거나 변경사항을 적용한 뒤에는 공개된 페이지에 반영이 잘 되었는지 확인하세요.

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

프로젝트 대시보드의 사이트 주소(Site URL)를 열어 확인할 수도 있습니다.

물론, 주소를 기억하고 있다면 브라우저의 주소창에 직접 입력해도 됩니다.

변경사항을 적용한 후, 캐시가 갱신되는 데 최대 1분 정도 걸릴 수 있습니다. 이전 내용이 표시된다면 잠시 기다린 뒤 페이지를 새로고침하세요.

기본 작업 흐름

에디터에서 페이지를 수정하는 기본 흐름은 다음과 같습니다.

1. 파일 탐색기에서 편집할 페이지를 찾습니다.
2. 파일을 열고 코드를 수정합니다.
3. 파일을 저장합니다.
4. 미리보기에서 결과를 확인합니다.
5. 새 페이지는 공개하고 기존 페이지의 변경사항은 적용합니다.
6. 공개된 페이지를 열어 최종 결과를 확인합니다.

파일 열기 → 코드 수정 → 저장 → 미리보기 → 공개 또는 적용 → 공개 페이지 확인

결과가 보이지 않을 때

작업 내용이 공개 페이지에 보이지 않는다면 다음 항목을 확인하세요.

• 파일을 저장했는지 확인합니다.
• 수정한 페이지가 미리보기로 열려 있는지 확인합니다.
• 올바른 파일을 수정했는지 파일 경로를 확인합니다.
• HTML, CSS 또는 JavaScript에 오류가 없는지 확인합니다.
• 공개 페이지를 보고 있다면 변경사항을 적용했는지 확인합니다.
• 변경사항을 적용한 직후라면 잠시 기다린 뒤 새로고침합니다.

미리보기에는 변경되었지만 공개 페이지에는 반영되지 않았다면 저장만 하고 변경사항 적용을 하지 않았을 가능성이 큽니다.

다음 단계

에디터의 기본적인 사용 방법을 익혔다면 다음 문서로 넘어가세요.

• 새로운 페이지를 만들고 싶다면: 페이지 추가하기
• 파일과 URL의 연결 방식을 알고 싶다면: 페이지와 URL 구성하기
• 실제 웹사이트를 따라 만들고 싶다면: 랜딩 페이지 만들기
• 공통 코드를 여러 페이지에서 사용하고 싶다면: 레이아웃과 컴포넌트
• 공개와 적용 과정을 자세히 알아보고 싶다면: 공개와 사이트 관리