> 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/design/builder/builder.md).

# # Builder 매뉴얼

## 목차

1. 에디터 기본 기능
   1. 상단 메뉴 
   2. 좌측 도구 패널 
   3. 우측 속성 패널
2. 상단 편집
   1. 헤더 페이지
   2. 기본 헤더
   3. 추가 헤더
3. 메인 편집
   1. 메인 페이지
   2. 섹션
   3. 요소
4. 하단 편집

   1. 푸터 페이지
   2. 기본 푸터 
   3. 추가 푸터

## 1. 에디터 기본 기능

### 상단 메뉴

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

<div align="left"><figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Fzb8QnegG8XD9WL6QRb9E%2FGNB.png?alt=media&amp;token=adcbad46-d7ad-42e4-9e08-11b88fb899b9" alt=""><figcaption></figcaption></figure></div>

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

***

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

<div align="left"><figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FyTQzPjqhrsJr23GHAFNW%2FLNB.png?alt=media&amp;token=a77ea024-4d4b-425c-b02a-5fbba732a7c9" alt=""><figcaption></figcaption></figure></div>

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

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

***

### 우측 속성 패널

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

<div align="left"><figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FuNJSmw7oSqEAIMXTPoE6%2FRNB.png?alt=media&amp;token=dda2747f-64f0-47cf-9984-031f4879ce23" alt=""><figcaption></figcaption></figure></div>

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

## 2. 상단 편집

### 헤더 페이지

메인 페이지와는 분리된 헤더 전용 편집 모드예요. 사이트의 첫인상을 결정하는 로고, 메뉴, 아이콘 등을 독립적으로 디자인하고 관리할 수 있어요.

#### 편집 진입 및 종료

<div align="left"><figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FzEUWUTHw35N7GYHp90s4%2F%EC%A7%84%EC%9E%85.png?alt=media&amp;token=8c55ca55-7478-43d1-b3ef-aad7ba83afae" alt=""><figcaption></figcaption></figure></div>

1. **진입**: 메인 편집 화면 상단의 헤더 영역에 마우스를 올리고, \[헤더 설정] 버튼을 클릭하면 편집 모드가 시작돼요.

<div align="left"><figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FImIKi5sQsgW39PSIgRNY%2F%EC%A2%85%EB%A3%8C.png?alt=media&amp;token=e14bb38e-3c5c-4fad-83b5-082e0e041031" alt=""><figcaption></figcaption></figure></div>

1. **종료**: 편집을 마치면 좌측 상단의 \['메인 디자인설정으로 돌아가기'] 버튼을 클릭하여 메인 편집 화면으로 복귀해요.
2. **디자인 설정**: '헤더페이지'에 공통으로 적용될 디자인을 설정해요. 배경, 텍스트, 문단 스타일 등을 정의할수 있어요.
   * **배경**: 사이트 전체의 기본 배경색이나 배경 이미지를 설정해요.
   * **텍스트**: 사이트에서 사용할 기본 글꼴, 크기, 색상을 지정해요.
   * **문단**: 줄 간격이나 문단 간격 등 텍스트의 배치 스타일을 미리 정의해요.

***

### 기본 헤더

<div align="left"><figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FJZ14EI4uiJ7wIEAT9Ta7%2F%EA%B8%B0%EB%B3%B8%ED%97%A4%EB%8D%94.png?alt=media&amp;token=bdee4292-a5ab-489e-939b-ca1c76421105" alt=""><figcaption></figcaption></figure></div>

1. **기본 헤더**는: <mark style="color:blue;">**요소 삭제나 변경이 불가능한 필수 고정 헤더**</mark>에요. 전문가가 디자인한 레이아웃 틀은 유지되지만, 헤더 영역이나 각 요소를 클릭하면 우측 속성 패널이 열려 배경, 테두리 및 스타일을 수정할 수 있어요.
2. **배경**: 배경색을 지정하거나 이미지를 등록해요.
3. **테두리**: 테두리(방향, 종류, 굵기, 색상)를 설정해요.

#### 구성 요소

<div align="left"><figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F5eVv2bCGaaijsMv1tj9p%2F%EA%B5%AC%EC%84%B1%EC%9A%94%EC%86%8C.png?alt=media&amp;token=97db5573-f3f8-4f58-b9e0-7d37e1b46fb2" alt=""><figcaption></figcaption></figure></div>

1. **상단 배너**: "디자인> 쇼핑몰 배너 관리 > 상단 배너 관리"  `메이크샵` > `디자인` > `쇼핑몰 배너관리` > `상단 배너 관리` 메뉴에서 등록된 배너가 노출 되요
   * 스타일 : 배너 영역의 테두리 스타일(굵기,색상 등)설정 할 수 있어요
