실전 프로젝트 AI 챗봇 만들기 완벽 가이드

처음부터 끝까지 AI 챗봇을 직접 만들어보는 실전 프로젝트입니다. 아키텍처 설계부터 대화 모델 선택, UI 구현, 스트리밍 응답까지 단계별로 배워봅니다.

---

목차

1. 챗봇_아키텍처_설계
2. 대화_모델_선택
3. 채팅_UI_구현
4. 대화_컨텍스트_관리
5. 스트리밍_응답_구현
6. 배포_및_테스트

---

1. 챗봇 아키텍처 설계

김개발 씨는 회사에서 새로운 미션을 받았습니다. "우리 서비스에 AI 챗봇을 붙여보세요." 막상 시작하려니 어디서부터 손을 대야 할지 막막합니다.

그때 옆자리 박시니어 씨가 말했습니다. "챗봇도 결국 소프트웨어야.

먼저 전체 구조부터 그려봐."

챗봇 아키텍처란 AI 챗봇 시스템의 전체적인 구조와 각 컴포넌트 간의 관계를 설계하는 것입니다. 마치 건물을 짓기 전에 설계도를 그리는 것과 같습니다.

프론트엔드, 백엔드, AI 모델 API가 어떻게 서로 통신하는지 명확히 정의해야 안정적인 챗봇을 만들 수 있습니다.

다음 코드를 살펴봅시다.

// 챗봇 아키텍처의 핵심 구조 정의
const chatbotArchitecture = {
  // 프론트엔드: 사용자와 직접 상호작용
  frontend: {
    framework: 'React',
    components: ['ChatWindow', 'MessageInput', 'MessageList']
  },
  // 백엔드: 비즈니스 로직과 AI 연동
  backend: {
    runtime: 'Node.js',
    endpoints: ['/api/chat', '/api/history', '/api/stream']
  },
  // AI 서비스: 실제 응답 생성
  aiService: {
    provider: 'OpenAI',
    model: 'gpt-4',
    fallback: 'gpt-3.5-turbo'
  }
};

김개발 씨는 입사 6개월 차 주니어 개발자입니다. 팀장님이 "요즘 AI 챗봇이 대세니까, 우리 서비스에도 하나 붙여보자"라고 했을 때, 김개발 씨는 속으로 환호했습니다.

드디어 AI를 다뤄볼 기회가 온 것입니다. 하지만 막상 키보드 앞에 앉으니 막막했습니다.

ChatGPT API를 호출하면 끝인 줄 알았는데, 생각보다 고려할 것이 많았습니다. 어디서부터 시작해야 할까요?

박시니어 씨가 화이트보드 앞으로 김개발 씨를 불렀습니다. "챗봇도 결국 소프트웨어야.

레스토랑을 생각해봐." 레스토랑에는 세 가지 핵심 요소가 있습니다. 손님이 앉는 홀, 요리를 만드는 주방, 그리고 재료를 공급하는 식자재 업체입니다.

챗봇 아키텍처도 이와 똑같습니다. 프론트엔드는 레스토랑의 홀과 같습니다.

사용자가 직접 보고 상호작용하는 공간입니다. 채팅 창, 메시지 입력란, 전송 버튼 등이 여기에 해당합니다.

사용자 경험을 책임지는 가장 앞단입니다. 백엔드는 주방입니다.

손님의 주문을 받아서 요리를 만드는 곳입니다. 사용자의 메시지를 받아서 AI에게 전달하고, AI의 응답을 다시 사용자에게 전달합니다.

대화 기록 저장, 사용자 인증 등 복잡한 로직도 여기서 처리합니다. AI 서비스는 식자재 업체에 해당합니다.

실제로 "지능"을 제공하는 외부 서비스입니다. OpenAI, Anthropic, Google 등의 API를 통해 우리 챗봇에 두뇌를 심어줍니다.

위 코드를 살펴보면, 이 세 계층이 어떻게 구성되는지 한눈에 볼 수 있습니다. 프론트엔드는 React로 구성하고, 백엔드는 Node.js로 API 엔드포인트를 만들며, AI 서비스는 OpenAI를 사용합니다.

여기서 중요한 것은 각 계층의 역할을 명확히 분리하는 것입니다. 프론트엔드에서 직접 OpenAI API를 호출하면 안 됩니다.

