반응형
GPT API와 Flask로 나만의 AI 키워드 설명봇 만들기 💻
이 글에서는 윈도우 PC에서 OpenAI의 강력한 GPT API와 Python의 웹 프레임워크 Flask를 활용하여, 내가 입력한 키워드에 대해 AI가 척척 설명해주는 서비스를 만드는 과정을 진행합니다. 관심 주제 및 시나리오는 달라도 전체 프로젝트 진행하는 과정은 비슷합니다. 따라서 앞으로 설명하는 전체 과정을 따라해본 후 원하는 주제에 적용하도록 합니다.
만들 프로젝트의 시나리오:
- 웹 페이지에 관심 키워드를 입력합니다.
- AI(GPT 모델활용)가 해당 키워드에 대한 설명을 요구 조건에 맞게 만들도록 합니다.
- AI 모델이 만들어 준 결과를 웹 페이지에서 바로 확인할 수 있습니다.
프로젝트 이름: MyFirstWebWithLLM(이름은 원하는대로 변경)
준비물 (개발 환경):
- Windows 운영체제 PC
- Python (3.7 이상 권장, 미리 설치되어 있어야 합니다.)
- Flask (Python 웹 프레임워크)
- OpenAI Python 라이브러리
- 가상 환경 (venv) – 현재 프로젝트만의 깨끗한 작업실을 만들어서 사용합니다.
Python은 미리 설치되어 있는 것으로 가정하고 진행과정에서는 제외됩니다. 아직 설치 전이라면 다음 글을 통해 설치 진행하고 계속하세요.
[Python]Python이 처음이라면 설치부터 해볼까?
Windows용 Python 언어 설치하는 방법 1. 설치 파일 다운로드공식 Python 웹사이트에 접속합니다.페이지를 내려 최신 버전(예: Python 3.x.x)의 다운로드 버튼을 클릭합니다.Windows 환경용 설치 파일(.exe)을
all-tech-hub.tistory.com
[모듈1]Python 모듈화 방법
Python 모듈 가져오는 방법 정리📁 같은 폴더 vs 외부 폴더에서 나만의 모듈 불러오기 Python에서 내가 만든 함수를 다른 파일에서 재사용하려고 할 때 import 방법이 달라지기도 합니다.이번 글에서
all-tech-hub.tistory.com
1단계: 프로젝트 작업실(폴더) 만들고, 프로젝트 만의 작업복(가상 환경) 준비하기
가장 먼저 프로젝트를 진행할 폴더를 만들고, 다른 프로젝트와 섞이지 않도록 독립된 가상 환경을 설정합니다.
- 프로젝트 폴더 생성: 탐색기를 열어 원하는 위치(예: 내 문서,바탕화면 또는 원하는 폴더 )에 MyFirstWebWithLLM이라는 이름으로 새 폴더를 만들어 주세요. (예시 경로: C:\AI\MyFirstWebWithLLM 에서 앞으로의 진행이 이루어 지는 것으로 설명합니다.)
- 가상 환경 만들기:
- Windows 검색창에서 cmd를 입력하여 명령 프롬프트를 실행하세요.
- 명령 프롬프트 창에서 방금 만든 프로젝트 폴더로 이동합니다. cd 명령어를 사용해요.(위 경로를 여러분이 만든 폴더 경로로 바꿔주세요!)
cd C:\AI\MyFirstWebWithLLM- 폴더로 이동했다면, 다음 명령어를 입력해서 myenv라는 이름의 가상 환경을 만듭니다.(가상 환경의 이름은 원하는대로..)조금 기다리면 MyFirstWebWithLLM 폴더 안에 myenv라는 하위 폴더가 생긴 것을 볼 수 있을 거예요. 이게 바로 프로젝트만을 위한 가상 작업 환경입니다.
python -m venv myenv
- 가상 환경 활성화: 만들어진 가상 환경에 들어가서 작업을 시작해야 해요. 다음 명령어를 입력하세요.명령어를 실행하면, 프롬프트 맨 앞에 (myenv)라는 표시가 생길 거예요. 이렇게 되면 가상 환경이 성공적으로 활성화된 것이고, 이제부터 설치하는 프로그램들은 이 myenv 안에서만 사용됩니다.
myenv\Scripts\activate
2단계: 프로젝트에 필요한 도구(라이브러리) 설치하기
AI 봇을 만들려면 Flask라는 웹 개발 도구와 openai라는 GPT API 사용 도구가 필요합니다. 가상환경에서 설치될 것이며 필요한 라이브러리들을 하나의 파일에 모아 한번에 실행하기우해 다음 절차와 같이 진행합니다.
- requirements.txt 파일 만들기: MyFirstWebWithLLM 폴더 안에 마우스 오른쪽 버튼을 클릭하여 새로 만들기 > 텍스트 문서를 선택하세요. 파일 이름을 requirements.txt로 변경하고, 메모장으로 열어 다음 두 줄을 입력 후 저장합니다.이 파일은 우리 프로젝트에 필요한 라이브러리 목록을 적어두는 곳이에요.
Flask openai- 라이브러리 설치: 가상 환경이 활성화된 명령 프롬프트 창((myenv) 표시가 있는 창)에서 다음 명령어를 실행하여 목록에 있는 라이브러리들을 한 번에 설치합니다.설치가 완료될 때까지 잠시 기다려주세요.
pip install -r requirements.txt
- 현재까지 만들어진 프로젝트 폴더를 VS Code에서 열어보면 다음과 같이 구성되어 있습니다.
- 현재 추가된 라이브러리는 프로젝트를 진행하면서 새롭게 추가되는 다른 라이브러리와 버전의 호환성을 고려해야 한다면 버전 변경이 이뤄 질 수도 있습니다.
[3단계[: AI의 마법 열쇠, OpenAI API 키 발급받고 안전하게 보관하기
GPT 모델을 사용하려면 OpenAI에서 발급하는 API 키가 필요해요. 이건 일종의 비밀번호 같은 거라 아주 중요합니다. 다음은 간단하게 정리한 키 발급 과정이며 상세한 그림과 함께 참고하고 싶다면 관련 글을 통해 진행하시길 바랍니다.
- OpenAI API 키 발급받기:
- OpenAI 웹사이트에 접속하여 회원가입 또는 로그인을 하세요.
- 로그인 후, API 키 생성 페이지로 이동하여 새로운 API 키를 발급받습니다. (Create new secret key 버튼 클릭)
- 중요! API 키는 생성 시 단 한 번만 전체 내용을 볼 수 있어요. 반드시 안전한 곳(예: 개인 비밀번호 관리자 또는 암호화된 파일)에 복사해두세요.
- API 키 안전하게 설정하기 (환경 변수 사용): API 키를 코드에 직접 적으면 보안상 위험해요. 대신, PC 환경 변수로 설정해서 안전하게 사용할 거예요.
- 현재 명령 프롬프트 세션에만 임시로 설정하기: (명령 프롬프트를 닫으면 사라져요) 명령 프롬프트 창에 다음처럼 입력하세요. "여러분의_API_키" 부분을 실제 발급받은 키로 바꿔주세요.
set OPENAI_API_KEY="여러분의_API_키_여기에_붙여넣으세요"- Bash
- PC에 영구적으로 설정하기 (권장):
- Windows 검색창에서 "환경 변수"를 검색하고 "시스템 환경 변수 편집"을 선택하세요.
- "시스템 속성" 창이 뜨면 아래쪽의 "환경 변수(N)..." 버튼을 클릭하세요.
- "환경 변수" 창에서 "사용자 변수" 섹션 (또는 "시스템 변수" 섹션) 아래의 "새로 만들기(W)..." 버튼을 클릭하세요.
- "새 사용자 변수" 창에서:
- 변수 이름(N): OPENAI_API_KEY
- 변수 값(V): 여러분이 발급받은 OpenAI API 키
- "확인" 버튼을 눌러 모든 창을 닫습니다.
- 중요: 이 설정을 적용하려면 현재 열려있는 모든 명령 프롬프트 창을 닫고 새로 열어야 해요.
[4단계]: 웹 페이지의 뼈대 만들기 (HTML 템플릿)
이제 사용자가 키워드를 입력하고 결과를 볼 수 있는 웹 페이지의 기본 틀(HTML)을 만들 거예요.
- templates 폴더 만들기: MyFirstWebWithLLM 폴더 안에 templates라는 이름의 새 폴더를 만들어주세요. Flask에게 이 폴더 안에서 HTML 파일들을 찾도록 합니다.
- 키워드 입력 페이지 (index.html) 만들기: MyFirstWebWithLLM\templates 폴더 안에 index.html 파일을 만들고 (메모장이나 다른 텍스트 편집기 사용) 다음 코드를 붙여넣고 저장합니다. 실행 방법을 익힌 후에서는 여러분만의 디자인을 사용하는 것도 좋은 학습법입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 키워드 검색봇</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; min-height: 90vh; text-align: center;}
h1 { color: #4a90e2; margin-bottom: 30px; }
form { background-color: #ffffff; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); width: 100%; max-width: 500px; }
label { display: block; margin-bottom: 10px; font-weight: bold; font-size: 1.1em; color: #555; }
input[type="text"] { width: calc(100% - 24px); padding: 12px; margin-bottom: 25px; border: 1px solid #ddd; border-radius: 5px; font-size: 1em; box-sizing: border-box; }
button { background-color: #5cb85c; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; width: 100%; transition: background-color 0.3s ease; }
button:hover { background-color: #4cae4c; }
</style>
</head>
<body>
<h1>AI에게 질문하기</h1>
<form action="/search" method="post">
<label for="keyword">궁금한 키워드를 입력해주세요:</label>
<input type="text" id="keyword" name="keyword" required placeholder="예: 인공지능이란?">
<button type="submit">AI에게 물어보기!</button>
</form>
</body>
</html>
- 결과 출력 페이지 (result.html) 만들기: MyFirstWebWithLLM\templates 폴더 안에 result.html 파일을 만들고 다음 코드를 붙여넣고 저장하세요.여기서 {{ keyword }}와 {{ content }} 부분은 나중에 Python 코드에서 실제 값으로 채워줄 거예요!
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 답변: {{ keyword }}</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #e6f7ff; color: #333; }
.container { background-color: #ffffff; padding: 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 25px; max-width: 800px; margin-left: auto; margin-right: auto;}
h1 { color: #4a90e2; border-bottom: 2px solid #eee; padding-bottom: 15px; font-size: 1.8em; }
.keyword-highlight { color: #d9534f; font-weight: bold; }
.content-box { white-space: pre-wrap; /* AI 답변의 줄바꿈과 공백을 그대로 보여줘요 */ line-height: 1.7; background-color: #f9f9f9; padding: 20px; border: 1px solid #eee; border-radius: 5px; margin-top: 20px; font-size: 1.05em;}
.back-link-container { text-align: center; margin-top: 30px; }
.back-link { display: inline-block; background-color: #5bc0de; color: white; text-decoration: none; font-weight: bold; padding: 10px 20px; border-radius: 5px; transition: background-color 0.3s ease; }
.back-link:hover { background-color: #46b8da; }
</style>
</head>
<body>
<div class="container">
<h1>AI의 답변 <br>주제: <span class="keyword-highlight">{{ keyword }}</span></h1>
<div class="content-box">
{{ content }}
</div>
</div>
<div class="back-link-container">
<a href="/" class="back-link">다른 키워드도 물어보기!</a>
</div>
</body>
</html>[5단계]: AI 두뇌 만들기 - GPT 연동 코드 (search.py)
이제 사용자가 입력한 키워드를 GPT API에게 전달하고 답변을 받아오는 Python 코드를 작성할 부분 입니다.
MyFirstWebWithLLM 폴더 안에 search.py 파일을 만들고 다음 코드를 붙여넣고 저장하세요.
import os
from openai import OpenAI
def get_content_from_gpt(keyword):
"""
OpenAI GPT 모델을 사용하여 주어진 키워드에 대한 설명을 생성합니다.
API 키는 PC에 설정된 'OPENAI_API_KEY' 환경 변수에서 가져옵니다.
"""
api_key = os.environ.get("OPENAI_API_KEY") # 환경 변수에서 API 키 읽기
if not api_key:
print("중요: OpenAI API 키가 환경 변수에 설정되지 않았습니다!")
return "오류: OpenAI API 키를 설정해주세요. (환경 변수 OPENAI_API_KEY 확인 필요)"
try:
# OpenAI 클라이언트 초기화 (새로운 버전의 openai 라이브러리 방식)
client = OpenAI(api_key=api_key)
# GPT 모델에게 요청 보내기
response = client.chat.completions.create(
model="gpt-3.5-turbo", # 가성비 좋은 모델! 또는 "gpt-4o" 등 최신 모델 사용 가능
messages=[
{"role": "system", "content": "당신은 사용자의 질문에 대해 명확하고 이해하기 쉽게 설명해주는 친절한 AI 어시스턴트입니다. 답변은 한국어로 제공해주세요."},
{"role": "user", "content": f"'{keyword}'에 대해 초보자도 이해하기 쉽게 자세히 설명해줘."}
],
temperature=0.7, # 답변의 창의성 조절 (0.0 ~ 2.0 사이, 낮을수록 결정적)
max_tokens=1500 # 답변의 최대 길이 (토큰 수)
)
# AI가 생성한 답변 텍스트만 추출
return response.choices[0].message.content.strip()
except Exception as e:
error_message = f"GPT API 호출 중 문제가 발생했어요: {str(e)}"
print(error_message)
user_friendly_error = "죄송합니다, AI에게 답변을 받아오는 중 문제가 발생했어요. 잠시 후 다시 시도해주세요."
if "authentication" in str(e).lower(): # API 키 인증 실패 시 좀 더 구체적인 안내
user_friendly_error = "OpenAI API 키 인증에 실패한 것 같아요. API 키가 정확한지, 환경 변수 설정이 올바른지 다시 한번 확인해주세요!"
return user_friendly_error
if __name__ == '__main__':
# search.py 파일을 직접 실행해서 테스트해볼 수 있어요.
# 테스트 전에 반드시 환경 변수에 OPENAI_API_KEY를 설정해주세요!
# (명령 프롬프트에서: set OPENAI_API_KEY="여러분의_API_키")
test_keyword_input = "플라스크(Flask) 웹 프레임워크가 뭐야?"
print(f"--- '{test_keyword_input}'에 대한 GPT 응답 테스트 시작 ---")
gpt_response = get_content_from_gpt(test_keyword_input)
print(gpt_response)
print("--- GPT 응답 테스트 끝 ---")
코드 간단 설명 (search.py):
- os.environ.get("OPENAI_API_KEY"): 우리가 윈도우 3단계에서 설정한 환경 변수 OPENAI_API_KEY 값 읽기
- OpenAI(api_key=api_key): 가져온 API 키로 OpenAI 서비스에 접속할 준비
- client.chat.completions.create(...): GPT 모델에게 실제로 요청을 보내는 부분
- model: 사용할 AI 모델 종류를 선택해요. "gpt-3.5-turbo"대신 원하는 모델로 변경 가능
- messages: AI에게 어떤 역할을 주고, 무엇을 물어볼지 대화 형식으로 전달
- role: "system": AI의 기본적인 역할이나 성격을 정해줘요. (예: "너는 친절한 설명가야.")
- role: "user": 우리가 AI에게 실제로 하는 질문이에요. (예: "'플라스크'에 대해 알려줘.")
- temperature, max_tokens: 답변의 다양성이나 길이를 조절하는 옵션이에요.
- response.choices[0].message.content.strip(): AI가 생성한 답변 중에서 실제 텍스트 내용만 쏙 뽑아내요.
- try...except 구문: 혹시 모를 오류(API 키가 틀렸거나, 인터넷 연결 문제 등)가 발생했을 때 프로그램이 갑자기 멈추지 않고 친절하게 알려주도록 처리해요.
[6단계]: 웹 서비스의 지휘자 만들기 - Flask 앱 (app.py)
이제 사용자의 웹 브라우저 요청을 받고, search.py의 AI 기능을 호출해서 결과를 다시 웹 브라우저로 보내주는 전체 웹 서비스의 지휘자, app.py 파일을 만듭니다.
MyFirstWebWithLLM 폴더 안에 app.py 파일을 만들고 다음 코드를 붙여넣고 저장합니다. 저장 위치는 프로젝트 폴더 바로 안에 위치합니다. (templates 폴더가 아닙니다.)
import os
from flask import Flask, render_template, request, redirect, url_for
from search import get_content_from_gpt # 5단계에서 만든 search.py의 함수를 가져와요!
# Flask 앱 초기화
app = Flask(__name__)
# 세션이나 플래시 메시지 등을 사용하려면 시크릿 키가 필요해요. (지금은 간단히 설정)
app.secret_key = os.urandom(24) # 안전한 랜덤 키 생성
# 메인 페이지 (키워드 입력 화면) 보여주기
@app.route('/')
def index_page():
"""사용자가 처음 접속하면 보여줄 메인 페이지 (index.html)를 렌더링합니다."""
print("사용자가 메인 페이지에 접속했습니다.")
return render_template('index.html')
# 키워드 검색 요청 처리하고 결과 보여주기
@app.route('/search', methods=['POST']) # POST 방식으로만 요청을 받아요 (폼 제출)
def search_results_page():
"""사용자가 폼에서 키워드를 입력하고 제출하면 실행됩니다."""
if request.method == 'POST':
# 사용자가 입력한 키워드 가져오기 (폼 필드의 name이 'keyword'인 값)
keyword_from_user = request.form.get('keyword', '').strip() # 앞뒤 공백 제거
if not keyword_from_user:
print("경고: 키워드가 입력되지 않았습니다. 메인 페이지로 돌아갑니다.")
# 키워드가 비어있으면 다시 메인 페이지로 보냅니다.
return redirect(url_for('index_page'))
print(f"사용자가 입력한 키워드: '{keyword_from_user}' (AI에게 전달 예정)")
# 5단계에서 만든 get_content_from_gpt 함수를 호출해서 AI의 답변을 받아옵니다.
ai_content = get_content_from_gpt(keyword_from_user)
# AI 답변의 일부를 서버 로그에 출력 (디버깅에 유용)
# print(f"AI로부터 받은 내용 (처음 100자): {ai_content[:100]}...")
# result.html 템플릿에 키워드와 AI 답변을 전달하여 사용자에게 보여줍니다.
return render_template('result.html', keyword=keyword_from_user, content=ai_content)
# POST 요청이 아닌 다른 방식으로 /search에 접근하면 메인 페이지로 보냅니다.
return redirect(url_for('index_page'))
# 이 app.py 파일을 직접 실행했을 때 웹 서버를 시작합니다.
if __name__ == '__main__':
print("웹 애플리케이션을 시작합니다. Ctrl+C를 눌러 종료하세요.")
# 개발 중에는 debug=True로 설정하면 코드 변경 시 자동 재시작되고 오류 확인이 쉬워요.
# host='0.0.0.0'은 내 PC뿐만 아니라 같은 네트워크의 다른 기기에서도 접속 가능하게 해요.
app.run(host='0.0.0.0', port=5000, debug=True)
코드 간단 설명 (app.py):
- app = Flask(__name__): Flask 앱을 만들어요. 이게 우리 웹 서비스의 본체예요!
- @app.route('/'): 사용자가 웹사이트의 가장 기본 주소(예: http://localhost:5000/)로 접속했을 때 index_page 함수를 실행하라고 알려줌.
- render_template('index.html'): templates 폴더에 있는 index.html 파일을 찾아서 웹 브라우저에 그리는 역할
- @app.route('/search', methods=['POST']): 사용자가 /search라는 주소로 POST 방식(주로 폼 데이터를 보낼 때 사용)으로 요청을 보내면 search_results_page 함수를 실행. index.html의 폼에서 action="/search" method="post"로 설정했기 때문에 이 함수가 호출됨
- request.form.get('keyword', '').strip(): 사용자가 index.html 폼에 입력한 키워드 값을 가져옴.
- get_content_from_gpt(keyword_from_user): search.py에 만들어둔 함수를 불러서 AI에게 설명을 요청.
- render_template('result.html', keyword=keyword_from_user, content=ai_content): result.html 파일을 웹 브라우저에 보여주는데, 이때 keyword라는 이름표에는 사용자가 입력한 키워드를, content라는 이름표에는 AI가 생성한 설명을 담아서 보내요. HTML 파일에서는 {{ keyword }}나 {{ content }}로 이 값들을 사용할 수 있음
- app.run(host='0.0.0.0', port=5000, debug=True): 드디어 웹 서버를 시작하는 명령어
- host='0.0.0.0': 내 컴퓨터뿐만 아니라 같은 와이파이(네트워크)에 연결된 다른 PC나 스마트폰에서도 접속할 수 있게 해줘요. (내 PC의 IP 주소:5000 으로 접속)
- port=5000: 5000번 포트(통신 문 번호 같은 거예요)를 사용하며, 원하는 다른 포트로 변경도 가능합니다.
- debug=True: 개발할 때 아주 유용한 옵션이에요! 코드를 고치면 자동으로 서버가 다시 시작되고, 오류가 나면 웹 브라우저에 자세한 정보가 떠서 고치기 쉬워요. 나중에 진짜로 다른 사람들에게 서비스할 때는 False로 바꿔야 함
[7단계]: 나만의 AI 봇 실행
지금까지 진행한 모든 과정을 확인할 순서입니다.
- 가상 환경 활성화 확인: 명령 프롬프트 창의 프롬프트 맨 앞에 (myenv) 표시가 있는지 다시 한번 확인해주세요. 없다면 myenv\Scripts\activate 명령어로 활성화해주세요.
- OpenAI API 키 환경 변수 설정 확인: 윈도우 3단계에서 API 키를 환경 변수로 설정했는지 확인해주세요. (특히, 명령 프롬프트를 새로 열었다면 임시 설정은 사라졌을 수 있으니 영구 설정을 했거나 다시 set 명령어를 실행해야 해요.)
- Flask 애플리케이션 실행: MyFirstWebWithLLM 폴더로 이동된 명령 프롬프트 창에서 다음 명령어를 입력하세요.
python app.py- 웹 브라우저에서 접속: 명령 프롬프트 창에 다음과 비슷한 메시지가 보이면 성공적으로 서버가 실행된 거예요!이제 웹 브라우저(크롬, 엣지 등)를 열고 주소창에 다음 주소 중 하나를 입력하고 엔터!
- http://127.0.0.1:5000
- http://localhost:5000! "AI에게 질문하기" 페이지가 나타났나요? 궁금한 키워드를 입력하고 "AI에게 물어보기!" 버튼을 눌러보세요. 잠시 후 AI가 생성한 설명이 담긴 결과 페이지를 볼 수 있을 거예요!
- 서버를 끄고 싶으면 명령 프롬프트 창에서 Ctrl 키를 누른 상태로 C 키를 누르세요.
-
* Serving Flask app 'app' * Debug mode: on * Running on http://0.0.0.0:5000 * Running on http://127.0.0.1:5000 (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: xxx-xxx-xxx
지금까지 잘 따라오고 여러분의 AI 웹봇이 보여졌다면 전체 구동 원리를 이해하고 여러분들이 생각하는 주제 또는 여러분들이 생각하는 웹 디자인을 적용하여 다양한 서비스의 밑거름이 되도록 할 준비가 될 수 있도록 하세요.
반응형
'AI > 생성형AI' 카테고리의 다른 글
| [Make.com업무자동화](1)Make.com를 이용 방법(Gmail, GPTs) (5) | 2025.05.19 |
|---|---|
| [Web기반업무자동화](2)GPT API를 이용한 업무 자동화(MacOS/Linux) (1) | 2025.05.17 |
| [OAuth 발급]Google 인증을 위한 필수 과정 OAuth 발급 (0) | 2025.05.16 |
| [GPT업무자동화] 프롬프트 만으로 보고서 생성기 만들자 (1) | 2025.05.16 |
| [OAuth 발급]Google 인증을 위한 필수 과정 OAuth 발급 (3) | 2025.05.15 |