Next.js(App Router) 프로젝트 루트에 .env.local 파일을 만들고, 여기에 OPENAI_API_KEY를 넣어서 서버에서 쓰는 방법을 알려줘. .gitignore에 .env.local이 있는지도 확인해줘.

OPENAI_API_KEY=강사에게_받은_임시_키_붙여넣기

• 1교시에 강사가 나눠 준 임시 키를 여기에 붙여넣습니다. 이 키는 수업 후 강사가 폐기합니다.
• .env.local은 .gitignore에 등록돼 있어 GitHub에 올라가지 않습니다 — 키 유출·요금 도용을 막는 핵심 습관입니다.
• 값을 바꾸면 개발 서버(npm run dev)를 껐다 켜야 새 키가 반영됩니다.

app/api/script/route.ts를 만들어줘. POST 요청으로 topic을 받아서, OpenAI의 /v1/chat/completions에 gpt-4o-mini 모델로 30초 분량 쇼츠 대본을 요청하고, 생성된 텍스트만 JSON으로 돌려줘. API 키는 process.env.OPENAI_API_KEY를 사용해.

import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const { topic } = await request.json();

  const res = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + process.env.OPENAI_API_KEY,
    },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages: [
        { role: "system", content: "너는 유튜브 쇼츠 대본 작가다. 짧고 강렬하게 써라." },
        { role: "user", content: "주제: " + topic + ". 30초 분량의 쇼츠 대본을 써줘." },
      ],
    }),
  });

  const data = await res.json();
  const script = data.choices?.[0]?.message?.content ?? "생성 실패";
  return NextResponse.json({ script });
}

• 왜 서버 라우트일까요? API 키를 브라우저에 노출하지 않으려면, 키를 아는 '서버'가 대신 AI를 호출해야 합니다. 학생 화면(브라우저)은 키를 절대 보지 못합니다.
• fetch로 OpenAI 주소에 POST하고, Authorization 헤더에 'Bearer ' + 키를 넣어 신분을 증명합니다.
• messages의 system은 AI의 역할, user는 실제 요청입니다. topic을 문장에 끼워 넣어 원하는 대본을 유도합니다.
• 응답에서 choices[0].message.content가 실제 생성된 글입니다. ?.(옵셔널 체이닝)과 ??(널 병합)로 값이 없을 때도 앱이 죽지 않게 처리합니다.

app/page.tsx를 클라이언트 컴포넌트로 만들어줘. 주제 입력창과 '대본 생성' 버튼이 있고, 버튼을 누르면 /api/script에 POST해서 결과를 받아 화면에 보여줘. 로딩 중에는 버튼에 '생성 중...'을 표시해. React useState를 써.

"use client";
import { useState } from "react";

export default function Home() {
  const [topic, setTopic] = useState("");
  const [script, setScript] = useState("");
  const [loading, setLoading] = useState(false);

  async function generate() {
    setLoading(true);
    const res = await fetch("/api/script", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ topic }),
    });
    const data = await res.json();
    setScript(data.script);
    setLoading(false);
  }

  return (
    <main style={{ maxWidth: 600, margin: "40px auto", padding: 20 }}>
      <h1>AI 쇼츠 대본 생성기</h1>
      <input
        value={topic}
        onChange={(e) => setTopic(e.target.value)}
        placeholder="예: 블랙홀의 비밀"
      />
      <button onClick={generate} disabled={loading}>
        {loading ? "생성 중..." : "대본 생성"}
      </button>
      {script && <pre>{script}</pre>}
    </main>
  );
}

• 'use client'는 이 파일이 브라우저에서 동작(버튼 클릭·입력 등 상호작용)한다는 표시입니다.
• useState로 입력값(topic), 결과(script), 로딩 여부(loading)를 기억합니다. 값이 바뀌면 화면이 자동으로 다시 그려집니다.
• generate 함수는 우리가 만든 /api/script로 요청을 보내고, 돌아온 대본을 script에 저장합니다. 여기에 키는 없습니다 — 서버가 대신 처리하니까요.
• loading 값으로 버튼 문구를 바꿔, 기다리는 동안 사용자에게 진행 상태를 알려줍니다.

npm run dev
# 브라우저에서 http://localhost:3000 접속

• 주제를 입력하고 '대본 생성'을 누르면 몇 초 뒤 AI가 쓴 대본이 화면에 나타납니다.
• 안 되면? 401 오류는 키가 틀렸다는 뜻입니다 — .env.local의 키를 확인하고 개발 서버를 재시작하세요.
• 결과가 비어 있으면 모델명 오타나 요청량 초과일 수 있습니다. 터미널에 찍힌 에러 메시지를 함께 확인하세요.

지금 만든 쇼츠 대본 생성기에 (1) 톤 선택(재미있게 / 진지하게) 드롭다운과 (2) 결과 복사 버튼을 추가해줘. 기존 코드 구조는 최대한 유지해줘.

• 바이브 코딩의 핵심은 완성 코드를 통째로 받기보다, 작은 기능을 하나씩 자연어로 요청하고 → 결과를 읽고 → 실행해 확인하는 반복입니다.
• AI가 준 코드를 그대로 믿지 말고, 이번 단원에서 배운 요청/응답·키 보안 개념으로 '왜 이렇게 동작하는지'를 스스로 설명할 수 있어야 진짜 실력이 됩니다.