2. **이미지(로고)**: \[업로드] 버튼을 통해 브랜드 로고 이미지를 등록하거나 교체해요.
3. **카테고리**: 쇼핑몰의 '상품 카테고리'가 자동 연동되어 표시돼요.
   * **기본 상태**: 평소 노출되는 텍스트의 글꼴, 크기, 색상 등을 설정해요.
   * **마우스 오버**: 마우스를 올렸을 때 변경될 스타일(색상, 굵기)을 설정해요.
4. **공통 메뉴**: 우측 상단의 기능 아이콘(로그인, 장바구니 등) 영역이에요.
   * **노출 설정**: 필요한 아이콘만 선택하여 켜거나 끌 수 있어요.
   * **스타일**: 아이콘의 색상, 크기, 정렬을 설정해요.

### 추가 헤더

<div align="left"><figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Ftj5hs25mRgtVW0Um3JeT%2F%EC%B6%94%EA%B0%80%ED%97%A4%EB%8D%94.png?alt=media&amp;token=7d017ad4-d62f-4170-9a11-deeed563597b" alt=""><figcaption></figcaption></figure></div>

1. **추가헤더:** 기본 헤더만으로 부족할 경우, 위/아래에 기본 섹션을 추가하여 자유롭게 디자인 할 수 있어요.
   * **섹션 추가**: 좌측 패널(LNB)에서 '기본 섹션'을 드래그하여 헤더의 위쪽이나 아래쪽 끝으로 가져다 놓으세요.
   * **요소 추가**: 추가한 섹션 안에 텍스트나 버튼을 배치하여 텍스트,   이미지, 버튼 등을 자유롭게 구성해요.

## 3. 메인편집

### 메인 페이지

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

### 섹션

#### 섹션 개념&#x20;

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

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

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FIMVGeMj7XDxOH8s7MIpf%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EA%B8%B0%EB%B3%B8%20%EC%84%B9%EC%85%98.png?alt=media&amp;token=86d0da70-73cd-422a-9091-d6916595426a" 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="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FfdOa2iyA2kAuZ2jYAfFC%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EA%B8%B0%EB%B3%B8%20%EC%84%B9%EC%85%98%20(2).png?alt=media&amp;token=fb0294fb-bdbb-43c0-9d8d-eb3a82983c6a" alt="" width="375"><figcaption></figcaption></figure>

* **디자인 섹션**

  * 미리 <mark style="color:blue;">**디자인된 섹션**</mark>이에에요.&#x20;
  * 텍스트·이미지·버튼등이 함께 배치되어 있어요.&#x20;
  * 텍스트, 이미지, 버튼등의 스타일을 바꿀 수 있지만 이동은 불가해요.&#x20;
  * 일부 2열 디자인 섹션(왼쪽·오른쪽 카드형)은 섹션 전체 설정(배경/여백)과 각 영역(영역 1, 2)의 배경설정이 따로 적용돼요.&#x20;

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Fmc9uoLK6IiNCx66fZ1bG%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EB%94%94%EC%9E%90%EC%9D%B8%20%EC%84%B9%EC%85%98.png?alt=media&amp;token=bebcf416-9355-4460-a8f5-dcb6fcbb7198" alt="" width="493"><figcaption></figcaption></figure>

* **배너 섹션**

  * 슬라이딩 배너 종류가 노출돼요.&#x20;
  * 여러 장의 배너 이미지를 슬라이딩 형태로 노출할 수 있어요.
  * 배치 후 우측 패널에서 <mark style="color:blue;">**자동 재생, 화살표/페이지 표시, 전환 속도**</mark> 등 슬라이드 옵션을 변경할 수 있어요.

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FRqqv1q1V8s6EDSRKolLW%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%94%A9%20%EB%B0%B0%EB%84%88.png?alt=media&amp;token=763c9b7a-569a-4785-87c3-c3f02a3a8aa9" alt="" width="375"><figcaption></figcaption></figure>

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

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

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FJl6RyUIbnPb5sORajQmA%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%94%A9%20%EB%B0%B0%EB%84%88%20(1).png?alt=media&amp;token=2c473037-a779-4ff8-939a-b9dbb20e1b30" alt="" width="563"><figcaption></figcaption></figure>

***

#### 섹션 편집

