Claude Code로 데모를 만드는 방법: Supabase와 Vercel로 바이브코딩

바이브코딩은 프로그래머가 자연어 지시를 통해 AI 에이전트를 안내하여 인공지능이 실제 코드를 작성하도록 하는 새로운 소프트웨어 개발 패러다임입니다. 이 용어는 Andrej Karpathy(OpenAI 공동 창립자이자 Tesla의 전 AI 디렉터)가 2025년 2월의 유명한 트윗에서 만들었습니다: "바이브코딩이라고 부르는 새로운 종류의 코딩이 있습니다. 완전히 바이브에 몸을 맡기고, 기하급수적 성장을 받아들이며, 코드가 존재한다는 것조차 잊어버리는 것입니다."

이 글에서는 Claude Code를 AI 에이전트로, Supabase를 백엔드(데이터베이스, 인증, API)로, Vercel을 배포에 사용하여 완전한 작동 데모를 만드는 방법을 살펴봅니다 — 모두 이 서비스들의 무료 티어만 활용합니다.

1. 바이브코딩이란 무엇이며 왜 혁명적인가

바이브코딩은 소프트웨어 개발에서 근본적인 패러다임 전환을 나타냅니다. 한 줄씩 코드를 작성하는 대신 개발자는:

1. 원하는 것을 자연어로 설명합니다.
2. AI 에이전트가 완전한 코드를 생성합니다.
3. 개발자가 검토, 테스트, 반복합니다.

왜 효과적인가

• 속도: 며칠이 걸릴 프로젝트를 몇 시간 만에 만들 수 있습니다.
• 접근성: 전문가가 아닌 개발자도 작동하는 제품을 만들 수 있습니다.
• 빠른 반복: 아이디어를 테스트하고 훨씬 빠르게 방향을 전환할 수 있습니다.
• 제품 중심: 어떻게 대신 _무엇_에 집중합니다.

바이브코딩을 사용할 때

바이브코딩은 다음에 완벽합니다:

• 데모와 MVP: 아이디어를 검증하기 위한 프로토타입을 빠르게 구축.
• 해커톤: 단 몇 시간 만에 작동하는 제품 생성.
• 사이드 프로젝트: 몇 주를 투자하지 않고 새로운 기술 탐색.
• 개념 증명: 이해관계자나 투자자에게 기술적 실현 가능성 시연.

주의: 바이브코딩은 데모와 프로토타입에 탁월합니다. 높은 보안 및 확장성 요구 사항이 있는 프로덕션급 애플리케이션의 경우 생성된 코드에 대한 철저한 검토가 여전히 필수적입니다.

2. 기술 스택: Claude Code + Supabase + Vercel

Claude Code

Claude Code는 Anthropic의 AI 코딩 에이전트입니다. 터미널에서 직접 작동하며 다음을 할 수 있습니다:

• 전체 코드베이스를 읽고 이해.
• 파일 생성, 수정, 삭제.
• 터미널 명령 실행.
• API 및 외부 서비스와 상호작용.
• Git으로 버전 관리.
• 오류와 버그에 대해 자율적으로 반복.

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase (무료 티어)

Supabase는 다음을 제공하는 오픈소스 Firebase 대안입니다:

• PostgreSQL 데이터베이스: 완전한 관계형 데이터베이스.
• 인증: 이메일, Google, GitHub 등으로 로그인.
• REST 및 Realtime API: 스키마에서 자동 생성.
• 스토리지: 파일과 이미지용.
• Edge Functions: 서버리스 함수.

무료 티어에 포함:

| 리소스 | 무료 한도 | |----------|-----------| | 데이터베이스 | 500 MB | | 스토리지 | 1 GB | | 대역폭 | 5 GB | | Edge Function 호출 | 월 500K | | 인증된 사용자 | 무제한 | | 프로젝트 | 활성 프로젝트 2개 |

Vercel (무료 티어)

Vercel은 Next.js 애플리케이션을 위한 완벽한 배포 플랫폼입니다:

• GitHub에서 자동 배포.
• 모든 브랜치와 PR에 대한 프리뷰 배포.
• 최적의 성능을 위한 글로벌 CDN.
• Serverless Functions 포함.
• 무료 기본 분석.

