> For the complete documentation index, see [llms.txt](https://help.makeshop.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.makeshop.co.kr/manual/undefined-1/builder/undefined.md).

# 에디터 기본 기능

## 상단 메뉴 

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

<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. **요소 설정**: 텍스트, 버튼, 이미지 등 요소를 선택하면 전용 옵션이 나타나요.
   * **텍스트**: 글꼴, 크기, 색상 등 스타일을 변경하고, 클릭 시 이동할 링크를 설정해요.
   * **버튼**: 버튼의 문구, 배경색, 테두리 디자인을 변경하고 링크를 연결해요.
   * **이미지**: 노출할 이미지를 설정하고, 클릭 시 이동할 링크를 연결해요.