오픈AI 엔지니어도 부러워할 AI 챗봇을 3일 만에 만드는 비결

Introduction

혹시 ChatGPT 같은 AI 채팅봇을 직접 만들어보고 싶었나요? 아니면 "저런 복잡한 서비스는 고급 AI 엔지니어나 개발할 수 있겠지"라고 생각하셨나요? 놀랍게도 최신 AI 채팅 앱의 90% 이상은 이미 만들어진 코드와 라이브러리로 구현됩니다. 실제로 이런 앱들의 대부분은 겉으로 보이는 것보다 훨씬 단순한 구조로 이루어져 있죠.

최근 <How AI Chatbots are built> 아티클을 쓴 저자는 자신의 제품 WriteEdge에 AI 채팅 기능을 추가했다고 합니다. 기술 설계 문서를 작성하면 옆에 떠 있는 채팅창을 통해 즉각적인 피드백을 받을 수 있는 기능이었죠. 처음에는 "이거 정말 복잡하겠는데?"라고 생각했지만, 실제로 구현해보니 대부분의 작업이 이미 만들어진 도구들을 조합하는 것이었다고 하는데요

Vercel AI SDK, React 훅, 스트리밍 API... 이름만 들어도 복잡해 보이지만, 실상은 어떨까요? 프론트엔드에서 백엔드까지, 데이터 모델에서 사용자 인터페이스까지, 모던 AI 채팅봇의 핵심 구조를 모두 파헤쳐 보았습니다. 그리고 발견한 것은 놀라웠습니다 - 당신도 할 수 있습니다!(심지어 저도 했어요)

이 글에서는 AI 채팅봇 개발의 베일을 벗기고, 왜 이것이 생각보다 훨씬 접근하기 쉬운 프로젝트인지 알려드립니다. 단 5가지 핵심 요소만 이해하면 당신도 오늘부터 나만의 AI 채팅봇을 개발할 수 있습니다. 개발자로서 새로운 시대의 필수 스킬을 함께 익혀보시겠어요? High Growth Engineer의 <How AI Chatbots are built>를 번역해 가져왔습니다.

🚀 (광고): 면접관이 놓을 수 없는 이력서를 만들고 싶다면?

광고 아닌 광고 하나만 추가하겠습니다..ㅎ 이번에 제가 새로 전자책을 출시했습니다.

DevPill 이력서 전략 가이드: 면접관이 놓을 수 없게 하는 최강의 이력서 - Devpill

DevPill 이력서 전략 가이드: 면접관이 놓치지 않는 단 한 장의 이력서 만들기 개발자로서의 성공적인 커리어, 아직도 꿈만 같나요? 면접관의 시선을 사로잡는 단 한 장의 이력서로, 당신이 원하는 회사에서 일하는 모습을 상상해보세요. 채용 담...

www.latpeed.com

작년부터 인프런을 통해서 이력서 및 취업 멘토링을 해주고 있는데요. 좋은 기회로 부트캠프로부터 졸업생 대상으로 단체 멘토링 역시 진행하고 있습니다. 어느새 수십 명의 예비 개발자 분들의 이력서를 검토해주게 되었네요.

그러다보니 멘티 분들이 놓치는 실수가 공통적으로 겹치는 걸 발견했습니다.

면접관은 하루에도 수십 개의 이력서를 검토하면서 단 3초 만에 "더 볼지 말지"를 결정합니다. 그런데 그 귀중한 3초 안에 자신의 경험과 역량을 제대로 드러내지 못하고 있었어요.

제가 주로 해드린 피드백은 아래와 같습니다:

10페이지 이력서를 1장으로 압축해 서류 합격률 3배 높이는 법
기술 스택을 과도하게 나열하는 대신 깊이를 보여주는 전략
문제 해결 경험을 구체적 수치로 표현해 임팩트 만드는 방법
면접관을 당신의 편으로 만드는 이력서 작성의 황금 법칙

이런 경험들을 바탕으로 "면접관을 사로잡는 이력서 전략"이라는 짧은 가이드를 작성했습니다. 개발자로서 기술적 역량을 쌓는 것도 중요하지만 그 역량을 효과적으로 어필하는 법도 알아야 한다고 생각합니다.

서류 탈락에 지치셨나요? 당신의 개발자 이력서가 3초 안에 면접관의 시선을 사로잡을 수 있습니다. 현직 멘토가 수십 명의 개발자를 코칭하며 발견한 이력서 전략을 공개합니다.