무료 티어에 포함:

| 리소스 | 무료 한도 | |----------|-----------| | 대역폭 | 월 100 GB | | Serverless Function 실행 | 월 100 GB-시간 | | 빌드 | 월 6,000분 | | 프로젝트 | 무제한 | | 배포 | 무제한 |

3. 초기 설정: 환경 준비

사전 요구 사항

시작하기 전에 다음을 확인하세요:

• Node.js 18+ 설치.
• Git 구성.
• GitHub 계정.
• Supabase 계정 (supabase.com에서 무료).
• Vercel 계정 (vercel.com에서 무료).
• Claude Code 설치 (npm install -g @anthropic-ai/claude-code).

단계 1: 프로젝트 생성

터미널을 열고 Claude Code를 시작합니다:

mkdir my-demo-app && cd my-demo-app
claude

이제 자연어로 Claude Code에 지시를 시작할 수 있습니다:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code가 자동으로 실행합니다:

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

단계 2: Supabase 구성

1. supabase.com에 가서 새 프로젝트를 생성합니다.
2. Settings > API에서 Project URL과 anon key를 메모합니다.
3. Claude Code가 있는 터미널로 돌아갑니다:

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Code가 완전한 구성을 생성합니다:

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. 데모 만들기: 작업 관리 앱

구체적인 데모를 만들어 봅시다: 인증, 전체 CRUD, 현대적 인터페이스를 갖춘 작업 관리 앱.

데이터베이스 스키마 정의

스키마를 생성하도록 Claude Code에 지시합니다:

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

Claude Code가 완전한 마이그레이션을 생성합니다:

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

이 마이그레이션은 Supabase 대시보드(SQL Editor)에서 직접 또는 CLI를 통해 실행할 수 있습니다.

TypeScript 타입 생성

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

사용자 인터페이스 구축

이제 바이브코딩의 가장 강력한 부분이 옵니다. Claude Code에 높은 수준의 지시를 내립니다:

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Code가 컴포넌트별로 전체 인터페이스를 구축합니다.

인증 추가

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

Claude Code가 Next.js 미들웨어와 인증 페이지를 구성합니다:

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. 고급 바이브코딩 패턴

반복적 프롬프팅

효과적인 바이브코딩의 비결은 반복입니다. 하나의 프롬프트에 모든 것을 설명하려 하지 마세요. 단계별로 진행하세요:

Step 1: "Create the base layout with header and sidebar"
Step 2: "Add the project list in the sidebar with a button to create new ones"
Step 3: "Create the Kanban view in the main area"
Step 4: "Add drag & drop between columns"
Step 5: "Implement the modal to create new tasks"
Step 6: "Add toast notifications for user feedback"

팁: 프롬프트가 구체적이고 맥락이 풍부할수록 결과가 좋습니다. Claude Code는 전체 코드베이스에 접근할 수 있으므로 새로운 기능을 일관되게 통합할 수 있습니다.

오류 처리

무언가 작동하지 않을 때 (그리고 그럴 것입니다), 간단히 말할 수 있습니다:

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Code가 코드를 분석하고, 문제를 식별하고, 수정합니다.

AI로 리팩토링

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

테스트

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. Vercel에 배포: 코드에서 세계로

단계 1: GitHub에 푸시

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

단계 2: Vercel 연결

1. vercel.com에 가서 "Add New Project"를 클릭합니다.
2. 방금 만든 GitHub 저장소를 가져옵니다.
3. 환경 변수를 추가합니다:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. "Deploy"를 클릭합니다.

단계 3: 커스텀 도메인 구성 (선택사항)

Vercel은 my-demo-app.vercel.app과 같은 무료 URL을 제공합니다. 커스텀 도메인의 경우:

You: Add the configuration for a custom domain in vercel.json

프리뷰 배포

GitHub에서 Pull Request를 열 때마다 Vercel은 고유한 URL로 프리뷰 배포를 자동 생성합니다. 병합 전에 변경사항을 보여주기에 완벽합니다.

7. 데모 최적화

성능

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Supabase로 실시간

데모에서 항상 인상적인 기능은 실시간입니다:

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

