# 메인 편집

## 메인 페이지

* 메인에는 이벤트 배너,  메인 진열 상품 등 쇼핑몰의 핵심 정보를 요약해서 보여줘요.

## 섹션

### 섹션 개념 

* 섹션은 메인페이지를 위에서 아래로 나누는 <mark style="color:blue;">**레이아웃 단위예요.**</mark>&#x20;
* 메인 페이지는 여러 개의 섹션으로 구성되며,  각 섹션 안에 하나 이상의 요소를 배치해 디자인해요.&#x20;
* 섹션별로 배경색, 여백, 진열 방식 등을 다르게 설정해 구역별로 메인 화면을 만들 수 있어요.&#x20;

### 섹션 추가 <a href="#undefined-3" id="undefined-3"></a>

<figure><img src="/files/xPF9GbxnStMYyDnADj8q" alt="" width="375"><figcaption></figcaption></figure>

1. 메인 편집 화면에서 <mark style="color:blue;">**왼쪽 툴바의 섹션 아이콘 버튼**</mark>을 클릭해요.
2. 오른쪽에 <mark style="color:blue;">**섹션 추가 패널**</mark>이 열리며, 좌측에서 섹션 종류 선택할수있어요.

* <mark style="color:blue;">**기본 섹션 :**</mark> 요소를 자유롭게 추가하고 배치할 수 있는 기본적인 섹션이에요.
* <mark style="color:blue;">**디자인 섹션 :**</mark> 전문가가 미리 디자인해 둔 완성형  섹션을 바로 사용할 수 있어요.
* <mark style="color:blue;">**배너 섹션 :**</mark> 큰 이미지나 홍보 문구가 들어간 배너 영역을 만들어요.
* <mark style="color:blue;">**메인 진열 상품 섹션 :**</mark> 쇼핑몰의 상품 목록을 자동으로 불러와 보여주는 영역이에요.

3. 우측에서 레이아웃을 선택할 수 있어요.

* 선택한 섹션 종류에 따라 여러 개의 섹션 종류가 미리보기로 노출돼요.

{% hint style="info" %}
**추가 방법**

1. 좌측에서 원하는 섹션 종류를 클릭해요.
2. 우측에서 레이아웃 미리보기 카드를 더블클릭 또는 드래그앤 드롭으로 원하는 위치에 배치해요.
3. 더블클릭시 선택된 섹션이 <mark style="color:blue;">**현재 선택한 섹션 아래**</mark>에 추가돼요. (선택된 섹션이 없으면 페이지 맨 아래에 추가돼요.)
   {% endhint %}

***

### 섹션 종류

* 디자인 섹션/배너 섹션 /메인 진열 상품 섹션이있으며, <mark style="color:blue;">**메인 편집에서만 사용할 수 있는 전용 섹션**</mark>이에요.
* **기본 섹션**&#x20;
  * 열이 나뉘어 있는 <mark style="color:blue;">**가장 기본적인 레이아웃 섹션이에요**</mark>
  * 1열, 2열, 3열 등의 구조로 텍스트, 이미지, 버튼 등을 자유롭게 배치할 때 사용해요.&#x20;

<figure><img src="/files/05jneV78dQbsw7w8bLu8" alt="" width="375"><figcaption></figcaption></figure>

* **디자인 섹션**

  * 미리 <mark style="color:blue;">**디자인된 섹션**</mark>이에에요.&#x20;
  * 텍스트·이미지·버튼등이 함께 배치되어 있어요.&#x20;
  * 텍스트, 이미지, 버튼등의 스타일을 바꿀 수 있지만 이동은 불가해요.&#x20;
  * 일부 2열 디자인 섹션(왼쪽·오른쪽 카드형)은 섹션 전체 설정(배경/여백)과 각 영역(영역 1, 2)의 배경설정이 따로 적용돼요.&#x20;
  * 1열 배너 최상단에는 <mark style="color:$primary;">**\[고정형] 1열 배너**</mark>가 있어요.&#x20;
    * \[고정형] 1열 배너는 PC/모바일 이미지를 각각 등록할 수 있어요. (단, PC 이미지 미등록 시 \[고정형] 1열 배너는 미노출돼요.)&#x20;
    * 이미지 높이에 따라 섹션 높이가 달라질 수 있어 권장 사이즈를 참고해 등록해 주세요.
    * editor\_smartsync 스킨은 1열배너가 고정형이며, 스마트스토어 배너와 연동되어 노출돼요.

  <figure><img src="/files/QX7wtMtqNHlspmMKz6zJ" alt=""><figcaption></figcaption></figure>

* **배너 섹션**

  * 슬라이딩 배너 종류가 노출돼요.&#x20;
  * 여러 장의 배너 이미지를 슬라이딩 형태로 노출할 수 있어요.
  * 배치 후 우측 패널에서 <mark style="color:blue;">**자동 재생, 화살표/페이지 표시, 전환 속도**</mark> 등 슬라이드 옵션을 변경할 수 있어요.
  * 배너 섹션 > 슬라이드배너의 최상단에는 <mark style="color:$primary;">**\[고정형] 슬라이드 배너**</mark>가 있어요.&#x20;
    * **PC/모바일 이미지를 각각 등록할 수 있어요.** (단, PC 이미지 미등록 시 \[고정형] 슬라이드배너는 미노출돼요.)&#x20;
    * 이미지 높이에 따라 섹션 높이가 달라질 수 있어 권장 사이즈를 참고해 등록해 주세요.
    * editor\_smartsync 스킨은 슬라이드 배너가 고정형이며, 스마트스토어 배너와 연동되어 노출돼요.

  <figure><img src="/files/t2GbYTpnXfkVJb8SKjWS" alt="" width="563"><figcaption></figcaption></figure>

