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

# 디자인 설정

젤라또 채널과 젠서 디스커버리 사이트의 디자인 요소를 설정하는 페이지입니다. 보유한 권한에 따라 표시되는 항목이 다를 수 있습니다.

<figure><img src="/files/51f0Q4my0ws3ebO2et5F" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
디자인 설정을 저장하면 변경 사항이 즉시 사이트에 반영됩니다. 사이트가 공개 상태일 경우 주의해 주세요.
{% endhint %}

***

## **1. 기본 설정**

<figure><img src="/files/3GG4XLCbHdLzamS6uf1d" alt=""><figcaption></figcaption></figure>

### **1-1. 브랜드명**

브랜드를 식별하는 이름으로, 젤라또 채널의 대화 목록 태그와 상품 상세 페이지 상단 채널명에 사용됩니다.

<table><thead><tr><th width="160.1640625">반영 위치</th><th align="center" valign="middle">예시 화면</th></tr></thead><tbody><tr><td>대화 목록</td><td align="center" valign="middle"><img src="/files/OJQnkDuKX8yy7ttoBRsF" alt="" data-size="original"></td></tr><tr><td>상품 상세 페이지</td><td align="center" valign="middle"><img src="/files/RbMNNdPnCsMrVo2LLApm" alt=""></td></tr></tbody></table>

{% hint style="warning" %}
브랜드명은 최초 저장 후 최대 **3회**까지만 변경할 수 있습니다. 3회를 모두 소진하면 이후 수정이 불가능합니다. 신중하게 설정해 주세요.
{% endhint %}

* **중복 여부:** 브랜드명은 다른 채널과 중복될 수 없습니다. 입력 후 반드시 **\[중복 확인]** 을 눌러 확인해 주세요
* **입력 규칙:** `_`와 이모지를 제외하고 최대 20자까지 입력할 수 있습니다.

***

### **1-2. 로고 이미지**

사이트 전반에 표시되는 브랜드 로고입니다.

{% tabs %}
{% tab title="젤라또 채널" %}

<table><thead><tr><th width="160.1015625">반영 위치</th><th align="center">예시 화면</th></tr></thead><tbody><tr><td>메인 페이지</td><td align="center"><img src="/files/wVP8IlfJEVAJcEg5uaBt" alt=""></td></tr><tr><td>대화 창</td><td align="center"><img src="/files/qhYTRlJkxOYlfVthytYp" alt=""></td></tr><tr><td>상품 상세 페이지</td><td align="center"><img src="/files/avwjowXeiyT46WbhX8md" alt=""></td></tr></tbody></table>
{% endtab %}

{% tab title="젠서 디스커버리" %}

<table><thead><tr><th width="160.1015625">반영 위치</th><th align="center" valign="middle">예시 화면</th></tr></thead><tbody><tr><td>메인 페이지</td><td align="center" valign="middle"><img src="/files/5FcrSYEMHsKoBFFJ30w9" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

#### **업로드 규격**

<table><thead><tr><th width="159.9140625">항목</th><th>설명</th></tr></thead><tbody><tr><td>이미지 구성</td><td>디자인 최적화를 위해 배경이 없는 투명 로고 이미지를 권장합니다.</td></tr><tr><td>파일 형식</td><td>PNG, SVG 형식의 파일만 업로드할 수 있습니다.</td></tr><tr><td>파일 용량</td><td>최대 30KB까지 업로드할 수 있습니다.</td></tr><tr><td>파일 개수</td><td>최대 1개까지 파일을 업로드할 수 있습니다.</td></tr><tr><td>이미지 비율</td><td>가로:세로 비율이 1:1인 경우에만 업로드할 수 있습니다.</td></tr><tr><td>이미지 사이즈</td><td>가로, 세로 52px 이상인 경우에만 업로드할 수 있으며, 권장 사이즈는 120x120px입니다.</td></tr></tbody></table>

***

### **1-3. 메인 컬러**

사이트 전체 색상 톤을 결정하는 기준 컬러입니다. 선택한 컬러를 기준으로 밝고 어두운 10단계 색상인 컬러 스케일이 자동으로 생성되어 사이트 전반에 적용됩니다.

{% hint style="info" %}
메인 컬러는 HEX 코드를 직접 입력하거나 팔레트에서 선택할 수 있이며, **6자리 HEX 코드만 지원합니다.**
{% endhint %}

{% tabs %}
{% tab title="젤라또 채널" %}

<table><thead><tr><th width="160.1015625">반영 위치</th><th align="center">예시 화면</th></tr></thead><tbody><tr><td>메인 페이지</td><td align="center"><img src="/files/KaQFIULgw8twoySEhDyO" alt=""></td></tr><tr><td>대화 목록</td><td align="center"><img src="/files/UvzoACcDMYe7Egb9KTse" alt=""></td></tr><tr><td>대화 창</td><td align="center"><img src="/files/rmB33U9gNMu61pHD2Mwh" alt=""></td></tr><tr><td>검색 로딩 인터랙션</td><td align="center"><img src="/files/y8QRyDRHsZHB5yIWQdCp" alt=""></td></tr></tbody></table>
{% endtab %}

