MVP 빠른 구축 스킬

한국 스타트업 스타일로 필요한 기능만 빠르게 만들어 시장에 출시합니다.

핵심 원칙

1. 완벽함보다 빠른 출시

❌ 모든 기능을 완벽하게
✅ 핵심 기능 하나만 제대로

2. 코드 품질보다 속도

❌ 완벽한 아키텍처, 테스트 커버리지 100%
✅ 작동하는 코드, 나중에 리팩토링

3. 검증 후 확장

❌ 처음부터 확장 가능한 구조
✅ 일단 검증하고 필요하면 다시 만들기

MVP 체크리스트

최소 기능만 포함

# 예시: 맛집 추천 앱

## ✅ 포함할 것 (MVP)
- [ ] 카카오 로그인
- [ ] 맛집 목록 보기
- [ ] 맛집 상세 정보
- [ ] 찜하기

## ❌ 나중에 (v2)
- 회원가입/로그인 (카카오 로그인으로 충분)
- 리뷰 작성 (일단 정보만)
- 추천 알고리즘 (수동 큐레이션으로 시작)
- 관리자 페이지 (Notion/구글 시트로 대체)
- 푸시 알림
- 포인트/쿠폰

빠른 스택 선택

Next.js + Supabase (가장 빠름)

# 30분 안에 인증 + DB 완성
npx create-next-app@latest my-mvp
cd my-mvp
npm install @supabase/supabase-js @supabase/auth-helpers-nextjs

장점:

인증 내장 (소셜 로그인 5분 설정)
DB + API 자동 생성
무료 플랜으로 시작
배포 원클릭 (Vercel)

설정

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

// 로그인 (1줄)
await supabase.auth.signInWithOAuth({ provider: 'kakao' });

// 데이터 조회 (1줄)
const { data } = await supabase.from('restaurants').select('*');

// 데이터 추가 (1줄)
await supabase.from('restaurants').insert({ name: '맛집' });

빠른 구현 패턴

1. 인증은 소셜 로그인만

// ❌ 이메일 회원가입 구현 (시간 낭비)
// - 이메일 인증
// - 비밀번호 재설정
// - 유효성 검증
// - 스팸 방지

// ✅ 카카오 로그인 하나로 끝
<button onClick={() => supabase.auth.signInWithOAuth({ provider: 'kakao' })}>
  카카오로 3초 시작
</button>

2. 관리자 기능은 따로 만들지 않기

// ❌ 관리자 페이지 개발
// - 권한 관리
// - UI/UX 디자인
// - CRUD 화면

// ✅ Supabase Studio 사용
// 브라우저에서 바로 데이터 수정
// 별도 개발 불필요

3. 결제는 간단하게

// ❌ 여러 결제 수단
// - 카드, 계좌이체, 휴대폰
// - 정기 결제
// - 환불 처리

// ✅ 토스페이먼츠 간편결제만
import { loadTossPayments } from '@tosspayments/payment-sdk';

const tossPayments = await loadTossPayments(clientKey);
await tossPayments.requestPayment('카드', {
  amount: 10000,
  orderId: generateId(),
  orderName: '서비스 이용권',
  successUrl: '/payment/success',
  failUrl: '/payment/fail',
});

4. 이미지는 외부 서비스

// ❌ 자체 이미지 서버 구축
// - S3 설정
// - CDN 연동
// - 리사이징

// ✅ Cloudinary 무료 플랜
import { CldImage } from 'next-cloudinary';

<CldImage src="my-image" width={300} height={300} crop="fill" />

5. 이메일은 무료 서비스

// ❌ SMTP 서버 설정

// ✅ Resend (무료 100통/일)
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
  from: '[email protected]',
  to: user.email,
  subject: '환영합니다!',
  html: '<p>가입을 환영합니다!</p>',
});

실전 MVP: 맛집 앱 (2시간 개발)

1단계: 프로젝트 생성 (5분)

npx create-next-app@latest foodie --typescript --tailwind --app
cd foodie
npm install @supabase/supabase-js