API 키가 노출될 수 있고, 요청량 제어도 어렵기 때문입니다. 실무에서는 대부분 이 기본 구조를 따릅니다.

여기에 추가로 캐시 계층, 로드 밸런서, 모니터링 시스템 등이 붙을 수 있습니다. 하지만 핵심은 변하지 않습니다.

김개발 씨는 박시니어 씨의 설명을 듣고 화이트보드에 세 개의 박스를 그렸습니다. 이제 전체 그림이 보이기 시작했습니다.

"먼저 뼈대를 세우고, 살을 붙여나가면 되겠네요!"

실전 팁

💡 - 프론트엔드에서 절대 AI API를 직접 호출하지 마세요. 보안 문제가 발생합니다.

• fallback 모델을 항상 준비해두세요. 메인 모델이 과부하일 때 대응할 수 있습니다.

---

2. 대화 모델 선택

아키텍처 설계를 마친 김개발 씨는 이제 가장 중요한 결정을 내려야 했습니다. "어떤 AI 모델을 쓸까?" GPT-4, Claude, Gemini...

선택지가 너무 많아서 머리가 아픕니다. 박시니어 씨가 웃으며 말했습니다.

"도구 선택은 결국 용도에 달렸어."

대화 모델 선택은 챗봇의 두뇌를 결정하는 과정입니다. 마치 요리사를 고용하는 것과 같습니다.

비용, 성능, 응답 속도, 그리고 우리 서비스에 맞는 특성을 고려해야 합니다. 잘못된 선택은 비용 폭탄이나 품질 저하로 이어질 수 있습니다.

다음 코드를 살펴봅시다.

// 다양한 AI 모델 설정 예시
const modelConfigs = {
  // 고품질 응답이 필요한 경우
  premium: {
    provider: 'openai',
    model: 'gpt-4-turbo',
    maxTokens: 4096,
    temperature: 0.7
  },
  // 비용 효율적인 일반 대화
  standard: {
    provider: 'openai',
    model: 'gpt-3.5-turbo',
    maxTokens: 2048,
    temperature: 0.8
  },
  // 빠른 응답이 필요한 경우
  fast: {
    provider: 'anthropic',
    model: 'claude-3-haiku',
    maxTokens: 1024,
    temperature: 0.5
  }
};

김개발 씨는 OpenAI 공식 문서를 펼쳐놓고 한숨을 쉬었습니다. GPT-4, GPT-4-turbo, GPT-3.5-turbo...

이름만 봐서는 뭐가 다른지 알 수 없었습니다. 가격표를 보니 더 혼란스러웠습니다.

박시니어 씨가 커피를 건네며 말했습니다. "요리사를 뽑는다고 생각해봐.

미슐랭 쉐프가 있고, 동네 분식집 사장님이 있어. 둘 다 훌륭한 요리사지만, 상황에 따라 필요한 사람이 달라." GPT-4는 미슐랭 쉐프와 같습니다.

복잡한 요리도 완벽하게 해내지만, 인건비가 비쌉니다. 고객 상담, 기술 지원 등 정확도가 중요한 곳에 적합합니다.

하지만 단순한 인사말에 GPT-4를 쓰면 돈 낭비입니다. GPT-3.5-turbo는 실력 좋은 동네 식당 요리사입니다.

대부분의 요리를 무난하게 해냅니다. 가격도 GPT-4의 10분의 1 수준입니다.

일반적인 대화, FAQ 응답 등에 충분합니다. Claude나 Gemini 같은 다른 모델도 고려할 수 있습니다.

각각 장단점이 있습니다. Claude는 긴 문맥 처리에 강하고, Gemini는 Google 생태계와의 연동이 편리합니다.

위 코드에서 temperature라는 설정을 주목하세요. 이 값은 AI의 창의성을 조절합니다.

0에 가까우면 일관되고 예측 가능한 응답을, 1에 가까우면 다양하고 창의적인 응답을 생성합니다. 실무에서 자주 쓰는 전략이 있습니다.

바로 상황별 모델 분기입니다. 간단한 인사말은 저렴한 모델로 처리하고, 복잡한 질문이 들어오면 고성능 모델로 전환하는 것입니다.

maxTokens 설정도 중요합니다. 토큰은 AI가 처리하는 텍스트의 단위입니다.

이 값이 클수록 긴 응답을 받을 수 있지만, 비용도 그만큼 올라갑니다. 김개발 씨는 메모장을 꺼내 정리했습니다.

