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

# 구조패널

## 구조패널이란?

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

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

## 1. 사이트

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

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

<table data-header-hidden><thead><tr><th width="154">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><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><p>카카오톡 또는 인스타그램 등에 내 사이트 URL(링크) 입력 시 함께 출력되는<br>이미지를 설정합니다.</p><ul><li><strong>권장 해상도</strong><br>1200 x 630</li><li><strong>최소 해상도</strong><br>200 x 200px 이상</li><li><strong>파일형식</strong><br>PNG, JPG</li></ul></td></tr><tr><td><strong>파비콘 이미지</strong></td><td><p>파비콘은 브라우저의 주소창이나 즐겨찾기 등에 표시되는 아이콘입니다.</p><ul><li><strong>권장 해상도</strong><br>512 x 512</li><li><strong>최소 해상도</strong><br>192 x 192px 이상</li><li><strong>파일형식</strong><br>PNG</li></ul></td></tr></tbody></table>

## 2. 페이지

사이트 디자인에 중요한 메뉴를 생성합니다. \
메뉴 구성에 따라 사이트의 디자인 방향 및 진행 속도가 결정이 되기에 메뉴구성을 먼저 하시는것을 권장 드립니다.&#x20;

메뉴추가 및 이동, 같은 주제를 갖는 메뉴들을 하나의 그룹으로 생성하고 설정하는 방법은 아래 내용을 참고 부탁드립니다.

### 2-1. 메뉴 추가하기

메뉴는 페이지 항목의 메뉴페이지 옆 **\[ + ]** 버튼을 눌러 추가할 수 있습니다.\
추가 된 메뉴는 페이지메뉴 콘텐츠를 통해 헤더섹션에 동일하게 보여집니다.

{% hint style="info" %}
페이지 항목의 가장 위에 위치할수록, 페이지메뉴 블록 좌측에 위치합니다.
{% endhint %}

<figure><img src="/files/6Usd4PXFvugW6uWBVoXb" alt=""><figcaption></figcaption></figure>

### 2-2. 메뉴 이동하기

페이지 항목에 추가한 메뉴를 위 또는 아래로 이동하여 메뉴 표시 순서를 변경할 수 있습니다.

1. 페이지 항목에서 이동하려는 메뉴를 클릭합니다.
2. 이동하려는 위치로 드래그 한 후 마우스를 놓습니다.
3. 변경 된 위치를 확인합니다.

{% hint style="info" %}
메뉴 위치가 변경 될 경우, 헤더 섹션의 페이지 메뉴의 위치도 변경이 됩니다.
{% endhint %}

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

### 2-3. 하위 메뉴 만들기

콘텐츠의 주제가 비슷한 여러개의 메뉴를 하나의 그룹으로 만들 수 있습니다. \
최대 2뎁스의 형태로 그룹을 만들 수 있으며, 목적에 따라 폴더, 페이지를 상위 메뉴로 지정할 수 있습니다.

{% hint style="warning" %}
링크 메뉴는 상위메뉴로 지정이 불가능합니다
{% endhint %}

1. 페이지 항목에서 하위메뉴에 위치할 메뉴를 클릭합니다.
2. 상위메뉴로 지정 될 메뉴에 겹쳐둡니다.
3. 해당 메뉴의 하위로 위치한것을 확인하고 마우스를 놓습니다.<br>

   <figure><img src="/files/zHxvV2xRyjnmbFvIPnbF" alt=""><figcaption></figcaption></figure>
4. 사이트 미리보기를 통해 상위메뉴에 마우스를 올려 드랍다운 형태로 노출되는 하위메뉴를 확인합니다.<br>

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

### 2-4. 메뉴 설정하기

메뉴 설정을 통해 메뉴의 이름, URL 변경 및 읽기 권한 등 다양한 설정을 할 수 있습니다

메뉴 우측 메뉴 설정 아이콘을 통해 설정 항목을 확인할 수 있습니다.

#### 페이지 메뉴 설정

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

