> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/design/editor.md).

# 에디터 기본정보

## **에디터란?**

에디터는 웹 사이트 제작 목적에 맞춰, 레이아웃을 구성하고 상품 진열 및 페이지 디자인을 위한 편집 도구 입니다. 코드를 사용하지 않아도 쉽고 빠르게 목적에 맞는 사이트 디자인을 해 나갈 수 있습니다.

이 가이드에서는 클래식 에디터의 구조와 각각의 기능들에 대해 설명하고 있습니다 보다 자세한 내용은 이어지는 에디터 세부 가이드를 참고 해주세요.

{% hint style="info" %}
에디터 사용은 PC버전에서만 가능합니다.
{% endhint %}

## 에디터의 구조

에디터는 크게 캔버스와 뷰포트로 나뉘게 됩니다.

캔버스 영역에는 사이트를 구성하는 과정에서 필요한 메뉴 관리 및 다양한 설정들을 할 수 있으며 뷰포트를 통해 레이아웃 구성 및 페이지 디자인을 하여 실제 사이트에 반영이 되는 화면을 만들어 나가게 됩니다. \
 

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

캔버스 영역은 상단메뉴바, 구조패널, 속성패널, 추가패널을 담고 있으며 각 패널을 통해 컨텐츠를 추가하고 설정을 할 수 있습니다.

뷰포트 영역은 상단, 본문, 하단으로 구성이 되어있어며 각각의 영역을 **섹션**이라고 부르고 있습니다.

## 캔버스 영역

### 상단 메뉴바

PC로 보기, 모바일로 보기, 되돌리기, 저장 등 페이지 디자인 과정에 사용이 되는 요소들이 담긴 영역입니다.

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

각 요소의 자세한 내용은 아래 표를 참고해주세요.

<table><thead><tr><th width="168">항목</th><th>설명</th></tr></thead><tbody><tr><td><img src="/files/kwa1kEMb1CS1KW2smeC0" alt=""></td><td><strong>패널 닫기</strong>
<br>추가패널과 속성패널을 숨김처리합니다.</td></tr><tr><td><img src="/files/XaAJnap8P4GMVuaWdivy" alt=""></td><td><strong>PC로 보기</strong><br>디자인 에디터 뷰포트를 PC로 변경합니다.</td></tr><tr><td><img src="/files/Dfdqpc94MrvpY9bZ170k" alt=""></td><td><strong>모바일로 보기</strong><br>디자인 에디터를 모바일 뷰포트로 변경합니다.</td></tr><tr><td><img src="/files/eem3aXETIEcctPfyIVri" alt=""></td><td><strong>고정 콘텐츠</strong>
<br>고정 된 콘텐츠를 확인하고 레이아웃을 수정할 수 있습니다.
<br>자세한 방법은 [블록 고정하기] 가이드를 참고 해주세요.</td></tr><tr><td><img src="/files/paPMSXgIX1tSQIRhAJrq" alt=""></td><td><strong>비율조정</strong><br>뷰포트의 비율을 확대/축소할 수 있습니다.</td></tr><tr><td><img src="/files/7xr7et4hExTqzM6K0mc8" alt=""></td><td><p><strong>페이지 이름</strong><br>현재 작업 중인 페이지의 이름을 표시합니다.</p><ul><li>더블클릭 후 페이지 이름 변경 가능</li></ul></td></tr><tr><td><img src="/files/eAqzgw3WvsykPXNxWeyK" alt=""></td><td><strong>크레딧</strong>
<br>현재 보유하고 있는 크레딧이 표시 됩니다.
<br>크레딧에 대한 자세한 내용은 [마이베네핏] 가이드를 참고해주세요.</td></tr><tr><td><img src="/files/hwb8VUTTeyOY9gG8lhoq" alt=""></td><td><strong>가이드 바로가기</strong>
<br>큐샵의 가이드를 확인할 수 있습니다.</td></tr><tr><td><img src="/files/21BgwwAfv3Ay6DvmHmJ7" alt=""></td><td><strong>실시간 채팅 바로가기</strong>
<br>에디터 내에서 실시간 채팅 상담을 열 수 있습니다.</td></tr><tr><td><img src="/files/y1U23xUYfPp6QJN4PCpB" alt=""></td><td><strong>실행취소</strong><br>이전 디자인 내 용로 돌아갑니다.</td></tr><tr><td><img src="/files/jzKz4yhBqhBiYXCoeZpB" alt=""></td><td><strong>저장 및 게시내역</strong><br>저장/게시 히스토리가 페이지 별로 각각 기록 됩니다.</td></tr><tr><td><img src="/files/b5lrjALFDXWpvT3tmrji" alt=""></td><td><strong>재실행</strong><br>실행 취소 이전로 돌아갑니다.</td></tr><tr><td><img src="/files/7BOqMUDgaWIJRuv1zn1n" alt=""></td><td><strong>사이트 전체 설정</strong>
<br>사이트에 공통으로 적용되는 색상, 폰트, 섹션의 너비와 간격 등을 설정할 수 있습니다.
<br>자세한 내용은 [속성 패널] 가이드를 참고해주세요.</td></tr><tr><td><img src="/files/M8UCIN94NGuqSKdtiGcK" alt=""></td><td><strong>저장하기</strong><br>현재 페이지 디자인을 저장합니다.<br>방문자는 편집중인 페이지를 볼 수 없으며, 게시하기를 눌러야 실제 홈페이지에 반영됩니다.</td></tr><tr><td><img src="/files/ZwFtnef0S2L1LKnOLxgt" alt=""></td><td><strong>사이트 미리보기</strong><br>현재 디자인 된 페이지를 새 탭을 통해 확인합니다.</td></tr><tr><td><img src="/files/kjcFMXH71KONchg6kyr9" alt=""></td><td><strong>게시하기</strong><br>디자인을 한 내용을 실제 방문자가 볼 수 있도록 사이트에 반영합니다.</td></tr></tbody></table>