"우리 서비스는 일반 고객 상담이니까, 기본은 GPT-3.5-turbo로 하고, 복잡한 문의가 들어오면 GPT-4로 전환하자." 박시니어 씨가 고개를 끄덕였습니다. "좋아, 이제 API 키를 발급받고 테스트해보자."

실전 팁

💡 - 처음에는 저렴한 모델로 시작하고, 필요에 따라 업그레이드하세요.

• temperature는 용도에 맞게 조절하세요. 고객 상담은 낮게, 창작은 높게 설정합니다.

---

3. 채팅 UI 구현

모델을 선택한 김개발 씨는 이제 사용자가 실제로 보게 될 화면을 만들 차례입니다. "디자이너 없이 어떻게 채팅 UI를 만들지?" 걱정하는 김개발 씨에게 박시니어 씨가 말했습니다.

"카카오톡 화면 떠올려봐. 그게 정답이야."

채팅 UI는 사용자가 챗봇과 대화하는 인터페이스입니다. 마치 카카오톡이나 문자 메시지 앱처럼, 메시지가 주고받는 형태로 표시됩니다.

직관적이고 반응이 빠른 UI를 만들어야 사용자가 편하게 대화할 수 있습니다.

다음 코드를 살펴봅시다.

// React로 구현한 간단한 채팅 UI 컴포넌트
function ChatWindow({ messages, onSendMessage }) {
  const [input, setInput] = useState('');
  const messagesEndRef = useRef(null);

  // 새 메시지가 오면 자동 스크롤
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    onSendMessage(input);
    setInput('');
  };

  return (
    <div className="chat-container">
      <div className="message-list">
        {messages.map((msg, idx) => (
          <MessageBubble key={idx} message={msg} />
        ))}
        <div ref={messagesEndRef} />
      </div>
      <form onSubmit={handleSubmit} className="input-area">
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">전송</button>
      </form>
    </div>
  );
}

김개발 씨는 피그마를 열었다가 다시 닫았습니다. 디자인 감각이 없는 자신이 한심하게 느껴졌습니다.

그때 박시니어 씨가 다가왔습니다. "채팅 UI는 이미 정답이 있어.

카카오톡, 슬랙, 디스코드... 다 비슷하잖아.

왜 그런지 알아?" 생각해보니 그랬습니다. 모든 채팅 앱은 비슷한 구조를 가지고 있습니다.

메시지 목록이 위에 있고, 입력창이 아래에 있습니다. 내 메시지는 오른쪽, 상대방 메시지는 왼쪽에 표시됩니다.

이것을 대화형 UI 패턴이라고 합니다. 사용자가 이미 익숙한 패턴을 따르면, 별도의 학습 없이 바로 사용할 수 있습니다.

혁신적인 디자인보다 익숙한 디자인이 더 좋을 때가 있습니다. 위 코드에서 가장 중요한 부분은 자동 스크롤 기능입니다.

새 메시지가 도착하면 화면이 자동으로 아래로 스크롤됩니다. 이게 없으면 사용자가 매번 수동으로 스크롤해야 합니다.

useRef와 scrollIntoView를 조합해서 구현했습니다. messages 배열이 변경될 때마다 useEffect가 실행되고, 가장 아래 요소로 부드럽게 스크롤됩니다.

입력 처리도 신경 써야 합니다. 빈 메시지는 전송되지 않도록 **trim()**으로 검사합니다.

전송 후에는 입력창을 비워서 다음 메시지를 바로 입력할 수 있게 합니다. 실무에서는 몇 가지를 더 추가합니다.

로딩 인디케이터를 넣어서 AI가 응답 중임을 표시합니다. 점 세 개가 깜빡이는 애니메이션이 대표적입니다.

에러 처리도 중요합니다. 네트워크 오류가 발생하면 "다시 시도해주세요" 같은 메시지를 보여줘야 합니다.

사용자가 무한정 기다리게 하면 안 됩니다. 김개발 씨는 코드를 작성하면서 뿌듯함을 느꼈습니다.

생각보다 어렵지 않았습니다. 카카오톡처럼 예쁘지는 않지만, 기능은 완벽하게 작동했습니다.

"CSS는 나중에 다듬으면 돼. 일단 기능부터 완성하자." 박시니어 씨의 조언이 떠올랐습니다.