관심 있으신 분들은 [링크]에서 확인해보세요.

다시 본론으로 돌아가서, AI 챗봇 구축 방법에 대해 더 알아볼까요?

AI 챗봇 구축 방법 (내부 아키텍쳐 뜯어보기)

AI 채팅 앱의 90% 이상을 구성하는 핵심 요소 이해하기 Jordan Cutler와 Sidwyn Koh 2025년 3월 31일

오늘은 AI 챗봇과 그 구축 방법에 대해 알아보겠습니다.

최근 Sidwyn과 저는 WriteEdge에서 AI 챗봇을 개발했습니다—이를 통해 채팅 사이드바를 통해 기술 설계 문서에 대한 피드백을 받을 수 있습니다.

다음과 같은 모습입니다:

오른쪽에 채팅 창이 있어 문서와 대화할 수 있습니다

저희는 이 과정에서 배운 핵심 AI 개발 교훈을 여러분과 공유하고 싶습니다. 특히 이러한 교훈이 오늘날 많은 AI 앱의 기초가 되기 때문입니다.

참고: 이 글은 AI 챗봇 구축을 위한 단계별 튜토리얼이 아닙니다. 대신, 대부분의 AI 챗봇이 어떻게 구축되는지 알려드려 내부 작동 방식을 이해할 수 있도록 할 것입니다. 이를 통해 자신만의 챗봇을 만드는 것이 훨씬 수월해질 것입니다.

1) 기존 도구 및 라이브러리

저희와 대부분의 AI 챗봇 및 GPT "래퍼"는 Vercel AI SDK를 사용합니다. 이 SDK는 React와 Node 백엔드에서 AI 기능을 쉽게 구축할 수 있는 API 세트를 제공합니다.

클라이언트에서는 "ai-sdk/react"의 useChat 훅을 사용하여 채팅 상태를 관리합니다.

백엔드에서는 Vercel의 스트리밍 API를 사용하여 채팅 메시지를 스트리밍합니다.

솔직히 말하자면, Vercel AI Chatbot 템플릿을 기반으로 사용했습니다. 처음부터 시작한다면, 이것이 의심할 여지 없이 즉시 기반을 마련할 수 있는 최선의 방법입니다.

그러나 저희는 기존 코드베이스가 있었기 때문에 챗봇 구축 방식을 파악하여 저희에게 맞게 작업하는 데 더 많은 노력이 필요했습니다.

다음 섹션에서는 저희가 배운 내용을 공유하겠습니다.

2) 데이터 엔티티

메시지 추천 및 비추천 기능을 제외하면 세 가지 핵심 엔티티가 있습니다: Chat, Message, User입니다.

TypeScript로 스키마를 작성해 보겠습니다. 이것이 DB 테이블에 있다고 가정해 봅시다.

interface Chat {
  id: string;
  title: string;
  userId: string;
  createdAt: string;
}

interface Message {
  id: string;
  chatId: string;
  content: Json;
  role: string;
  createdAt: string;
}

interface User {
  id: string;
  ... other fields
}

애플리케이션에 따라 약간의 조정이 필요할 수 있습니다. 예를 들어, 저희는 특정 설계 문서에 채팅을 연결할 수 있도록 Chat 테이블에 tddId를 추가했습니다.

지금까지 Message 테이블의 content를 제외하면 모든 것이 간단합니다. 왜 문자열 대신 JSON 객체일까요? 간단히 말해, 유연성 때문입니다.

JSON 형식이 유용한 가장 일반적인 경우는 메시지 텍스트와 도구 호출 결과를 저장하는 것입니다. 간결함을 위해 이 글에서는 도구 호출에 대한 자세한 내용은 생략하겠습니다. 그러나 JSON으로 저장하는 것이 왜 가치 있는지 보여드리기 위해 다음과 같은 저장하고 싶은 메시지 예시를 살펴보겠습니다:

// assistant text response
{ 
  type: "text", 
  text: "Overall, the design document is well-structured and covers..."
}

// assistant tool response
{ 
  type: "tool-result", 
  toolCallId: '12345',
  toolName: 'getWeather',
  result: "{ degreesFahrenheight: 75, degreesCelsius: 24 }"
}

JSON을 사용하기 때문에 이 두 객체 모두 Message.content에 저장할 수 있습니다. 클라이언트에서는 UI를 렌더링하는 방식에 따라 이러한 데이터 구조를 모두 처리할 수 있습니다.

