Next.js와 Google Gemini로 인스타그램 바이오 생성기 만들기

Next.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 컴포넌트 관리에 사용됩니다.

사전 준비 사항

1. Google 계정: Google AI Studio에 접근이 필요합니다.
2. API Key 발급: Google AI SDK를 사용하기 위해 Gemini API 키가 필요합니다.
3. 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">
        &copy; 2025 인스타그램 바이오 생성기. 모든 권리 보유.
      </footer>
    </main>
  );
}

최적화 및 향후 개선 방향

• 복사 버튼 추가: 생성된 바이오를 클립보드에 쉽게 복사할 수 있도록 버튼을 추가합니다.
• 스타일 선택 기능: 바이오의 스타일을 사용자가 선택할 수 있도록 개선할 수 있습니다 (예: 전문적인, 재미있는, 미니멀리스트 등).
• 즐겨찾기 기능: 사용자가 좋아하는 바이오를 저장할 수 있는 기능을 추가합니다.
• 애니메이션 추가: 사용자 경험을 향상시키기 위해 애니메이션을 추가합니다.

결론

이와 같은 간단한 프로젝트를 통해 Next.js와 AI 모델을 어떻게 활용할 수 있는지를 배웠습니다. 인스타그램 바이오 생성기는 실용적이고 재미있는 프로젝트로, 여러분도 손쉽게 자신의 스타일에 맞춘 바이오를 생성해 보세요. 이 글을 공유하고 여러분의 창의적인 아이디어를 댓글로 남겨주세요!

도움이 될만한 추가 URL

• Google AI Studio
• Next.js Official Documentation
• Tailwind CSS Getting Started
• Shadcn UI Components