실전 팁

💡 - 자동 스크롤은 필수입니다. 사용자 경험에 큰 영향을 미칩니다.

• 엔터키로 전송, Shift+엔터로 줄바꿈 기능을 추가하면 더 편리합니다.

---

4. 대화 컨텍스트 관리

채팅 UI까지 완성한 김개발 씨. 테스트를 해보니 이상한 점을 발견했습니다.

"내 이름은 김개발이야"라고 말했는데, 바로 다음 질문에서 AI가 이름을 모른다고 합니다. "왜 이전 대화를 기억 못 하지?" 김개발 씨는 고개를 갸웃거렸습니다.

대화 컨텍스트 관리는 AI가 이전 대화 내용을 기억하게 만드는 것입니다. 마치 친구와 대화할 때 앞서 나눈 이야기를 기억하는 것처럼요.

AI 모델 자체는 상태가 없기 때문에, 매번 이전 대화 내역을 함께 보내줘야 합니다.

다음 코드를 살펴봅시다.

// 대화 컨텍스트를 관리하는 서비스
class ConversationManager {
  constructor(maxHistory = 10) {
    this.messages = [];
    this.maxHistory = maxHistory;
    // 시스템 프롬프트로 AI의 역할 정의
    this.systemPrompt = {
      role: 'system',
      content: '당신은 친절한 고객 상담 챗봇입니다.'
    };
  }

  addMessage(role, content) {
    this.messages.push({ role, content });
    // 최대 개수 초과 시 오래된 메시지 삭제
    if (this.messages.length > this.maxHistory) {
      this.messages.shift();
    }
  }

  getContext() {
    return [this.systemPrompt, ...this.messages];
  }
}

김개발 씨는 당황했습니다. 분명히 "내 이름은 김개발이야"라고 말했는데, "죄송합니다, 이름을 알려주시겠어요?"라는 답변이 돌아왔습니다.

버그인가? 아니면 AI가 멍청한 건가?

박시니어 씨가 웃으며 설명했습니다. "AI 모델은 금붕어 같아.

매 순간 새로운 대화라고 생각해." 충격적이지만 사실입니다. GPT-4든 Claude든, AI 모델은 기본적으로 상태가 없습니다.

이전에 무슨 대화를 나눴는지 전혀 기억하지 못합니다. 우리가 연속적인 대화라고 느끼는 것은 사실 착각입니다.

그렇다면 ChatGPT는 어떻게 대화를 기억하는 것처럼 보일까요? 비밀은 간단합니다.

매번 API를 호출할 때, 이전 대화 내역 전체를 함께 보내는 것입니다. 위 코드의 getContext() 메서드를 보세요.

시스템 프롬프트와 이전 메시지들을 배열로 묶어서 반환합니다. 이 배열을 AI API에 전송하면, AI는 마치 전체 대화를 읽은 것처럼 응답합니다.

하지만 문제가 있습니다. 대화가 길어지면 어떻게 될까요?

토큰 수가 늘어나고, 비용도 늘어납니다. 1시간 동안 대화하면 엄청난 비용이 발생할 수 있습니다.

그래서 maxHistory를 설정합니다. 최근 10개의 메시지만 유지하고, 오래된 것은 삭제합니다.

이렇게 하면 비용을 통제할 수 있습니다. 물론 10개 이전의 대화 내용은 잊어버리게 됩니다.

더 정교한 방법도 있습니다. 오래된 대화를 요약해서 보관하는 것입니다.

"사용자 이름은 김개발, 관심사는 프로그래밍"처럼 핵심만 추려서 시스템 프롬프트에 넣습니다. 시스템 프롬프트도 중요합니다.

위 코드에서 "당신은 친절한 고객 상담 챗봇입니다"라고 설정했습니다. 이 한 줄이 AI의 전체적인 성격과 말투를 결정합니다.

김개발 씨는 코드를 수정했습니다. 이제 이전 대화를 함께 보내니까, AI가 이름을 기억합니다.

"안녕하세요, 김개발 님!" 드디어 원하는 대로 동작했습니다.

실전 팁

💡 - 대화 히스토리 개수를 적절히 제한하세요. 너무 많으면 비용 폭탄, 너무 적으면 맥락 손실이 발생합니다.

• 시스템 프롬프트를 신중하게 작성하세요. AI의 첫인상을 결정합니다.

---