예시 코드:

// React code on the client
messages.map(message => {
  if (message.type === "text") {
    return 
  } else if (message.type === "tool-result") {
    if (message.toolName === 'getWeather') {
      return 
    }
  }
})

참고: 이것은 아이디어를 전달하기 위한 의사 코드입니다. 텍스트와 도구 호출을 스트리밍하는 새롭게 권장되는 방법은 "parts" 필드를 사용하는 것이지만, 논의하기에는 길어질 수 있고 구현 세부 사항입니다. 자세한 예시는 관련 문서를 확인하세요.

여기서 핵심은 세 가지 모델이 필요하다는 것입니다: Chat, Message, User. Message에서는 메시지 유형의 유연성을 위해 내용을 JSON으로 저장하세요.

3) 메시지 처리 및 응답 스트리밍

프론트엔드 클라이언트에서 새 메시지를 받으면 두 가지 작업이 필요합니다:

저장: 메시지를 잃지 않도록 저장합니다.

응답: 대화 컨텍스트, 도구 및 프롬프트를 사용하여 응답을 생성합니다. 또한 클라이언트가 즉각적인 피드백을 볼 수 있도록 응답을 스트리밍해야 합니다.

둘 다 꽤 간단합니다. 다음은 의사 코드입니다!

메시지 및 채팅 데이터 저장

저장을 위해 /chat 경로에 다음과 같은 코드가 있습니다:

if (!chatExists) {
  createChat(); // Make call to db
}

saveMessageToChat(); // Make call to db

// stream response from AI, save response to db - see next section

응답 생성 및 스트리밍

스트리밍을 위해, 클라이언트에 응답하기 위해 Vercel의 스트리밍 API를 사용합니다. 코드는 다음과 같습니다:

import { createDataStreamResponse, streamText } from 'ai';

// (1) immediately start streaming
return createDataStreamResponse({
  // (2) Gives us a dataStream callback to write to the stream
  execute: (dataStream) => {

    // (3) Call OpenAI for a response
    const result = streamText({
      model,
      system: systemPrompt, // customize this to your liking
      messages,
      onFinish: async ({ response, reasoning }) => {
        // (4) Saves our final response to the DB
        await saveMessages({
          messages: response.messages,
          chatId,
        });
      },
    });

    // (5) Ensures that if client disconnects, the stream is still consumed and we save the response message
    result.consumeStream();

    // (6) Streams the result of the GPT call into the response stream
    result.mergeIntoDataStream(dataStream, {
      sendReasoning: true,
    });
  },
});

여기서 단계별 과정은 다음과 같습니다:

createDataStreamResponse를 통해 스트리밍 시작
execute를 통해 스트림에 쓸 수 있는 콜백 받기
streamText를 통해 OpenAI(또는 다른 제공업체)에 API 호출
onFinish를 통해 최종 메시지가 저장되도록 함
클라이언트 연결이 끊어져도 스트림을 자체 소비하도록 consumeStream 호출. 이 경우, 사용자가 연결 해제 후 돌아오면 메시지가 있을 것임
(3)의 streamText 결과로 (2)의 dataStream에 쓰기

이러한 단계를 수행하면 다음과 같이 ChatGPT를 사용할 때 보는 것처럼 메시지가 청크로 들어옵니다:

단어가 하나씩 스트리밍되는 모습 / Chrome 개발자 도구 > 네트워크 패널

4) 클라이언트에서 메시지 표시하기

그렇다면, 위 스크린샷처럼 메시지가 청크로 들어온다면, 어떻게 멋진 서식으로 실시간으로 표시할 수 있을까요?

react-markdown 라이브러리가 이를 처리합니다! 텍스트 내용을 보내면 마크다운처럼 형식을 지정하는 적절한 HTML 요소로 변환합니다.

이 "Performance metrics" 텍스트를 살펴봅시다:

클라이언트에서 텍스트를 받을 때 2개의 청크로 들어옵니다:

[청크 1]
"**Performance "
[청크 2]
"Metrics**: "

들어오는 청크를 렌더링할 때, 처음에는 앞부분에 **가 있는 "**Performance "를 표시합니다. "Metrics **"의 두 번째 청크가 들어오면, react-markdown 컴포넌트 렌더러가 전체 "Performance Metrics"를 읽고 내용이 포함된 HTML 요소로 변경합니다.

다음으로 궁금할 수 있는 질문은 "font-semibold" 클래스는 어디서 왔으며, 어떻게 사용자 정의할 수 있는가입니다.

