Web UI로 ChatGPT처럼 대화하기 완벽 가이드

Python FastAPI와 HTML로 나만의 ChatGPT 웹 인터페이스를 만드는 방법을 알아봅니다. 스트리밍 응답부터 대화 히스토리 관리, 실제 배포까지 단계별로 설명합니다.

1. chat web.py 서버 구조

김개발 씨는 회사에서 ChatGPT를 업무에 활용하고 있었습니다. 그런데 어느 날 팀장님이 말씀하셨습니다.

"우리 회사 전용 AI 챗봇을 만들 수 있을까요? ChatGPT처럼 웹에서 대화할 수 있으면 좋겠는데." 김개발 씨는 고민에 빠졌습니다.

도대체 어디서부터 시작해야 할까요?

chat_web.py는 AI 챗봇의 두뇌 역할을 하는 백엔드 서버입니다. 마치 식당의 주방장처럼, 손님(사용자)의 주문(질문)을 받아 요리(답변)를 만들어 내보내는 역할을 합니다.

FastAPI라는 프레임워크를 사용하면 놀랍도록 간단하게 이 서버를 구축할 수 있습니다.

다음 코드를 살펴봅시다.

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse, StreamingResponse
from fastapi.staticfiles import StaticFiles
from openai import OpenAI

# FastAPI 앱 생성 - 우리 서버의 시작점입니다
app = FastAPI()
client = OpenAI()

# HTML 파일을 제공하는 메인 라우트
@app.get("/", response_class=HTMLResponse)
async def get_chat_page():
    with open("ui.html", "r", encoding="utf-8") as f:
        return f.read()

# 채팅 API 엔드포인트 - 사용자 메시지를 받아 AI 응답 반환
@app.post("/chat")
async def chat(request: Request):
    data = await request.json()
    messages = data.get("messages", [])
    return StreamingResponse(generate_response(messages))

김개발 씨는 인터넷을 뒤져가며 공부를 시작했습니다. 그리고 곧 깨달았습니다.

웹 기반 챗봇을 만들려면 크게 두 가지가 필요하다는 것을요. 하나는 사용자와 대화할 화면(프론트엔드), 다른 하나는 AI와 통신할 서버(백엔드)입니다.

오늘 우리가 살펴볼 chat_web.py는 바로 이 백엔드 서버입니다. 이 파일 하나로 사용자의 메시지를 받고, OpenAI에 전달하고, 응답을 다시 사용자에게 보내주는 모든 일을 처리합니다.

그렇다면 FastAPI란 무엇일까요? 쉽게 비유하자면, FastAPI는 식당을 차릴 때 필요한 주방 시스템과 같습니다.

주문을 받는 POS기, 요리를 만드는 조리대, 음식을 내보내는 서빙 창구가 모두 갖춰진 올인원 솔루션입니다. 개발자는 FastAPI 덕분에 복잡한 서버 구축 작업을 몇 줄의 코드로 끝낼 수 있습니다.

코드의 첫 부분을 살펴봅시다. from fastapi import FastAPI로 시작하는 줄들은 필요한 도구들을 가져오는 것입니다.

마치 요리를 시작하기 전에 재료와 조리도구를 꺼내 놓는 것과 같습니다. **app = FastAPI()**는 우리 서버의 본체를 만드는 코드입니다.

이 한 줄로 웹 서버가 탄생합니다. 그리고 **client = OpenAI()**로 OpenAI와 통신할 준비를 마칩니다.

**@app.get("/")**이라는 특이한 문법이 보이시나요? 이것을 데코레이터라고 부릅니다.

사용자가 웹 브라우저에서 우리 서버 주소로 접속하면, 이 함수가 실행되어 HTML 페이지를 보여줍니다. **@app.post("/chat")**은 더 중요한 부분입니다.

사용자가 메시지를 보내면 이 함수가 호출됩니다. POST라는 것은 데이터를 서버로 보낼 때 사용하는 방식입니다.

편지를 우체통에 넣는다고 생각하시면 됩니다. 함수 안을 보면 **await request.json()**으로 사용자가 보낸 데이터를 읽습니다.

await는 비동기 처리를 위한 키워드인데, 쉽게 말해 "데이터가 올 때까지 기다려"라는 뜻입니다. 마지막으로 StreamingResponse를 반환합니다.

이것이 바로 ChatGPT처럼 글자가 타이핑되듯 나타나게 해주는 비밀입니다. 다음 섹션에서 자세히 다루겠습니다.

김개발 씨는 이 코드를 보고 감탄했습니다. "이게 전부라고요?

정말 이것만으로 서버가 돌아가나요?" 네, 정말 이것만으로 충분합니다. FastAPI의 강력함이 바로 여기에 있습니다.

실전 팁

💡 - FastAPI는 자동으로 API 문서를 생성합니다. 서버 실행 후 /docs 경로로 접속해보세요.

async/await를 사용하면 동시에 여러 사용자의 요청을 효율적으로 처리할 수 있습니다.

2. ui.html 프론트엔드 분석

서버가 준비되었으니 이제 사용자가 실제로 보고 사용할 화면을 만들 차례입니다. 김개발 씨는 ChatGPT의 깔끔한 인터페이스를 떠올렸습니다.

"저런 화면을 만들려면 복잡한 프레임워크가 필요하지 않을까?" 하지만 놀랍게도 순수 HTML과 JavaScript만으로도 충분히 멋진 채팅 화면을 만들 수 있습니다.

ui.html은 사용자가 직접 보고 상호작용하는 채팅 인터페이스입니다. 마치 카페의 인테리어와 같습니다.

손님이 편하게 앉아 주문할 수 있도록 테이블과 의자를 배치하고, 메뉴판을 보기 좋게 만드는 것처럼요. 메시지 입력창, 전송 버튼, 대화 표시 영역으로 구성됩니다.

다음 코드를 살펴봅시다.