5. 스트리밍 응답 구현

김개발 씨가 만든 챗봇은 잘 동작했습니다. 하지만 한 가지 불만이 있었습니다.

질문을 보내면 10초 동안 아무 반응이 없다가, 갑자기 긴 답변이 한꺼번에 나타납니다. "ChatGPT처럼 글자가 타닥타닥 나오게 할 수 없을까?"

스트리밍 응답은 AI의 답변을 한 번에 받는 대신, 생성되는 대로 조금씩 받아서 보여주는 기술입니다. 마치 상대방이 타이핑하는 것을 실시간으로 보는 것과 같습니다.

사용자는 기다리는 느낌 없이 자연스럽게 응답을 읽을 수 있습니다.

다음 코드를 살펴봅시다.

// 스트리밍 응답을 처리하는 함수
async function streamChatResponse(messages, onChunk) {
  const response = await fetch('/api/chat/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages })
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    // 받은 청크를 텍스트로 변환
    const chunk = decoder.decode(value);
    onChunk(chunk); // UI에 실시간 반영
  }
}

// 사용 예시
streamChatResponse(messages, (chunk) => {
  setCurrentMessage(prev => prev + chunk);
});

김개발 씨는 자신이 만든 챗봇을 테스트하다가 답답함을 느꼈습니다. "안녕하세요, 오늘 날씨 어때요?"라고 물었더니, 10초 동안 빈 화면만 보다가 갑자기 긴 답변이 뿅 하고 나타났습니다.

박시니어 씨에게 물었습니다. "ChatGPT는 글자가 하나씩 나타나는데, 왜 우리 건 이래요?" "그게 바로 스트리밍이야.

물을 한 바가지 받아서 한 번에 쏟는 것과, 수도꼭지에서 조금씩 흘러나오는 것의 차이야." 일반적인 API 호출은 일괄 응답 방식입니다. AI가 전체 답변을 완성할 때까지 기다렸다가, 한 번에 받습니다.

긴 답변일수록 기다리는 시간이 길어집니다. 스트리밍 방식은 다릅니다.

AI가 단어 하나, 문장 하나를 생성할 때마다 바로바로 전송합니다. 프론트엔드에서는 이 조각들을 받아서 화면에 이어붙입니다.

위 코드에서 ReadableStream을 사용합니다. response.body.getReader()로 스트림 리더를 얻고, while 루프를 돌면서 데이터를 조각조각 읽습니다.

각 조각을 **청크(chunk)**라고 부릅니다. 청크가 도착할 때마다 onChunk 콜백이 호출되고, UI가 업데이트됩니다.

사용자 눈에는 글자가 실시간으로 타이핑되는 것처럼 보입니다. 백엔드에서도 스트리밍을 지원해야 합니다.

OpenAI API는 stream: true 옵션을 제공합니다. 이 옵션을 켜면 응답이 Server-Sent Events(SSE) 형태로 전송됩니다.

스트리밍의 또 다른 장점은 에러 처리입니다. 일괄 응답에서 중간에 오류가 나면 아무것도 받지 못합니다.

스트리밍에서는 오류 전까지 받은 내용은 유지됩니다. 물론 단점도 있습니다.

구현이 복잡하고, 전체 응답을 미리 알 수 없어서 로딩 바를 표시하기 어렵습니다. 하지만 사용자 경험 향상 효과가 워낙 크기 때문에, 대부분의 챗봇은 스트리밍을 채택합니다.

김개발 씨는 코드를 수정했습니다. 이제 질문을 보내면 1초도 안 되어 첫 글자가 나타납니다.

글자가 줄줄이 나오는 모습을 보며 김개발 씨는 미소를 지었습니다.

실전 팁

💡 - 스트리밍 중에는 "전송" 버튼을 비활성화하세요. 중복 요청을 방지합니다.

• 스트리밍이 완료되면 전체 응답을 대화 히스토리에 저장하세요.

---

6. 배포 및 테스트

드디어 챗봇이 완성되었습니다. 로컬에서는 완벽하게 동작합니다.

이제 세상에 공개할 시간입니다. 하지만 김개발 씨는 걱정이 앞섭니다.

"배포하고 나서 터지면 어떡하지?" 박시니어 씨가 어깨를 두드렸습니다. "그래서 테스트를 하는 거야."