이는 모두 react-markdown 라이브러리 동작을 사용자 정의하는 방법의 일부입니다. 각 마크다운 요소에 대한 매퍼를 정의하고 HTML로 변환하는 방법을 정확히 알려줍니다.

다음은 위 예시에 대한 매퍼입니다:

const components = {
  ...
  strong: ({ node, children, ...props }) => {
    return (
      
        {children}
      
    );
  },
  ... other mappers like h1, h2, h3, etc.
}

React Markdown은 "**"로 감싸진 텍스트를 "strong"으로 인식하고, 변환된 HTML 요소를 얻기 위해 제공된 함수를 호출합니다.

그런 다음 이러한 매퍼를 ReactMarkdown 컴포넌트에 전달합니다:

  {yourStreamedText}

5) 클라이언트 채팅 상태 관리

메시지를 표시하는 방법은 알았지만, 모든 메시지를 추적하고 실제로 백엔드에 응답을 요청하려면 어떻게 해야 할까요?

useChat 훅이 이를 처리합니다. 어떤 API 엔드포인트를 사용할지 알려주면 나머지는 알아서 처리합니다. 모든 메시지, 텍스트 입력용 핸들러, 제출 핸들러 및 응답 상태를 제공합니다.

저희 코드는 대략 다음과 같습니다:

const {
  messages,
  input,
  setInput,
  handleSubmit,
  isLoading,
} = useChat({
  id,
  api: "/api/docs/feedback",
  body: { id, tddId },
  initialMessages,
  onError: (error) => {
    toast.error("An error occured, please try again!");
  },
});

그런 다음, useChat의 결과를 UI에 연결합니다.

messages는 매핑되어 데이터 형태에 따라 다양한 컴포넌트로 렌더링됩니다
input과 setInput은 텍스트 입력 컴포넌트에 연결됩니다
handleSubmit은 엔터 키 누름과 제출 버튼 클릭 시 트리거됩니다
isLoading은 로딩 상태가 표시되는지 제어합니다

이것으로 AI 챗봇을 구축하는 데 필요한 모든 것이 준비되었습니다! 이제 현존하는 AI 채팅봇의 90% 이상이 어떻게 구축되는지 알게 되었고, 자신만의 채팅봇을 어떻게 구축할 수 있는지 잘 이해하게 되었습니다.

📖 요약

Vercel AI SDK 및 AI Chatbot Template과 같은 기존 도구를 사용하여 예시가 포함된 기반을 마련하세요.
두 가지 핵심 엔티티는 Chat과 Message입니다. 유연성을 높이기 위해 메시지 내용을 JSON으로 저장하세요.
백엔드에서 메시지를 받으면 저장하고, 응답하고, 응답을 저장합니다. Vercel 스트리밍 API를 사용하여 스트리밍하세요.
react-markdown을 통해 메시지를 렌더링하고 필요에 따라 마크다운 → HTML 매퍼를 사용자 정의하세요.
Vercel AI SDK의 useChat 훅을 통해 채팅 상태를 저장하고 백엔드에 요청하세요.

👥 더 나은 데브필을 만드는 데 의견을 보태주세요

Top 1% 개발자로 거듭나기 위한 처방전, DevPill 구독자 여러분 안녕하세요 :)

저는 여러분들이 너무 궁금합니다.

어떤 마음으로 뉴스레터를 구독해주시는지,

어떤 환경에서 최고의 개발자가 되기 위해 고군분투하고 계신지,

제가 드릴 수 있는 도움은 어떤 게 있을지.

아래 설문조사에 참여해주시면 더 나은 콘텐츠를 제작할 수 있도록 힘쓰겠습니다. 설문에 참여해주시는 분들 전원 1개월 유료 멤버십 구독권을 선물드립니다. 유료 멤버십에서는 아래와 같은 혜택이 제공됩니다.

DevPill과의 1:1 온라인 커피챗
멤버십 전용 슬랙 채널 참여권

채용 정보 공유 / 스터디 그룹 형성 / 실시간 기술 질의응답

이력서/포트폴리오 템플릿

설문 참여하고 유료 멤버십 혜택받기 →

개발 실무

오픈AI 엔지니어도 부러워할 AI 챗봇을 3일 만에 만드는 비결

초보자도 쉽게 따라할 수 있는 AI 챗봇 서비스 구축 방법

데브필 DevPill 님에게 커피와 쪽지 보내기