바이브코딩 - 나노바나나로 사람에게 옷 입히는 드레스업 서비스 개발하기

나노바나나로 만드는 드레스업 서비스 튜토리얼 (코알못도 OK)

“코딩을 몰라도 AI 앱을 만들 수 있다면?”
이 질문에 대한 답이 바로 나노바나(NanoBanana)와 구글 AI 스튜디오(Build)입니다.

이 글은 프로그래밍을 전혀 몰라도, 여러분이 직접 사람 사진에 옷을 입히는 드레스업 서비스를 완성할 수 있도록 손잡고 따라가는 실습 가이드입니다.

---

🛠 준비물 (5분 안에 다 준비 가능)

1. 구글 계정 – Gmail만 있으면 됩니다.
2. 이미지 2장
   • 인물 사진 (예: 본인, 연예인, 또는 무료 인물 사진)
   • 옷 사진 (예: 드레스, 셔츠, 전통의상 등)
3. 인터넷 브라우저 (크롬 추천)

👉 여기까지 준비됐다면 바로 시작합니다.

---

1단계: 구글 AI 스튜디오 들어가기

1. Google AI Studio 접속
2. 구글 계정으로 로그인
3. 왼쪽 메뉴에서 Build 클릭

Build = 바이브코딩(Vibe Coding) 공간입니다.
여기서는 코드를 한 줄도 안 쓰고, 그냥 “하고 싶은 걸 말로 적으면” 앱이 자동으로 만들어집니다.

---

2단계: 프롬프트 입력하기 (복붙하세요)

아래 문장을 그대로 붙여넣으세요 👇

사람 사진과 옷 사진을 합성하는 드레스업 앱을 만들어줘.
- 두 개의 이미지를 업로드할 수 있어야 함
- 인물 사진에 옷 이미지를 자연스럽게 합성할 것
- 크기와 위치 조정 기능 제공
- 결과 이미지를 다운로드할 수 있게 해줘

그리고 Enter!
잠시 기다리면 구글 AI 스튜디오가 자동으로 앱의 화면을 만들어줍니다.

---

3단계: 앱 화면 확인하기

• 이미지 업로드 버튼이 자동으로 생성됩니다.
  • 보통 Upload Image 1, Upload Image 2 같은 버튼이 보입니다.
• Generate 버튼이 함께 생깁니다.
  • 보통 Create Combination 또는 Generate Image라고 자동으로 이름이 붙습니다.

👉 여러분이 코드를 짠 게 아니라, AI가 버튼과 기능을 전부 생성해 준 것입니다.

---

4단계: 사진 업로드 & 합성하기

1. 첫 번째 버튼에서 인물 사진 업로드
2. 두 번째 버튼에서 옷 사진 업로드
3. Generate 버튼 클릭
4. 기다리면 합성된 결과가 화면에 나타납니다

예: 인물 사진 + 빨간 드레스 사진 → 드레스를 입은 인물 합성 결과

---

5단계: 결과 다운로드

• 화면에 나온 합성 이미지를 클릭하거나,
• 다운로드 버튼(Download Image)을 눌러 저장합니다.

👉 이제 여러분 컴퓨터에 새로운 패션 화보가 저장된 거예요!

---

6단계: 기능 추가하기 (선택사항)

조금 더 멋진 서비스를 원한다면 프롬프트를 수정하세요. 예를 들어:

- 전통의상을 선택할 수 있는 옵션 추가
- 합성 결과를 3D 렌더링 스타일로 보여주기
- 다운로드 버튼을 더 눈에 띄게 만들기

이렇게 추가 요청을 하면, AI가 바로 앱을 다시 수정해 줍니다.

---

7단계: 서비스 아이디어 확장

여기서 끝이 아닙니다. 같은 방식으로:

• 쇼핑몰용 가상 피팅룸 만들기
• 게임/메타버스 캐릭터 의상 갈아입히기
• 소상공인 제품 사진 합성 서비스 (예: 마네킹 없는 쇼핑몰)

👉 실제로 나노바나 해커톤에서는 800개 이상의 서비스 아이디어가 나왔습니다.
여러분도 단순히 따라 하기만 해도, 바로 서비스를 기획할 수 있습니다.

