> 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/i1m7Pmck5FHgnqeFlNE5" alt=""><figcaption></figcaption></figure>

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

***

## **1. 브랜드 정보**

<figure><img src="/files/gwkLEXVtRnaAVordIl5U" 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 %}

***

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

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

<figure><img src="/files/jTsEOiLoUDdLaXvqwdPj" 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/iKSPr8E8NAGMrPYVFhgd" 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/kj43GfZUAssdpgB1B0fo" alt=""><figcaption></figcaption></figure>

* **Main:** 메인 페이지
* **Chat:** 대화 창 화면
* **PDP:** 상품 상세 페이지

{% hint style="info" %}
미리보기는 디자인 설정의 **필수 값을 모두 입력해야** 사용할 수 있습니다. 필수 값이 하나라도 비어 있으면 \[미리보기] 버튼이 비활성화됩니다.
{% endhint %}

***

## **자주 묻는 질문** <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>

네, '미리보기' 기능으로 저장 전에 확인할 수 있습니다. 필수 값을 모두 채운 뒤 미리보기 버튼을 누르면 새 창(탭)에서 설정이 적용된 화면을 확인할 수 있습니다. 자세한 내용은 '4. 미리보기'를 참고해 주세요.

</details>

<details>

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

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

</details>