> 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/discovery-mini-settings.md).

# 디스커버리 미니 설정

디스커버리 미니는 브랜드 자사몰에 AI 대화형 검색을 바로 시작할 수 있도록 사이트에 띄우는 작은 위젯입니다. 위젯 디자인과 오버레이 화면을 직접 설정하고, 준비가 되면 공개로 전환해 사이트에 노출할 수 있습니다.

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

***

## **1. 공개/비공개**

페이지 상단의 토글로 젠서 디스커버리 미니의 노출 여부를 설정합니다.

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

* **비공개(기본값):** 사이트에 젠서 디스커버리 미니가 노출되지 않습니다. 디자인을 자유롭게 설정하고 미리보기로 확인할 수 있습니다.
* **공개:** 스크립트가 설치된 사이트에 젠서 디스커버리 미니가 노출됩니다.

공개로 전환하려면 **\[디자인 설정]**&#xC774; 완료되어야 합니다. 공개 후 젠서 디스커버리 미니가 정상적으로 노출되려면 젠서 디스커버리 스크립트가 설치되어 있어야 합니다. 설치 여부는 자동으로 확인되지 않으므로, [**\[스크립트 가이드\]**](https://help.genser.ai/developers/script-guide/genser-discovery-mini)를 참고해 직접 확인해 주세요.

{% hint style="warning" %}
공개 상태일 경우 디자인 변경 사항이 즉시 반영되므로 유의해 주세요.
{% endhint %}

***

## **2. 위젯 디자인 설정**

방문자 화면에 표시되는 위젯의 외형과 위치를 설정합니다. 위젯 유형을 먼저 선택한 후 세부 항목을 설정하세요.

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

디자인 설정 영역 상단의 **\[기본값으로 초기화]** 버튼을 클릭하면 위젯과 오버레이의 모든 설정이 기본값으로 되돌아갑니다. 기본값으로 초기화 후에 이전 설정 값은 복구할 수 없으니 주의해 주세요.

### **2-1. 위젯 유형**

오른쪽 드롭다운에서 **기본** 또는 **커스텀**을 선택합니다.

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

* **기본(기본값):** 젠서에서 제공하는 위젯(원형/드로어형/하단 바형)을 사용합니다. 유형을 선택하고 세부 항목을 설정하세요.
* **커스텀:** 자사몰에 직접 설정한 위젯 요소에 오버레이를 연결합니다. [**\[스크립트 가이드\]**](/developers/script-guide/genser-discovery-mini.md) 를 확인하여 위젯 요소에 오버레이를 연결해 주세요.

{% hint style="warning" %}
커스텀 위젯을 사용할 경우 위젯 미리보기는 지원되지 않습니다.
{% endhint %}

{% tabs %}
{% tab title="원형" %}
화면 모서리에 원형 버튼으로 표시됩니다. 클릭하면 오버레이가 열립니다.

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

#### **아이콘**

* **로고 이미지와 동일:** \[디자인 설정 > 로고 이미지]에 업로드된 이미지가 자동으로 적용됩니다. 이후 로고 이미지를 변경하면 위젯 아이콘도 함께 변경됩니다.
* **직접 설정:** 별도 이미지를 업로드할 수 있습니다.
  * **업로드 규격**

    | 항목      | 설명                                                     |
    | ------- | ------------------------------------------------------ |
    | 이미지 구성  | 디자인 최적화를 위해 배경이 없는 이미지를 권장합니다.                         |
    | 파일 형식   | PNG, SVG 형식의 파일만 업로드할 수 있습니다.                          |
    | 파일 용량   | 최대 30KB까지 업로드할 수 있습니다.                                 |
    | 파일 개수   | 최대 1개까지 파일을 업로드할 수 있습니다.                               |
    | 이미지 비율  | 가로:세로 비율이 1:1인 경우에만 업로드할 수 있습니다.                       |
    | 이미지 사이즈 | 가로, 세로 96px 이상인 경우에만 업로드할 수 있으며, 권장 사이즈는 200×200px입니다. |

#### **배경색**

배경 색상을 설정합니다. HEX 코드를 직접 입력하거나 팔레트에서 선택할 수 있습니다.