---

Vercel로 “나노바나나 드레스업” 서비스 배포하기 (완전 초보용)

사전 체크 (3분)

• 구글 AI Studio Build에서 이미 “인물+옷 합성” 앱을 프롬프트로 생성했고(UI/버튼 자동 생성) 결과가 잘 나오는 상태여야 합니다.
• 생성된 화면에 인물/옷 이미지 업로드 → Generate 버튼 → 합성 결과 흐름이 보이면 OK.
• (선택) 전통의상/애니메이션/3D 등 옵션을 프롬프트로 추가해둬도 좋습니다.

참고: Build는 텍스트만으로 앱을 자동 생성해 주는 바이브코딩 공간이에요.

---

방법 A) GitHub 없이 “바로 올리기(드래그&드롭)”

가장 쉬운 방법이에요. Build가 만들어준 정적 파일(HTML/CSS/JS) 묶음이라면 GitHub 없이도 됩니다.

1. 프로젝트 파일 추출

• Build 화면의 코드/파일 뷰에서 Export/Download(내보내기) 또는 파일 복사로 프로젝트를 로컬 폴더에 준비합니다.
  • 폴더 안에 index.html, assets/, styles.css, script.js 같은 구조면 베스트.

2. Vercel 가입 & 새 프로젝트

• https://vercel.com → GitHub로 로그인(또는 이메일 가입) → 우측 상단 Add New… → Project → 상단 탭에서 “Import” 대신 “Deploy manually”(Drag & Drop) 선택.
• 방금 만든 폴더를 그냥 드래그해서 올리면 Vercel이 자동으로 정적 사이트로 인식합니다.
  • Framework preset: Other
  • Build Command: 비워두기
  • Output Directory: / (루트)

3. Deploy 클릭 → 완료 링크 열어서 확인!

✅ 이 방식은 정적(프론트엔드 전용) 앱일 때 즉시 배포됩니다.
❗️만약 클라이언트에서 외부 AI 엔드포인트를 직접 호출해야 하고 API Key를 숨겨야 한다면, 방법 B로 가세요(서버리스 프록시 필요).

---

방법 B) GitHub + Next.js(추천) — 서버리스 프록시로 키 보안까지

나노바나/모델 호출에 API Key가 필요하거나, CORS/보안 이슈가 걱정되면 Next.js 기반으로 라우트를 하나 만들어 서버리스 프록시를 두고 배포하는 게 안전합니다.

1) 템플릿 만들기

로컬에서 빈 Next.js 앱을 하나 만듭니다.

# Node 18+ 권장
npx create-next-app@latest dressup-app
cd dressup-app

2) Build UI 붙이기

• Build가 생성한 HTML/CSS/JS 중 UI/업로드/버튼 부분을 app/page.tsx(또는 pages/index.tsx)로 옮깁니다.
• DOM 조작(JS) 코드는 React 기준으로 useRef/useState로 바꾸거나, 최소한 “버튼 클릭 → fetch(프록시)” 흐름만 연결되면 됩니다.
• 이미지 업로드는 <input type="file" /> 2개(인물/의상)로 구현.

3) 서버리스 프록시 라우트 추가

app/api/combine/route.ts (Next.js 13+/App Router 기준)