2단계: Supabase 설정 (10분)

Supabase 회원가입
New Project 생성
Table Editor에서 테이블 생성:

-- restaurants 테이블
create table restaurants (
  id uuid default gen_random_uuid() primary key,
  name text not null,
  address text,
  image_url text,
  rating numeric default 0,
  created_at timestamp default now()
);

-- favorites 테이블
create table favorites (
  user_id uuid references auth.users not null,
  restaurant_id uuid references restaurants not null,
  created_at timestamp default now(),
  primary key (user_id, restaurant_id)
);

3단계: 홈 페이지 (30분)

// app/page.tsx
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';

export default async function Home() {
  const supabase = createServerComponentClient({ cookies });
  const { data: restaurants } = await supabase
    .from('restaurants')
    .select('*')
    .order('rating', { ascending: false })
    .limit(20);

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-8">오늘의 맛집</h1>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {restaurants?.map((restaurant) => (
          <div key={restaurant.id} className="border rounded-lg p-4">
            <img
              src={restaurant.image_url || '/placeholder.jpg'}
              alt={restaurant.name}
              className="w-full h-40 object-cover rounded"
            />
            <h2 className="font-bold mt-2">{restaurant.name}</h2>
            <p className="text-sm text-gray-600">{restaurant.address}</p>
            <div className="flex items-center mt-2">
              <span className="text-yellow-500">⭐</span>
              <span className="ml-1">{restaurant.rating.toFixed(1)}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

4단계: 카카오 로그인 (15분)

// app/login/page.tsx
'use client';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';

export default function Login() {
  const supabase = createClientComponentClient();

  const handleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: 'kakao',
      options: {
        redirectTo: `${location.origin}/auth/callback`,
      },
    });
  };

  return (
    <div className="flex items-center justify-center min-h-screen">
      <button
        onClick={handleLogin}
        className="bg-yellow-400 text-black px-8 py-3 rounded-lg font-bold"
      >
        카카오로 3초 시작
      </button>
    </div>
  );
}

// app/auth/callback/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get('code');

  if (code) {
    const supabase = createRouteHandlerClient({ cookies });
    await supabase.auth.exchangeCodeForSession(code);
  }

  return NextResponse.redirect(new URL('/', requestUrl.origin));
}

5단계: 찜하기 기능 (20분)

// components/FavoriteButton.tsx
'use client';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { useState } from 'react';

export function FavoriteButton({ restaurantId }: { restaurantId: string }) {
  const [isFavorite, setIsFavorite] = useState(false);
  const supabase = createClientComponentClient();

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

    if (!user) {
      alert('로그인이 필요합니다!');
      return;
    }

    if (isFavorite) {
      await supabase
        .from('favorites')
        .delete()
        .eq('user_id', user.id)
        .eq('restaurant_id', restaurantId);
    } else {
      await supabase.from('favorites').insert({
        user_id: user.id,
        restaurant_id: restaurantId,
      });
    }

    setIsFavorite(!isFavorite);
  };

  return (
    <button onClick={toggleFavorite}>
      {isFavorite ? '❤️' : '🤍'}
    </button>
  );
}

6단계: 배포 (5분)

# GitHub에 푸시
git add .
git commit -m "MVP 완성"
git push

# Vercel 배포
npx vercel --prod

완성! 🎉

✅ 맛집 목록
✅ 카카오 로그인
✅ 찜하기
✅ 배포 완료

MVP 이후 빠른 검증

A/B 테스트 (Google Analytics)

// 간단한 이벤트 추적
'use client';
import { useEffect } from 'react';

export function TrackView({ pageName }: { pageName: string }) {
  useEffect(() => {
    if (typeof window !== 'undefined' && window.gtag) {
      window.gtag('event', 'page_view', {
        page_name: pageName,
      });
    }
  }, [pageName]);

  return null;
}

피드백 수집 (Tally 무료 폼)