<!DOCTYPE html>
<html>
<head>
    <title>My ChatGPT</title>
    <style>
        /* 채팅 컨테이너 스타일링 */
        .chat-container { max-width: 800px; margin: 0 auto; }
        .message { padding: 12px; margin: 8px 0; border-radius: 8px; }
        .user-message { background: #007bff; color: white; }
        .ai-message { background: #f1f1f1; color: black; }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="chat-box"></div>
        <input type="text" id="user-input" placeholder="메시지를 입력하세요">
        <button onclick="sendMessage()">전송</button>
    </div>
</body>
</html>

김개발 씨는 디자이너가 아니었습니다. 하지만 기본적인 HTML과 CSS만 알면 충분히 쓸만한 채팅 화면을 만들 수 있다는 것을 알게 되었습니다.

HTML 파일의 구조를 살펴봅시다. 크게 세 부분으로 나뉩니다.

head 영역에는 페이지 제목과 스타일이 들어가고, body 영역에는 실제 화면에 보이는 요소들이 들어갑니다. style 태그 안의 CSS 코드를 보겠습니다.

.chat-container는 전체 채팅 영역을 감싸는 박스입니다. max-width: 800px로 너무 넓어지지 않게 제한하고, margin: 0 auto로 화면 중앙에 배치합니다.

.message 클래스는 각 메시지 말풍선의 기본 스타일입니다. padding은 내용과 테두리 사이의 여백, border-radius는 모서리를 둥글게 만드는 속성입니다.

이 작은 설정 하나로 메시지가 훨씬 부드러워 보입니다. .user-message와 .ai-message는 사용자와 AI의 메시지를 구분합니다.

파란색 배경의 사용자 메시지, 회색 배경의 AI 메시지로 누가 말한 것인지 한눈에 알 수 있습니다. 카카오톡이나 메신저 앱에서 익숙하게 보던 패턴입니다.

body 영역의 구조는 더욱 단순합니다. chat-box라는 div가 대화 내용을 표시하는 영역입니다.

새로운 메시지가 오면 여기에 추가됩니다. input 태그는 사용자가 텍스트를 입력하는 곳입니다.

placeholder 속성으로 힌트 텍스트를 보여줄 수 있습니다. 처음 화면을 열면 "메시지를 입력하세요"라는 안내문이 연하게 표시됩니다.

button 태그에 주목해주세요. **onclick="sendMessage()"**라는 속성이 있습니다.

버튼을 클릭하면 sendMessage라는 JavaScript 함수가 실행된다는 뜻입니다. 이 함수에서 실제로 서버와 통신하는 로직이 들어갑니다.

박시니어 씨가 김개발 씨에게 조언했습니다. "프론트엔드는 처음에 너무 복잡하게 만들지 마세요.

기능이 먼저 돌아가게 만들고, 디자인은 나중에 다듬어도 됩니다." 실제로 이 간단한 HTML만으로도 ChatGPT와 비슷한 사용자 경험을 제공할 수 있습니다. 물론 더 예쁘게 만들고 싶다면 CSS를 추가하면 됩니다.

하지만 핵심 기능은 이미 갖춰진 상태입니다.

실전 팁

💡 - 엔터 키로도 메시지를 전송하려면 input에 onkeypress 이벤트를 추가하세요.

반응형 디자인을 위해 @media 쿼리로 모바일 화면도 대응할 수 있습니다.

3. 스트리밍 응답 구현

김개발 씨가 처음 만든 챗봇은 답변이 한꺼번에 나타났습니다. 질문을 보내고 10초를 기다리면, 갑자기 긴 답변이 툭 하고 나타나는 방식이었습니다.

"뭔가 어색한데..." 그때 박시니어 씨가 힌트를 줬습니다. "ChatGPT처럼 글자가 타이핑되듯 나오게 해봐요.

사용자 경험이 완전히 달라질 거예요."

스트리밍 응답은 AI의 답변을 한 글자씩 실시간으로 전송하는 기술입니다. 마치 상대방이 실시간으로 타이핑하는 것을 지켜보는 것과 같습니다.

사용자는 기다림 없이 즉각적인 피드백을 받으며, 전체 응답이 완성되기 전에도 내용을 읽기 시작할 수 있습니다.

다음 코드를 살펴봅시다.

async def generate_response(messages):
    # OpenAI API에 스트리밍 모드로 요청
    response = client.chat.completions.create(
        model="gpt-4",
        messages=messages,
        stream=True  # 핵심! 스트리밍 활성화
    )

    # 응답이 도착할 때마다 한 조각씩 전송
    for chunk in response:
        if chunk.choices[0].delta.content:
            content = chunk.choices[0].delta.content
            # Server-Sent Events 형식으로 전송
            yield f"data: {content}\n\n"

    yield "data: [DONE]\n\n"

스트리밍이 왜 중요할까요? 한 가지 실험을 해봅시다.

똑같이 10초가 걸리는 두 가지 상황을 상상해보세요. 첫 번째는 10초 동안 아무것도 안 보이다가 답변이 한꺼번에 나타나는 경우입니다.

두 번째는 첫 글자부터 마지막 글자까지 10초에 걸쳐 차례로 나타나는 경우입니다. 객관적으로는 같은 시간이지만, 사용자가 느끼는 체감 시간은 완전히 다릅니다.

두 번째 방식이 바로 스트리밍입니다. 실제로 ChatGPT, Claude 같은 서비스들이 모두 이 방식을 사용합니다.

코드를 살펴봅시다. client.chat.completions.create() 함수를 호출할 때 stream=True 옵션이 핵심입니다.

이 옵션 하나로 OpenAI API가 응답을 조각조각 나눠서 보내주기 시작합니다. for chunk in response 루프가 이 조각들을 하나씩 받아옵니다.

마치 수도꼭지에서 물이 한 방울씩 떨어지는 것처럼, 텍스트가 조금씩 도착합니다. chunk.choices[0].delta.content에서 실제 텍스트 내용을 꺼냅니다.

delta라는 이름이 의미심장합니다. 수학에서 델타는 '변화량'을 뜻하는데, 여기서도 마찬가지입니다.

전체 응답이 아니라, 이전 대비 '새로 추가된 부분'만 담겨 있습니다. yield라는 키워드를 처음 보시는 분도 계실 겁니다.

일반적인 return은 값을 반환하고 함수가 끝납니다. 하지만 yield는 값을 반환하면서도 함수가 계속 실행됩니다.

마치 컨베이어 벨트처럼 값을 하나씩 내보내는 것입니다. f"data: {content}\n\n" 형식은 Server-Sent Events(SSE) 프로토콜입니다.

서버가 클라이언트에게 실시간으로 데이터를 보내는 표준 방식입니다. 웹소켓보다 간단하면서도 우리 용도에는 충분합니다.

프론트엔드에서는 이 스트림을 어떻게 받을까요? EventSource API나 fetch의 ReadableStream을 사용합니다.

도착하는 데이터를 순서대로 화면에 추가하면, 자연스러운 타이핑 효과가 완성됩니다. 마지막의 **"data: [DONE]"**은 전송 완료 신호입니다.

프론트엔드는 이 신호를 받으면 "아, 응답이 다 왔구나"하고 마무리 처리를 합니다. 김개발 씨는 스트리밍을 적용한 후 팀원들의 반응을 살폈습니다.

"오, ChatGPT 같아!" "훨씬 자연스럽네요!" 같은 시간이 걸려도 사용자 경험은 하늘과 땅 차이였습니다.

실전 팁

💡 - 네트워크가 불안정할 때를 대비해 재연결 로직을 추가하면 좋습니다.

스트리밍 중에 사용자가 취소할 수 있는 버튼도 고려해보세요.

4. 대화 히스토리 관리

김개발 씨의 챗봇은 점점 쓸만해지고 있었습니다. 그런데 이상한 문제가 발생했습니다.

"아까 말한 그거 다시 설명해줘"라고 물으면 AI가 "무엇을 말씀하시는 건가요?"라고 되물었습니다. 맥락을 전혀 기억하지 못하는 것이었습니다.

"어떻게 하면 대화 흐름을 이어갈 수 있을까요?"

대화 히스토리는 이전 대화 내용을 저장하고 AI에게 함께 전달하는 기능입니다. 마치 대화 상대가 메모장을 들고 있어서 이전에 나눈 이야기를 모두 기억하는 것과 같습니다.

이 기능이 있어야 자연스러운 대화가 가능합니다.

다음 코드를 살펴봅시다.

// 프론트엔드에서 대화 히스토리 관리
let conversationHistory = [];

async function sendMessage() {
    const userInput = document.getElementById("user-input").value;

    // 사용자 메시지를 히스토리에 추가
    conversationHistory.push({
        role: "user",
        content: userInput
    });

    // 전체 히스토리를 서버에 전송
    const response = await fetch("/chat", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({messages: conversationHistory})
    });

    // AI 응답도 히스토리에 추가
    const aiMessage = await processStream(response);
    conversationHistory.push({role: "assistant", content: aiMessage});
}

AI가 맥락을 이해하지 못하는 이유가 무엇일까요? 사실 AI는 매 요청을 완전히 새로운 대화로 인식합니다.

비유하자면 이렇습니다. 여러분이 상담사와 대화한다고 상상해보세요.

그런데 이 상담사는 5분마다 기억이 리셋됩니다. 5분 전에 "저는 개발자예요"라고 말했어도, 지금은 기억하지 못합니다.

그래서 매번 처음부터 설명해야 합니다. OpenAI API도 마찬가지입니다.

기본적으로 이전 대화를 기억하지 않습니다. 그렇다면 어떻게 해야 할까요?

답은 간단합니다. 우리가 직접 이전 대화 내용을 매번 함께 보내주면 됩니다. 코드를 살펴봅시다.

conversationHistory라는 배열이 핵심입니다. 이 배열에 모든 대화 내용이 순서대로 쌓입니다.

사용자가 메시지를 보내면 먼저 push로 히스토리에 추가합니다. **role: "user"**는 이 메시지가 사용자가 보낸 것임을 표시합니다.

AI의 응답은 **role: "assistant"**로 표시됩니다. fetch로 서버에 요청할 때, 방금 입력한 메시지만 보내는 게 아닙니다.

messages: conversationHistory로 지금까지의 모든 대화를 통째로 보냅니다. 서버는 이 전체 히스토리를 OpenAI API에 그대로 전달합니다.

AI가 응답하면, 그 응답도 히스토리에 추가합니다. 이렇게 하면 다음 질문 때 AI는 이전 대화 맥락을 모두 알고 있는 상태에서 답변할 수 있습니다.

하지만 주의할 점이 있습니다. 대화가 길어지면 히스토리도 계속 커집니다.

OpenAI API에는 토큰 제한이 있어서, 너무 긴 히스토리는 에러를 발생시킵니다. 이를 해결하는 방법은 여러 가지입니다.

가장 간단한 방법은 최근 N개의 메시지만 유지하는 것입니다. 더 정교한 방법은 오래된 대화를 요약해서 저장하는 것입니다.

어떤 방식이든 토큰 수를 관리해야 합니다. 또 하나 고려할 점은 시스템 메시지입니다.

히스토리 맨 앞에 **role: "system"**으로 AI의 성격이나 역할을 정의할 수 있습니다. "당신은 친절한 고객 상담사입니다"처럼요.

이 시스템 메시지는 항상 유지하면서, 나머지 대화만 관리하면 됩니다. 김개발 씨는 히스토리 관리를 추가한 후 다시 테스트했습니다.

"아까 말한 그거 다시 설명해줘." AI가 정확히 이전 맥락을 이해하고 답변했습니다. 드디어 자연스러운 대화가 가능해진 것입니다.

실전 팁

💡 - 토큰 제한에 걸리지 않도록 히스토리 길이를 주기적으로 체크하세요.

중요한 대화는 로컬 스토리지에 저장해서 새로고침해도 유지되게 할 수 있습니다.

5. 실제 배포 방법

김개발 씨의 로컬 컴퓨터에서는 챗봇이 완벽하게 돌아갔습니다. 이제 팀원들에게 보여줄 시간입니다.

"제 컴퓨터로 오세요"라고 할 수는 없는 노릇입니다. 인터넷에 공개해서 누구나 접속할 수 있게 만들어야 합니다.

이것을 바로 배포라고 합니다.

배포는 로컬에서 개발한 애플리케이션을 인터넷에 공개하는 과정입니다. 마치 집에서 만든 요리를 식당에 내놓는 것과 같습니다.

서버를 실행하고, 외부에서 접속할 수 있게 설정하고, 안정적으로 운영되도록 관리해야 합니다.

다음 코드를 살펴봅시다.

# 1. 필요한 패키지 설치
pip install fastapi uvicorn openai python-dotenv

# 2. 환경 변수 설정 (.env 파일)
OPENAI_API_KEY=sk-your-api-key-here

# 3. 서버 실행 (개발용)
uvicorn chat_web:app --reload --host 0.0.0.0 --port 8000

# 4. 프로덕션 배포 (PM2 사용)
pm2 start "uvicorn chat_web:app --host 0.0.0.0 --port 8000" --name chatbot

# 5. 서버 상태 확인
pm2 status
pm2 logs chatbot

배포라는 단어가 막막하게 느껴지시나요? 차근차근 단계별로 살펴봅시다.

첫 번째 단계는 필요한 패키지 설치입니다. FastAPI는 우리가 만든 서버 프레임워크, uvicorn은 이 서버를 실행해주는 엔진입니다.

자동차로 비유하면 FastAPI가 차체, uvicorn이 엔진입니다. python-dotenv는 환경 변수를 관리해주는 도구입니다.

환경 변수란 무엇일까요? 코드에 직접 적으면 안 되는 민감한 정보를 말합니다.

OpenAI API 키가 대표적입니다. 이 키가 유출되면 누군가 내 비용으로 API를 마구 사용할 수 있습니다.

.env 파일에 따로 저장하고, 이 파일은 절대 GitHub에 올리면 안 됩니다. uvicorn chat_web:app이라는 명령어를 분석해봅시다.

chat_web은 파이썬 파일 이름, app은 그 안에 정의한 FastAPI 인스턴스 이름입니다. --reload 옵션은 코드가 바뀌면 자동으로 재시작하는 개발용 기능입니다.

--host 0.0.0.0은 외부에서도 접속할 수 있게 허용하는 설정입니다. 여기까지만 해도 서버는 돌아갑니다.

하지만 문제가 있습니다. 터미널을 닫으면 서버도 꺼집니다.

SSH 연결이 끊어져도 마찬가지입니다. 24시간 돌아가는 서비스를 만들려면 PM2 같은 프로세스 매니저가 필요합니다.

PM2는 Node.js 생태계에서 태어났지만, 파이썬 서버도 관리할 수 있습니다. pm2 start 명령어로 서버를 백그라운드에서 실행합니다.

--name chatbot으로 이름을 붙여두면 나중에 관리하기 편합니다. pm2 status로 현재 실행 중인 프로세스를 확인하고, pm2 logs로 실시간 로그를 볼 수 있습니다.

에러가 발생하면 여기서 원인을 찾을 수 있습니다. 보안도 중요합니다.

실제 서비스라면 HTTPS를 적용해야 합니다. Nginx를 리버스 프록시로 두고, Let's Encrypt로 무료 SSL 인증서를 발급받는 것이 일반적입니다.

김개발 씨는 회사 서버에 챗봇을 배포했습니다. 팀원들에게 URL을 공유하자, 각자 자리에서 접속해 테스트하기 시작했습니다.

"오, 진짜 ChatGPT 같다!" 뿌듯한 순간이었습니다.

실전 팁

💡 - .env 파일은 반드시 .gitignore에 추가하세요. API 키 유출은 치명적입니다.

서버 재시작이 필요하면 pm2 reload를 사용하세요. 무중단 배포가 가능합니다.

6. 나만의 ChatGPT 호스팅

김개발 씨의 챗봇은 팀 내에서 큰 호응을 얻었습니다. 그러자 팀장님이 새로운 요구사항을 주셨습니다.

"이걸 고객 지원용으로 발전시킬 수 있을까요? 우리 회사 제품에 특화된 답변을 하게 만들고 싶어요." 김개발 씨는 고민에 빠졌습니다.

어떻게 하면 '나만의 ChatGPT'를 만들 수 있을까요?

나만의 ChatGPT는 범용 AI를 특정 목적에 맞게 커스터마이징한 것입니다. 마치 백과사전 같은 AI에게 특정 분야의 전문가 역할을 부여하는 것과 같습니다.

시스템 프롬프트, 지식 베이스 연동, 기능 제한 등을 통해 원하는 방향으로 AI를 튜닝할 수 있습니다.

다음 코드를 살펴봅시다.

# 시스템 프롬프트로 AI 역할 정의
SYSTEM_PROMPT = """당신은 ABC 회사의 고객 지원 상담사입니다.
다음 규칙을 반드시 따르세요:

3. 회사 제품과 관련 없는 질문은 정중히 거절합니다.

범용 ChatGPT를 특정 목적의 전문가로 만드는 방법을 알아봅시다. 가장 강력한 도구는 시스템 프롬프트입니다.

대화 히스토리 맨 앞에 **role: "system"**으로 지시사항을 넣습니다. AI는 이 지시를 최우선으로 따릅니다.

위 코드의 시스템 프롬프트를 보세요. "ABC 회사의 고객 지원 상담사"라는 역할을 부여했습니다.

그리고 세 가지 규칙을 명시했습니다. 이렇게 하면 AI는 일반적인 ChatGPT와 다르게 행동합니다.

규칙을 정할 때는 구체적일수록 좋습니다. "친절하게 응대하세요"보다 "모든 답변을 '안녕하세요, 고객님'으로 시작하세요"가 더 명확합니다.

AI는 모호한 지시보다 명확한 지시를 더 잘 따릅니다. create_messages 함수를 보세요.

시스템 프롬프트를 항상 맨 앞에 넣습니다. 히스토리가 아무리 길어져도 시스템 프롬프트는 사라지지 않습니다.

이것이 AI의 기본 성격을 유지하는 비결입니다. filter_response 함수는 추가 안전장치입니다.

AI가 시스템 프롬프트를 따르더라도, 가끔 의도치 않은 답변을 할 수 있습니다. 이럴 때를 대비해 응답을 한 번 더 검사합니다.

민감한 단어가 포함되어 있으면 정중한 거절 메시지로 대체합니다. 더 발전시키고 싶다면 **RAG(Retrieval Augmented Generation)**를 고려해보세요.

회사 문서, FAQ, 제품 매뉴얼을 데이터베이스에 저장하고, 질문과 관련된 내용을 찾아서 AI에게 함께 제공하는 방식입니다. 이렇게 하면 AI가 회사 정보를 정확하게 답변할 수 있습니다.

비용 관리도 중요합니다. API 호출마다 비용이 발생하므로, 사용량을 모니터링해야 합니다.

사용자당 일일 제한을 두거나, 답변 길이를 제한하는 방법이 있습니다. 김개발 씨는 시스템 프롬프트를 세심하게 작성하고, 회사 FAQ를 연동했습니다.

테스트 결과, AI가 회사 제품에 대해 정확하게 답변하기 시작했습니다. 팀장님은 흡족해하셨습니다.

"이거 정말 쓸만한데요?" 박시니어 씨가 마지막 조언을 건넸습니다. "잘 만들었어요.

하지만 AI는 완벽하지 않다는 것을 항상 기억하세요. 중요한 정보는 사람이 검토하는 프로세스를 추가하는 게 좋아요." 나만의 ChatGPT를 만드는 여정은 여기서 끝이 아닙니다.

사용자 피드백을 수집하고, 시스템 프롬프트를 개선하고, 새로운 기능을 추가하면서 계속 발전시켜 나갈 수 있습니다.

실전 팁

💡 - 시스템 프롬프트는 짧고 명확하게 작성하되, 중요한 규칙은 번호를 붙여 강조하세요.

프롬프트 엔지니어링은 실험의 연속입니다. 다양한 버전을 테스트하고 최적의 결과를 찾으세요.

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

#Python#FastAPI#OpenAI#Streaming#ChatGPT#AI,LLM,Deep Learning

Web UI로 ChatGPT처럼 대화하기 완벽 가이드

# Web UI로 ChatGPT처럼 대화하기 완벽 가이드 Python FastAPI와 HTML로 나만의 ChatGPT 웹 인터페이스를 만드는 방법을 알아봅니다. 스트리밍 응답부터 대화 히스토리 관리, 실제 배포까지 단계별로 설명합니다. --- ## 목차 1. [chat_web.py 서버 구조](#chat-web.py-서버-구조) 2. [ui.html 프론트엔드 분석](#ui.html-프론트엔드-분석) 3. [스트리밍 응답 구현](#스트리밍-응답-구현) 4. [대화 히스토리 관리](#대화-히스토리-관리) 5. [실제 배포 방법](#실제-배포-방법) 6. [나만의 ChatGPT 호스팅](#나만의-chatgpt-호스팅) 3. [회사 제품과 관련 없는 질문은 정중히 거절합니다.](#회사-제품과-관련-없는-질문은-정중히-거절합니다.) --- ## 1. chat_web.py 서버 구조 김개발 씨는 회사에서 ChatGPT를 업무에 활용하고 있었습니다. 그런데 어느 날 팀장님이 말씀하셨습니다. "우리 회사 전용 AI 챗봇을 만들 수 있을까요? ChatGPT처럼 웹에서 대화할 수 있으면 좋겠는데." 김개발 씨는 고민에 빠졌습니다. 도대체 어디서부터 시작해야 할까요? **chat_web.py**는 AI 챗봇의 두뇌 역할을 하는 백엔드 서버입니다. 마치 식당의 주방장처럼, 손님(사용자)의 주문(질문)을 받아 요리(답변)를 만들어 내보내는 역할을 합니다. FastAPI라는 프레임워크를 사용하면 놀랍도록 간단하게 이 서버를 구축할 수 있습니다. 다음 코드를 살펴봅시다. ```python from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse, StreamingResponse from fastapi.staticfiles import StaticFiles from openai import OpenAI # FastAPI 앱 생성 - 우리 서버의 시작점입니다 app = FastAPI() client = OpenAI() # HTML 파일을 제공하는 메인 라우트 @app.get("/", response_class=HTMLResponse) async def get_chat_page(): with open("ui.html", "r", encoding="utf-8") as f: return f.read() # 채팅 API 엔드포인트 - 사용자 메시지를 받아 AI 응답 반환 @app.post("/chat") async def chat(request: Request): data = await request.json() messages = data.get("messages", []) return StreamingResponse(generate_response(messages)) ``` 김개발 씨는 인터넷을 뒤져가며 공부를 시작했습니다. 그리고 곧 깨달았습니다. 웹 기반 챗봇을 만들려면 크게 두 가지가 필요하다는 것을요. 하나는 사용자와 대화할 화면(프론트엔드), 다른 하나는 AI와 통신할 서버(백엔드)입니다. 오늘 우리가 살펴볼 **chat_web.py**는 바로 이 백엔드 서버입니다. 이 파일 하나로 사용자의 메시지를 받고, OpenAI에 전달하고, 응답을 다시 사용자에게 보내주는 모든 일을 처리합니다. 그렇다면 **FastAPI**란 무엇일까요? 쉽게 비유하자면, FastAPI는 식당을 차릴 때 필요한 주방 시스템과 같습니다. 주문을 받는 POS기, 요리를 만드는 조리대, 음식을 내보내는 서빙 창구가 모두 갖춰진 올인원 솔루션입니다. 개발자는 FastAPI 덕분에 복잡한 서버 구축 작업을 몇 줄의 코드로 끝낼 수 있습니다. 코드의 첫 부분을 살펴봅시다. **from fastapi import FastAPI**로 시작하는 줄들은 필요한 도구들을 가져오는 것입니다. 마치 요리를 시작하기 전에 재료와 조리도구를 꺼내 놓는 것과 같습니다. **app = FastAPI()**는 우리 서버의 본체를 만드는 코드입니다. 이 한 줄로 웹 서버가 탄생합니다. 그리고 **client = OpenAI()**로 OpenAI와 통신할 준비를 마칩니다. **@app.get("/")**이라는 특이한 문법이 보이시나요? 이것을 **데코레이터**라고 부릅니다. 사용자가 웹 브라우저에서 우리 서버 주소로 접속하면, 이 함수가 실행되어 HTML 페이지를 보여줍니다. **@app.post("/chat")**은 더 중요한 부분입니다. 사용자가 메시지를 보내면 이 함수가 호출됩니다. **POST**라는 것은 데이터를 서버로 보낼 때 사용하는 방식입니다. 편지를 우체통에 넣는다고 생각하시면 됩니다. 함수 안을 보면 **await request.json()**으로 사용자가 보낸 데이터를 읽습니다. **await**는 비동기 처리를 위한 키워드인데, 쉽게 말해 "데이터가 올 때까지 기다려"라는 뜻입니다. 마지막으로 **StreamingResponse**를 반환합니다. 이것이 바로 ChatGPT처럼 글자가 타이핑되듯 나타나게 해주는 비밀입니다. 다음 섹션에서 자세히 다루겠습니다. 김개발 씨는 이 코드를 보고 감탄했습니다. "이게 전부라고요? 정말 이것만으로 서버가 돌아가나요?" 네, 정말 이것만으로 충분합니다. FastAPI의 강력함이 바로 여기에 있습니다. **실전 팁** 💡 - FastAPI는 자동으로 API 문서를 생성합니다. 서버 실행 후 /docs 경로로 접속해보세요. - **async/await**를 사용하면 동시에 여러 사용자의 요청을 효율적으로 처리할 수 있습니다. --- ## 2. ui.html 프론트엔드 분석 서버가 준비되었으니 이제 사용자가 실제로 보고 사용할 화면을 만들 차례입니다. 김개발 씨는 ChatGPT의 깔끔한 인터페이스를 떠올렸습니다. "저런 화면을 만들려면 복잡한 프레임워크가 필요하지 않을까?" 하지만 놀랍게도 순수 HTML과 JavaScript만으로도 충분히 멋진 채팅 화면을 만들 수 있습니다. **ui.html**은 사용자가 직접 보고 상호작용하는 채팅 인터페이스입니다. 마치 카페의 인테리어와 같습니다. 손님이 편하게 앉아 주문할 수 있도록 테이블과 의자를 배치하고, 메뉴판을 보기 좋게 만드는 것처럼요. 메시지 입력창, 전송 버튼, 대화 표시 영역으로 구성됩니다. 다음 코드를 살펴봅시다. ```python My ChatGPT /* 채팅 컨테이너 스타일링 */ .chat-container { max-width: 800px; margin: 0 auto; } .message { padding: 12px; margin: 8px 0; border-radius: 8px; } .user-message { background: #007bff; color: white; } .ai-message { background: #f1f1f1; color: black; } 전송 ``` 김개발 씨는 디자이너가 아니었습니다. 하지만 기본적인 HTML과 CSS만 알면 충분히 쓸만한 채팅 화면을 만들 수 있다는 것을 알게 되었습니다. HTML 파일의 구조를 살펴봅시다. 크게 세 부분으로 나뉩니다. **head** 영역에는 페이지 제목과 스타일이 들어가고, **body** 영역에는 실제 화면에 보이는 요소들이 들어갑니다. **style** 태그 안의 CSS 코드를 보겠습니다. **.chat-container**는 전체 채팅 영역을 감싸는 박스입니다. **max-width: 800px**로 너무 넓어지지 않게 제한하고, **margin: 0 auto**로 화면 중앙에 배치합니다. **.message** 클래스는 각 메시지 말풍선의 기본 스타일입니다. **padding**은 내용과 테두리 사이의 여백, **border-radius**는 모서리를 둥글게 만드는 속성입니다. 이 작은 설정 하나로 메시지가 훨씬 부드러워 보입니다. **.user-message**와 **.ai-message**는 사용자와 AI의 메시지를 구분합니다. 파란색 배경의 사용자 메시지, 회색 배경의 AI 메시지로 누가 말한 것인지 한눈에 알 수 있습니다. 카카오톡이나 메신저 앱에서 익숙하게 보던 패턴입니다. **body** 영역의 구조는 더욱 단순합니다. **chat-box**라는 div가 대화 내용을 표시하는 영역입니다. 새로운 메시지가 오면 여기에 추가됩니다. **input** 태그는 사용자가 텍스트를 입력하는 곳입니다. **placeholder** 속성으로 힌트 텍스트를 보여줄 수 있습니다. 처음 화면을 열면 "메시지를 입력하세요"라는 안내문이 연하게 표시됩니다. **button** 태그에 주목해주세요. **onclick="sendMessage()"**라는 속성이 있습니다. 버튼을 클릭하면 **sendMessage**라는 JavaScript 함수가 실행된다는 뜻입니다. 이 함수에서 실제로 서버와 통신하는 로직이 들어갑니다. 박시니어 씨가 김개발 씨에게 조언했습니다. "프론트엔드는 처음에 너무 복잡하게 만들지 마세요. 기능이 먼저 돌아가게 만들고, 디자인은 나중에 다듬어도 됩니다." 실제로 이 간단한 HTML만으로도 ChatGPT와 비슷한 사용자 경험을 제공할 수 있습니다. 물론 더 예쁘게 만들고 싶다면 CSS를 추가하면 됩니다. 하지만 핵심 기능은 이미 갖춰진 상태입니다. **실전 팁** 💡 - 엔터 키로도 메시지를 전송하려면 input에 **onkeypress** 이벤트를 추가하세요. - 반응형 디자인을 위해 **@media** 쿼리로 모바일 화면도 대응할 수 있습니다. --- ## 3. 스트리밍 응답 구현 김개발 씨가 처음 만든 챗봇은 답변이 한꺼번에 나타났습니다. 질문을 보내고 10초를 기다리면, 갑자기 긴 답변이 툭 하고 나타나는 방식이었습니다. "뭔가 어색한데..." 그때 박시니어 씨가 힌트를 줬습니다. "ChatGPT처럼 글자가 타이핑되듯 나오게 해봐요. 사용자 경험이 완전히 달라질 거예요." **스트리밍 응답**은 AI의 답변을 한 글자씩 실시간으로 전송하는 기술입니다. 마치 상대방이 실시간으로 타이핑하는 것을 지켜보는 것과 같습니다. 사용자는 기다림 없이 즉각적인 피드백을 받으며, 전체 응답이 완성되기 전에도 내용을 읽기 시작할 수 있습니다. 다음 코드를 살펴봅시다. ```python async def generate_response(messages): # OpenAI API에 스트리밍 모드로 요청 response = client.chat.completions.create( model="gpt-4", messages=messages, stream=True # 핵심! 스트리밍 활성화 ) # 응답이 도착할 때마다 한 조각씩 전송 for chunk in response: if chunk.choices[0].delta.content: content = chunk.choices[0].delta.content # Server-Sent Events 형식으로 전송 yield f"data: {content}\n\n" yield "data: [DONE]\n\n" ``` 스트리밍이 왜 중요할까요? 한 가지 실험을 해봅시다. 똑같이 10초가 걸리는 두 가지 상황을 상상해보세요. 첫 번째는 10초 동안 아무것도 안 보이다가 답변이 한꺼번에 나타나는 경우입니다. 두 번째는 첫 글자부터 마지막 글자까지 10초에 걸쳐 차례로 나타나는 경우입니다. 객관적으로는 같은 시간이지만, 사용자가 느끼는 체감 시간은 완전히 다릅니다. 두 번째 방식이 바로 **스트리밍**입니다. 실제로 ChatGPT, Claude 같은 서비스들이 모두 이 방식을 사용합니다. 코드를 살펴봅시다. **client.chat.completions.create()** 함수를 호출할 때 **stream=True** 옵션이 핵심입니다. 이 옵션 하나로 OpenAI API가 응답을 조각조각 나눠서 보내주기 시작합니다. **for chunk in response** 루프가 이 조각들을 하나씩 받아옵니다. 마치 수도꼭지에서 물이 한 방울씩 떨어지는 것처럼, 텍스트가 조금씩 도착합니다. **chunk.choices[0].delta.content**에서 실제 텍스트 내용을 꺼냅니다. **delta**라는 이름이 의미심장합니다. 수학에서 델타는 '변화량'을 뜻하는데, 여기서도 마찬가지입니다. 전체 응답이 아니라, 이전 대비 '새로 추가된 부분'만 담겨 있습니다. **yield**라는 키워드를 처음 보시는 분도 계실 겁니다. 일반적인 **return**은 값을 반환하고 함수가 끝납니다. 하지만 **yield**는 값을 반환하면서도 함수가 계속 실행됩니다. 마치 컨베이어 벨트처럼 값을 하나씩 내보내는 것입니다. **f"data: {content}\n\n"** 형식은 **Server-Sent Events(SSE)** 프로토콜입니다. 서버가 클라이언트에게 실시간으로 데이터를 보내는 표준 방식입니다. 웹소켓보다 간단하면서도 우리 용도에는 충분합니다. 프론트엔드에서는 이 스트림을 어떻게 받을까요? **EventSource** API나 **fetch**의 **ReadableStream**을 사용합니다. 도착하는 데이터를 순서대로 화면에 추가하면, 자연스러운 타이핑 효과가 완성됩니다. 마지막의 **"data: [DONE]"**은 전송 완료 신호입니다. 프론트엔드는 이 신호를 받으면 "아, 응답이 다 왔구나"하고 마무리 처리를 합니다. 김개발 씨는 스트리밍을 적용한 후 팀원들의 반응을 살폈습니다. "오, ChatGPT 같아!" "훨씬 자연스럽네요!" 같은 시간이 걸려도 사용자 경험은 하늘과 땅 차이였습니다. **실전 팁** 💡 - 네트워크가 불안정할 때를 대비해 재연결 로직을 추가하면 좋습니다. - 스트리밍 중에 사용자가 취소할 수 있는 버튼도 고려해보세요. --- ## 4. 대화 히스토리 관리 김개발 씨의 챗봇은 점점 쓸만해지고 있었습니다. 그런데 이상한 문제가 발생했습니다. "아까 말한 그거 다시 설명해줘"라고 물으면 AI가 "무엇을 말씀하시는 건가요?"라고 되물었습니다. 맥락을 전혀 기억하지 못하는 것이었습니다. "어떻게 하면 대화 흐름을 이어갈 수 있을까요?" **대화 히스토리**는 이전 대화 내용을 저장하고 AI에게 함께 전달하는 기능입니다. 마치 대화 상대가 메모장을 들고 있어서 이전에 나눈 이야기를 모두 기억하는 것과 같습니다. 이 기능이 있어야 자연스러운 대화가 가능합니다. 다음 코드를 살펴봅시다. ```python // 프론트엔드에서 대화 히스토리 관리 let conversationHistory = []; async function sendMessage() { const userInput = document.getElementById("user-input").value; // 사용자 메시지를 히스토리에 추가 conversationHistory.push({ role: "user", content: userInput }); // 전체 히스토리를 서버에 전송 const response = await fetch("/chat", { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({messages: conversationHistory}) }); // AI 응답도 히스토리에 추가 const aiMessage = await processStream(response); conversationHistory.push({role: "assistant", content: aiMessage}); } ``` AI가 맥락을 이해하지 못하는 이유가 무엇일까요? 사실 AI는 매 요청을 완전히 새로운 대화로 인식합니다. 비유하자면 이렇습니다. 여러분이 상담사와 대화한다고 상상해보세요. 그런데 이 상담사는 5분마다 기억이 리셋됩니다. 5분 전에 "저는 개발자예요"라고 말했어도, 지금은 기억하지 못합니다. 그래서 매번 처음부터 설명해야 합니다. OpenAI API도 마찬가지입니다. 기본적으로 이전 대화를 기억하지 않습니다. 그렇다면 어떻게 해야 할까요? 답은 간단합니다. **우리가 직접 이전 대화 내용을 매번 함께 보내주면 됩니다.** 코드를 살펴봅시다. **conversationHistory**라는 배열이 핵심입니다. 이 배열에 모든 대화 내용이 순서대로 쌓입니다. 사용자가 메시지를 보내면 먼저 **push**로 히스토리에 추가합니다. **role: "user"**는 이 메시지가 사용자가 보낸 것임을 표시합니다. AI의 응답은 **role: "assistant"**로 표시됩니다. **fetch**로 서버에 요청할 때, 방금 입력한 메시지만 보내는 게 아닙니다. **messages: conversationHistory**로 지금까지의 모든 대화를 통째로 보냅니다. 서버는 이 전체 히스토리를 OpenAI API에 그대로 전달합니다. AI가 응답하면, 그 응답도 히스토리에 추가합니다. 이렇게 하면 다음 질문 때 AI는 이전 대화 맥락을 모두 알고 있는 상태에서 답변할 수 있습니다. 하지만 주의할 점이 있습니다. 대화가 길어지면 히스토리도 계속 커집니다. OpenAI API에는 **토큰 제한**이 있어서, 너무 긴 히스토리는 에러를 발생시킵니다. 이를 해결하는 방법은 여러 가지입니다. 가장 간단한 방법은 최근 N개의 메시지만 유지하는 것입니다. 더 정교한 방법은 오래된 대화를 요약해서 저장하는 것입니다. 어떤 방식이든 토큰 수를 관리해야 합니다. 또 하나 고려할 점은 **시스템 메시지**입니다. 히스토리 맨 앞에 **role: "system"**으로 AI의 성격이나 역할을 정의할 수 있습니다. "당신은 친절한 고객 상담사입니다"처럼요. 이 시스템 메시지는 항상 유지하면서, 나머지 대화만 관리하면 됩니다. 김개발 씨는 히스토리 관리를 추가한 후 다시 테스트했습니다. "아까 말한 그거 다시 설명해줘." AI가 정확히 이전 맥락을 이해하고 답변했습니다. 드디어 자연스러운 대화가 가능해진 것입니다. **실전 팁** 💡 - 토큰 제한에 걸리지 않도록 히스토리 길이를 주기적으로 체크하세요. - 중요한 대화는 로컬 스토리지에 저장해서 새로고침해도 유지되게 할 수 있습니다. --- ## 5. 실제 배포 방법 김개발 씨의 로컬 컴퓨터에서는 챗봇이 완벽하게 돌아갔습니다. 이제 팀원들에게 보여줄 시간입니다. "제 컴퓨터로 오세요"라고 할 수는 없는 노릇입니다. 인터넷에 공개해서 누구나 접속할 수 있게 만들어야 합니다. 이것을 바로 **배포**라고 합니다. **배포**는 로컬에서 개발한 애플리케이션을 인터넷에 공개하는 과정입니다. 마치 집에서 만든 요리를 식당에 내놓는 것과 같습니다. 서버를 실행하고, 외부에서 접속할 수 있게 설정하고, 안정적으로 운영되도록 관리해야 합니다. 다음 코드를 살펴봅시다. ```python # 1. 필요한 패키지 설치 pip install fastapi uvicorn openai python-dotenv # 2. 환경 변수 설정 (.env 파일) OPENAI_API_KEY=sk-your-api-key-here # 3. 서버 실행 (개발용) uvicorn chat_web:app --reload --host 0.0.0.0 --port 8000 # 4. 프로덕션 배포 (PM2 사용) pm2 start "uvicorn chat_web:app --host 0.0.0.0 --port 8000" --name chatbot # 5. 서버 상태 확인 pm2 status pm2 logs chatbot ``` 배포라는 단어가 막막하게 느껴지시나요? 차근차근 단계별로 살펴봅시다. 첫 번째 단계는 **필요한 패키지 설치**입니다. **FastAPI**는 우리가 만든 서버 프레임워크, **uvicorn**은 이 서버를 실행해주는 엔진입니다. 자동차로 비유하면 FastAPI가 차체, uvicorn이 엔진입니다. **python-dotenv**는 환경 변수를 관리해주는 도구입니다. 환경 변수란 무엇일까요? 코드에 직접 적으면 안 되는 민감한 정보를 말합니다. OpenAI API 키가 대표적입니다. 이 키가 유출되면 누군가 내 비용으로 API를 마구 사용할 수 있습니다. **.env** 파일에 따로 저장하고, 이 파일은 절대 GitHub에 올리면 안 됩니다. **uvicorn chat_web:app**이라는 명령어를 분석해봅시다. **chat_web**은 파이썬 파일 이름, **app**은 그 안에 정의한 FastAPI 인스턴스 이름입니다. **--reload** 옵션은 코드가 바뀌면 자동으로 재시작하는 개발용 기능입니다. **--host 0.0.0.0**은 외부에서도 접속할 수 있게 허용하는 설정입니다. 여기까지만 해도 서버는 돌아갑니다. 하지만 문제가 있습니다. 터미널을 닫으면 서버도 꺼집니다. SSH 연결이 끊어져도 마찬가지입니다. 24시간 돌아가는 서비스를 만들려면 **PM2** 같은 프로세스 매니저가 필요합니다. **PM2**는 Node.js 생태계에서 태어났지만, 파이썬 서버도 관리할 수 있습니다. **pm2 start** 명령어로 서버를 백그라운드에서 실행합니다. **--name chatbot**으로 이름을 붙여두면 나중에 관리하기 편합니다. **pm2 status**로 현재 실행 중인 프로세스를 확인하고, **pm2 logs**로 실시간 로그를 볼 수 있습니다. 에러가 발생하면 여기서 원인을 찾을 수 있습니다. 보안도 중요합니다. 실제 서비스라면 **HTTPS**를 적용해야 합니다. Nginx를 리버스 프록시로 두고, Let's Encrypt로 무료 SSL 인증서를 발급받는 것이 일반적입니다. 김개발 씨는 회사 서버에 챗봇을 배포했습니다. 팀원들에게 URL을 공유하자, 각자 자리에서 접속해 테스트하기 시작했습니다. "오, 진짜 ChatGPT 같다!" 뿌듯한 순간이었습니다. **실전 팁** 💡 - **.env** 파일은 반드시 **.gitignore**에 추가하세요. API 키 유출은 치명적입니다. - 서버 재시작이 필요하면 **pm2 reload**를 사용하세요. 무중단 배포가 가능합니다. --- ## 6. 나만의 ChatGPT 호스팅 김개발 씨의 챗봇은 팀 내에서 큰 호응을 얻었습니다. 그러자 팀장님이 새로운 요구사항을 주셨습니다. "이걸 고객 지원용으로 발전시킬 수 있을까요? 우리 회사 제품에 특화된 답변을 하게 만들고 싶어요." 김개발 씨는 고민에 빠졌습니다. 어떻게 하면 '나만의 ChatGPT'를 만들 수 있을까요? **나만의 ChatGPT**는 범용 AI를 특정 목적에 맞게 커스터마이징한 것입니다. 마치 백과사전 같은 AI에게 특정 분야의 전문가 역할을 부여하는 것과 같습니다. 시스템 프롬프트, 지식 베이스 연동, 기능 제한 등을 통해 원하는 방향으로 AI를 튜닝할 수 있습니다. 다음 코드를 살펴봅시다. ```python # 시스템 프롬프트로 AI 역할 정의 SYSTEM_PROMPT = """당신은 ABC 회사의 고객 지원 상담사입니다. 다음 규칙을 반드시 따르세요: ``` --- ## 3. 회사 제품과 관련 없는 질문은 정중히 거절합니다. 범용 ChatGPT를 특정 목적의 전문가로 만드는 방법을 알아봅시다. 가장 강력한 도구는 **시스템 프롬프트**입니다. 대화 히스토리 맨 앞에 **role: "system"**으로 지시사항을 넣습니다. AI는 이 지시를 최우선으로 따릅니다. 위 코드의 시스템 프롬프트를 보세요. "ABC 회사의 고객 지원 상담사"라는 역할을 부여했습니다. 그리고 세 가지 규칙을 명시했습니다. 이렇게 하면 AI는 일반적인 ChatGPT와 다르게 행동합니다. 규칙을 정할 때는 구체적일수록 좋습니다. "친절하게 응대하세요"보다 "모든 답변을 '안녕하세요, 고객님'으로 시작하세요"가 더 명확합니다. AI는 모호한 지시보다 명확한 지시를 더 잘 따릅니다. **create_messages** 함수를 보세요. 시스템 프롬프트를 항상 맨 앞에 넣습니다. 히스토리가 아무리 길어져도 시스템 프롬프트는 사라지지 않습니다. 이것이 AI의 기본 성격을 유지하는 비결입니다. **filter_response** 함수는 추가 안전장치입니다. AI가 시스템 프롬프트를 따르더라도, 가끔 의도치 않은 답변을 할 수 있습니다. 이럴 때를 대비해 응답을 한 번 더 검사합니다. 민감한 단어가 포함되어 있으면 정중한 거절 메시지로 대체합니다. 더 발전시키고 싶다면 **RAG(Retrieval Augmented Generation)**를 고려해보세요. 회사 문서, FAQ, 제품 매뉴얼을 데이터베이스에 저장하고, 질문과 관련된 내용을 찾아서 AI에게 함께 제공하는 방식입니다. 이렇게 하면 AI가 회사 정보를 정확하게 답변할 수 있습니다. 비용 관리도 중요합니다. API 호출마다 비용이 발생하므로, 사용량을 모니터링해야 합니다. 사용자당 일일 제한을 두거나, 답변 길이를 제한하는 방법이 있습니다. 김개발 씨는 시스템 프롬프트를 세심하게 작성하고, 회사 FAQ를 연동했습니다. 테스트 결과, AI가 회사 제품에 대해 정확하게 답변하기 시작했습니다. 팀장님은 흡족해하셨습니다. "이거 정말 쓸만한데요?" 박시니어 씨가 마지막 조언을 건넸습니다. "잘 만들었어요. 하지만 AI는 완벽하지 않다는 것을 항상 기억하세요. 중요한 정보는 사람이 검토하는 프로세스를 추가하는 게 좋아요." 나만의 ChatGPT를 만드는 여정은 여기서 끝이 아닙니다. 사용자 피드백을 수집하고, 시스템 프롬프트를 개선하고, 새로운 기능을 추가하면서 계속 발전시켜 나갈 수 있습니다. **실전 팁** 💡 - 시스템 프롬프트는 짧고 명확하게 작성하되, 중요한 규칙은 번호를 붙여 강조하세요. - 프롬프트 엔지니어링은 실험의 연속입니다. 다양한 버전을 테스트하고 최적의 결과를 찾으세요. --- 이상으로 학습을 마칩니다. 위 내용을 직접 코드로 작성해보면서 익혀보세요!

카테고리: AI,LLM,Deep Learning

언어: Python

태그: Python, FastAPI, OpenAI, Streaming, ChatGPT, AI,LLM,Deep Learning

작성자: AI Generated

프리미엄 콘텐츠 - 3개월 무료 체험 가능

CodeDeck

Web UI로 ChatGPT처럼 대화하기 완벽 가이드

목차

1. chat web.py 서버 구조

2. ui.html 프론트엔드 분석

3. 스트리밍 응답 구현

4. 대화 히스토리 관리

5. 실제 배포 방법

6. 나만의 ChatGPT 호스팅

3. 회사 제품과 관련 없는 질문은 정중히 거절합니다.

이 카드뉴스가 포함된 코스

nanochat 오픈소스 완전 분석 - $100로 ChatGPT 만들기

댓글 (0)

함께 보면 좋은 카드 뉴스

Helm 마이크로서비스 패키징 완벽 가이드

보안 아키텍처 구성 완벽 가이드

AWS Organizations 완벽 가이드

AWS KMS 암호화 완벽 가이드

AWS Secrets Manager 완벽 가이드