SYSTEM BLUEPRINT

웹사이트 AI 챗봇
대화 흐름 스토리보드

기존 사이트에서 챗봇을 열고 준비된 AI API 답변을 확인하는 화면 설계

스토리보드란?

스토리보드는 실제 구현할 화면과 이용 흐름을 미리 보여주는 문서입니다. 기존 웹사이트 안에서 챗봇이 어떻게 열리고 질문·답변이 이어지는지 확인할 수 있습니다.

  1. 방문자가 우측 하단 아이콘으로 챗봇을 여는 흐름
  2. 질문을 보내고 AI 답변을 확인하는 흐름
  3. 연결 실패 뒤 다시 시도하는 흐름

마지막까지 보시면 간결한 챗봇 창 안에서 정상·대기·오류 상태가 어떻게 이어지는지 확인할 수 있습니다.

웹사이트 방문자 시나리오

질문을 열고 답변을 확인하는 여정

기존 페이지에 머무르며 챗봇 아이콘을 눌러 AI 답변을 확인합니다.

1. 페이지 방문

기존 콘텐츠 확인

2. 챗봇 열기

우측 하단 아이콘 선택

3. 질문 입력

궁금한 점 작성

4. 응답 확인

AI 답변 읽기

5. 다시 시도

오류 시 재전송

웹사이트 방문자 | 화면 01

기존 사이트와 챗봇 진입

현재 웹사이트 / 고객 지원
고객 지원 센터서비스 안내  자주 묻는 질문  이용 가이드
도움이 필요하신가요?

원하는 답을 빠르게 찾아보세요

기본 안내를 살펴보거나 우측 하단에서 AI 챗봇에게 질문할 수 있습니다.

서비스 이용

이용 방법을 확인하세요

계정 안내

계정 관련 도움말

문의하기

추가 지원이 필요할 때

자주 묻는 질문
서비스 이용 방법은 어떻게 확인하나요?  ›계정 설정은 어디에서 변경하나요?  ›문의 답변은 어디서 확인하나요?  ›이용 가이드를 다시 볼 수 있나요?  ›챗봇에 질문하려면 어떻게 하나요?  ›
빠른 이용 팁
챗봇 질문 안내
도움말 모음
AI 챗봇 열기

[화면 개요 및 목적]

제안서의 최소 변경 전략을 보여줍니다. 기존 웹페이지 콘텐츠는 유지하고 우측 하단 아이콘으로 챗봇에 진입합니다.

[핵심 기능 로직]

아이콘을 누르면 같은 페이지 안에 대화창을 띄웁니다. 데모 Step 1에서 열기·닫기를 확인합니다.

  • 기존 화면 유지
    사이트 UI 통합
웹사이트 방문자 | 화면 02

질문 입력과 AI 답변

현재 웹사이트 / 챗봇 대화
고객 지원 센터서비스 안내  자주 묻는 질문  이용 가이드
도움이 필요하신가요?

원하는 답을 빠르게 찾아보세요

기본 안내를 살펴보거나 우측 하단에서 AI 챗봇에게 질문할 수 있습니다.

서비스 이용

이용 방법을 확인하세요

계정 안내

계정 관련 도움말

문의하기

추가 지원이 필요할 때

자주 묻는 질문
서비스 이용 방법은 어떻게 확인하나요?  ›계정 설정은 어디에서 변경하나요?  ›문의 답변은 어디서 확인하나요?  ›이용 가이드를 다시 볼 수 있나요?  ›챗봇에 질문하려면 어떻게 하나요?  ›
빠른 이용 팁
챗봇 질문 안내
도움말 모음
✦ AI 챗봇닫기 ×
안녕하세요. 무엇을 도와드릴까요?
이용 방법을 알려주세요.
답변을 준비하고 있습니다…
상단의 이용 가이드를 열어 단계별 안내를 확인할 수 있습니다.
이용 방법을 알려주세요
➤

[화면 개요 및 목적]

제안서의 API 왕복 전략을 화면으로 보여줍니다. 질문과 답변이 같은 대화창 안에서 순서대로 표시됩니다.

[핵심 기능 로직]

입력한 질문을 제공 AI API로 보내고 대기 상태 뒤 응답을 표시합니다. 데모 Step 2~3에서 확인합니다.

  • 질문·답변 연결
    제공 AI API
웹사이트 방문자 | 화면 03

연결 오류와 재시도

현재 웹사이트 / 챗봇 오류
고객 지원 센터서비스 안내  자주 묻는 질문  이용 가이드
도움이 필요하신가요?

원하는 답을 빠르게 찾아보세요

기본 안내를 살펴보거나 우측 하단에서 AI 챗봇에게 질문할 수 있습니다.

서비스 이용

이용 방법을 확인하세요

계정 안내

계정 관련 도움말

문의하기

추가 지원이 필요할 때

자주 묻는 질문
서비스 이용 방법은 어떻게 확인하나요?  ›계정 설정은 어디에서 변경하나요?  ›문의 답변은 어디서 확인하나요?  ›이용 가이드를 다시 볼 수 있나요?  ›챗봇에 질문하려면 어떻게 하나요?  ›
빠른 이용 팁
챗봇 질문 안내
도움말 모음
✦ AI 챗봇닫기 ×
안녕하세요. 무엇을 도와드릴까요?
이용 방법을 알려주세요.
답변을 불러오지 못했습니다. 잠시 후 다시 시도해 주세요.
다시 시도 ↻
이용 방법을 알려주세요
➤

[화면 개요 및 목적]

산출물 완성도 전략을 증명합니다. 연결 실패를 분명히 알리고 입력한 질문을 유지합니다.

[핵심 기능 로직]

API 오류 또는 빈 결과가 오면 재시도 동작을 제공합니다. 데모 Step 4에서 확인합니다.

  • 실패 뒤 재시도
    오류 상태 처리
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]

        시나리오

        | 화면 01

        [화면 개요 및 목적]

        [핵심 기능 로직]

          | 화면 02

          [화면 개요 및 목적]

          [핵심 기능 로직]

            | 화면 03

            [화면 개요 및 목적]

            [핵심 기능 로직]