LEVEL 17 QUEST

챗봇을 Python 백엔드로 업그레이드

Flask로 안전한 API 서버 만들기, .env로 키 보호

LEVEL 17-5 · BACKEND UPGRADE

챗봇을 Python 백엔드로
업그레이드하자!

브라우저에서 직접 API 호출? 위험합니다!
Flask 서버로 안전한 아키텍처를 만들어봅시다

🌐

브라우저

HTML/JS 프론트엔드

⟶

🐍

Flask 서버

Python 백엔드

⟶

🤖

OpenAI API

GPT-4 응답

왜 백엔드가 필요한가?

API 키가 노출되는 심각한 문제

지금까지 우리는 브라우저 JavaScript에서 직접 OpenAI API를 호출했습니다. 이 방식은 학습용으로는 괜찮지만, 실제 서비스에서는 치명적인 보안 문제가 있습니다. 브라우저의 개발자 도구(F12)를 열면 누구나 여러분의 API 키를 볼 수 있기 때문입니다.

⚠ 현재 방식의 위험성

브라우저 JS에 API 키를 직접 넣으면, 사이트를 방문하는 모든 사람이 개발자 도구 > Network 탭에서 요청 헤더를 확인하여 키를 훔칠 수 있습니다. 누군가 키를 가져가면 여러분의 돈으로 수백만 건의 API 호출을 할 수 있습니다!

위험한 코드 (브라우저 JS)

// ❌ 이렇게 하면 안 됩니다!
const API_KEY = 'sk-abc123...';  // 누구나 볼 수 있음!

const response = await fetch(
  'https://api.openai.com/v1/chat/completions',
  {
    headers: {
      'Authorization': `Bearer ${API_KEY}`
      // ↑ 개발자 도구에서 보임!
    }
  }
);

🚫

Before: 프론트만

브라우저 → OpenAI
API 키 노출됨
누구나 도용 가능

✅

After: 백엔드 추가

브라우저 → Flask → OpenAI
API 키는 서버에만
안전하게 보호됨

✅ 백엔드를 추가하면

API 키는 서버(Python)에만 존재하고, 브라우저는 우리 서버에만 요청을 보냅니다. 서버가 대신 OpenAI에 요청을 보내므로 API 키가 절대 브라우저에 노출되지 않습니다. 이것을 "프록시 패턴"이라고 합니다.

🔒

여기까지는 미리보기입니다

챗봇을 Python 백엔드로 업그레이드
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)