제미나이로 코칭 받아 안티그래비티로 새해카드 자동생성 웹앱 만들기

Antigravity + Gemini 3.0으로 새해 인사카드 생성기 만들기 도전기

소개

요즘 유튜브에서 너도나도 “AI 코딩은 이제 끝났다!”며 떠들썩하게 소개하는 Antigravity를 저도 처음 사용해봤습니다. 마침 2026년 새해가 다가오기도 했고, “AI로 자동 인사카드 만드는 앱을 만들어볼까?”라는 생각이 들어, 요즘 유행하는 바이브코딩 방식으로 도전해보았습니다.

바이브코딩으로 게임 만들기 한 페이지 HTML 만들기 딸깍딸깍은 해봤지만,

코딩 전문 도구로 바이브 코딩을 한 적은 한 번도 없었어요.

이렇게 무섭게? 생긴 도구로 과연 발행까지 할 수 있을까?? 생각하며 어쨌든 해보자 라는 생각으로

시도했어요!!!

Gemini 3.0 Pro를 코치 삼아서 Antigravity 활용해, 텍스트와 이미지를 모두 생성하는 자동 카드 생성기를 만들었습니다.

첫 질문!!

👉 여기서 부터 시작 되었답니다.

진행 방법

사용한 도구

Antigravity: 구글의 에이전트형 코딩 환경
Gemini 3.0 Pro: 텍스트 및 이미지 생성 모두 담당 (무료 API)

개발 흐름

Antigravity 실행 후 Mission Control 열기

다음과 같은 시스템 프롬프트 입력: >> 제미나이가 복붙해라고 했음

@Agent
Build a New Year Greeting Card Generator using Gemini 3.0 Pro.
Use selectable card-style buttons for choosing Relationship, Tone, and Theme.
The app should call Gemini 3.0 for text and image generation.
Render the result on canvas and allow the user to download the card.

에이전트가 자동으로 폴더/파일 구조 생성 및 코드 작성
수정 요청 시, "Change UI layout" 등으로 재요청하며 UI 개선

주요 코드 스니펫

🎨 카드 옵션 데이터 구조 (cardOptions.js)

export const cardOptions = {
  relationships: [
    { id: 'boss', label: '직장 상사', promptContext: 'to my boss' },
    { id: 'friend', label: '친구', promptContext: 'to my friend' },
    { id: 'family', label: '가족', promptContext: 'to my family' }
  ],
  tones: [
    { id: 'polite', label: '정중하게', promptContext: 'polite and respectful' },
    { id: 'emotional', label: '감동적으로', promptContext: 'warm and touching' }
  ],
  themes: [
    { id: 'bokeh', label: '따뜻한 보케', promptContext: 'golden bokeh lights, soft background' },
    { id: 'pixel', label: '픽셀 아트', promptContext: 'retro pixel style with cute 2026 zodiac' }
  ]
};

📡 Gemini API 호출 예시 (server/api/generate.js)

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

export async function POST(req) {
  const { promptText } = await req.json();
  const model = genAI.getGenerativeModel({ model: "gemini-pro" });
  const result = await model.generateContent(promptText);
  const response = await result.response;
  return new Response(JSON.stringify({ text: response.text() }));
}

🖼️ 이미지 결과 프리뷰 컴포넌트

<Image src={generatedImageUrl} alt="Generated Card" className="rounded-xl shadow-xl" />

카드 구성 요소

입력값:
- 관계 (예: 상사, 친구, 가족)
- 톤앤매너 (정중하게, 감성적으로 등)
- 테마 (예: 수채화, 픽셀아트 등)
AI 결과물:
- 인사말 텍스트 (50자 내외)
- 배경 이미지 (중앙 여백 포함된 스타일)
기능:
- 이미지와 텍스트를 결합해 캔버스에 표시
- 다운로드 또는 공유 기능 제공 : 문자메시지, 카톡 공유 가능!!!
  >> (혹시 이거 가능해? 라고 물어보니 이거 쉽다고 했음 )
짜잔!!! 발행한 앱!! https://new-year-card-g3rl.vercel.app/
https://new-year-card-g3rl.vercel.app/

📸 스크린샷 자리 표시

👉 앱 메인 화면
👉 카드 결과 미리보기

>>> 스터디장 이지영 교수님께 카드를 작성해서 보내드렸답니다.

결과와 배운 점

🧠 배운 점

AI와 단계별로 대화하면 복잡한 앱도 충분히 만들 수 있다는 자신감!
Antigravity의 에이전트가 설명을 너무 잘 해줘서, 비전공자도 따라갈 수 있음
처음 Gemini API를 다뤄보는 입장에서, 프롬프트만 잘 짜면 아주 괜찮은 퀄리티가 나옴

🧱 시행착오

“딸깍딸깍하면 될 줄 알았는데”... 실제로는 약 3시간 걸림 😅
배포 과정에서 ‘발행하기’ 버튼이 어디 있지? 고민함 → 에이전트가 직접 알려줘서 해결!

💡 공유하고 싶은 팁

Antigravity는 뭔가 모르겠으면 그냥 물어보세요. “이건 뭐야?”라고 입력하면 친절하게 가르쳐줍니다!
Gemini API는 이미지 쪽에서 복잡한 스타일보다 '수채화, 보케' 같은 추상적 스타일이 잘 나옵니다.

마무리 한마디

생각한 것을 실제로 만들어낼 수 있는 축복의 시대!
Antigravity와 Gemini 덕분에 기술에 자신감이 생겼습니다.
여러분, 올 한 해 건강하세요! 🎉

22기 바이브코딩 스터디 대기자 등록이 시작됐어요 💫