> For the complete documentation index, see [llms.txt](https://groobee.gitbook.io/gelatto/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://groobee.gitbook.io/gelatto/ai-chatbot/create-gelatto/chat-interface.md).

# 사용자 대화 화면

{% hint style="info" %}
젤라또 만들기에서 내용을 업데이트하여 저장 시 챗봇에 바로 반영됩니다.     
{% endhint %}

## **사용자 대화 화면이란?**

젤라또 만들기에서 젤라또를 만들고, 설치하면 고객이 젤라또를 사용할 수 있습니다. 최종 고객에게 보여지는 화면을 젤라또 사용자 대화 화면이라고 합니다. 젤라또 AI 챗봇에서는 모달형, 풀페이지형 두 가지의 사용자 대화 화면 유형을 제공합니다.

{% hint style="success" %}

* 모달형: 현재 화면 위에 작은 창으로 표시되어 페이지 이동 없이 바로 상호작용할 수 있는 대화 화면입니다.
* 풀페이지형: 대화를 위한 전용 페이지에서 몰입하여 심층적인 과업을 수행할 수 있는 대화 화면입니다.
  {% endhint %}

### **모달형**

모달형은 대화창과 대화 목록 두 가지의 화면으로 나눌 수 있습니다.

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2FI4JgMDqUx7d7w5a8kyIs%2F%E1%84%83%E1%85%A2%E1%84%92%E1%85%AA%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB1.png?alt=media&amp;token=7d02f5ec-f772-476d-8dea-6da59a7b4388" alt=""><figcaption></figcaption></figure>

#### **1. 대화창**

대화창은 실제 사용자가 AI 챗봇과 질의응답을 하는 화면입니다.&#x20;

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2FvndoPX6Wpa7f8zMNgBZS%2F%E1%84%83%E1%85%A2%E1%84%92%E1%85%AA%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB2.png?alt=media&amp;token=2748793f-507b-42d4-aee3-b3ed7d29b575" alt=""><figcaption></figcaption></figure>

a. 프로필 영역: 젤라또 만들기 메뉴에서 젤라또 만들기 > 기본 설정에서 설정 탭에서 설정한 프로필 설정, 기본값 설정 내용이 반영됩니다. 색상 테마는 젤라또 만들기 > 스타일 탭에서 설정한 테마 색상이 전체적으로 반영됩니다.

b. 확장 버튼: 클릭 시 대화 화면이 확장됩니다.

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2FxeBGHuIn6gKwKJA5d6Pt%2F%E1%84%92%E1%85%AA%E1%86%A8%E1%84%8C%E1%85%A1%E1%86%BC%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB.png?alt=media&amp;token=47c60af2-c72b-422e-8c12-9da11407b0f9" alt=""><figcaption><p>확장된 화면</p></figcaption></figure>

c. 새로운 대화 버튼: 클릭 시 새로운 대화창 화면으로 새로운 대화를 진행할 수 있습니다.

d. 닫기 버튼: 클릭 시 챗봇 대화 화면이 닫힙니다.

e. 대화 목록으로 이동 버튼: 클릭 시 대화 목록 화면으로 이동합니다.

f. 첫인사: 젤라또 만들기 메뉴에서 젤라또 만들기 > 기본 설정 > 기본값 설정-첫인사에서 설정한 내용으로 노출됩니다.

g. 주의 문구: 생성형 AI는 잘못된 답변을 할 수 있다는 고정 문구를 표시합니다. (고정 문구는 제거할 수 없습니다.)

h. 제안 질문: 젤라또 만들기 메뉴에서 젤라또 만들기 > 기본 설정 > 기본값 설정-제안 질문에서 설정한 내용으로 노출됩니다. 클릭 시 해당 내용으로 질문합니다.

i. 질문 입력 영역: 사용자가 질문을 입력하는 영역입니다. 답변을 하는 중에는 다른 질문을 할 수 없습니다.\ <sub>- 최대 500자 이내의 질문이 가능합니다.</sub>

j. 젤라또 라벨: 클릭 시 젤라또 홈페이지가 열립니다.

{% hint style="info" %}
젤라또 라벨 제거를 원할 시에는 별도로 문의해 주세요.
{% endhint %}

k. 젤라또 위젯: 클릭 시 대화 화면이 열려 대화할 수 있고, 재클릭 시 대화 화면이 닫힙니다.

#### **2. 대화 목록**

대화 목록은 젤라또 챗봇과 대화한 이력을 확인할 수 있는 이전 대화 리스트입니다. 대화 목록은 쿠키 ID 기준의 이력을 확인할 수 있으며, 로그인 처리를 한 경우 로그인 한 회원은 회원 ID 기준의 이력을 확인합니다.

{% hint style="warning" %}
한 명의 사용자가 젤라또 챗봇과 대화를 했다고 하더라도, 비로그인 시 한 대화(쿠키 ID 기준 이력)와 로그인 시 한  대화(회원 ID 기준 이력) 간의 대화 이력은 공유되지 않습니다.
{% endhint %}

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2F4YlKKVmcB876duJgSTTL%2F%E1%84%83%E1%85%A2%E1%84%92%E1%85%AA%E1%84%86%E1%85%A9%E1%86%A8%E1%84%85%E1%85%A9%E1%86%A8.png?alt=media&amp;token=51add488-7e37-445f-b768-1edc27e657ec" alt=""><figcaption></figcaption></figure>

a. 대화 리스트: 쿠키 ID 또는 회원 ID 기반의 대화 이력 리스트를 확인할 수 있습니다. 대화 이력에서는 마지막에 했던 대화의 일부가 표시되며, 대화창에서 대화를 안했을 경우 '궁금한 점을 질문해 주세요.' 가 표시됩니다.

b. 새로운 대화 버튼: 클릭 시 새로운 대화창으로 이동합니다.

{% hint style="info" %}
상위 아이콘 버튼은 대화창과 동일하게 동작합니다.
{% endhint %}

### **풀페이지형**

풀페이지 유형은 챗봇 위젯 클릭 시 젤라또 챗봇 화면이 새 탭으로 열립니다. 풀페이지형은 첫 화면과 대화 화면 두 가지의 화면으로 나눌 수 있습니다.

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2FQFXpu6EMdlv6Gru2Sij8%2Fimage.png?alt=media&amp;token=7264e0ca-7caa-4f11-b29d-77fa8df9b332" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
풀페이지형 화면은 반응형으로 제공됩니다.
{% endhint %}

#### **1. 첫 화면**

첫 화면은 새로운 대화 시 사용자에게 처음 보이는 화면입니다.

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2F17kwqMESr4CJIaRrmQAD%2Fimage.png?alt=media&amp;token=2c08be3b-5855-49bf-b7a0-3904295b6b44" alt=""><figcaption></figcaption></figure>

a. 프로필 영역: 젤라또 만들기 메뉴에서 젤라또 만들기 > 기본 설정에서 설정 탭에서 설정한 프로필 설정, 기본값 설정 내용이 반영됩니다. 색상 테마는 젤라또 만들기 > 스타일 탭에서 설정한 테마 색상이 전체적으로 반영됩니다.

b. 대표 문구: 화면 중앙에 메인으로 표시되는 문구입니다.

c. 첫인사: 젤라또 만들기 메뉴에서 젤라또 만들기 > 기본 설정 > 기본값 설정-첫인사에서 설정한 내용으로 노출됩니다.

d. 질문 입력 영역: 사용자가 질문을 입력하는 영역입니다. 답변을 하는 중에는 다른 질문을 할 수 없습니다.\ <sub>- 최대 500자 이내의 질문이 가능합니다.</sub>&#x20;

e. 제안 질문: 젤라또 만들기 메뉴에서 젤라또 만들기 > 기본 설정 > 기본값 설정-제안 질문에서 설정한 내용으로 노출됩니다. 클릭 시 해당 내용으로 질문합니다.

f. 주의 문구: 생성형 AI는 잘못된 답변을 할 수 있다는 고정 문구를 표시합니다. (고정 문구는 제거할 수 없습니다.)

#### **2. 대화 화면**

대화 화면은 실제 사용자가 AI 챗봇과 질의 응답을 하는 화면입니다.&#x20;

{% hint style="warning" %}
한 명의 사용자가 젤라또 챗봇과 대화를 했다고 하더라도, 비로그인 시 한 대화(쿠키 ID 기준 이력)와 로그인 시 한  대화(회원 ID 기준 이력) 간의 대화 이력은 공유되지 않습니다.
{% endhint %}

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2FYmOjrTX3t8N3E2UUXOXc%2Fimage.png?alt=media&amp;token=db8f70cc-6aa5-4ad8-86ed-32c526e70798" alt=""><figcaption></figcaption></figure>

a. 새로운 대화 버튼: 클릭 시 새로운 대화창 화면으로 새로운 대화를 진행할 수 있습니다.

b. 대화 리스트: 쿠키 ID 또는 회원 ID 기반의 대화 이력 리스트를 확인할 수 있습니다. 대화 이력에서는 마지막에 했던 대화의 일부가 표시되며, 대화창에서 대화를 안했을 경우 '궁금한 점을 질문해 주세요.' 가 표시됩니다.

c. 젤라또 라벨: 클릭 시 젤라또 홈페이지가 열립니다.

{% hint style="info" %}
젤라또 라벨 제거를 원할 시에는 별도로 문의해 주세요.
{% endhint %}

d. 접기/펼치기: 클릭 시 대화 목록을 접거나 펼칠 수 있습니다.

### **답변 예시 화면**

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2FI3JfAiYTRziOIVsuMfID%2F%E1%84%83%E1%85%A1%E1%86%B8%E1%84%87%E1%85%A7%E1%86%AB.png?alt=media&amp;token=b381e902-dd4b-49d7-a104-556d9397eb7c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2817860811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUd5i76OwaMgIsfGeZkeQ%2Fuploads%2FrW6Ub9yIMwXhsKtc8SNo%2Fimage.png?alt=media&amp;token=466fcd2a-e740-46e0-a0e0-b0f732cdb30e" alt=""><figcaption></figcaption></figure>

* 답변을 기다리는 중 로딩 효과를 제공합니다.
* 텍스트, 이미지, 표, 링크 등의 다양한 유형의 답변이 가능합니다.

{% hint style="warning" %}
답변의 링크는 클릭 시 새 창으로 열리며, 모바일 환경에서 답변의 링크 클릭 시 새 창으로 열기 동작은 별도 이벤트 구현이 필요할 수 있습니다. &#x20;
{% endhint %}

* 사용자가 답변에 좋아요/싫어요로 피드백을 하는 답변 피드백 기능을 제공하며, 피드백 내용은 **분석 리포트 메뉴**에서 확인할 수 있습니다.
* 답변을 복사할 수 있는 복사 버튼을 제공합니다.&#x20;