* 섹션을 클릭하면 섹션이 잡혀요.&#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="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Fpeiyn12xFFQDU4bO5s0T%2F%EC%9A%94%EC%86%8C%20%EC%B6%94%EA%B0%80%20_%20%ED%85%8D%EC%8A%A4%ED%8A%B8.png?alt=media&amp;token=8a92650c-2fa4-4b44-b55a-07c538e1eb95" alt="" width="563"><figcaption></figcaption></figure>

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

***

#### 요소 편집

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Fp4ur0cIKHVQY1VxIGtrL%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EA%B8%B0%EB%B3%B8%20%EC%84%B9%EC%85%98%20_%20%EC%9A%94%EC%86%8C%20%EC%88%98%EC%A0%95.png?alt=media&amp;token=ae05ac0e-f5c8-41c9-86b0-9de735489844" alt="" width="563"><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="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F4DseCJMRfITlyZTco0nT%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%ED%85%8D%EC%8A%A4%ED%8A%B8%20%EC%9A%94%EC%86%8C%20(1).png?alt=media&amp;token=27792b70-44bf-4e31-98ea-7166c035ceb9" alt="" width="563"><figcaption></figcaption></figure>

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

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

    <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FEa2K5wD2Wt7tOAkO5tmG%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EC%9A%94%EC%86%8C.png?alt=media&amp;token=92ec8f68-92c0-4f61-a1b9-93343f836ac9" alt=""><figcaption></figcaption></figure>

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

    <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F38ANli8kgMfhqdbeWqHZ%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EB%AC%B4%EB%A3%8C%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EC%9A%94%EC%86%8C.png?alt=media&amp;token=720c61a5-ab24-4c3e-ae8a-3085781262d5" alt="" width="375"><figcaption></figcaption></figure>

* **버튼 요소**

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

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FX6eGEskzmo6ykNchI1er%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EB%B2%84%ED%8A%BC%20%EC%9A%94%EC%86%8C.png?alt=media&amp;token=069bcdc0-a971-455f-83ef-59f039020e40" alt="" width="563"><figcaption></figcaption></figure>

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

## 4. 하단 편집

### 푸터 페이지

* 푸터에는 고객센터, 사업자 정보 등 <mark style="color:blue;">**어드민에 입력한 기본 정보**</mark>가 자동으로 노출되고, 레이아웃은 스킨에 맞춰 고정돼요.&#x20;
* 기본 푸터는 <mark style="color:blue;">**삭제하거나 구조를 바꾸지 않고**</mark>, 텍스트 스타일만 사이트 분위기에 맞게 조정하는 방식으로 사용해요.

#### 푸터 설정 모드 진입

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FfTAZC2FfwCceC3FQZ5Aj%2F%ED%91%B8%ED%84%B0%20%EB%A7%88%EC%9A%B0%EC%8A%A4%EC%98%A4%EB%B2%84.png?alt=media&amp;token=1faacd8f-021b-4b16-ad25-ee663dd83919" alt="" width="563"><figcaption></figcaption></figure>

1. 에디터에서  페이지 맨 아래로 이동해 푸터 영역에 마우스를 올려요.
2. 푸터 상단에 <mark style="color:blue;">**\[푸터 설정] 버튼**</mark>이 나타나요.
3. \[푸터 설정] 버튼을 클릭하면 <mark style="color:blue;">**푸터 설정 모드**</mark>로 진입해요.

{% hint style="info" %}
모바일 뷰에서는 푸터의 노출 상태만 확인할 수 있고, 직접 수정은 PC 뷰에서만 가능해요.
{% endhint %}

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FXTazWUKZoV0OcE01h8T1%2F%ED%91%B8%ED%84%B0%20_%20%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EC%9A%94%EC%86%8C%20%EC%84%A0%ED%83%9D%20_%EB%A9%94%EC%9D%B8%20%EB%94%94%EC%9E%90%EC%9D%B8%20%EC%84%A4%EC%A0%95%EC%9C%BC%EB%A1%9C%20%EB%8F%8C%EC%95%84%EA%B0%80%EA%B8%B0%20(1).png?alt=media&amp;token=fc8f2656-6639-4597-b350-146fd54d9720" alt=""><figcaption></figcaption></figure>

* &#x20;푸터 설정 모드에서 메인으로 돌아가기
  * 푸터 수정 모드에서는 화면 왼쪽 상단에 \[메인 편집으로 돌아가기] 버튼이 노출돼요.
  * 이 버튼을 클릭하면 다시 메인 편집 화면으로 돌아갈 수 있어요.

### 기본 푸터

#### 기본 푸터 섹션 구성