<!-- 간단한 피드백 버튼 -->
<button onclick="window.open('https://tally.so/r/your-form', '_blank')">
  피드백 주기
</button>

시간 절약 팁

1. UI는 Shadcn/ui

npx shadcn-ui@latest init
npx shadcn-ui@latest add button card

2. 아이콘은 Lucide

import { Heart, Star, MapPin } from 'lucide-react';

<Heart className="w-5 h-5" />

3. 폰트는 Google Fonts

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

4. 색상은 Tailwind 기본값

// ❌ 커스텀 색상 정의
// ✅ Tailwind 기본 색상 사용
<div className="bg-blue-500 text-white">

피해야 할 것

❌ 과도한 최적화

// MVP 단계에서 불필요:
// - 이미지 최적화 (나중에)
// - 번들 사이즈 최적화 (나중에)
// - SSR/SSG 최적화 (나중에)
// - 캐싱 전략 (나중에)

❌ 완벽한 디자인

// MVP 단계에서:
// - Figma 디자인 (불필요)
// - 브랜드 가이드라인 (불필요)
// - 반응형 완벽 대응 (모바일만)
// - 애니메이션 (불필요)

❌ 확장성 고려

// MVP 단계에서:
// - 마이크로서비스 (불필요)
// - 복잡한 상태 관리 (불필요)
// - 추상화/인터페이스 (불필요)
// - 디자인 패턴 (불필요)

2주 출시 체크리스트

### Week 1
- [ ] Day 1-2: 핵심 기능 정의 (1가지만!)
- [ ] Day 3: DB 스키마 설계
- [ ] Day 4-5: 프론트엔드 개발
- [ ] Day 6-7: 백엔드 API 개발

### Week 2
- [ ] Day 8-9: 통합 테스트
- [ ] Day 10: 버그 수정
- [ ] Day 11: 배포
- [ ] Day 12: 베타 테스터 모집
- [ ] Day 13-14: 피드백 수집 및 개선

실패하더라도 빠르게

"빠르게 실패하고, 빠르게 배우고, 빠르게 피봇하기"

2주 만에 시장 검증
안되면 다음 아이디어로
6개월 개발하고 실패하지 않기

무료 도구 모음

인증: Supabase Auth
DB: Supabase (PostgreSQL)
배포: Vercel
도메인: .xyz (연 $1)
이메일: Resend (100통/일)
이미지: Cloudinary (25GB/월)
결제: 토스페이먼츠 (수수료만)
분석: Google Analytics
폼: Tally (무제한)
노코드 관리자: Retool (무료 플랜)

mvp-quick-build

Installation

Similar popular skills

Also in this package

Agent compatibility

Package contents

History

SKILL.md

MVP 빠른 구축 스킬

핵심 원칙

1. 완벽함보다 빠른 출시

2. 코드 품질보다 속도

3. 검증 후 확장

MVP 체크리스트

최소 기능만 포함

빠른 스택 선택

Next.js + Supabase (가장 빠름)

설정

빠른 구현 패턴

1. 인증은 소셜 로그인만

2. 관리자 기능은 따로 만들지 않기

3. 결제는 간단하게

4. 이미지는 외부 서비스

5. 이메일은 무료 서비스

실전 MVP: 맛집 앱 (2시간 개발)

1단계: 프로젝트 생성 (5분)

2단계: Supabase 설정 (10분)

3단계: 홈 페이지 (30분)

4단계: 카카오 로그인 (15분)

5단계: 찜하기 기능 (20분)

6단계: 배포 (5분)

MVP 이후 빠른 검증

A/B 테스트 (Google Analytics)

피드백 수집 (Tally 무료 폼)

시간 절약 팁

1. UI는 Shadcn/ui

2. 아이콘은 Lucide

3. 폰트는 Google Fonts

4. 색상은 Tailwind 기본값

피해야 할 것

❌ 과도한 최적화

❌ 완벽한 디자인

❌ 확장성 고려

2주 출시 체크리스트

실패하더라도 빠르게

무료 도구 모음