React JS로 챗봇을 전문가처럼 만드는 방법

예약, FAQ, 상품 추천 등 어떤 웹사이트든 AI 에이전트나 챗봇을 통해 이점을 얻을 수 있습니다.

실제로 많은 곳에서 사용 중입니다. 챗봇은 브랜드에서 가장 빠르게 성장하는 소통 채널이므로, 지금이 바로 시작하기 좋은 시기입니다.

그렇다면 이 모든 요소를 어떻게 연결할까요? React 위에 LLM 제공업체, AI 에이전트 프레임워크를 고민해야 하고, 이를 방문자가 사용할 수 있는 UI 컴포넌트로 포장해야 합니다.

다행히 챗봇 플랫폼이 이런 부분을 지원합니다. 이 가이드에서는 다음 단계를 안내합니다:

• 맞춤형 챗봇 만들기
• Next.js와 React로 웹사이트 만들기
• React 프론트엔드에 챗봇 통합하기
• 챗봇 UI 스타일 커스터마이즈하기

조금만 투자하면 React 사이트에 전문적이고 성능 좋은 챗봇을 손쉽게 통합할 수 있습니다.

참고로, 튜토리얼을 건너뛰고 코드를 바로 확인할 수도 있습니다.

2. 챗봇 만들기

이제 첫 번째 핵심 단계, 챗봇을 만들어봅시다.

스튜디오에서 Create Bot +을 클릭하세요.

목적을 정하면 도움이 되지만, 특별히 구체적인 아이디어가 없어도 괜찮습니다. 대부분의 비즈니스에는 정책 문서, FAQ, 제품 카탈로그 등이 있습니다. 이런 정보를 활용하는 간단한 챗봇만으로도 반복되는 질문에 답하는 시간을 크게 줄일 수 있습니다.

저는 외부 와인 카탈로그를 참고해 와인 추천을 해주는 디지털 소믈리에 챗봇을 만들어보겠습니다.

플로우 정의하기

챗봇이 어떤 역할을 하든, 플로우(흐름)가 필요합니다. 이는 챗봇의 동작을 결정하는 논리입니다.

스튜디오 왼쪽 패널에서 Workflows를 클릭하세요.

복잡할 필요는 없습니다. 문서에 접근할 수 있는 자율 노드 하나(기본 챗봇)만으로도 충분히 효과적입니다.

챗봇에 지침을 주는 것이 중요합니다. 예를 들어:

• 챗봇이 취할 페르소나(예: 정중함, 친근함, 사용자 말투 반영 등)
• 메시지 시작/종료 방식
• 특정 질문에 대한 응답 방식
• 어떤 문서를 언제 참고할지

지식 베이스 추가하기

이 정보는 챗봇이 RAG(검색 기반 생성)을 통해 데이터를 반영한 답변을 제공할 때 사용됩니다. 비교적 간단하지만, 최적화 방법을 익혀두면 더 좋은 RAG 결과를 얻을 수 있습니다.

제가 만든 디지털 소믈리에 Wynona는 와인 리스트에 접근할 수 있습니다. 이는 Wine Reviews 데이터셋의 일부로, 와인 이름, 지역, 테이스팅 노트가 포함되어 있습니다.

배포하기

챗봇이 완성되면 스튜디오에서 Publish를 클릭하면 챗봇이 활성화됩니다.

이제 WhatsApp, Telegram, 웹앱 등 다양한 커뮤니케이션 채널에 통합할 수 있습니다.

2. React 앱 만들기

챗봇이 준비됐으니, 이제 사용자가 챗봇과 대화할 수 있는 React 앱을 빠르게 만들어봅시다.

저는 Next.js를 사용할 예정입니다. 일반 React보다 더 완성도 있고 관련성이 높다고 생각하며, 이 튜토리얼은 React 사용자에게 필요한 내용을 모두 다룹니다.

create-next-app 실행

다음 명령어를 실행하세요:

npx create-next-app@14

Next.js 14를 사용하는 이유는 React 18이 필요하기 때문입니다. @latest로 실행하면 Next.js 15와 React 19가 설치됩니다. 위 명령어를 사용하면 가장 쉽게 올바른 버전의 React와 Next를 사용할 수 있습니다.

앱 설정 구성하기

일련의 질문이 표시됩니다. 저는 기본 설정을 그대로 사용하며, 이 튜토리얼도 그렇게 진행합니다.

문제없이 진행됐다면 성공 로그가 표시됩니다.

3. 챗봇을 React 앱에 통합하기

이제 우리 바비 인형들을 만나게 할 시간입니다.

Botpress React 보일러플레이트 받기

챗봇을 앱에 통합하려면 다음이 필요합니다:

• 클라이언트 ID
• 사전 제작된 웹챗 React 컴포넌트

Botpress에는 두 가지가 모두 포함된 보일러플레이트 코드가 있습니다. 받으려면:

• studio로 이동해 오른쪽 상단의 Share를 클릭하세요.
• 팝업 오른쪽 하단에서 Configure를 클릭합니다.

• 오른쪽 상단의 React 탭을 클릭하세요.
• 여기서 Botpress 보일러플레이트와 설치 명령어, 클라이언트 ID를 확인할 수 있습니다.

참고로, 클라이언트 ID를 빠르게 확인하려면:

• Botpress 대시보드로 이동
• 사이드 패널에서 Webchat 선택
• Advanced Settings 클릭

환경 변수에 저장하는 것이 권장되지만, 여기서는 컴포넌트에 직접 입력하겠습니다.

앱에서 챗 컴포넌트 만들기

프로젝트 디렉터리에서 chat.tsx 파일을 생성합니다.