<table><thead><tr><th width="160">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>홈페이지로 지정</strong></td><td>사이트 접속 시 가장 먼저 보이는 홈페이지로 지정합니다.</td></tr><tr><td><strong>페이지 설정</strong></td><td><p>사이트에 보여질 정보를 입력합니다.<br></p><p><strong>이름</strong><br>페이지의 이름을 변경합니다. 페이지 이름 변경 시 페이지메뉴의 명칭도 변경이 됩니다.</p><hr><p><strong>URL</strong><br>페이지 주소를 변경합니다. 도메인/URL 의 URL을 입력합니다.</p><hr><p><strong>접근 권한</strong><br>페이지 컨텐츠를 볼 수 있는 권한을 설정합니다.</p><ul><li><strong>전체 사용자</strong><br>모든 사용자가 페이지 접속을 할 수 있습니다.</li><li><strong>로그인 사용자</strong><br>사이트에 로그인을 한 사용자에 한하여 페이지 접속을 할 수 있습니다. <br>회원  가입 설정방법은 [<a href="/pages/pAiOobnnF1wzAw5mFPQH#undefined">회원가입</a>] 가이드를 참고 부탁드립니다.</li><li><strong>회원 그룹</strong><br>특정 그룹에 속한 회웜에 한하여 페이지 접속을 할 수 있습니다. <br>회원 그룹 설정 방법은 [<a href="/pages/w8CSLUfycxoQDapTJjB2">그룹 관리</a>] 가이드를 참고 부탁드립니다.</li><li><strong>관리자 그룹</strong><br>특정 권한을 부여받은 관리자 그룹에 한하여 페이지 접속을 할 수 있습니다. <br>관리자 그룹 설정 방법은 [<a href="/pages/6Qz6zVFmqOyzSMJ8VQFe">관리자 설정</a>]가이드를 참고 부탁드립니다.</li><li><strong>대표 관리자만</strong><br>사이트의 대표관리자(소유자)만 페이지 접속을 할 수 있습니다.</li></ul></td></tr><tr><td><strong>SEO 설정</strong></td><td><p>SEO 설정은 검색 노출에 영향을 주는 항목입니다.</p><ul><li>제목 : 브라우저 탭에 보여지는 페이지의 제목을 입력합니다.</li><li>키워드 : 페이지 주제에 맞는 키워드를 입력합니다.</li><li>설명 : 페이지 주제에 맞는 설명을 기재합니다.</li></ul></td></tr><tr><td><strong>메뉴에서 숨기기</strong></td><td><p>헤더 섹션의 페이지메뉴 콘텐츠를 통해 메뉴가 보이지않게 됩니다</p><ul><li>URL을 통해 메뉴 접속 가능</li></ul></td></tr><tr><td><strong>복제하기</strong></td><td>페이지의 내용을 모두 복사하여, 새 페이지를 생성합니다.</td></tr><tr><td><strong>삭제하기</strong></td><td><p>메뉴를 삭제합니다</p><ul><li>삭제 된 메뉴는 복구 불가능</li></ul></td></tr></tbody></table>

#### 폴더 메뉴 설정

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

<table data-header-hidden><thead><tr><th width="185">항목</th><th>설명</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>폴더명 수정</strong></td><td>폴더의 이름을 변경합니다.</td></tr><tr><td><strong>메뉴에서 숨기기</strong></td><td><p>헤더 섹션의 페이지메뉴 콘텐츠를 통해 메뉴가 보이지않게 됩니다.</p><ul><li>URL을 통해 메뉴 접속 가능</li></ul></td></tr><tr><td><strong>삭제하기</strong></td><td><p>메뉴를 삭제합니다</p><ul><li>삭제 된 메뉴는 복구 불가능</li></ul></td></tr></tbody></table>

#### 링크 메뉴 설정

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

<table data-header-hidden><thead><tr><th width="259">항목</th><th>설명</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>링크 설정</strong></td><td><p>링크 메뉴의 이름과 URL을 변경합니다.</p><ul><li><strong>이름</strong><br>링크 메뉴의 이름 변경</li><li><strong>URL</strong><br>페이지의 접속 경로를 설정</li></ul></td></tr><tr><td><strong>메뉴에서 숨기기</strong></td><td>헤더 섹션의 페이지메뉴 콘텐츠를 통해 메뉴가 보이지않게 됩니다</td></tr><tr><td><strong>삭제하기</strong></td><td><p>메뉴를 삭제합니다</p><ul><li>삭제 된 메뉴는 복구 불가능</li></ul></td></tr></tbody></table>

## 3. 레이어

페이지 내 섹션, 블록의 위치를 확인하고 설정을 할 수 있습니다.

섹션 또는 블록 이름을 더블 클릭하여 이름을 변경하여 페이지 내 적용 된 콘텐츠를 편하게 확인하고 관리할 수 있습니다.

