# 에디터 기본 기능

## 상단 메뉴 

화면 맨 위  파란색 영역에서 사이트 관리와 저장 기능을 사용할 수 있어요.

<div align="left"><figure><img src="/files/fDqkzYUbSCUbcSDb7qyt" alt=""><figcaption></figcaption></figure></div>

1. **페이지 선택**: 현재 작업 중인 페이지의  이름을 확인할 수 있어요.
2. **뷰 모드**: PC와 모바일 아이콘을 눌러 각 기기에서 화면이 어떻게 보이는지 확인해요.
   * \[참고]: 모바일 뷰에서는 요소의 위치나 크기를 확인할 수 있지만, 직접 수정은 불가능해요.
3. **스킨명 확인**: 현재 작업 중인 스킨의 이름을 확인할 수 있어요.
   * 스킨명이 editor\_smartsync인 경우[ ‘스마트스토어 연동 스킨’ 문서](/manual/undefined-1/builder/editor_smartsync.md)를 참고해 주세요.
4. **디자인 백업**: 최근  동안 저장된 디자인 내역을 확인하고 복원할 수 있어요.
   * 복원하기: 목록에서 원하는 시점을 선택하고 \[복원] 버튼을 누르면, 에디터의 모든 내용이 그 당시 상태로 되돌아가요.
5. **실행 취소 / 다시 실행**: 작업 중 실수했다면 이전 상태로 되돌리거나, 취소한 작업을 다시 실행해요.
   * 단축키 : 실행 취소:  `Ctrl+Z`, 다시 실행: `Ctrl+Y`
6. **메뉴얼**: 에디터 기능을 소개한 메뉴얼을 제공해요.
7. **기본 디자인 설정**: 사이트 전체에 공통으로 적용될 디자인을 설정해요. 배경, 텍스트, 문단 스타일 등을 미리 정의하여 통일감 있는 사이트를 만들 수 있어요.
8. **미리보기**: 현재 작업 내용을 실제 브라우저 창에서 미리 확인해요.
9. **저장**: 작업한 내용을 저장해요.&#x20;

***

## 좌측 도구 패널&#x20;

화면 왼쪽의 아이콘 메뉴를 통해 웹사이트의 뼈대를 만들고 관리할 수 있어요.

<div align="left"><figure><img src="/files/wo0m1oxFRidPQZ8p0uj3" alt=""><figcaption></figcaption></figure></div>

1. **요소 추가**: 페이지를 구성하는 작은 부품들을 추가하는 메뉴예요.
   * **사용법**: 원하는 요소를 클릭하거나 화면으로 드래그해서 섹션 or 셀 안에 넣어보세요.
     * \[참고] 요소는 둥둥 떠 있을 수 없어서, <mark style="color:$primary;">**반드시 섹션이나 셀 안으로만 넣을 수 있어요.**</mark> 빈 공간에는 추가되지 않으니 먼저 섹션을 만들어 주세요.
   * **요소종류**
     * **텍스트**
       * 기본 텍스트: '기본 디자인 설정'에서 정해둔 스타일을 따르는 제목과 문단이에요.
       * 개별 텍스트: 다양한 스타일로 미리 디자인된 제목과 문단을 제공해요.
     * **버튼**
       * 클릭을 유도할 수 있는 깔끔하고 기본적인 디자인의 버튼들을 제공해요.
     * **이미지**
       * 이미지 등록: 내 컴퓨터에 있는 사진 파일을 직접 업로드해서 사용해요.
       * 무료 이미지: 저작권 걱정 없이 쓸 수 있는 고퀄리티 이미지를 기본으로 제공해 드려요.
2. **섹션 추가**: 화면 전체를 가로지르는 큰 배경 구역을 추가해요. 용도에 맞는 템플릿을 선택해 보세요.
   * **사용법**: 마음에 드는 템플릿을 드래그해서 본문으로 끌고 와 보세요. 원하는 섹션 사이에 넣을 수 있어요.
   * **섹션 종류**
     * **기본 섹션**: 요소를 자유롭게 추가하고 배치할 수 있는 기본적인 섹션이에요.
     * **디자인 섹션**: 전문가가 미리 디자인해 둔 완성형  섹션을 바로 사용할 수 있어요.
     * **배너 섹션**: 큰 이미지나 홍보 문구가 들어간 배너 영역을 만들어요.
     * **메인 진열 상품**: 쇼핑몰의 상품 목록을 자동으로 불러와 보여주는 영역이에요.
3. **레이어 구조**: 현재 페이지에 쌓여 있는 모든 섹션과 요소들의 계층 구조를 한눈에 볼 수 있어요.
   * **구조 확인**: `ROOT > 섹션 > 셀 > 요소` 순서로 내 사이트가 어떻게 이루어져 있는지 트리 형태로 보여줘요.
   * **요소 선택**: 화면에서 클릭하기 어려운 겹친 요소나 작은 요소도 여기서 이름을 클릭하면 쉽게 선택할 수 있어요.

***

## 우측 속성 패널&#x20;

<div align="left"><figure><img src="/files/EHvUZrLYdKnZsIokxqy1" alt=""><figcaption></figcaption></figure></div>

선택한 대상의 속성과 디자인을 설정하는 공간이에요. 무엇을 선택했느냐에 따라 메뉴가 자동으로 변경돼요.

1. **기본 디자인 설정**: 상단 메뉴의 '기본 디자인 설정' 버튼을 누르면 나타나요. 홈페이지 전체의 레이아웃과 공통 스타일을 관리해요.
   * **배경**: 사이트 전체의 기본 배경색이나 배경 이미지를 설정해요.
   * **텍스트**: 사이트에서 사용할 기본 글꼴, 크기, 색상을 지정해요.
   * **문단**: 줄 간격이나 문단 간격 등 텍스트의 배치 스타일을 미리 정의해요.
2. **섹션 및 셀 설정**: 배경 구역인 '섹션'과 '셀'을 선택하면 전체적인 스타일을 디자인할 수 있어요.
   * **레이아웃** : 태블릿이나 모바일 환경에서 이 섹션의 노출 방식을 설정해요.
   * **배경 디자인**: 배경을 투명하게 하거나, 원하는 색상 또는 이미지를 등록하여 배경을 채울 수 있어요. 정렬 방식이나 여백도 조절 가능해요.
   * **테두리**: 박스 테두리의 종류, 굵기, 색상을 지정하여 구역을 구분해요.
3. **요소 설정**: 텍스트, 버튼, 이미지 등 요소를 선택하면 전용 옵션이 나타나요.
   * **텍스트**: 글꼴, 크기, 색상 등 스타일을 변경하고, 클릭 시 이동할 링크를 설정해요.
   * **버튼**: 버튼의 문구, 배경색, 테두리 디자인을 변경하고 링크를 연결해요.
   * **이미지**: 노출할 이미지를 설정하고, 클릭 시 이동할 링크를 연결해요.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.makeshop.co.kr/manual/undefined-1/builder/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.