// app/api/combine/route.ts
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    // 1) 클라이언트에서 보낸 FormData 받기
    const form = await req.formData();
    const person = form.get("person") as File; // 인물 이미지
    const outfit = form.get("outfit") as File; // 옷 이미지

    // 2) 외부 모델 API 호출 준비 (나노바나/모델 엔드포인트)
    // 실제 엔드포인트/필드명은 사용 중인 API 문서에 맞춰 수정하세요.
    const apiKey = process.env.NANOBANANA_API_KEY; // Vercel 환경변수로 주입
    if (!apiKey) return NextResponse.json({ error: "Missing API key" }, { status: 500 });

    // 3) 외부 API로 multipart 업로드 (예시)
    const upstream = new FormData();
    upstream.append("person", person);
    upstream.append("outfit", outfit);
    // 필요시 프롬프트/옵션 추가
    upstream.append("prompt", "Dress the person with the outfit naturally.");

    const res = await fetch(process.env.MODEL_ENDPOINT as string, {
      method: "POST",
      headers: { Authorization: `Bearer ${apiKey}` },
      body: upstream,
    });

    if (!res.ok) {
      const text = await res.text();
      return NextResponse.json({ error: text }, { status: res.status });
    }

    // 4) 모델이 이미지 바이너리를 반환한다고 가정 (PNG/JPEG)
    const blob = await res.blob();
    return new NextResponse(blob, {
      status: 200,
      headers: { "Content-Type": "image/png" }, // 실제 타입으로 수정
    });
  } catch (e: any) {
    return NextResponse.json({ error: e.message }, { status: 500 });
  }
}

위 코드는 개념 예시입니다. 실제 사용 중인 나노바나/모델 API 스펙(엔드포인트, 파라미터, 응답 타입)에 맞게 MODEL_ENDPOINT, 헤더, 응답 처리 등을 바꾸세요.
Build가 만든 앱이 직접 처리한다면 이 프록시는 생략 가능하지만, API Key 보안 상 추천해요.

4) 클라이언트에서 프록시로 요청

app/page.tsx(요약)

async function handleCombine() {
  if (!personFile || !outfitFile) return;

  const form = new FormData();
  form.append("person", personFile);
  form.append("outfit", outfitFile);

  const res = await fetch("/api/combine", { method: "POST", body: form });
  if (!res.ok) { /* 에러 처리 */ return; }

  const blob = await res.blob();
  const url = URL.createObjectURL(blob);
  setResultUrl(url); // <img src={resultUrl} />
}

5) GitHub에 푸시

git init
git add .
git commit -m "dressup app"
git branch -M main
git remote add origin <YOUR_GITHUB_REPO_URL>
git push -u origin main

6) Vercel에 배포

• Vercel → Add New… → Project → GitHub에서 레포 선택
• Framework는 자동으로 Next.js 인식
• 환경변수(Environment Variables) 등록
  • NANOBANANA_API_KEY = (발급받은 키)
  • MODEL_ENDPOINT = (나노바나/모델 API URL)
• Deploy 클릭 → 끝!

7) (선택) 이미지 도메인/최적화

외부 이미지를 Next.js <Image />로 쓴다면 next.config.js에 허용 도메인 등록:

module.exports = {
  images: { remotePatterns: [{ protocol: "https", hostname: "**" }] },
};

---

배포 후 체크리스트 (실패율↓)

1. 업로드 용량: 큰 이미지는 5–10MB 이하 권장(모바일 데이터 고려).
2. 타임아웃: 모델 추론이 오래 걸릴 수 있어 Edge Functions 대신 기본 Serverless로 시작해 보세요.
3. 오류 핸들링: 응답이 200이 아니면 에러 메시지 사용자에게 안내.
4. 키 보안: API Key는 반드시 서버(환경변수) 에만 두고, 클라이언트로 노출하지 말기.
5. 안전 가이드: 미성년·학내·선정성 등 민감 맥락은 거절하도록 프롬프트/백엔드 검증 추가(문서에서도 안전 가이드 예시가 나옵니다).
6. 저장/삭제: 업로드/결과 이미지를 서버에 저장하지 않거나, 일정 시간 후 삭제 정책 명시.
7. 약관/저작권: 업로드 소재(인물/의상)의 권리 확인(모델 릴리즈/라이선스).

---

(보너스) “2분 클론” 꿀팁

• 다른 비슷한 서비스의 화면을 스크린샷해서 Build에 첨부하고
  “첨부한 이미지에 있는 서비스를 그대로 구현해줘”라고 프롬프트를 주면,
  UI가 그대로 재현된 프로토타입을 2분 만에 만들 수 있어요.
• 이렇게 만든 프런트를 방법 A로 바로 배포하거나, 방법 B로 백엔드 프록시만 얹어 보안까지 챙기면 실서비스 수준으로 업그레이드됩니다.

---