### 3-1. 섹션

섹션 클릭 시 해당 위치로 스크롤 이동이 됩니다.

{% hint style="danger" %}
헤더/푸터 섹션은 우측 아이콘을 통해 **모든 디바이스에서 숨기기** 만 사용이 가능합니다.
{% endhint %}

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

<table><thead><tr><th width="89.5555419921875">항목</th><th>설명</th></tr></thead><tbody><tr><td><img src="/files/LsAsUNWTCoNclkG2mIOU" alt=""></td><td><strong>섹션 이름 변경하기</strong><br>섹션의 이름을 변경합니다.</td></tr><tr><td><img src="/files/s3PZ3pltkAtC3TvJRkO9" alt=""></td><td><strong>섹션추가하기</strong><br>해당 섹션 아래 빈 섹션을 추가합니다.</td></tr><tr><td><img src="/files/8J0jii7V2jgpOV0JHhVs" alt=""></td><td><p><strong>섹션 복제하기</strong><br>해당 섹션을 복제합니다.</p><ul><li>섹션 내 컨텐츠 모두 복제</li></ul></td></tr><tr><td><img src="/files/5qnVJ6USaF6jR19YYSK7" alt=""></td><td><p><strong>다른 페이지로 복제하기</strong><br>생성한 다른 페이지에 해당 섹션 전체를 복제합니다.</p><ul><li>섹션 내 컨텐츠 모두 복제</li></ul></td></tr><tr><td><img src="/files/QEi0XBlZwAEeeUw1yi1X" alt=""></td><td><p><strong>디바이스 숨기기</strong><br><strong>PC 또는 모바일 뷰포트에서 해당 섹션을 숨기거나, 숨김처리 된 섹션을 다시 보이게 합니다.</strong></p><ul><li>헤더 / 푸터 섹션의 경우 숨기기 설정 시 모든 페이지에서 숨김 처리가 됩니다.</li></ul></td></tr><tr><td><img src="/files/XNiw7mpc0Z1k7vouqFRV" alt=""></td><td><strong>ID 복사하기</strong><br>섹션의 ID를 복사합니다.</td></tr><tr><td><img src="/files/igJBLAhC0UH2rWEejDwE" alt=""></td><td><p><strong>삭제하기</strong><br>해당 섹션을 삭제합니다.</p><ul><li>상단 메뉴바를 통해 실행 취소 및 복구 가능</li></ul></td></tr></tbody></table>

### 3-2. 블록

클릭 시 해당 블록이 선택 되며, 컨텍스트 메뉴에 있는 설정을 할 수 있습니다.

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

<table><thead><tr><th width="149.5555419921875">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>오려두기</strong></td><td><p>콘텐츠를 오려두기 합니다.</p><ul><li><strong>[Ctrl + V]</strong> 를 통해 붙여넣기 가능</li></ul></td></tr><tr><td><strong>복사하기</strong></td><td><p>콘텐츠를 복사 합니다.</p><ul><li><strong>[Ctrl + V]</strong> 를 통해 붙여넣기 가능</li></ul></td></tr><tr><td><strong>디바이스 숨기기</strong></td><td>PC 또는 모바일 뷰포트에서 해당 섹션을 숨기거나, 숨김처리 된 섹션을 다시 보이게 합니다.</td></tr><tr><td><strong>순서 정렬하기</strong></td><td>섹션 내 콘텐츠의 노출 순서를 변경합니다.</td></tr><tr><td><strong>변환하기</strong></td><td>콘텐츠를 다른 콘텐츠로 변환합니다.</td></tr><tr><td><strong>복제하기</strong></td><td>콘텐츠를 같은 섹션에 복제합니다.</td></tr><tr><td><strong>ID 복사하기</strong></td><td><p>블록의 ID를 복사합니다.</p><ul><li><strong>[Ctrl + V]</strong> 를 통해 붙여넣기 가능</li></ul></td></tr><tr><td><strong>삭제하기</strong></td><td><p>해당 콘텐츠를 삭제합니다.</p><ul><li>상단 메뉴바를 통해 실행 취소 및 복구 가능</li></ul></td></tr></tbody></table>

## 4.큐샵 메뉴 <a href="#undefined-3" id="undefined-3"></a>

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

<figure><img src="/files/uuM7K4NzMqgEL7KCaImJ" 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>                                    |