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

# 디자인

디자인 설정은 에디터에 적용이 되는 공통 사항으로 큐샵 에디터의 LNB영역과 같은 역할을 하게 됩니다. \
공통 색상, 그리드 간격 폰트 등을 선택하여 디자인을 할 수 있으며 폰트의 크기, 굵기 등은 각각의 콘텐츠 요소를 통해 설정을 할 수 있습니다.

## 1. 테마

콘텐츠 및 뷰포트의 기본 색상을 설정합니다. 공통적으로 적용이 될 배경, 버튼, 텍스트의 색상을 지정할 수 있으며 테마셔플을 통해 임의 색상을 지정할 수 있습니다.\
테마셔플의 이전/다음 테마를 통해 임의로 선택 된 테마들을 다시 확인 할 수 있습니다.

{% hint style="info" %}
요소에 따라 일부 개별적으로 설정이 가능합니다.
{% endhint %}

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

<table data-header-hidden><thead><tr><th width="141">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>Background</strong></td><td><ul><li>COLOR - FLAT<br>배경에 하나의 색상이 적용 됩니다.</li><li>COLOR - GRADIENT<br>배경에 그라데이션 효과로 색상이 적용 됩니다.</li><li>IMAGE<br>PC에 저장이 된 이미지를 적용합니다.</li></ul></td></tr><tr><td><strong>button</strong></td><td>링크 / 도형 / 라인의 기본 색상을 설정합니다.</td></tr><tr><td><strong>Text main</strong></td><td>텍스트 / 스크롤링의 기본 색상을 설정합니다.</td></tr><tr><td><strong>Text sub</strong></td><td>링크 콘텐츠의 텍스트 / 아이콘의 기본 색상을 설정합니다.</td></tr><tr><td><strong>테마셔플</strong></td><td>색상을 임의로 지정합니다<br>셔플 후 이전 테마 / 다음 테마를 통해 적용이 된 색상을 확인할 수 있습니다.</td></tr></tbody></table>

## 2. Gap

뷰포트에 적용이 되는 텐츠 사이의 간격을 설정합니다.\
최소 0px \~ 최대 10px 까지 설정이 가능합니다.

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

## 3. Font

사이트에 적용이 되는 폰트를 선택합니다.

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

## 4. Fill / Outline

링크 콘텐의 프레임 모양 및 배경색상 여부를 선택합니다.\
투명 디자인을 선택하게 되면, 색상은 배경이 아닌 테두리에 적용이 됩니다.

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

## 5. Shodow

링크 콘텐츠의 그림자 여부 및 디자인을 선택합니다.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.qshop.ai/customer_support/qshoplink/editor/design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.