{% tab title="젠서 디스커버리" %}

<table><thead><tr><th width="160.1015625">반영 위치</th><th align="center">예시 화면</th></tr></thead><tbody><tr><td>메인 페이지</td><td align="center"><img src="/files/HaTozfdMYtIgRThQFg2u" alt=""></td></tr><tr><td>대화 창</td><td align="center"><img src="/files/xnfMrHtoRDORrzQURiS6" alt="" data-size="original"></td></tr><tr><td>검색 로딩 인터랙션</td><td align="center"><img src="/files/wHC1MJzo5vhU8aly7pBa" alt="" data-size="original"></td></tr><tr><td>상품 카드</td><td align="center"><img src="/files/2jSMgK8SfWpIMJRVXfrA" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

### **1-4. 파비콘 이미지**

{% hint style="info" %} <mark style="color:$primary;">**젠서 디스커버리**</mark> 전용 기능입니다.
{% endhint %}

브라우저 탭에 표시되는 아이콘입니다. 미설정 시 브라우저 기본 파비콘이 표시됩니다.

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

#### **업로드 규격**

<table><thead><tr><th width="159.9140625">항목</th><th>설명</th></tr></thead><tbody><tr><td>파일 형식</td><td>JPG, PNG 형식의 파일만 업로드할 수 있습니다.</td></tr><tr><td>파일 용량</td><td>최대 1MB까지 업로드할 수 있습니다.</td></tr><tr><td>파일 개수</td><td>최대 1개까지 파일을 업로드할 수 있습니다.</td></tr><tr><td>이미지 사이즈</td><td>가로, 세로 512px인 경우에만 업로드할 수 있습니다.</td></tr></tbody></table>

{% hint style="info" %}
512×512px 이미지 1개만 업로드하면 다양한 환경에 맞는 크기로 자동 변환됩니다.
{% endhint %}

***

### **1-5. 링크 썸네일 이미지**

{% hint style="info" %} <mark style="color:$primary;">**젠서 디스커버리**</mark> 전용 기능입니다.
{% endhint %}

사이트 URL을 메신저나 SNS에 공유할 때 링크와 함께 표시되는 미리보기 이미지입니다. 미설정 시 URL 텍스트만 표시됩니다.

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

#### **업로드 규격**

<table><thead><tr><th width="159.9140625">항목</th><th>설명</th></tr></thead><tbody><tr><td>파일 형식</td><td>JPG, PNG 형식의 파일만 업로드할 수 있습니다.</td></tr><tr><td>파일 용량</td><td>최대 1MB까지 업로드할 수 있으며, 권장 용량은 300KB입니다.</td></tr><tr><td>파일 개수</td><td>최대 1개까지 파일을 업로드할 수 있습니다.</td></tr><tr><td>이미지 사이즈</td><td>1200x630px인 경우에만 업로드할 수 있습니다.</td></tr></tbody></table>

***

## **2. 메인 검색 영역**

채널 메인·디스커버리 메인 페이지의 검색 영역에 표시되는 요소입니다.

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

### **2-1. 타이틀**

검색 영역 상단에 표시되는 메인 문구로, 최대 25자까지 설정할 수 있습니다.

{% tabs %}
{% tab title="젤라또 채널" %}

<figure><img src="/files/6of8h6GGgMc0z1sx7BPw" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="젠서 디스커버리" %}

<figure><img src="/files/el9rmnsBINb07fKIxxCd" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

### **2-2. 플레이스홀더**

검색창에 아무것도 입력하지 않은 상태에서 표시되는 안내 문구로, 최대 25자까지 설정할 수 있습니다.

{% tabs %}
{% tab title="젤라또 채널" %}

<table><thead><tr><th width="160.1015625">반영 위치</th><th align="center">예시 화면</th></tr></thead><tbody><tr><td>메인 페이지</td><td align="center"><img src="/files/A0a5nJrzcLRaaIzHwTmb" alt=""></td></tr><tr><td>대화 창</td><td align="center"><img src="/files/UXxPbm1m8N83s9lCzPjH" alt=""></td></tr></tbody></table>
{% endtab %}

{% tab title="젠서 디스커버리" %}

<table><thead><tr><th width="160.1015625">반영 위치</th><th align="center">예시 화면</th></tr></thead><tbody><tr><td>메인 페이지</td><td align="center"><img src="/files/zdQ3GxMf559Zp9NfNWHy" alt="" data-size="original"></td></tr><tr><td>대화 창</td><td align="center"><img src="/files/knHrGFiDSLl10KcfBY4t" alt="" data-size="original"></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

### **2-3. 제안 질문**