### 구조 패널

에디터 왼쪽 위에 위치한 구조패널을 활용하여 사이트에 보여질 페이지를 생성,이동, 그룹을 지을 수 있으며 레이어를 통해 페이지에 담긴 콘텐츠의 구성을 확인하고 각 콘텐츠를 설정 할 수 있습니다.&#x20;

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

<details>

<summary>큐샵 메뉴 (≡)</summary>

추가 패널 가장 아래 위치한 큐샵 메뉴는 에디터 사용 중 사이트 바로가기, 관리자 바로가기 등 관리자 페이지로 쉽게 이동을 하거나 에디터 사용에 도움을 받을 수 있는 튜토리얼 단축키 문의하기 등의 내용을 담고 있습니다.

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

| 항목 설명                                                                                                          |
| -------------------------------------------------------------------------------------------------------------- |
| <p><strong>사이트 바로가기</strong><br>새 탭을 통해 최종 게시 시점의 사이트를 열어봅니다.</p>                                              |
| <p><strong>관리자 바로가기</strong><br>새 탭을 통해 <strong>\[상점설정 > 기본정보 > 사이트 정보]</strong> 페이지로 이동합니다.</p>               |
| <p><strong>가이드 바로가기</strong>                                                                                   |
| <br>새 탭을 통해 큐샵의 가이드 페이지로 이동합니다.</p>                                                                            |
| <p><strong>마이 페이지</strong><br>새 탭을 통해 <strong>\[큐브 홈페이지 > 마이페이지]</strong>로 이동하여, 사용자 정보를 설정할 수 있습니다.</p>       |
| <p><strong>마이 사이트</strong><br>새 탭을 통해 <strong>\[큐브 홈페이지 > 마이사이트]</strong>로 이동하여, 생성한 사이트 리스트를 확인 할 수 있습니다.</p> |
| <p><strong>구독관리</strong><br>새 탭을 통해 마이 페이지의 구독관리 탭으로 이동하여, 사이트의 구독 상태를 확인 할 수 있습니다.</p>                        |
| <p><strong>문의하기</strong><br>새 탭을 통해 큐샵 채널톡으로 이동이 되어, 실시간 채팅 문의를 할 수 있습니다.</p>                                  |
| <p><strong>튜토리얼</strong><br>에디터 기본 사용법이 담긴 튜토리얼을 확인합니다.</p>                                                    |
| <p><strong>단축키</strong><br>에디터 사용 시 도움이 되는 단축키 정보를 모달창을 통해 확인 할 수 있습니다.</p>                                    |