* 기본 푸터 섹션은 스킨에 포함된 공통 하단 영역이에요.
* 고객센터, 사업자 정보, 약관 링크 등은 <mark style="color:blue;">**어드민에 입력한 설정 값**</mark>이 자동으로 노출돼요.
* 어드민에 값이 없는 항목은 푸터에서 자동으로 미노출돼요.
* 저장된 푸터 내용은 모바일에서도 <mark style="color:blue;">**모바일 전용 레이아웃**</mark>에 맞춰 함께 노출돼요.

{% hint style="info" %}

* 수정 불가 항목&#x20;
  * 기본 푸터 섹션 삭제·숨김
  * 푸터 안 기본 요소(고객센터, 사업자정보, 약관 링크 등) 삭제
  * 항목 추가/삭제, 텍스트 내용 변경\
    (내용은 어드민 설정 값 기준으로만 바뀌어요.)
  * 섹션 높이/폭, 여백 등 레이아웃 구조 변경
  * 푸터 안에 새로운 섹션이나 요소 추가
    {% endhint %}

#### 푸터에 노출되는 정보 수정 경로

* 아래 경로에서 값을 입력한 항목만 푸터에 표시되고,
  &#x20;입력하지 않은 항목은 자동으로 노출되지 않아요.
  * 쇼핑몰/사업자 정보
    * 상호, 대표자명, 사업자등록번호, 통신판매신고번호 \[`설정` > `기본 설정` > `쇼핑몰 정보`]
    * &#x20;주소, 이메일 → \[`설정` > `기본 설정` > `CS 정보`]
  * 개인정보보호책임자, 개인정보 처리방침, 이용약관 → \[`설정` > `기본 설정` > `약관 설정`]
  * 고객센터 정보(시간, 전화번호 등) → \[`설정` > `기본 설정` > `고객센터 및 은행정보` > `고객센터 설정`]
  * 은행 정보(계좌 안내 등) → \[`설정` > `기본 설정` > `고객센터 및 은행정보` > `은행계좌 설정`]

***

#### 텍스트 스타일 수정

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FylRGiKq8c1ff7dPn6SWi%2F%ED%91%B8%ED%84%B0%20_%20%EC%9A%94%EC%86%8C%20%EC%84%A0%ED%83%9D%20(3).png?alt=media&amp;token=28be2d87-87c8-464c-a0bf-cd8eee3c63ab" alt=""><figcaption></figcaption></figure>

* 기본 푸터 섹션 안의 텍스트는 <mark style="color:blue;">**내용이 아닌 스타일만 수정**</mark>할 수 있어요.
* 고객센터, 사업자 정보, 안내 문구 등의 텍스트 요소를 클릭하면 선택돼요.
* 선택 상태에서 우측 속성 패널에서 아래 항목을 변경할 수 있어요.
  * 글꼴(폰트)
  * 글자 크기
  * 색상, 굵기, 기울임꼴
  * 줄 간격, 자간
  * 정렬 방식(왼쪽/가운데/오른쪽)

{% hint style="info" %}
텍스트 내용(전화번호, 주소, 사업자 정보 등)과 항목 구성은 <mark style="color:blue;">**어드민 설정 값에 따라 결정**</mark>되며, 푸터 편집 화면에서는 수정할 수 없어요.
{% endhint %}

### 추가 푸터

* 기본 푸터 섹션 아래는 고정이지만, <mark style="color:blue;">**푸터 아래쪽에는 간단한 섹션을 더 추가**</mark>할 수 있어요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FQJFkPTsdbMFMRVvglysV%2F%ED%91%B8%ED%84%B0%20_%20%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EC%9A%94%EC%86%8C%20%EC%84%A0%ED%83%9D%20(2).png?alt=media&amp;token=b8eb590c-cc57-4374-afb4-83a3caff7de5" alt=""><figcaption></figcaption></figure>

#### 추가 가능한 섹션

* 하단 영역(푸터 근처)에 추가할 수 있는 섹션은 <mark style="color:blue;">**기본 섹션만 가능**</mark>해요.
* 디자인 섹션, 배너 섹션, 메인 진열 상품 섹션 등은 <mark style="color:blue;">**하단 영역에서는 사용할 수 없어요.**</mark>

#### 추가 섹션 안에서 사용할 수 있는 요소

추가한 기본 섹션 안에서는 아래 요소만 사용할 수 있어요.

* **텍스트**
  * 안내 문구, 추가 링크, 카피 문구 등
* **버튼**
  * “위로 가기”, “고객센터 바로가기” 등의 버튼
* **이미지**
  * 간단한 인증 마크, 브랜드 로고 등