📍 시리즈 위치
5편: .env ✓
→
6편: Supabase ✓
→
▶ 7편: OpenAI API (지금)
→
8편: 로그인 기능
🤖 ChatGPT와 API의 차이 — 이것만 이해하면 됩니다
💬 지금까지의 여정
1편에서 첫 앱을 만들었습니다. 3편에서 인터넷에 공개했습니다. 6편에서 새로고침해도 데이터가 남는 앱을 만들었습니다.
하지만 아직 빠진 게 있습니다.
"AI 기능"입니다.
지금까지 ChatGPT에게 코드를 요청했지만,
내 앱 안에서 AI가 직접 동작한 적은 없었습니다.
이번 편이 끝나면 달라집니다. 내 앱 안에서 사용자가 입력하면 AI가 답하는 서비스가 만들어집니다.
🟢 ChatGPT
AI와 직접 대화하는 서비스
브라우저에서 chat.openai.com 접속
내가 직접 AI와 대화
결과를 내 앱에 가져올 수 없음
사용자가 OpenAI 계정 필요
🟣 OpenAI API
AI 기능을 내 앱에 연결하는 도구
내 앱 코드에서 AI에게 요청 전송
AI 응답을 내 앱 화면에 표시
사용자는 내 앱만 사용하면 됨
비용은 나의 API 키로 처리
API = "AI 기능을 내 앱 안에 심는 연결선"입니다
ChatGPT는 AI와 내가 대화하는 것.
API는 AI 기능이 내 앱 안에서 작동하게 만드는 것.
이번 편에서 그 차이를 직접 경험합니다.
API는 AI 기능이 내 앱 안에서 작동하게 만드는 것.
이번 편에서 그 차이를 직접 경험합니다.
비용 걱정 — 개인 연습에서는 거의 무료 수준입니다
GPT-4o mini 기준으로 문장 하나 요약에 드는 비용은 $0.001 미만입니다. 하루 100번 테스트해도 $0.1 이하입니다. 다만 5편에서 배운 대로 API 키를 반드시 .env에 보관해야 합니다. 키가 노출되면 타인이 대량 사용해서 비용이 급증할 수 있습니다.
⚠️ API 키는 단순 문자열이 아닙니다. "내 비용으로 AI를 사용하게 하는 권한"입니다. 비밀번호보다 더 조심해서 보관해야 하는 이유입니다.
🔑 OpenAI API 키 발급 — 5분 안에
1
platform.openai.com 접속 → 로그인
ChatGPT 계정이 있다면 같은 계정으로 로그인됩니다. 없으면 새로 가입합니다.
✅ 확인: OpenAI Platform 대시보드가 열리면 완료
2
API Keys 메뉴에서 새 키 발급
왼쪽 메뉴 "API Keys" → "Create new secret key" 클릭 → 이름 입력(예: my-app) → "Create secret key" 클릭.
⚠️ 키는 지금 이 순간만 전체 표시됩니다. 반드시 복사해서 .env에 바로 저장하세요. 창을 닫으면 다시 볼 수 없습니다.
3
.env 파일에 즉시 저장
.env 파일에 추가
OPENAI_API_KEY=sk-proj-여기에키붙여넣기
✅ .env 저장 완료 → 이제 앱 코드에 연결할 준비가 됐습니다
💡 Vercel에도 환경변수를 추가해야 합니다. Settings → Environment Variables에서 OPENAI_API_KEY를 입력하세요.
🔄 API 동작 흐름 — 비유로 이해하기
API가 어떻게 작동하는지 이해하면 코드를 몰라도 AI에게 더 정확하게 요청할 수 있습니다.
OpenAI API 요청-응답 흐름
사용자
텍스트 입력
버튼 클릭
버튼 클릭
→
입력 전달
내 앱 서버
API 키로
OpenAI 요청
OpenAI 요청
→
API 호출
OpenAI
AI가
처리·응답
처리·응답
→
응답 반환
내 앱 화면
AI 응답
표시
표시
⚡ 한눈에 보는 흐름 — 이게 전부입니다
사용자 입력
← 텍스트 입력 + 버튼 클릭↓
내 서버
← API 키로 OpenAI에 요청 전송↓
OpenAI
← AI가 1~5초 처리 후 응답 반환↓
내 앱 화면
← 응답을 받아서 화면에 표시
⏱ 응답이 1~5초 걸려도 정상입니다. 인터넷으로 AI 서버에 요청을 보내고 처리 결과를 받아오는 과정이기 때문입니다. "요약 중..." 로딩 텍스트가 보이다가 결과가 나오면 완전히 정상 작동입니다.
비유: 내 앱이 "번역사" 역할을 합니다.
사용자가 한국어로 요청하면 → 내 서버가 OpenAI에 전달하고 → 응답을 받아서 → 화면에 표시합니다.
사용자는 OpenAI 계정 없이 내 앱만 사용하면 됩니다.
사용자가 한국어로 요청하면 → 내 서버가 OpenAI에 전달하고 → 응답을 받아서 → 화면에 표시합니다.
사용자는 OpenAI 계정 없이 내 앱만 사용하면 됩니다.
🛠 문장 요약기 만들기 — AI에게 전체 요청
이제 실제로 만들어봅니다. 코드는 AI가 전부 작성해줍니다. 아래 프롬프트를 그대로 사용하세요. GPT-4o mini 를 일부러 지정하는 이유 “비용 절감”때문으로 간단한 앱에 적합합니다. API 사용 비용은 GPT-5 사용시 출력 기준 10배 이상 차이가 날 수도 있습니다.
✅ 복붙용 — AI 문장 요약기 전체 구현 요청
현재 내 앱은 Node.js + Express로 만들어져 있어.
OpenAI API를 연결해서 문장 요약기 기능을 추가해줘.
요구사항:
1. 텍스트 입력창 (여러 줄 입력 가능)
2. "AI 요약하기" 버튼
3. 버튼 클릭 시 OpenAI API에 요청해서 요약 결과 표시
4. 로딩 중에는 "요약 중..." 텍스트 표시
5. 오류 발생 시 "잠시 후 다시 시도해주세요" 메시지
기술 조건:
- 모델: gpt-4o-mini (비용 효율적)
- API 키는 process.env.OPENAI_API_KEY로 읽어오기
- npm install openai 포함
- 수정할 파일: server.js, public/index.html
시스템 프롬프트: "당신은 문장을 간결하게 요약하는 도우미입니다. 핵심만 2-3문장으로 요약해주세요."
※ 이 프롬프트 하나로 전체 기능이 구현됩니다. 코드를 이해하지 않아도 됩니다.
1
패키지 설치
터미널에서 실행
npm install openai
→ 설치 완료 후 npm run dev 재시작
2
AI가 만들어준 코드 구조 — 이렇게 생겼습니다
AI가 만들어주는 핵심 코드 흐름입니다. 이해 안 해도 됩니다. 어떤 구조인지 한 번만 눈으로 확인하세요.
server.js — OpenAI API 요청 핵심 부분
// OpenAI 클라이언트 초기화
const OpenAI = require('openai');
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
});
// 요약 API 엔드포인트
app.post('/api/summarize', async (req, res) => {
const { text } = req.body;
const response = await openai.chat.completions.create({
model: 'gpt-4o-mini',
messages: [
{ role: 'system', content: '문장을 2-3문장으로 요약해주세요.' },
{ role: 'user', content: text }
]
});
const summary = response.choices[0].message.content;
res.json({ summary });
});
3
파일 저장 후 서버 재시작
터미널
# 실행 중이면 Ctrl+C로 종료 후
npm run dev
→ 서버 재시작 완료
✅ npm run dev가 에러 없이 실행되면 → 브라우저에서 localhost:3000 접속
바이브 코딩으로 만든 AI 문장 요약기 완성 화면 예시
🎉 첫 AI 응답 확인 — 이 순간이 핵심입니다
브라우저에서 텍스트를 입력하고 "AI 요약하기" 버튼을 눌러보세요.
🤖 첫 AI 응답이 도착하는 순간 — 실제 흐름
① 입력
오늘 팀 회의에서 신규 기능 일정을 조정했고, 로그인 오류를 최우선으로 수정하기로 했다. 다음 회의는 금요일 오전 10시로 정했다.
② 처리 중
요약 중... (1~3초)
③ AI 응답
1. 신규 기능 일정 조정 필요
2. 로그인 오류 수정 최우선
3. 다음 회의: 금요일 오전 10시
2. 로그인 오류 수정 최우선
3. 다음 회의: 금요일 오전 10시
→ 여기서 처음으로 "내 앱 안에 AI가 들어왔다"는 감각이 생깁니다 🎉
AI 응답이 항상 완벽하지는 않습니다. 중요한 건 "AI가 동작하는 흐름"을 만드는 것입니다. 응답 품질은 system 프롬프트를 수정하면서 계속 개선할 수 있습니다. 처음 이상한 답이 나왔다고 해서 잘못한 것이 아닙니다.
성공 시 터미널과 브라우저 상태
# 터미널에 이런 메시지가 보이면 API 호출 성공
POST /api/summarize 200 1847ms
# 브라우저 화면에 요약 결과가 나오면 완성
요약 결과: "인공지능은 컴퓨터가 인간처럼..."
AI 응답이 내 앱 화면에 보인다면
당신은 지금 AI 서비스를 직접 만든 사람입니다.
ChatGPT를 쓰는 것이 아닙니다.
내가 만든 앱 안에서 AI가 동작하고 있습니다.
이 앱은 3편에서 만든 Vercel URL에 배포하면
누구나 쓸 수 있는 진짜 AI 서비스가 됩니다.
⚠️ 응답이 느리거나 에러가 날 때
Q
응답이 1~5초 걸려도 정상입니다
OpenAI API는 AI가 실제로 처리하는 시간이 필요합니다. "요약 중..." 로딩 텍스트가 보이다가 결과가 나오면 정상 작동입니다.
Q
에러가 났을 때 — 가장 흔한 원인 3가지
에러별 원인과 해결
401 Unauthorized
→ API 키가 잘못됐거나 .env에서 읽히지 않음
→ dotenv 설정 확인 / 키 재확인
429 Too Many Requests
→ 크레딧 부족 또는 속도 제한
→ OpenAI Platform에서 크레딧 확인
500 Internal Server Error
→ 터미널 에러 메시지 전체 복사 → AI에게 전달
바이브 코딩 OpenAI API 첫 연결 성공 예시 — AI 응답 화면과 터미널 로그
🚀 여기서 확장할 수 있는 것들
💡 AI 앱의 핵심 — 프롬프트가 곧 기능입니다
기존 앱
기능을 코드로 만듭니다.
번역 기능 → 번역 알고리즘 직접 구현
번역 기능 → 번역 알고리즘 직접 구현
AI 앱
기능을 프롬프트로 만듭니다.
번역 기능 → "이 텍스트를 영어로 번역해줘"
번역 기능 → "이 텍스트를 영어로 번역해줘"
system 프롬프트만 바꾸면 요약기 → 번역기 → 이메일 생성기로 바뀝니다. 코드는 동일합니다.
문장 요약기가 완성됐다면 같은 구조로 다른 AI 기능을 쉽게 추가할 수 있습니다. 아래는 AI에게 요청하기만 하면 만들 수 있는 것들입니다.
블로그 제목 생성기
내용을 입력하면 클릭을 유도하는 제목 5가지를 생성합니다.
"블로그 내용으로 제목 5개 생성해줘"
번역기
한국어 → 영어 또는 영어 → 한국어 자동 번역 서비스입니다.
"입력 텍스트를 영어로 번역해줘"
이메일 초안 생성기
상황을 입력하면 정중한 이메일 초안을 자동으로 작성합니다.
"이 상황에 맞는 이메일 초안 작성해줘"
키워드 추출기
긴 글에서 핵심 키워드 5-10개를 자동 추출합니다.
"이 글에서 핵심 키워드 추출해줘"
모두 같은 구조입니다:
입력 → 내 서버 → OpenAI API → 응답 표시.
system 프롬프트(AI의 역할 지시)만 바꾸면 다른 서비스가 됩니다.
입력 → 내 서버 → OpenAI API → 응답 표시.
system 프롬프트(AI의 역할 지시)만 바꾸면 다른 서비스가 됩니다.
📖 6편 Supabase와 연결하면:
AI가 요약한 결과를 Supabase에 저장하면 "내가 요약했던 글 목록"을 관리하는 서비스가 됩니다. AI에게 "요약 결과를 Supabase에도 저장해줘"라고 요청하면 됩니다.
AI가 요약한 결과를 Supabase에 저장하면 "내가 요약했던 글 목록"을 관리하는 서비스가 됩니다. AI에게 "요약 결과를 Supabase에도 저장해줘"라고 요청하면 됩니다.
📌 핵심 요약
- 🤖ChatGPT는 AI와 내가 직접 대화하는 서비스. API는 AI 기능을 내 앱 안에 심는 연결선입니다. 이번 편으로 "AI를 쓰는 사람"에서 "AI 서비스를 만드는 사람"이 됩니다.
- 🔑API 키는 platform.openai.com에서 발급. 발급 즉시 .env에 저장해야 합니다. 창을 닫으면 다시 볼 수 없습니다. Vercel 환경변수에도 별도 입력 필수.
- 💰GPT-4o mini 기준 문장 하나 요약 비용은 $0.001 미만. 개인 연습에서는 거의 무료 수준입니다. .env 보관을 지키면 예상치 못한 비용 발생을 막을 수 있습니다.
- 🛠코드는 AI에게 전부 요청합니다. "Node.js Express에 OpenAI API 연결해서 문장 요약기 만들어줘, gpt-4o-mini 사용, API 키는 env로" 한 번이면 됩니다.
- 🚀같은 구조로 번역기, 이메일 초안, 키워드 추출기, 블로그 제목 생성기를 모두 만들 수 있습니다. system 프롬프트만 바꾸면 됩니다.
❓ 자주 묻는 질문
OpenAI API 키는 어디서 발급받나요? 비용이 바로 발생하나요?
platform.openai.com에 접속해서 로그인 후 API Keys 메뉴에서 발급받을 수 있습니다. 비용은 사용한 만큼 청구되는 방식(pay-as-you-go)입니다. 개인 연습 수준에서는 비용이 매우 작게 발생합니다. 5편에서 배운 .env 파일에 키를 보관하면 GitHub에 노출될 걱정 없이 안전하게 사용할 수 있습니다.
OpenAI API와 ChatGPT는 같은 건가요? 차이가 뭔가요?
ChatGPT는 OpenAI가 만든 채팅 서비스이고, OpenAI API는 그 AI 기능을 내 앱에 직접 연결하는 도구입니다. ChatGPT는 브라우저에서 직접 대화하는 것이고, API는 내 앱 코드에서 AI에게 요청을 보내고 응답을 받아 화면에 표시하는 것입니다. 이번 편에서 만드는 문장 요약기가 바로 API를 활용한 결과물입니다.
OpenAI API 요청 비용이 걱정됩니다. 개인 연습에서 얼마나 나오나요?
개인 연습 수준에서는 비용이 매우 작습니다. GPT-4o mini 모델 기준으로 문장 하나를 요약하는 데 드는 비용은 $0.001 미만입니다. 하루 100번 테스트해도 $0.1 이하입니다. 다만 API 키가 GitHub에 노출되면 타인이 대량 사용해서 비용이 폭발할 수 있습니다. 5편에서 배운 .env 파일 보관이 필수인 이유입니다.
AI 응답이 너무 느리거나 오류가 날 때 어떻게 하나요?
응답이 느린 건 정상입니다. OpenAI API는 요청을 처리하는 데 1~5초 정도 걸립니다. 오류가 날 경우 가장 흔한 원인은 세 가지입니다. 첫째, API 키가 잘못되거나 .env에서 읽히지 않는 경우. 둘째, 요청 형식이 잘못된 경우. 셋째, 크레딧이 부족한 경우. 에러 메시지 전체를 AI에게 복사해서 보내면 원인을 진단해줍니다.
내 앱 안에서 AI가 작동합니다 — 이제 사람을 받을 차례입니다 👤
앱 완성, 배포, DB 연결, AI 기능까지 완성했습니다.
이제 이 서비스를 진짜 사용자가 쓸 수 있게 만들 차례입니다.
8편에서는 로그인 기능을 붙입니다.
"내 서비스에 회원가입이 생겼다"는 감각이
처음으로 만들어지는 편입니다.
댓글 쓰기