검색 영역 하단에 표시되는 추천 질문 버튼이며, 무엇을 검색해야 할지 모르는 사용자가 클릭해서 바로 검색을 시작할 수 있습니다. 제안 질문은 최대 5개까지 추가할 수 있습니다.

{% tabs %}
{% tab title="젤라또 채널" %}

<figure><img src="/files/WuZFcqoBi2MLb0X9hM8E" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="젠서 디스커버리" %}

<figure><img src="/files/ncuhCaiDzvI9anPjgvNZ" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## **3. 에이전트**

대화 창에 표시되는 챗봇의 이름, 프로필 이미지, 첫 인사말을 설정합니다.

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

### **3-1. 에이전트명**

대화 창에서 챗봇이 자신을 칭하는 이름입니다.

<figure><img src="/files/0IeuYBCNuzmy52gAJKgp" alt=""><figcaption></figcaption></figure>

* **브랜드명과 동일:** 위에서 입력한 브랜드명을 그대로 사용합니다. 이후 브랜드명을 변경하면 에이전트명도 자동으로 변경됩니다.
* **직접 설정:** 별도로 에이전트명을 설정할 수 있습니다. (최대 20자, 이모지 불가)

***

### **3-2. 프로필 이미지**

대화 창에서 챗봇 답변 옆에 표시되는 이미지입니다.

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

* **로고 이미지와 동일:** 위에서 업로드한 로고 이미지를 그대로 사용합니다. 이후 로고 이미지를 변경하면 프로필 이미지도 자동으로 변경됩니다.
* **직접 설정:** 별도로 에이전트 이미지를 설정할 수 있습니다.\
  (**형식:** JPG, PNG / **용량:** 최대 30KB / **비율:** 1:1 / **사이즈:** 52px 이상, 권장 120×120px)

***

### **3-3. 첫 인사**

대화 창에 처음 진입했을 때 챗봇이 사용자에게 보내는 인사말로, 최대 500자까지 설정할 수 있습니다.

<figure><img src="/files/8BumxcmlM8mNTYKEFlZZ" alt=""><figcaption></figcaption></figure>

***

## **4. 상품 카드**

검색 결과 상품 카드에 표시되는 요소입니다.

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

### **4-1. 부가 정보 표기**

{% hint style="info" %} <mark style="color:$primary;">**젠서 디스커버리**</mark> 전용 기능입니다.
{% endhint %}

검색 결과 상품 카드에 칩 형태로 표시되는 부가 정보를 설정합니다.

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

***

## **자주 묻는 질문** <a href="#id-5" id="id-5"></a>

<details>

<summary><strong>Q. 브랜드명을 변경하려는데 입력 필드가 잠겨 있습니다.</strong></summary>

브랜드명은 최초 저장 후 최대 3회까지만 변경할 수 있습니다. 3회를 모두 소진하면 이후 수정이 불가능합니다. 변경이 필요한 경우 담당자에게 문의해 주세요.

</details>

<details>

<summary><strong>Q. 로고 이미지가 가로형인데 어떻게 업로드해야 하나요?</strong></summary>

정사각형 캔버스(권장 120×120px) 중앙에 로고를 배치한 이미지를 만들어 업로드해 주세요. 배경이 투명한 PNG 형식을 사용하면 사이트 디자인과 자연스럽게 어울립니다.

</details>

<details>

<summary><strong>Q. 메인 컬러를 입력했는데 기본값으로 되돌아갑니다.</strong></summary>

메인 컬러 입력 필드는 6자리 HEX 코드만 지원합니다.

예를 들어, `#001689ff`처럼 투명도(알파값)가 포함된 8자리 코드를 입력하면 자동으로 기본값(`#B043FF`)으로 복원됩니다. 끝의 `ff`를 제외한 6자리(`#001689`)로 입력해 주세요.

</details>

<details>

<summary><strong>Q. 파비콘과 링크 썸네일 항목이 보이지 않습니다.</strong></summary>

파비콘과 링크 썸네일은 젠서 디스커버리 권한이 있는 경우에만 표시됩니다.

</details>

<details>

<summary><strong>Q. 저장 전에 설정 내용을 미리 볼 수 있나요?</strong></summary>

현재 미리보기 기능은 제공되지 않습니다. 저장하면 즉시 사이트에 반영되므로, 각 항목 아래 안내된 반영 위치를 참고하여 신중하게 입력해 주세요.

</details>

<details>

<summary><strong>Q. 에이전트명을 '브랜드명과 동일'로 설정한 후 브랜드명을 변경하면 에이전트명도 바뀌나요?</strong></summary>

네, 자동으로 변경됩니다. 프로필 이미지를 '로고 이미지와 동일'로 설정한 경우도 마찬가지로, 로고 이미지 변경 시 프로필 이미지도 자동으로 반영됩니다.

</details>


---

# 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.genser.ai/design/settings.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.