배포와 테스트는 만든 챗봇을 실제 사용자에게 제공하는 마지막 단계입니다. 마치 요리사가 손님에게 음식을 내놓기 전에 맛을 보는 것처럼, 충분한 테스트를 거쳐야 합니다.

배포 환경 설정, 환경 변수 관리, 모니터링까지 꼼꼼히 챙겨야 합니다.

다음 코드를 살펴봅시다.

// 배포 전 체크리스트와 환경 설정
const deployConfig = {
  // 환경 변수는 절대 코드에 하드코딩하지 않기
  env: {
    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: 'production'
  },
  // 에러 핸들링 미들웨어
  errorHandler: (err, req, res, next) => {
    console.error('Error:', err.message);
    // 사용자에게는 상세 에러를 노출하지 않음
    res.status(500).json({ error: '서버 오류가 발생했습니다.' });
  },
  // 헬스체크 엔드포인트
  healthCheck: (req, res) => {
    res.json({ status: 'ok', timestamp: new Date().toISOString() });
  }
};

// 간단한 테스트 코드
describe('ChatBot API', () => {
  test('should respond to greeting', async () => {
    const response = await request(app)
      .post('/api/chat')
      .send({ message: '안녕하세요' });
    expect(response.status).toBe(200);
    expect(response.body.reply).toBeDefined();
  });
});

김개발 씨는 로컬에서 챗봇을 테스트하며 뿌듯해했습니다. "완벽해!" 하지만 박시니어 씨는 고개를 저었습니다.

"로컬에서 되는 건 당연한 거야. 문제는 실제 서버에서도 잘 도는지야." 배포는 단순히 코드를 서버에 올리는 것이 아닙니다.

수많은 것들을 점검해야 합니다. 가장 중요한 것은 환경 변수 관리입니다.

API 키를 코드에 직접 적으면 안 됩니다. GitHub에 올리는 순간, 전 세계가 당신의 API 키를 볼 수 있습니다.

해커가 이 키를 가져가면 수백만 원의 요금이 청구될 수 있습니다. 위 코드에서 process.env.OPENAI_API_KEY를 사용합니다.

이렇게 하면 환경 변수에서 값을 읽어옵니다. 실제 키는 서버의 환경 설정에만 저장합니다.

에러 핸들링도 중요합니다. 개발 환경에서는 상세한 에러 메시지가 도움이 됩니다.

하지만 운영 환경에서 "OpenAI API key is invalid" 같은 메시지를 사용자에게 보여주면 안 됩니다. 보안 취약점이 됩니다.

위 코드의 errorHandler를 보세요. 에러는 콘솔에 기록하지만, 사용자에게는 "서버 오류가 발생했습니다"라는 일반적인 메시지만 보여줍니다.

헬스체크 엔드포인트는 서버가 살아있는지 확인하는 간단한 API입니다. 모니터링 도구가 주기적으로 이 엔드포인트를 호출해서 서버 상태를 체크합니다.

응답이 없으면 알림을 보냅니다. 테스트 코드도 작성해야 합니다.

위 코드의 테스트는 "안녕하세요"를 보내면 응답이 오는지 확인합니다. 이런 기본적인 테스트만 있어도 배포 후 치명적인 오류를 막을 수 있습니다.

배포 플랫폼은 여러 가지가 있습니다. Vercel, AWS, Google Cloud 등 선택지가 많습니다.

처음에는 Vercel처럼 간단한 플랫폼으로 시작하는 것을 추천합니다. 김개발 씨는 체크리스트를 만들었습니다.

환경 변수 확인, 에러 핸들링 확인, 테스트 통과, 헬스체크 응답 확인. 하나씩 체크하고 나서야 배포 버튼을 눌렀습니다.

배포가 완료되고, 팀원들이 챗봇을 사용하기 시작했습니다. 버그 제보가 들어오기도 했지만, 큰 문제 없이 운영되었습니다.

박시니어 씨가 말했습니다. "축하해, 이제 진짜 개발자가 된 거야."

실전 팁

💡 - API 키는 절대 코드에 직접 적지 마세요. 환경 변수를 사용하세요.

• 배포 전 간단한 테스트라도 꼭 작성하세요. 나중에 큰 도움이 됩니다.
• 모니터링 도구를 연동해서 서버 상태를 항상 확인하세요.

---

이상으로 학습을 마칩니다. 위 내용을 직접 코드로 작성해보면서 익혀보세요!