* **메인 진열 상품 섹션**
  * 쇼핑몰의 상품을 불러와 보여주는 섹션이에요.&#x20;
  * `메이크샵` > `상품` > `진열` > `메인 진열 설정` 에서 지정한 배열/상품 구성이 그대로 적용돼요.
  * 상품 리스트 클릭 시, 제목, 상품정보 노출 여부 등만 설정하고, 실제 어떤 상품이 들어갈지에 대한 설정은 <mark style="color:blue;">**메인 진열 설정 화면에서 관리**</mark>해요.&#x20;

{% hint style="info" %}
각 메인 진열 상품 코너는 1개씩만 추가할 수 있어요.&#x20;
{% endhint %}

<figure><img src="/files/Sx8xssZhXMqAaxXso729" alt=""><figcaption></figcaption></figure>

<br>

***

### 섹션 편집

* 섹션을 클릭하면 섹션이 잡혀요.&#x20;
* 섹션 영역을 잡아 섹션을  원하는 곳에 이동 시킬수있어요.
* 섹션 영역을 마우스 우클릭 하여 잘라내기/복사하기/삭제할 수 있어요.&#x20;

{% hint style="info" %}
좌측 `레이어 구조` 패널에서 섹션 이름을 클릭해 선택할 수 있어요.
{% endhint %}

## 요소&#x20;

### 요소 개념 <a href="#undefined-7" id="undefined-7"></a>

* 요소는 섹션 안에 들어가는 <mark style="color:blue;">**실제 콘텐츠 단위에요.**</mark>&#x20;
* 메인에서 사용 가능한 요소 예시
  * **텍스트** : 제목/본문/설명 문구
    * 기본 텍스트 : \[기본 디자인 설정]에서 설정된 텍스트가 노출 돼요
      * 기본 텍스트 요소를 우측 "텍스트  설정" 에서 설정값 변경을 할 경우 개별  텍스트(개별 속성)으로 변경 되요
    * 개별 텍스트 : \[기본 디자인 설정]에서 설정된 텍스트와 상관 없이 개별 디자인으로 노출 요
  * **이미지** : 배너 이미지, 아이콘 이미지 등
    * 이미지 등록 : 이미지 라이브러리에 업로드한 이미지를 노출 할 수 있어요
    * 무료 이미지 :  #빌더에서 제공 하는 무료 이미지를 노출 할 수 있어요
  * **버튼** : 링크/이동 버튼, 더보기 버튼 등

***

### 요소 추가 <a href="#undefined-8" id="undefined-8"></a>

<figure><img src="/files/o7pCN3LusBLgkCo78PrL" alt=""><figcaption></figcaption></figure>

* 요소를 배치하고 싶은 섹션의 <mark style="color:blue;">**셀(열) 영역**</mark>을 클릭해 선택합니다.
* 좌측 요소 패널에서 원하는 요소를 더블클릭하거나, 드래그 앤 드롭으로 셀 안에 끌어다 놓아 배치해요.

***

### 요소 편집

<figure><img src="/files/jT2EpFufo94W6wktQzKB" alt=""><figcaption></figcaption></figure>

* 메인 페이지에서는 텍스트, 이미지, 버튼 요소를 조합해 섹션을 구성해요.

* 요소를 클릭하면 선택 상태가 되고, 해당 요소에 맞는 <mark style="color:blue;">**속성 패널**</mark>이 열려요.&#x20;

* **텍스트 요소**

  * 텍스트 박스를 더블클릭하여 텍스트 문구를 수정할 수 있어요.&#x20;
  * 링크/글꼴/크기/색상, 정렬, 줄 간격 등을 수정할 수 있어요&#x20;
  * 텍스트 크기는 8px \~ 8px 안에서 입력 할 수 있어요.&#x20;
  * 줄간격은 1 \~ 3범위에서 입력 할 수 있으며, 기본  줄간격 은 1.4에요.&#x20;
  * 글자 간격은 -1 \~ 3 범위에서 입력 할 수 있으며, 기본 글자 간격은 0이에요.&#x20;

  <figure><img src="/files/VDw5gY5t8eIP8nEaOnK2" alt=""><figcaption></figcaption></figure>

* **이미지 요소**
  * 이미지 등록 : 이미지 라이브러리에 업로드한 이미지를 노출 할 수 있어요
  * 이미지 요소 추가후 요소를 더블 클릭 하거나, 우측 설정 메뉴에서 \[이미지 관리]버튼 클릭

    * 사용자 폴더 : 업로드 한 이미지

    <figure><img src="/files/GwQTumKrHrXbcc1sooV8" alt=""><figcaption></figcaption></figure>

    * 무료 이미지 : #빌더 제공하는  무료이미지

    <figure><img src="/files/0hEfVfmrJrTxK53DM5vd" alt="" width="375"><figcaption></figcaption></figure>

* **버튼 요소**

  * 버튼 문구, 링크 URL, 정렬, 색상/테두리/모서리 등 스타일을 변경할 수 있어요.&#x20;

  <figure><img src="/files/TEmpVFszFPGWCei3HN4i" alt=""><figcaption></figcaption></figure>

* 요소는 드래그로 위치를 옮기거나, 마우스 우클릭하여 잘라내기/복사하기/삭제할 수 있어요.&#x20;


---

# 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-2.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.