</details>

<details>

<summary>사이트</summary>

사이트 이름, 제목, 설명 등 **\[관리자 페이지 > 상점 설정 > 기본 정보]**&#xC758; 사이트 정보 페이지를 통해 수정하는 사이트 정보를 수정합니다. 이곳에서 수정한 정보는 사이트 정보 페이지에 동일하게 적용이됩니다.&#x20;

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

<table><thead><tr><th width="149">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>사이트 이름</strong></td><td>사이트의 이름을 등록합니다.</td></tr><tr><td><strong>사이트 제목</strong></td><td>네이버, Google등의 포털사이트 검색에 반영이 되는 이름입니다.<br>사이트 성격에 맞는 독특한 이름 사용을 권장 드리며, 일반적으로 많이 사용하는 단어를 사용하게 될 경우 검색 결과 반영에 어려움이 있을 수 있습니다.</td></tr><tr><td><strong>사이트 설명</strong></td><td>사이트를 설명할 수 있는 키워드를 사용하여 내용을 기재합니다.<br>작성 된 설명은 네이버, Google 등 검색 결과에 영향을 줄 수 있습니다.</td></tr><tr><td><strong>사이트 파비콘</strong></td><td>파비콘은 브라우저의 주소창이나 즐겨찾기 등에 표시되는 아이콘입니다.<br>권장 해상도: 512 x 512<br>최소 해상도: 192 x 192px 이상<br>파일형식: PNG</td></tr><tr><td><strong>대표 이미지</strong></td><td>카카오톡 또는 인스타그램 등에 내 사이트 URL(링크) 입력 시 함께 출력되는<br>이미지를 설정합니다.<br>권장 해상도: 1200 x 630<br>최소 해상도: 200 x 200px 이상<br>파일형식: PNG, JPG</td></tr></tbody></table>

</details>

<details>

<summary>페이지</summary>

실제 사이트에 반영이 되는 화면으로 메뉴 구성 및 각 메뉴의 설정을 할 수 있습니다. 메뉴는 용도에 따라 폴더, 페이지, 링크의 형태로 생성이 가능하며 최대 2뎁스 형태로 구성이 가능합니다.

<figure><img src="/files/4gkQGyolOuxY0fzipjBJ" alt=""><figcaption></figcaption></figure>

| 항목 설명                                                                          |
| ------------------------------------------------------------------------------ |
| <p><strong>페이지</strong><br>주제에 맞는 페이지 디자인 구성을 할 수 있습니다</p>                     |
| <p><strong>폴더</strong><br>페이지들을 하나의 그룹으로 지정 할 수 있습니다.</p>                      |
| <p><strong>링크</strong><br>클릭 시 내부 페이지가 아닌 원하는 경로로 이동 및 클릭 이벤트를 지정할 수 있습니다.</p> |

</details>

<details>

<summary>레이어</summary>

페이지의 섹션과 블록 위치를 확인하고 설정이 가능합니다.

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

| 항목 설명                                               |
| --------------------------------------------------- |
| <p><strong>검색</strong><br>콘텐츠 또는 색션의 위치를 검색합니다.</p> |
| <p><strong>섹션 추가</strong><br>새로운 섹션을 추가합니다.</p>     |

