[Build Your Own X] 나만의 AI 챗봇을 직접 만들어보자 — 4단계 실전 튜토리얼

서론: 챗봇, 그 익숙한 것의 진짜 구조

"좋은 대화 경험은 기술이 아니라 설계에서 나온다." — Hana (Agent8 비서 파트너)

챗봇은 AI 애플리케이션의 가장 기본적인 형태입니다. ChatGPT, Gemini, Claude 모두 "대화창에 질문하면 답하는" 인터페이스를 사용합니다. 하지만 실제로 어떻게 동작하는지 아는 사람은 의외로 적습니다.

이 튜토리얼에서는 단순한 입출력을 넘어, 실시간 스트리밍, 대화 맥락 기억, 페르소나 설계까지 갖춘 챗봇을 직접 만듭니다.

이 글은 Build Your Own AI Agent에 이어지는 시리즈 2편입니다.

Step 1: 기본 대화 UI — 채팅 인터페이스 구축

가장 먼저 사용자가 메시지를 입력하고 AI가 응답하는 기본 인터페이스를 만듭니다.

// step1-chat-ui.tsx
"use client";
import { useState, useRef, useEffect } from "react";

interface Message {
  role: "user" | "assistant";
  content: string;
  timestamp: Date;
}

export default function ChatBot() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const scrollRef = useRef<HTMLDivElement>(null);

  // 자동 스크롤
  useEffect(() => {
    scrollRef.current?.scrollTo({
      top: scrollRef.current.scrollHeight,
      behavior: "smooth",
    });
  }, [messages]);

  const sendMessage = async () => {
    if (!input.trim() || isLoading) return;

    const userMsg: Message = {
      role: "user",
      content: input,
      timestamp: new Date(),
    };
    setMessages((prev) => [...prev, userMsg]);
    setInput("");
    setIsLoading(true);

    // API 호출 (Step 2에서 스트리밍으로 개선)
    const res = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ messages: [...messages, userMsg] }),
    });
    const data = await res.json();

    setMessages((prev) => [
      ...prev,
      { role: "assistant", content: data.reply, timestamp: new Date() },
    ]);
    setIsLoading(false);
  };

  return (
    <div className="flex flex-col h-screen">
      <div ref={scrollRef} className="flex-1 overflow-y-auto p-4">
        {messages.map((m, i) => (
          <div key={i} className={m.role === "user" ? "text-right" : "text-left"}>
            <p>{m.content}</p>
          </div>
        ))}
        {isLoading && <p>생각 중...</p>}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && sendMessage()}
        placeholder="메시지를 입력하세요..."
      />
    </div>
  );
}

기본 구조는 단순합니다. messages 배열에 대화를 쌓고, API를 호출하고, 결과를 추가합니다. 하지만 이 상태에서는 응답이 완성될 때까지 빈 화면을 봐야 합니다.

Step 2: 스트리밍 응답 — 글자가 흘러나오는 경험

ChatGPT처럼 글자가 한 글자씩 나타나는 경험은 스트리밍(Streaming)으로 구현합니다. 서버에서 응답을 한꺼번에 보내지 않고, 토큰 단위로 점진적으로 전달합니다.

// step2-streaming-api.ts (서버 사이드)
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

export async function POST(req: Request) {
  const { messages } = await req.json();

  // 스트리밍 응답 생성
  const response = await ai.models.generateContentStream({
    model: "gemini-2.0-flash",
    contents: messages.map((m: { role: string; content: string }) => ({
      role: m.role === "user" ? "user" : "model",
      parts: [{ text: m.content }],
    })),
  });

  // ReadableStream으로 클라이언트에 전달
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of response) {
        const text = chunk.text ?? "";
        controller.enqueue(new TextEncoder().encode(text));
      }
      controller.close();
    },
  });

  return new Response(stream, {
    headers: { "Content-Type": "text/plain; charset=utf-8" },
  });
}

// step2-streaming-client.ts (클라이언트 사이드)
const sendMessageStreaming = async () => {
  if (!input.trim() || isLoading) return;
  setIsLoading(true);

  const userMsg = { role: "user" as const, content: input, timestamp: new Date() };
  setMessages((prev) => [...prev, userMsg]);
  setInput("");

  const res = await fetch("/api/chat", {
    method: "POST",
    body: JSON.stringify({ messages: [...messages, userMsg] }),
  });

  // 스트림 읽기
  const reader = res.body?.getReader();
  const decoder = new TextDecoder();
  let accumulated = "";

  // 빈 assistant 메시지를 먼저 추가
  setMessages((prev) => [
    ...prev,
    { role: "assistant", content: "", timestamp: new Date() },
  ]);

  while (reader) {
    const { done, value } = await reader.read();
    if (done) break;
    accumulated += decoder.decode(value, { stream: true });
    // 마지막 메시지를 실시간 업데이트
    setMessages((prev) => {
      const updated = [...prev];
      updated[updated.length - 1] = {
        ...updated[updated.length - 1],
        content: accumulated,
      };
      return updated;
    });
  }

  setIsLoading(false);
};

✨ Yuna (디자인 파트너) 코멘터리: "스트리밍은 단순한 기술이 아니라 UX 전략입니다. 실시간으로 텍스트가 나타나면 사용자는 AI가 '생각하고 있다'고 느낍니다. 빈 화면 3초는 버그처럼 느껴지지만, 글자가 흘러나오는 3초는 자연스럽게 기다립니다."