다크 모드

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. 효과적인 바이브코딩을 위한 모범 사례

1. 프롬프트에서 구체적으로

❌ "Make a nice page"
✅ "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. 컨텍스트 제공

❌ "Add authentication"
✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. 작은 단계로 반복

하나의 프롬프트에 모든 것을 구축하려 하지 마세요. 점진적으로 진행하세요:

1. 기본 레이아웃
2. 한 번에 하나의 기능
3. 스타일링과 다듬기
4. 오류 처리
5. 테스트

4. 생성된 코드 검토

바이브코딩은 코드를 읽지 않는다는 의미가 아닙니다. 항상 검토하세요:

• 보안: RLS 정책, 입력 유효성 검사, 데이터 살균.
• 성능: N+1 쿼리, 불필요한 클라이언트 사이드 컴포넌트.
• 모범 사례: 프로젝트 구조, 명명 규칙.

5. Git을 전략적으로 사용

You: Commit the changes with a descriptive message after each completed feature.

문제가 발생하면 되돌릴 수 있습니다.

9. 비용: 정말 전부 무료인가?

각 서비스의 비용 분석:

| 서비스 | 무료 플랜 | 지불 시점 | |---------|-----------|-------------| | Claude Code | Anthropic 플랜 필요 (월 $20부터) 또는 API 키 | 즉시, 하지만 가치는 막대함 | | Supabase | 넉넉한 무료 티어 (2 프로젝트, 500MB DB) | 무료 티어 한도 초과 시 | | Vercel | 개인 프로젝트용 무료 티어 | 팀 또는 상업적 사용 시 | | GitHub | 공개 및 비공개 저장소 무료 | 엔터프라이즈 기능 |

참고: Claude Code는 구독 또는 API 크레딧이 필요하지만, 개발 속도 측면에서 투자 대비 수익은 매우 큽니다. 데모나 MVP의 경우 총 비용은 약 $20 수준입니다.

무료 AI 대안

비용을 완전히 제로로 유지하려면:

• Cursor (제한이 있는 무료 티어).
• GitHub Copilot (학생 및 오픈소스 무료).
• Codeium/Windsurf (넉넉한 무료 티어).

10. 데모에서 제품으로: 다음 단계

데모가 라이브된 후 진행 방법:

1. 피드백 수집: 잠재 사용자와 데모를 공유하고 의견을 모읍니다.
2. 빠르게 반복: 요청된 변경사항 구현에 바이브코딩을 사용합니다.
3. 지표 모니터링: Vercel Analytics와 Supabase Dashboard가 필수 데이터를 제공합니다.
4. 필요시 확장: 수요가 검증된 후에만 유료 플랜으로 업그레이드합니다.

결론

Claude Code, Supabase, Vercel을 이용한 바이브코딩은 기록적인 시간 내에 데모와 MVP를 만들기 위한 강력한 조합입니다. 이전에는 몇 주의 개발이 걸렸던 것이 이제 놀라울 정도로 높은 품질로 단 몇 시간 만에 달성할 수 있습니다.

핵심은 올바른 마인드셋으로 바이브코딩에 접근하는 것입니다: "코딩을 모른다"는 것이 아니라 AI 도구로 능력을 증폭시키는 것입니다. 기반 기술(React, SQL, 인증, 배포)에 대해 더 많이 알수록 AI 에이전트를 원하는 결과로 안내하는 데 더 효과적입니다.

소프트웨어 개발의 미래가 여기에 있으며, 시작 비용은 이전보다 낮은 적이 없습니다. 데모를 만들고, 실제 사용자와 검증하고, 다음 위대한 제품을 구축하세요.

첫 번째 데모를 위한 체크리스트:

• [x] Claude Code 설치 및 구성 완료
• [x] 데이터베이스 스키마로 Supabase 프로젝트 생성
• [x] shadcn/ui로 Next.js 프로젝트 초기화
• [x] 인증 구성 완료
• [x] 전체 CRUD 구현 완료
• [x] 현대적이고 반응형 UI
• [x] Vercel에 배포 완료
• [x] 피드백을 위한 공유 가능한 URL 준비 완료