챗봇 클라이언트 코드를 채워 넣으세요:

"use client"
import { useState } from 'react';


import {
   Webchat,
   WebchatProvider,
   Fab,
   getClient,
   Configuration,
} from '@botpress/webchat';


const clientId = "";


const configuration: Configuration = {
   color: '#000',
};


export default function Chat() {
   const client = getClient({
       clientId,
   });


   const [isWebchatOpen, setIsWebchatOpen] = useState(false);


   const toggleWebchat = () => {
       setIsWebchatOpen((prevState) => !prevState);
   };


   return (
       <div
           style={{
               position: 'fixed',
               display: 'flex',
               flexDirection: 'column',
               bottom: 0,
               right: 0,
               alignItems: 'flex-end',
               gap: '12px',
               padding: '24px', // give some breathing room
               zIndex: 9999,
           }}
       >
           <WebchatProvider client={client} configuration={configuration}>


               <div
                   style={{
                       // position: '',
                       marginTop: '12px',
                       marginBottom: '72px',
                       width: '350px',
                       maxHeight: '500px',
                       overflow: 'scroll',
                       borderRadius: '16px',
                       backgroundColor: '#fff',
                       transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
                       transformOrigin: 'bottom right',
                       transition: 'transform 0.3s ease-in-out',
                   }}
               >
                   <Webchat />
               </div>
               <Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
           </WebchatProvider>
       </div>
   );
}

이 코드는 Botpress 예제에 몇 가지 주요 변경이 적용된 버전입니다:

• 상단에 "use client" 추가(상태 관리가 필요한 컴포넌트용)
• 함수명을 App에서 Chat으로 변경
• 약간의 스타일링

이제 app/page.tsx로 이동해 푸터 바로 위에 import 하세요:

import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";


export default function Home() {
 return (
   <div className={styles.page}>
     <main className={styles.main}>
      
       <Image
         className={styles.logo}
         src="https://nextjs.org/icons/next.svg"
         alt="Next.js logo"
         width={180}
         height={38}
         priority
       />
       <ol>
         <li>
           Get started by editing <code>app/page.tsx</code>.
         </li>
         <li>Save and see your changes instantly.</li>
       </ol>


       <div className={styles.ctas}>
         <a
           className={styles.primary}
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             className={styles.logo}
             src="https://nextjs.org/icons/vercel.svg"
             alt="Vercel logomark"
             width={20}
             height={20}
           />
           Deploy now
         </a>
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
           className={styles.secondary}
         >
           Read our docs
         </a>
       </div>
      
     </main>
     <Chat/>
     <footer className={styles.footer}>
       <a
         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/file.svg"
           alt="File icon"
           width={16}
           height={16}
         />
         Learn
       </a>
       <a
         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/window.svg"
           alt="Window icon"
           width={16}
           height={16}
         />
         Examples
       </a>
       <a
         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/globe.svg"
           alt="Globe icon"
           width={16}
           height={16}
         />
         Go to nextjs.org →
       </a>
     </footer>
   </div>
 );
}

이제 프로젝트 디렉터리에서 터미널로 npm run dev를 실행하면 로컬 서버에서 앱을 확인할 수 있습니다.

챗봇으로 React 앱에 기능 추가하기

대형 웹 프레임워크를 사용하면 핵심 기능에 집중하느라 부가 기능을 신경 쓸 여유가 없습니다.

Botpress는 사전 제작된 컴포넌트, 시각적 드래그 앤 드롭 빌더, 완전한 커스터마이즈 기능을 제공합니다. 간단한 통합이 성능 저하로 이어지지 않습니다.

React로 개발한다면 품질을 추구하는 것입니다. 챗봇 역시 그에 걸맞아야 합니다.

지금 바로 시작해보세요. 무료입니다.

자주 묻는 질문

1. 이 챗봇을 실제 서비스에 배포할 수 있나요?

네, Botpress Studio에서 챗봇을 발행하고 React 앱에 삽입한 후 실제 서비스에 배포할 수 있습니다. 삽입이 완료되면 Vercel 등 지원되는 호스팅 플랫폼을 통해 전체 애플리케이션을 배포할 수 있습니다.

2. 챗봇 UI의 디자인을 커스터마이즈할 수 있나요?

네, Botpress Webchat 컴포넌트를 사용해 챗봇 UI의 디자인을 완전히 커스터마이즈할 수 있습니다. 색상, 크기, 위치, 스타일 등 다양한 props를 지원하며, 기본 스타일을 직접 CSS로 덮어써 브랜드 디자인에 맞출 수 있습니다.

3. 챗봇 페르소나를 꼭 정의해야 하나요? 대화에 어떤 영향을 주나요?

네, 챗봇 페르소나를 정의하는 것은 중요합니다. 페르소나는 챗봇의 말투와 표현 방식을 결정해, 브랜드의 목소리와 일관된 대화를 제공하고 사용자 신뢰를 높여줍니다.

4. 챗봇 플로우의 목적은 무엇이며, 어떻게 정의하나요?

챗봇 플로우의 목적은 챗봇이 사용자에게 어떻게 응답할지 논리를 제어하는 것입니다. Botpress에서는 “Workflows” 탭에서 노드를 사용해 액션, 메시지, 조건, 전환 등을 시각적으로 정의할 수 있습니다.

5. 기존 문서(예: FAQ, 제품 카탈로그)로 챗봇을 학습시킬 수 있나요?

네, FAQ나 매뉴얼 등 기존 문서를 Botpress Knowledge Base에 업로드할 수 있습니다. 챗봇은 검색 기반 생성(RAG)을 통해 해당 문서에서 직접 관련 정보를 찾아 답변합니다.