</details>

### 속성 패널

에디터 오른쪽에 위치한 속성 패널을 활용하여 섹션 및 블록의 설정을 할 수 있습니다.\
속성패널의 가장 위에는 선택한 콘텐츠가 표시가 되며, 해당 콘텐츠에 대한 설정을 하게 됩니다.

섹션의 배경색, 여백, 라운드 등의 설정이 가능하며 블록에 색상, 여백 등 기본 설정과 애니메이션과 클릭 이벤트 등의 고급 설정을 할 수 있습니다.

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

{% hint style="info" %}
각 설정 요소의 자세한 내용은 \[[속성패널](/customer_support/guide/design/editor/rnb.md)] 가이드를 참고 부탁드립니다.
{% endhint %}

{% tabs %}
{% tab title="디자인" %}

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

<table><thead><tr><th width="188">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>정보</strong></td><td><p>블록 ID를 확인할 수 있습니다.</p><ul><li>복사 아이콘을 클릭하여 블록 ID를 복사 할 수 있습니다.</li><li>복사하기 단축키(Ctrl + C)통해 블록 ID를 복사 할 수 있습니다.</li></ul></td></tr><tr><td><strong>정렬</strong></td><td>좌우 정렬, 수평 정렬을 할 수 있습니다.</td></tr><tr><td><strong>배경</strong></td><td><p>색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.</p><ul><li>% 조절을 통해 투명도를 설정합니다.</li><li>흐림 : 색상에  흐림 효과를 적용합니다<br>투명도 100%일 경우 흐림 효과는 적용이 되지않습니다.<br></li></ul><p>이미지 : 배경에 이미지를 적용합니다. </p><ul><li>흐림 : 이미지에 흐림 효과를 적용합니다</li><li>오버레이 : 이미지에 색상을 덮어씌워 표현을 합니다. <br>%가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.</li></ul></td></tr><tr><td><strong>여백</strong></td><td>패딩 값을 설정하여, 상하좌우의 여백크기를 조절할 수 있습니다.</td></tr><tr><td><strong>라운드</strong></td><td>콘텐츠 영역의 각 테두리의 라운딩 설정을 할 수 있습니다.</td></tr><tr><td><strong>테두리</strong></td><td><p>섹션 테두리에 선을 지정합니다.</p><ul><li>유형 : 선의 표시 형태를 설정합니다.</li><li>두께 : 테두리 의 두께를 설정합니다.</li><li><p>색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 <br>선택할 수 있습니다.</p><ul><li>% 조절을 통해 투명도를 설정합니다.</li></ul></li></ul></td></tr><tr><td><strong>그림자</strong></td><td><p></p><p>콘텐츠 뒤 그림자를 생성합니다</p><ul><li><p>방향 : 그림자가 생기는 방향을 설정합니다.</p><ul><li>x축, y축을 입력하여 지정 가능</li></ul></li><li>흐림 : 그림자의 번짐 정도를 설정합니다.</li><li>크기 : 그림자의 크기를 설정합니다.</li><li><p>색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 <br>선택할 수 있습니다.</p><ul><li>% 조절을 통해 투명도를 설정합니다.</li></ul></li></ul></td></tr></tbody></table>
{% endtab %}

{% tab title="고급" %}

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