Step 3: 대화 기억 시스템 — 맥락을 잃지 않기

단순 챗봇의 가장 큰 약점은 이전 대화를 기억하지 못한다는 것입니다. "아까 말한 그것"이라고 하면 "무엇을 말씀하시는지 모르겠습니다"라고 답합니다.

대화 기억은 3단계로 설계합니다:

// step3-memory.ts

// Level 1: 세션 메모리 — 현재 대화 기록 (기본)
interface SessionMemory {
  messages: Message[];
  maxTokens: number; // 컨텍스트 윈도우 제한
}

function trimToFit(memory: SessionMemory): Message[] {
  // 토큰 수를 초과하면 오래된 메시지부터 제거
  let totalTokens = 0;
  const kept: Message[] = [];
  for (let i = memory.messages.length - 1; i >= 0; i--) {
    const tokens = Math.ceil(memory.messages[i].content.length / 4);
    if (totalTokens + tokens > memory.maxTokens) break;
    kept.unshift(memory.messages[i]);
    totalTokens += tokens;
  }
  return kept;
}

// Level 2: 요약 메모리 — 이전 대화 압축 저장
async function summarizeConversation(messages: Message[]): Promise<string> {
  const transcript = messages
    .map((m) => `${m.role}: ${m.content}`)
    .join("\n");
  return ask(`다음 대화를 3줄로 요약하세요:\n${transcript}`);
}

// Level 3: 영구 메모리 — 사용자 프로필 기반 개인화
interface UserProfile {
  name: string;
  preferences: string[];
  pastTopics: string[];
  lastActive: Date;
}

function buildContextWithMemory(
  profile: UserProfile,
  summary: string,
  recentMessages: Message[]
): string {
  return `
[사용자 프로필] 이름: ${profile.name}, 관심사: ${profile.preferences.join(", ")}
[이전 대화 요약] ${summary}
[최근 대화]
${recentMessages.map((m) => `${m.role}: ${m.content}`).join("\n")}
`;
}

Agent8의 세션 메모리 → 14일 장기 메모리 체험 → 영구 장기 메모리(후원 플랜) 구조가 바로 이 3-Level 아키텍처의 실제 적용입니다.

Step 4: 페르소나 설계 — AI에게 성격을 부여하기

기술적으로 완벽한 챗봇도 성격이 없으면 무미건조합니다. 페르소나(Persona)는 시스템 프롬프트를 통해 설계합니다.

// step4-persona.ts

interface Persona {
  name: string;
  role: string;
  tone: string;
  rules: string[];
  greeting: string;
}

const hanaPersona: Persona = {
  name: "하나",
  role: "AI 비서 파트너",
  tone: "따뜻하고 친근하지만 프로페셔널한",
  rules: [
    "사용자를 '대표님'으로 호칭합니다",
    "일정, 미팅, 문서 관리에 전문성을 보여줍니다",
    "복잡한 내용은 핵심을 먼저 말하고 상세를 이어갑니다",
    "이모지를 적절히 사용하되 과하지 않게 합니다",
    "모르는 것은 솔직히 '확인 후 알려드리겠습니다'라고 합니다",
  ],
  greeting: "안녕하세요, 대표님! 오늘 하루도 함께 하겠습니다 ✨",
};

function buildSystemPrompt(persona: Persona): string {
  return `
당신의 이름은 ${persona.name}이고, ${persona.role}입니다.
말투는 ${persona.tone} 어조를 사용합니다.

반드시 지켜야 할 규칙:
${persona.rules.map((r, i) => `${i + 1}. ${r}`).join("\n")}

첫 인사: "${persona.greeting}"
`;
}

// 시스템 프롬프트를 LLM 호출에 적용
async function chatWithPersona(
  persona: Persona,
  userMessage: string,
  history: Message[]
) {
  const systemPrompt = buildSystemPrompt(persona);
  return ask(`
${systemPrompt}

${history.map((m) => `${m.role}: ${m.content}`).join("\n")}
user: ${userMessage}
`);
}

💼 Juno (영업 파트너) 코멘터리: "페르소나는 단순한 '캐릭터'가 아니라 브랜드 경험입니다. 고객이 챗봇과 대화할 때 느끼는 '따뜻함'이나 '전문성'이 서비스 재방문율을 결정합니다. Agent8의 8파트너 각각이 고유한 페르소나를 가진 이유입니다."

결론: 대화의 기술은 듣는 것에서 시작된다

4단계를 거치며 우리는 다음을 직접 구현했습니다:

1. 대화 UI — 메시지 입력과 응답 표시의 기본 구조
2. 스트리밍 응답 — 실시간으로 글자가 나타나는 경험
3. 대화 기억 — 세션/요약/영구 3단계 메모리 시스템
4. 페르소나 설계 — AI에게 성격과 말투를 부여하는 방법

Agent8의 8파트너는 각각 고유한 페르소나를 가지고 있습니다. 하나는 따뜻한 비서, 렉스는 냉철한 감사관, 미소는 활기찬 마케터. 이 다양한 성격이 하나의 팀으로 조화를 이루는 것, 그것이 단순 챗봇과 Agent 8의 차이입니다.

다음 편에서는 "나만의 검색 엔진 만들기"를 통해 RAG 파이프라인을 본격적으로 구현합니다.