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

# 큐샵링크 에디터 기본정보

에디터의 구조와 사용방법에 대해 알아봅니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FpSousiKITSEYyfFJW9dm%2F%EC%97%90%EB%94%94%ED%84%B0%EC%A0%84%EC%B2%B4.png?alt=media&amp;token=18405d11-073f-4cf3-ad51-6a5e762d6e66" alt=""><figcaption></figcaption></figure>

큐샵링크의 에디터는 왼쪽의 뷰포트와 오른쪽에 속성영역으로 나뉘게 됩니다.\
속성영역을 통해 콘텐츠를 추가 및 설정할 수 있으며, 추가 된 콘텐츠는 뷰포트를 통해 배치하여 디자인을 하게 됩니다.

## 1. 뷰포트

뷰포트는 속성패널을 통해 선택한 콘텐츠가 보여지는 영역으로 콘텐츠를 이동하고 배치하여 디자인을 \
완성하게 됩니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fj6BqnLG75Yt2LW7EtnwG%2F%EB%B7%B0%ED%8F%AC%ED%8A%B82.png?alt=media&amp;token=159c50ff-7399-4341-b16e-956a1e6b8b8e" alt=""><figcaption></figcaption></figure>

### 1-1. GNB

GNB 영역을 통해 에디터를 통해 작업한 내용을 저장 및 실제 사이트를 게시할 수 있습니다.

{% hint style="danger" %}
큐샵 링크의 에디터는 자동 저장 및 되돌리기 기능이 제공되지 않습니다.&#x20;

\- **뒤로가기(←) 버튼** 클릭 시  작업한 내용은 자동저장 되지 않으며 마지막 저장 상태 기준으로 남게 됩니다.&#x20;

\- 디자인 과정 중 **\[저장하기]**&#xBC84;튼을 클릭하여 작업 내용을 저장해 주세요.&#x20;
{% endhint %}

<table data-header-hidden><thead><tr><th width="128">버리는 항목</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>현재 디자인 내용을 저장합니다.</td></tr><tr><td><strong>게시하기</strong></td><td>디자인을 한 내용을 실제 방문자가 볼 수 있도록 사이트에 반영합니다.</td></tr></tbody></table>

### 1-2. 에디터

에디터는 실제 사이트 디자인을 하는 영역입니다. \
이곳을 통해 콘텐츠를 배치하여, 여러분들만의 개성있는 프로필 링크를 개설 할 수 있습니다.

에디터의 콘텐츠를 클릭하게 되면, 설정을 위해 해당 콘텐츠의 섹션 패널위치로 이동이 됩니다.\
이외에도 에디터의 상단과 하단에는 사용에 편의를 위한 기능이 존재합니다.

<table data-header-hidden><thead><tr><th width="165">버리는 항목</th><th></th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>URL</strong></td><td><p>사이트의 URL을 확인합니다.</p><ul><li>클릭 시 사이트로 이동</li></ul></td></tr><tr><td><strong>섹션 추가/제거</strong></td><td><strong>• 섹션 제거 (-1 -5)</strong><br>섹션 영역을 한칸, 다섯칸 줄입니다.<br>• <strong>fit</strong><br>섹션의 크기를 콘텐츠에 맞게 조절합니다.<br>• <strong>섹션 추가 (+1 +5)</strong><br>섹션 영역을 한칸, 다섯칸 추가합니다.</td></tr></tbody></table>

## 2. 속성패널

속성 패널은 콘텐츠 영역과 디자인 영역으로 나뉘어져 있습니다.

### 2-1. 콘텐츠

다양한 콘텐츠를 추가하고 링크를 연결 할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FkbRXy6g7JT8EdCJnBDP2%2F%EC%86%8D%EC%84%B1_%EC%BD%98%ED%85%90%EC%B8%A02.png?alt=media&amp;token=53dc7383-d115-4fa2-8eb5-1051cf78cd74" alt=""><figcaption></figcaption></figure>

추가한 콘텐츠를 클릭하면 뷰포트 내에 해당 콘텐츠가 선으로 연결되어 보다 쉽게 위치를 확인할 수 있습니다. 각각의 콘텐츠에 대한 자세한 내용은 [콘텐츠 가이드](/customer_support/qshoplink/editor/contents.md)를 참고 부탁드립니다.

### 2-2. 디자인

디자인 영역은 에디터에 적용이 되는 공통 사항으로 큐샵 에디터의 LNB영역과 같은 역할을 하게 됩니다.&#x20;

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FvTbMCqZ8y7pPdvJTI72b%2F%EC%86%8D%EC%84%B1_%EB%94%94%EC%9E%90%EC%9D%B8.png?alt=media&amp;token=11db4630-2199-4c98-9bc0-72611d3b26ac" alt=""><figcaption></figcaption></figure>

그리드 간격 폰트 등을 선택하여 디자인을 할 수 있으며 폰트의 크기, 굵기 등은 각각의 콘텐츠 요소를 통해 설정 할 수 있습니다.