<table><thead><tr><th width="188">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>정보</strong></td><td><p>블록 ID를 확인할 수 있습니다.</p><ul><li>복사 아이콘을 클릭하여 복사를 할 수 있습니다.</li><li>복사하기 단축키(Ctrl + C)통해 섹션 ID를 복사할 수 있습니다.</li></ul></td></tr><tr><td><strong>애니메이션 (고급)</strong></td><td><p></p><p>스크롤 시 적용이 되는 애니메이션 효과를 설정할 수 있습니다.</p><ul><li>동작시간 : 애니메이션의 전환속도를 설정합니다.</li><li><p>방향 : 애니메이션의 전 방향을 설정합니다.</p><ul><li>플립, 슬라이드 애니메이션만 사용 가능</li></ul></li></ul></td></tr><tr><td><strong>클릭 이벤트 (고급)</strong></td><td><p>클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 <br>할 수 있습니다.</p><p><br><strong>사용하지않음</strong></p><p>블록 클릭 시 아무런 동작을 하지않습니다.</p><hr><p><strong>사이트 링크 연결</strong></p><p>블록 클릭 시 등록한 URL로 이동을 합니다.</p><ul><li>새창으로 열기 설정 시 새로운 창에서 연결이 된 링크의 사이트가 열리게 됩니다.</li></ul><hr><p><strong>내부링크연결</strong></p><p>사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.</p><ul><li>페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.</li></ul><hr><p><strong>SNS 공유하기</strong></p><p>카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택할 수 있습니다.</p><ul><li>버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.</li></ul><hr><p><strong>현재 URL복사하기</strong></p><p>블록이 적용이 된 페이지의 URL을 복사합니다.</p><hr><p><strong>커스텀 자바스크립트</strong></p><p>CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.</p><ul><li>스크립트 입력 시 &#x3C;script> &#x3C;/script> 는 제외한 자바스크립트만 입력을 합니다.</li><li><mark style="color:red;">입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.</mark></li></ul><hr><p><strong>전화 걸기</strong></p><p>버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>문자 보내기</strong></p><p>버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>이메일 보내기</strong></p><p>버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.</p><hr><p><strong>페이지 상단 이동</strong></p><p>버튼 클릭 시 페이지 상단으로 이동합니다.</p><ul><li>헤더 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>페이지 하단 이동</strong></p><p>버튼 클릭 시 페이지 하단으로 이동합니다.</p><ul><li>푸터 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>공통 페이지 이동</strong></p><p>로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.</p></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

### 추가 패널

에디터 왼쪽에 위치한 추가 패널을 통해 섹션 단위 또는 블록 단위의 콘텐츠를 추가하여 사용할 수 있습니다.

사이트 제작을 보다 쉽고 편하게 진행할 수 있도록 다양한 디자인의 섹션 템플릿을 사용할 수 있습니다. 섹션 템플릿을 바탕으로 사이트의 업종, 성격에 맞춰 이미지, 내용 등을 수정하에 빠르게 페이지 디자인을 할 수 있습니다.

또한 빈 섹션을 생성하여 다양한 형태의 블록들을 사용해 직접 페이지를 만들어 나갈 수 있습니다.

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

{% hint style="info" %}
각 요소의 자세한 내용은 \[[추가 패널](/customer_support/guide/design/editor/contents.md)] 가이드를 참고해주세요.
{% endhint %}

## 뷰포트 영역

뷰포트영역은 실제 사이트에 반영이 되는 영역으로, 섹션 내 블록들을 추가, 이동, 배치를 하여 레이아웃을 구성하고 주제에 맞는 페이지 디자인을 하게 됩니다.

크게 헤더 / 바디 / 푸터의 영역으로 나뉘어져 있으며 각각의 영역을 **섹션**이라고 부르고 있습니다.&#x20;

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

{% hint style="info" %}
자세한 내용은 섹션 상세 가이드 를 참고 부탁드립니다.
{% endhint %}

<table><thead><tr><th width="120"></th><th>항목 설명</th></tr></thead><tbody><tr><td><strong>1</strong></td><td><strong>헤더</strong><br>사이트의 메뉴 및 로그인/가입 등의 공통 설정을 하게 됩니다.</td></tr><tr><td><strong>2</strong></td><td><strong>본문</strong><br>각 페이지의 주제에 맞는 콘텐츠를 등록합니다.</td></tr><tr><td><strong>3</strong></td><td><strong>푸터</strong><br>사업자 정보 / 고객센터 등 고객에게 전달하는 사이트 정보를 입력합니다.</td></tr></tbody></table>