Next.js와 Google Gemini로 인스타그램 바이오 생성기 만들기
2025-04-18 23:14:30Next.js와 Gemini를 활용한 인스타그램 바이오 생성기 프로젝트
최근 인공지능의 발전으로 다양한 분야에서 AI를 활용한 프로젝트들이 인기를 끌고 있습니다. 그 중 하나가 바로 인스타그램 바이오 생성기입니다. 이번 블로그에서는 Next.js와 Google의 AI SDK인 Gemini를 활용하여 인스타그램에서 사용할 수 있는 창의적인 바이오를 생성하는 프로젝트를 만들어 보겠습니다.
프로젝트 소개
이 프로젝트는 사용자가 자신의 이름과 직업을 입력하면, 해당 정보를 기반으로 AI가 창의적이고 매력적인 인스타그램 바이오를 생성해주는 웹 애플리케이션을 개발하는 것을 목표로 합니다. 각 바이오는 카드 형태로 스타일링 되어 나타납니다.
필요한 도구 및 환경 설정
- Next.js: 최신 App Router 기능을 활용할 것입니다.
- Google AI SDK: Gemini 2.0 Flash 모델을 사용합니다.
- Tailwind CSS: 스타일링을 위한 프레임워크로 사용됩니다.
- Shadcn: 추가 UI 컴포넌트 관리에 사용됩니다.
사전 준비 사항
- Google 계정: Google AI Studio에 접근이 필요합니다.
- API Key 발급: Google AI SDK를 사용하기 위해 Gemini API 키가 필요합니다.
- Next.js 프로젝트 설정:
npx create-next-app@latest명령어를 사용해 기본 Next.js 프로젝트를 생성합니다.
환경 변수를 설정하기
.env.local 파일을 프로젝트 루트에 생성하고 다음과 같이 API 키를 추가합니다.
GEMINI_API_KEY=당신의-API-키-여기에-입력
API 라우트 제작하기
먼저, 바이오 생성 요청을 처리할 API 라우트를 만들어야 합니다. 아래 app/api/generate-bio/route.ts 코드를 참고하여 필요한 로직을 작성하세요.
import { NextRequest, NextResponse } from "next/server";
import { GoogleGenAI } from "@google/genai";
const ERROR_MESSAGE_500 = {
error: "Bio 생성 중 오류 발생. API 키 또는 모델을 확인하세요.",
};
const MODEL = "gemini-2.0-flash";
const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
export async function POST(req: NextRequest) {
const { name, profession } = await req.json();
try {
const prompt = `다음 정보로 인스타그램에서 사용할 창의적인 바이오를 생성하세요:
- 이름: ${name}
- 직업: ${profession}
150자 이내로 각 문단마다 생성해주세요.`;
const result = await ai.models.generateContent({
model: MODEL,
contents: prompt,
});
const text = result.text?.split("\n").filter((bio) => bio.trim() !== "");
return NextResponse.json({ bio: text });
} catch (err) {
return NextResponse.json(ERROR_MESSAGE_500, { status: 500 });
}
}
사용자 입력 폼 만들기
이제 사용자로부터 이름과 직업을 입력받을 폼을 생성합니다. Form.tsx 파일을 생성하고 다음과 같이 작성합니다.
"use client";
import { useRef } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
interface FormProps {
handleGeneratedBios: (bios: string[]) => void;
}
export default function Form({ handleGeneratedBios }: FormProps) {
const nameInputRef = useRef<HTMLInputElement>(null);
const professionInputRef = useRef<HTMLInputElement>(null);
const fetchBios = async () => {
const response = await fetch("/api/generate-bio", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name: nameInputRef.current?.value || "",
profession: professionInputRef.current?.value || "",
}),
});
if (!response.ok) {
console.error("Bio 생성 오류");
return;
}
const { bio } = await response.json();
handleGeneratedBios(bio);
if (nameInputRef.current) nameInputRef.current.value = "";
if (professionInputRef.current) professionInputRef.current.value = "";
};
return (
<form
className="flex flex-col gap-4"
onSubmit={(e) => {
e.preventDefault();
fetchBios();
}}
>
<Input placeholder="이름" ref={nameInputRef} />
<Input placeholder="직업" ref={professionInputRef} />
<Button type="submit">Bio 생성</Button>
</form>
);
}
생성된 바이오를 카드 형태로 렌더링하기
GeneratedBios.tsx 파일을 생성하여 생성된 바이오들을 카드 형태로 표시하는 컴포넌트를 만듭니다.
import { Card, CardContent } from "@/components/ui/card";
interface Props {
generatedBios: string[];
}
export default function GeneratedBios({ generatedBios }: Props) {
return (
<div className="flex flex-col gap-10 w-full max-w-3xl">
<div>
<h2 className="text-xl font-semibold mb-4">생성된 Bios</h2>
<div className="grid gap-4 md:grid-cols-2">
{generatedBios.map((bio, index) => (
<Card key={index}>
<CardContent className="p-4">{bio}</CardContent>
</Card>
))}
</div>
</div>
</div>
);
}
최종 결과 및 페이지 구성
이제 모든 것이 준비되었습니다. 다음은 app/page.tsx로, 최종 페이지를 구성하는 코드입니다.
"use client";
import Form from "@/components/Form";
import GeneratedBios from "@/components/GeneratedBios";
import { useState } from "react";
export default function Home() {
const [generatedBios, setGeneratedBios] = useState<string[]>([]);
const handleGeneratedBios = (bios: string[]) => {
setGeneratedBios(bios);
};
return (
<main className="flex flex-col min-h-screen justify-between px-6 py-10 sm:px-20 font-sans bg-white text-gray-900">
<section className="flex flex-col items-center gap-6">
<h1 className="text-2xl font-semibold text-center">
새로운 인스타그램 바이오를 생성해 보세요!
</h1>
<Form handleGeneratedBios={handleGeneratedBios} />
{!!generatedBios.length && (
<GeneratedBios generatedBios={generatedBios} />
)}
</section>
<footer className="text-sm text-gray-500 text-center mt-12">
© 2025 인스타그램 바이오 생성기. 모든 권리 보유.
</footer>
</main>
);
}
최적화 및 향후 개선 방향
- 복사 버튼 추가: 생성된 바이오를 클립보드에 쉽게 복사할 수 있도록 버튼을 추가합니다.
- 스타일 선택 기능: 바이오의 스타일을 사용자가 선택할 수 있도록 개선할 수 있습니다 (예: 전문적인, 재미있는, 미니멀리스트 등).
- 즐겨찾기 기능: 사용자가 좋아하는 바이오를 저장할 수 있는 기능을 추가합니다.
- 애니메이션 추가: 사용자 경험을 향상시키기 위해 애니메이션을 추가합니다.
결론
이와 같은 간단한 프로젝트를 통해 Next.js와 AI 모델을 어떻게 활용할 수 있는지를 배웠습니다. 인스타그램 바이오 생성기는 실용적이고 재미있는 프로젝트로, 여러분도 손쉽게 자신의 스타일에 맞춘 바이오를 생성해 보세요. 이 글을 공유하고 여러분의 창의적인 아이디어를 댓글로 남겨주세요!