{% hint style="info" %}
잘못된 HEX 코드를 입력하거나 입력값을 모두 지운 뒤 클릭을 해제하면 기본값으로 자동 복원됩니다.

* **잘못된 코드 예시:** `123456` (# 없음), `12#3456` (# 위치 오류), `#12G45Z` (16진수 외 문자 포함)
  {% endhint %}

#### **사이즈**

위젯 크기를 32\~96px로 설정할 수 있습니다.

#### **노출 위치**

* **기준 위치:** 위젯을 화면 어느 위치에 고정할지 선택합니다. 기본값은 BR(우하단)이며, 선택한 위치에 따라 오프셋 측정 기준과 설정 범위가 달라집니다.

  | 기준 위치             | 오프셋 측정 기준               | 기본값                      | 설정 범위                                   |
  | ----------------- | ----------------------- | ------------------------ | --------------------------------------- |
  | 모서리 (TL/TR/BL/BR) | 선택한 모서리 가장자리에서 위젯까지의 거리 | <p>X: 24</p><p>Y: 24</p> | 0\~100px                                |
  | 상단/하단 (T/B)       | 화면 가로 중심점에서 위젯까지의 거리    | <p>X: 0</p><p>Y: 24</p>  | <p>X: -100~~100px</p><p>Y: 0~~100px</p> |
  | 좌측/우측 (L/R)       | 화면 세로 중심점에서 위젯까지의 거리    | <p>X: 24</p><p>Y: 0</p>  | <p>X: 0~~100px</p><p>Y: -100~~100px</p> |
* **오프셋:** 기준 위치에서 위젯이 얼마나 떨어져 있는지를 나타내는 거리 값입니다. X는 좌우, Y는 상하 방향 이동을 의미합니다. 예를 들어 BR(우하단)에서 X: 24, Y: 24로 설정하면 화면 우측 하단 모서리에서 좌쪽으로 24px, 위로 24px 떨어진 위치에 위젯이 표시됩니다.
* **Z-Index:** 웹 페이지에서 요소들이 겹칠 때 어느 것이 위에 표시될지를 결정하는 순서 값입니다. 숫자가 클수록 다른 요소 위에 표시됩니다. 위젯이 사이트의 다른 요소에 가려진다면 Z-Index를 더 높은 값으로 설정해 보세요.

#### **스타일**

* **둥근 모서리:** 0\~99% 범위에서 버튼 모서리의 둥글기를 설정합니다.
* **그림자:** On/Off 설정이 가능합니다. 기본값은 Off이며, On으로 설정하면 아래 항목을 조정할 수 있습니다.

  | 항목  | 설명                              | 기본값                    | 범위          |
  | --- | ------------------------------- | ---------------------- | ----------- |
  | 색상  | 그림자 색상(HEX)과 불투명도(%)를 설정합니다.    | #000000, 20%           | —           |
  | 오프셋 | 위젯으로부터 그림자가 떨어지는 X·Y 방향 거리입니다.  | <p>X: 0</p><p>Y: 0</p> | -100\~100px |
  | 흐림  | 그림자 경계가 얼마나 번지는지를 조정합니다.        | 16px                   | 0\~50px     |
  | 확산  | 그림자가 위젯보다 얼마나 더 넓게 퍼지는지를 조정합니다. | 0px                    | 0\~30px     |

{% endtab %}

{% tab title="드로어형" %}
화면 가장자리에 세로 방향의 탭 형태로 표시됩니다. 기본 위치는 화면 우측 중앙입니다.

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

#### **아이콘**

* **로고 이미지와 동일:** \[디자인 설정 > 로고 이미지]에 업로드된 이미지가 자동으로 적용됩니다. 이후 로고 이미지를 변경하면 위젯 아이콘도 함께 변경됩니다.
* **직접 설정:** 별도 이미지를 업로드할 수 있습니다.
  * **업로드 규격**

    | 항목      | 설명                                                     |
    | ------- | ------------------------------------------------------ |
    | 이미지 구성  | 디자인 최적화를 위해 배경이 없는 이미지를 권장합니다.                         |
    | 파일 형식   | PNG, SVG 형식의 파일만 업로드할 수 있습니다.                          |
    | 파일 용량   | 최대 30KB까지 업로드할 수 있습니다.                                 |
    | 파일 개수   | 최대 1개까지 파일을 업로드할 수 있습니다.                               |
    | 이미지 비율  | 가로:세로 비율이 1:1인 경우에만 업로드할 수 있습니다.                       |
    | 이미지 사이즈 | 가로, 세로 96px 이상인 경우에만 업로드할 수 있으며, 권장 사이즈는 200×200px입니다. |

#### **타이틀**

위젯에 표시할 텍스트를 On/Off합니다. On으로 설정하면 텍스트 입력 필드가 나타납니다.

{% hint style="info" %}
아이콘과 타이틀 중 **하나는 반드시 켜져 있어야** 합니다. 둘 다 끄려고 하면 안내 메시지가 표시됩니다.
{% endhint %}

#### **배경색**

배경 색상을 설정합니다. HEX 코드를 직접 입력하거나 팔레트에서 선택할 수 있습니다.

{% hint style="info" %}
잘못된 HEX 코드를 입력하거나 입력값을 모두 지운 뒤 클릭을 해제하면 기본값으로 자동 복원됩니다.

* **잘못된 코드 예시:** `123456` (# 없음), `12#3456` (# 위치 오류), `#12G45Z` (16진수 외 문자 포함)
  {% endhint %}

#### **사이즈**

* **너비:** 32\~80px로 설정할 수 있습니다. (기본값: 40px)
* **높이:** 자동/고정으로 전환할 수 있습니다.
  * **자동:** 아이콘·타이틀 설정에 따라 자동으로 조정됩니다.
  * **고정:** 32\~320px로 직접 설정할 수 있습니다. (기본값: 96px)

#### **노출 위치**

* **기준 위치:** 위젯을 화면 좌(L) 또는 우(R)에 고정할 위치를 선택합니다. 기본값은 R(우측)입니다.
* **오프셋:** Y축 오프셋으로 위아래 위치만 조정할 수 있습니다.

  | 오프셋 측정 기준            | 기본값  | 설정 범위       |
  | -------------------- | ---- | ----------- |
  | 화면 세로 중심점에서 위젯까지의 거리 | Y: 0 | -100\~100px |
* **Z-Index:** 웹 페이지에서 요소들이 겹칠 때 어느 것이 위에 표시될지를 결정하는 순서 값입니다. 숫자가 클수록 다른 요소 위에 표시됩니다. 위젯이 사이트의 다른 요소에 가려진다면 Z-Index를 더 높은 값으로 설정해 보세요.

#### **스타일**

* **둥근 모서리:** 0\~32px 범위에서 버튼 모서리의 둥글기를 설정합니다.
* **그림자:** On/Off 설정이 가능합니다. 기본값은 Off이며, On으로 설정하면 아래 항목을 조정할 수 있습니다.

  | 항목  | 설명                              | 기본값                    | 범위          |
  | --- | ------------------------------- | ---------------------- | ----------- |
  | 색상  | 그림자 색상(HEX)과 불투명도(%)를 설정합니다.    | #000000, 20%           | —           |
  | 오프셋 | 위젯으로부터 그림자가 떨어지는 X·Y 방향 거리입니다.  | <p>X: 0</p><p>Y: 0</p> | -100\~100px |
  | 흐림  | 그림자 경계가 얼마나 번지는지를 조정합니다.        | 16px                   | 0\~50px     |
  | 확산  | 그림자가 위젯보다 얼마나 더 넓게 퍼지는지를 조정합니다. | 0px                    | 0\~30px     |

{% endtab %}

{% tab title="하단 바형" %}
화면 하단에 가로 방향의 버튼 형태로 표시됩니다. 아이콘, 텍스트, 화살표를 조합해 CTA(Call to Action)처럼 활용할 수 있습니다.

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

#### **아이콘**

* **로고 이미지와 동일:** \[디자인 설정 > 로고 이미지]에 업로드된 이미지가 자동으로 적용됩니다. 이후 로고 이미지를 변경하면 위젯 아이콘도 함께 변경됩니다.
* **직접 설정:** 별도 이미지를 업로드할 수 있습니다.
  * **업로드 규격**

    | 항목      | 설명                                                     |
    | ------- | ------------------------------------------------------ |
    | 이미지 구성  | 디자인 최적화를 위해 배경이 없는 이미지를 권장합니다.                         |
    | 파일 형식   | PNG, SVG 형식의 파일만 업로드할 수 있습니다.                          |
    | 파일 용량   | 최대 30KB까지 업로드할 수 있습니다.                                 |
    | 파일 개수   | 최대 1개까지 파일을 업로드할 수 있습니다.                               |
    | 이미지 비율  | 가로:세로 비율이 1:1인 경우에만 업로드할 수 있습니다.                       |
    | 이미지 사이즈 | 가로, 세로 96px 이상인 경우에만 업로드할 수 있으며, 권장 사이즈는 200×200px입니다. |

#### **타이틀**

버튼에 표시할 텍스트를 On/Off합니다. On으로 설정하면 아래 항목이 나타납니다.

* **텍스트:** 최대 8자까지 입력할 수 있습니다.
* **텍스트 색상:** HEX 코드를 직접 입력하거나 팔레트에서 선택합니다.

#### **화살표**

버튼 우측에 표시할 화살표를 On/Off합니다. On으로 설정하면 아래 항목이 나타납니다.

* **아이콘:** 기본 제공 아이콘을 사용하거나 직접 이미지를 업로드할 수 있습니다.
* **색상:** HEX 코드를 직접 입력하거나 팔레트에서 선택합니다.
* **직접 설정 업로드 규격**

  | 항목      | 설명                                                     |
  | ------- | ------------------------------------------------------ |
  | 이미지 구성  | 디자인 최적화를 위해 배경이 없는 이미지를 권장합니다.                         |
  | 파일 형식   | PNG, SVG 형식의 파일만 업로드할 수 있습니다.                          |
  | 파일 용량   | 최대 30KB까지 업로드할 수 있습니다.                                 |
  | 파일 개수   | 최대 1개까지 파일을 업로드할 수 있습니다.                               |
  | 이미지 비율  | 가로:세로 비율이 1:1인 경우에만 업로드할 수 있습니다.                       |
  | 이미지 사이즈 | 가로, 세로 96px 이상인 경우에만 업로드할 수 있으며, 권장 사이즈는 200×200px입니다. |

{% hint style="info" %}
아이콘, 타이틀, 화살표 중 **하나는 반드시 켜져 있어야** 합니다. 셋 다 끄려고 하면 안내 메시지가 표시됩니다.
{% endhint %}

#### **배경색**

배경 색상을 설정합니다. HEX 코드를 직접 입력하거나 팔레트에서 선택할 수 있습니다.

{% hint style="info" %}
잘못된 HEX 코드를 입력하거나 입력값을 모두 지운 뒤 클릭을 해제하면 기본값으로 자동 복원됩니다.

* **잘못된 코드 예시:** `123456` (# 없음), `12#3456` (# 위치 오류), `#12G45Z` (16진수 외 문자 포함)
  {% endhint %}

#### **사이즈**

* **너비:** 자동/고정으로 전환할 수 있습니다.
  * **자동:** 아이콘·타이틀·화살표 설정에 따라 자동으로 조정됩니다.
  * **고정:** 48\~640px로 직접 설정할 수 있습니다. (기본값: 320px)
* **높이:** 40\~64px로 설정할 수 있습니다. (기본값: 48px)

#### **노출 위치**

* **기준 위치:** 화면 하단 중앙에 고정됩니다.
* **오프셋:** X/Y 오프셋으로 위치를 미세 조정할 수 있습니다.

  | 오프셋 측정 기준                 | 기본값 | 설정 범위       |
  | ------------------------- | --- | ----------- |
  | 화면 가로 중심점에서 위젯까지의 거리 (X)  | 0   | -100\~100px |
  | 화면 하단 가장자리에서 위젯까지의 거리 (Y) | 0   | -100\~100px |
* **Z-Index:** 웹 페이지에서 요소들이 겹칠 때 어느 것이 위에 표시될지를 결정하는 순서 값입니다. 숫자가 클수록 다른 요소 위에 표시됩니다. 위젯이 사이트의 다른 요소에 가려진다면 Z-Index를 더 높은 값으로 설정해 보세요.

#### **스타일**

* **둥근 모서리:** 0\~32px 범위에서 버튼 모서리의 둥글기를 설정합니다. 좌우를 독립적으로 설정할 수도 있습니다.
* **그림자:** On/Off 설정이 가능합니다. 기본값은 Off이며, On으로 설정하면 아래 항목을 조정할 수 있습니다.

  | 항목  | 설명                              | 기본값                    | 범위          |
  | --- | ------------------------------- | ---------------------- | ----------- |
  | 색상  | 그림자 색상(HEX)과 불투명도(%)를 설정합니다.    | #000000, 20%           | —           |
  | 오프셋 | 위젯으로부터 그림자가 떨어지는 X·Y 방향 거리입니다.  | <p>X: 0</p><p>Y: 0</p> | -100\~100px |
  | 흐림  | 그림자 경계가 얼마나 번지는지를 조정합니다.        | 16px                   | 0\~50px     |
  | 확산  | 그림자가 위젯보다 얼마나 더 넓게 퍼지는지를 조정합니다. | 0px                    | 0\~30px     |

{% endtab %}
{% endtabs %}

***

## **3. 오버레이 디자인 설정**

위젯을 클릭했을 때 열리는 오버레이 화면의 디자인을 설정합니다.

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

### **3-1. 오버레이 유형**

오버레이가 열리는 방식을 선택합니다. 팝 오버·드로어·풀 뷰를 각각 On/Off로 활성화할 수 있으며, 최소 하나는 반드시 활성화되어 있어야 합니다.

{% tabs %}
{% tab title="팝 오버" %}
화면 위에 창 형태로 오버레이가 나타납니다. 9방향 기준점을 선택해 화면 어디서든 띄울 수 있습니다.

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

#### **사이즈**

숫자를 직접 입력하고 단위를 선택할 수 있습니다.

{% hint style="info" %}
**px / dvw / dvh 단위 안내**

* **px**: 고정 픽셀 크기입니다. 화면 크기에 관계없이 항상 동일한 크기로 표시됩니다.
* **dvw**: 현재 화면 너비의 %입니다. 예를 들어 90dvw는 화면 너비의 90%를 의미합니다.
* **dvh**: 현재 화면 높이의 %입니다. 예를 들어 90dvh는 화면 높이의 90%를 의미합니다.

<mark style="color:$primary;">dvw/dvh를 사용하면 모바일·태블릿·데스크탑 등 다양한 화면 크기에 자동으로 맞춰집니다.</mark>
{% endhint %}

* **PC**

  | 항목 | 기본값 (단위별)                    | 선택 가능 단위            | 설정 범위                              |
  | -- | ---------------------------- | ------------------- | ---------------------------------- |
  | 너비 | <p>px: 760</p><p>dvw: 90</p> | <p>px</p><p>dvw</p> | <p>px: 제한 없음</p><p>dvw: 0\~100</p> |
  | 높이 | <p>px: 600</p><p>dvh: 90</p> | <p>px</p><p>dvh</p> | <p>px: 제한 없음</p><p>dvh: 0\~100</p> |
* **모바일**

  | 항목 | 기본값 (단위별)                    | 선택 가능 단위            | 설정 범위                              |
  | -- | ---------------------------- | ------------------- | ---------------------------------- |
  | 너비 | <p>dvw: 90</p><p>px: 360</p> | <p>dvw</p><p>px</p> | <p>dvw: 0\~100</p><p>px: 제한 없음</p> |
  | 높이 | <p>dvh: 90</p><p>px: 540</p> | <p>dvh</p><p>px</p> | <p>dvh: 0\~100</p><p>px: 제한 없음</p> |

#### **노출 위치**

* **기준 위치:** 기본값은 BR(우하단)이며, 선택한 위치에 따라 오프셋 측정 기준과 설정 범위가 달라집니다.

  | 기준 위치             | 오프셋 측정 기준                 | 기본값                      | 설정 범위                                   |
  | ----------------- | ------------------------- | ------------------------ | --------------------------------------- |
  | 모서리 (TL/TR/BL/BR) | 선택한 모서리 가장자리에서 오버레이까지의 거리 | <p>X: 24</p><p>Y: 24</p> | <p>X: 0~~100px<br>Y: 0~~100px</p>       |
  | 중앙 (C)            | 화면 중심점에서 오버레이까지의 거리       | <p>X: 0</p><p>Y: 0</p>   | <p>X: -100~~100px<br>Y: -100~~100px</p> |
  | 상단/하단 (T/B)       | 화면 가로 중심점에서 오버레이까지의 거리    | <p>X: 0</p><p>Y: 24</p>  | <p>X: -100~~100px</p><p>Y: 0~~100px</p> |
  | 좌측/우측 (L/R)       | 화면 세로 중심점에서 오버레이까지의 거리    | <p>X: 24</p><p>Y: 0</p>  | <p>X: 0~~100px</p><p>Y: -100~~100px</p> |
* **오프셋:** 기준 위치에서 오버레이가 얼마나 떨어져 있는지를 나타내는 거리 값입니다. 슬라이더 또는 숫자 직접 입력으로 설정할 수 있습니다.

#### **스타일**

* **둥근 모서리:** 오버레이 창의 모서리 둥글기를 설정합니다. (기본값: 16px, 범위: 0\~32px)
* **그림자:** On/Off 설정이 가능합니다. 기본값은 ON이며, On으로 설정하면 아래 항목을 조정할 수 있습니다.

  | 항목  | 설명                                | 기본값                    | 범위          |
  | --- | --------------------------------- | ---------------------- | ----------- |
  | 색상  | 그림자 색상(HEX)과 불투명도(%)를 설정합니다.      | #000000, 20%           | —           |
  | 오프셋 | 오버레이로부터 그림자가 떨어지는 X·Y 방향 거리입니다.   | <p>X: 0</p><p>Y: 0</p> | -100\~100px |
  | 흐림  | 그림자 경계가 얼마나 번지는지를 조정합니다.          | 16px                   | 0\~50px     |
  | 확산  | 그림자가 오버레이보다 얼마나 더 넓게 퍼지는지를 조정합니다. | 0px                    | 0\~30px     |

{% endtab %}

{% tab title="드로어" %}
화면 좌측 또는 우측에서 슬라이드하여 오버레이가 나타납니다.

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

#### **사이즈**

너비는 직접 입력하고 단위를 선택할 수 있습니다. 높이는 항상 화면 전체 높이(100dvh)로 자동 고정되어 변경할 수 없습니다.

{% hint style="info" %}
**px / dvw / dvh 단위 안내**

* **px**: 고정 픽셀 크기입니다. 화면 크기에 관계없이 항상 동일한 크기로 표시됩니다.

* **dvw**: 현재 화면 너비의 %입니다. 예를 들어 80dvw는 화면 너비의 80%를 의미합니다.

* **dvh**: 현재 화면 높이의 %입니다. 100dvh는 화면 전체 높이를 의미합니다.
  {% endhint %}

* **PC**

  | 항목 | 기본값 (단위별)                    | 선택 가능 단위            | 설정 범위                              |
  | -- | ---------------------------- | ------------------- | ---------------------------------- |
  | 너비 | <p>px: 420</p><p>dvw: 80</p> | <p>px</p><p>dvw</p> | <p>px: 제한 없음</p><p>dvw: 0\~100</p> |
  | 높이 | 100dvh                       | —                   | 자동 고정 (변경 불가)                      |

* **모바일**

  | 항목 | 기본값 (단위별)                    | 선택 가능 단위            | 설정 범위                              |
  | -- | ---------------------------- | ------------------- | ---------------------------------- |
  | 너비 | <p>dvw: 80</p><p>px: 360</p> | <p>dvw</p><p>px</p> | <p>dvw: 0\~100</p><p>px: 제한 없음</p> |
  | 높이 | 100dvh                       | —                   | 자동 고정 (변경 불가)                      |

#### **노출 위치**

* **기준 위치:** 오버레이를 화면 좌(L) 또는 우(R)에 고정할 위치를 선택합니다. 기본값은 R(우측)입니다.

  | 기준 위치 | 설명               |
  | ----- | ---------------- |
  | L (좌) | 화면 좌측에 슬라이드하여 열림 |
  | R (우) | 화면 우측에 슬라이드하여 열림 |
* **오프셋:** 드로어는 오프셋 설정 없이 선택한 기준 위치에 고정됩니다.

#### **스타일**

* **둥근 모서리:** 드로어가 슬라이드하는 반대쪽 모서리에만 둥글기가 적용됩니다. (범위: 0\~32px, 기본값: 0px)
  * **기준 위치 R:** 좌상단·좌하단 모서리에 적용
  * **기준 위치 L:** 우상단·우하단 모서리에 적용
* **그림자:** On/Off 설정이 가능합니다. 기본값은 ON입니다. 세부 항목 설정은 \[팝 오버 > 스타일 > 그림자]와 동일합니다.
  {% endtab %}

{% tab title="풀 뷰" %}
화면 전체를 덮는 형태로 오버레이가 나타납니다.

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

#### **사이즈**

단위는 dvw/dvh로 고정되며 변경할 수 없습니다.

{% hint style="info" %}
**dvw / dvh 단위 안내**

* **dvw**: 현재 화면 너비의 %입니다. 예를 들어 90dvw는 화면 너비의 90%를 의미합니다.
* **dvh**: 현재 화면 높이의 %입니다. 예를 들어 90dvh는 화면 높이의 90%를 의미합니다.

<mark style="color:$primary;">풀 뷰는 다양한 화면 크기에 자동으로 맞춰지도록 dvw/dvh 단위만 사용합니다.</mark>
{% endhint %}

* **PC**

  | 항목 | 기본값 | 단위  | 설정 범위  |
  | -- | --- | --- | ------ |
  | 너비 | 90  | dvw | 0\~100 |
  | 높이 | 90  | dvh | 0\~100 |
* **모바일**

  | 항목 | 기본값 | 단위  | 설정 범위  |
  | -- | --- | --- | ------ |
  | 너비 | 100 | dvw | 0\~100 |
  | 높이 | 100 | dvh | 0\~100 |

#### **노출 위치**

* **기준 위치:** 화면 중앙으로 고정됩니다.
* **오프셋:** 중앙에서의 이동 거리를 미세 조정할 수 있습니다. 슬라이더 또는 숫자 직접 입력으로 설정할 수 있습니다.

  | 오프셋 | 기본값 | 설정 범위       |
  | --- | --- | ----------- |
  | X   | 0px | -100\~100px |
  | Y   | 0px | -100\~100px |

#### **스타일**

* **둥근 모서리:** 오버레이 창 네 모서리의 둥글기를 설정합니다. (기본값: 16px, 범위: 0\~32px)
* **그림자:** On/Off 설정이 가능합니다. 기본값은 ON입니다. 세부 항목 설정은 \[팝 오버 > 스타일 > 그림자]와 동일합니다.
  {% endtab %}
  {% endtabs %}

### **3-2. 상단바**

팝 오버·드로어·풀 뷰 세 가지 유형에 공통으로 적용되는 상단바를 설정합니다.

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

#### **배경색**

상단바의 배경 색상과 불투명도를 설정합니다. HEX 코드를 직접 입력하거나 팔레트에서 선택할 수 있으며, 투명도(%)도 함께 조정할 수 있습니다. (기본값: #FFFFFF / 100%)

#### **닫기 버튼**

오버레이를 닫는 버튼의 아이콘과 스타일을 설정합니다.

* **아이콘:** 기본 제공 아이콘 또는 직접 업로드한 이미지를 선택합니다. 직접 설정 선택 시 아래 규격에 맞는 이미지를 업로드할 수 있습니다.

  | 항목      | 설명                                                     |
  | ------- | ------------------------------------------------------ |
  | 이미지 구성  | 디자인 최적화를 위해 배경이 없는 이미지를 권장합니다.                         |
  | 파일 형식   | PNG, SVG 형식의 파일만 업로드할 수 있습니다.                          |
  | 파일 용량   | 최대 30KB까지 업로드할 수 있습니다.                                 |
  | 파일 개수   | 최대 1개까지 파일을 업로드할 수 있습니다.                               |
  | 이미지 비율  | 가로:세로 비율이 1:1인 경우에만 업로드할 수 있습니다.                       |
  | 이미지 사이즈 | 가로, 세로 96px 이상인 경우에만 업로드할 수 있으며, 권장 사이즈는 200×200px입니다. |
* **아이콘색:** 닫기 버튼 아이콘의 색상을 설정합니다. (기본값: #616161)
* **테두리색:** 닫기 버튼 테두리 표시 여부를 On/Off합니다. (기본값: Off)
  * On으로 설정하면 색상 설정이 나타납니다. (기본값: #E0E0E0)

#### **유형 전환 버튼**

오버레이 안에서 팝 오버·드로어·풀 뷰 간에 전환할 수 있는 버튼입니다. 오버레이 유형이 2개 이상 활성화된 경우에만 설정할 수 있습니다.

팝 오버·드로어·풀 뷰 순서로 고정되며, 활성화된 유형만 선택할 수 있습니다. 기본값은 활성화된 유형 중 첫 번째 항목이 자동으로 선택됩니다.

* **아이콘색:** 유형 전환 버튼 아이콘의 색상을 설정합니다. (기본값: #616161)
* **테두리색:** 유형 전환 버튼 테두리의 색상을 설정합니다. (기본값: #E0E0E0)
* **강조색:** 현재 선택된 오버레이 유형 탭의 배경 강조 색상을 설정합니다. (기본값: #EBDFFF)
* **기본 오버레이:** 위젯 클릭 시 처음으로 열릴 오버레이 유형을 선택합니다.

***

## **4. 미리보기**

설정 화면 우측에서 현재 설정된 위젯과 오버레이 디자인을 실시간으로 확인할 수 있습니다.

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

* **PC / 모바일 전환:** 상단 버튼으로 PC와 모바일 화면을 전환해 각 환경에서의 모습을 확인할 수 있습니다.
* **오버레이 탭:** 오버레이 탭을 선택하면 팝 오버·드로어·풀 뷰 탭이 미리보기 상단에 표시됩니다. 탭을 선택하면 해당 유형의 오버레이 미리보기를 확인할 수 있습니다.

{% hint style="info" %}
미리보기에서는 오버레이 내 유형 전환 버튼, 닫기 버튼 등의 인터렉션은 동작하지 않습니다.

<mark style="color:$primary;">모바일 환경에서 설정 시 미리보기 영역은 숨겨지므로 PC 환경에서 설정하시는 것을 권장합니다.</mark>
{% endhint %}

***

## **자주 묻는 질문**

<details>

<summary><strong>Q. 공개로 전환했는데 젠서 디스커버리 미니가 노출되지 않습니다.</strong></summary>

사이트에 젠서 디스커버리 스크립트가 설치되어 있는지 확인해 주세요. 스크립트가 설치되지 않으면 공개 상태여도 위젯이 노출되지 않습니다. 설치 방법은 **스크립트 가이드**를 참고해 주세요.

</details>

<details>

<summary><strong>Q. 드로어형/하단 바형에서 모든 요소를 끄려고 하는데 안 됩니다.</strong></summary>

드로어형은 아이콘과 타이틀 중 하나, 하단 바형은 아이콘·타이틀·화살표 중 하나가 반드시 켜져 있어야 합니다. 위젯이 화면에 표시되려면 최소 하나의 요소가 필요하기 때문입니다.

</details>

<details>

<summary><strong>Q. 드로어형 높이, 하단 바형 너비가 자동으로 바뀌는 이유가 무엇인가요?</strong></summary>

켜져 있는 요소(아이콘, 타이틀, 화살표)에 따라 너비와 높이가 자동으로 계산됩니다.\
예를 들어 타이틀을 끄면 너비가 줄어들고, 켜면 텍스트 길이에 맞게 자동으로 늘어납니다.

</details>

<details>

<summary><strong>Q. 색상을 입력했는데 기본값으로 되돌아갑니다.</strong></summary>

색상 입력 필드는 `#` 기호를 포함한 6자리 HEX 코드만 지원합니다.\
예를 들어 `#1F1D1B` 형식으로 입력해야 합니다. `#` 없이 입력하거나 16진수 외 문자가 포함된 경우 기본값으로 자동 복원됩니다.

</details>

<details>

<summary><strong>Q. 기본값으로 초기화 후 이전 설정으로 되돌리고 싶습니다.</strong></summary>

기본값으로 초기화는 되돌릴 수 없습니다. 기본값으로 초기화 전에 현재 설정값을 별도로 기록해 두는 것을 권장합니다.

</details>