2강 교재 · 배포 · 데이터베이스 · 결제로 글로벌 서비스 완성

이 템플릿 하나로, 결제가 되고 데이터가 연결되는 프리미엄 웹사이트를 직접 만들 수 있습니다.

코드를 받은 후 무엇을 해야 하는지, 어디에 활용할 수 있는지, 그다음엔 뭘 해야 하는지까지 전부 이 페이지 하나에 담았습니다. 이 방법으로 하면 시간 효율이 올라가고, 토큰 사용량이 현저히 줄어듭니다.

Google Drive · ZIP 파일 · React + Vite + Firebase + PayPal + 토스페이먼츠 내장 | IDE는 구글 안티그래비티 권장

⏱ 약 1시간 이면 내 사이트 완성 💳 결제 PayPal + 토스 내장 🔥 데이터 Firebase 연결 🎬 영상 풀스크린 배경 포함

🎯 이번 강의의 목표

🎯템플릿으로 "하나"를 빠르게 만들어라

제가 드린 템플릿으로 1강의 '돈 되는 카테고리' 중 하나를 골라 거의 0원으로 빠르게 만들고, 홍보 콘텐츠까지 만들어 런칭하는 게 목표입니다. 아래 영상은 더 깊이 배우고 싶을 때 보는 자료 — 핵심은 완벽함이 아니라 속도, 일단 세상에 내보내는 것.

잘 버는

📸

AI 사진·이미지

셀카·헤드샷·프로필 (Photo AI · HeadshotPro)

잘 버는

🤖

AI 생산성 도구

챗봇·SEO·글쓰기 B2B 반복결제

잘 버는

📚

정보·교육·뉴스레터

강의·전자책·스폰서십, 원가 거의 0

잘 버는

📺

페이스리스 콘텐츠

자동 영상 채널, 초저비용·고마진

잘 버는

🎮

바이럴 게임·노벨티

한 방 화제성으로 광고 수익

잘 버는

🛒

노코드 커머스·예약

틈새 자동화, 작지만 꾸준한 구독

⚡

속도 > 완전함. 100% 완벽한 하나를 오래 붙잡기보다, 빠르게 만들어 배포한 하나가 훨씬 낫습니다. 부족한 부분은 그다음에 채우세요.

1강 카테고리 지도 다시 보기 (돈 되는 / 망하는 카테고리)

PART 1 · 다운로드 후 첫 실행

📥압축 해제 → 설치 → 실행

3단계면 데모 사이트가 그대로 켜집니다.

Step 1. 준비물

준비물	설치 방법	확인 명령어
Node.js (v18 이상)	nodejs.org 에서 LTS 다운로드	`node -v`
⚡ 안티그래비티 IDE 구글의 AI 에이전트 코드 에디터	antigravity.google 에서 다운로드 ↗	—

Step 2. 안티그래비티에서 폴더 열기

안티그래비티 IDE 실행 → File → Open Folder
압축을 푼 템플릿 폴더를 선택해서 엽니다
상단 메뉴 Terminal → New Terminal 로 터미널을 엽니다

Step 3. 설치 & 실행 (둘 중 아무거나)

⌨️ 방법 A · 터미널에 직접 입력

아래 두 줄을 차례로 실행

# 패키지 설치 (최초 1회) npm install # 개발 서버 실행 npm run dev

💬 방법 B · 에이전트에게 시키기

안티그래비티 채팅창에 그대로 복사

💬 안티그래비티 에이전트에게 이 프로젝트에 필요한 패키지를 설치하고(npm install), 개발 서버를 실행해줘(npm run dev). 실행되면 주소를 알려줘.

Step 4. 브라우저에서 확인

VITE v5.4 ready in 400 ms ➜ Local: http://localhost:5173/

http://localhost:5173 을 열면 웹사이트가 보입니다! 🎉

💡 아무것도 수정하지 않아도 데모 사이트가 바로 작동합니다. 영상·텍스트·애니메이션이 전부 포함되어 있어요.

PART 2 · 이걸로 무엇을 만들 수 있나

🎯활용 카테고리

영상과 텍스트만 교체하면 완전히 다른 사이트가 됩니다.

🚀 SaaS / AI 서비스 랜딩

"서비스를 보여주고 바로 결제받고 싶다"

AI 도구 소개 사이트
자동화 서비스 홍보
API 제품 랜딩
챗봇·번역 서비스 판매

★ 이 템플릿과 가장 잘 맞는 카테고리

🛒 디지털 상품 판매

"만든 것을 온라인으로 팔고 싶다"

이북(E-book) 판매
온라인 강의·코스
디자인 에셋(아이콘·템플릿)
프롬프트 팩 판매

★ PayPal·토스 내장 → 상품 정보만 수정하면 판매 시작

🎓 교육 / 아카데미

"강의나 멘토링을 팔고 싶다"

온라인 아카데미 메인
부트캠프 모집
1:1 코칭 예약
워크샵 등록

★ 3단 가격표 → 입문/심화/VIP 구조로 바로 활용

🎮 게임 / 앱 랜딩

"앱·게임을 소개하고 다운로드 유도"

모바일 게임 소개
데스크톱 앱 다운로드
크롬 확장 홍보
웹 전용 게임

🎨 포트폴리오 / 크리에이터

"내 작업물을 고급스럽게 보여주고 싶다"

영상 크리에이터 포트폴리오
사진작가 갤러리
음악가·DJ 프로모션
3D 아티스트 쇼릴

★ 배경 영상에 본인 작업물을 넣으면 그 자체가 포트폴리오

PART 3 · 내 사이트로 바꾸기

✏️이 3개 파일만 수정하면 됩니다

텍스트, 영상, API 키 — 딱 세 곳.

순서	파일	뭘 바꾸나요?
1️⃣	`src/config/content.ts`	모든 텍스트 (브랜드명·설명·지표·기능)
2️⃣	`src/config/videos.ts`	배경 영상 5개의 URL
3️⃣	`.env`	Firebase·PayPal·토스 API 키

⚡ 안티그래비티에서는 두 가지 방법이 있어요. 코드를 직접 고쳐도 되고, 에이전트에게 말로 시켜도 됩니다. 아래 각 파일마다 그대로 복사해서 쓰는 명령을 넣어뒀어요.

1️⃣ 텍스트 변경 — `content.ts`

export const SITE_CONFIG = { brandName: '내 브랜드 이름', // ← 여기 수정 hero: { titleLeft: ['나만의', '제목'], // 히어로 큰 글씨 description: '서비스 소개문...', // 설명글 }, metrics: { items: [ { value: '10만+', label: '사용자' }, // 성과 지표 ]}, };

💬 안티그래비티 에이전트에게 src/config/content.ts 파일을 열어서, brandName을 '○○○'로 바꾸고 hero 제목과 description을 내 서비스 소개에 맞게 고쳐줘. metrics 지표 숫자도 [원하는 값]으로 바꿔줘.

2️⃣ 영상 변경 — `videos.ts`

export const VIDEO_URLS = { hero: '/my-hero.mp4', // public/ 폴더에 MP4 넣기 technology: '', // 빈 문자열 = 검정 배경 };

MP4를 public/ 폴더에 복사 → 경로 지정. 무료 영상: Pexels, Pixabay

💬 안티그래비티 에이전트에게 내가 public 폴더에 넣은 영상 파일들을 src/config/videos.ts의 hero·section2·metrics·footer 항목에 연결해줘. 사용하지 않을 영상은 빈 문자열('')로 둬.

3️⃣ API 키 — `.env`

# 먼저 예시 파일 복사 cp .env.example .env VITE_FIREBASE_API_KEY=AIzaSy... # 회원 인증 + DB VITE_PAYPAL_CLIENT_ID=AdUXe... # 해외 결제 VITE_TOSS_CLIENT_KEY=test_ck_... # 국내 결제

💬 안티그래비티 에이전트에게 .env.example을 복사해서 .env 파일을 만들고(cp .env.example .env), 내가 알려주는 Firebase·PayPal·토스 키를 각 항목에 채워줘. 키는 지금 채팅에 붙여넣을게.

💡 처음엔 안 넣어도 됩니다! 사이트는 키 없이도 작동하고, 결제·로그인을 켤 때만 넣으면 됩니다.

PART 4 · 결제 연동

💳PayPal + 토스페이먼츠

해외는 달러(PayPal), 국내는 원화(토스). 필요한 것만 쓰세요.

💵 PayPal (해외 — 달러)

developer.paypal.com 가입
Apps & Credentials → Create App → Client ID 복사
.env에 VITE_PAYPAL_CLIENT_ID 입력
src/lib/paypal.ts에서 상품 이름·가격 수정

🇰🇷 토스페이먼츠 (국내 — 원화)

developers.tosspayments.com 가입
내 개발정보 → 클라이언트 키 복사
.env에 VITE_TOSS_CLIENT_KEY 입력
src/lib/toss.ts에서 상품 이름·가격 수정

상품 가격 수정 예시

// src/lib/paypal.ts export const PRODUCTS = [{ name: 'AI 활용 가이드북', price: '19.99', currency: 'USD', }]; // src/lib/toss.ts export const TOSS_PRODUCTS = [{ name: 'AI 활용 가이드북', price: 19900, currency: 'KRW', }];

PART 5 · 회원 관리 + 데이터 저장

🔥Firebase 연동하기

회원가입·로그인, 결제 기록, 사용자 프로필, 구독 상태까지.

기능	설명
회원 가입/로그인	Google·Apple·이메일 로그인
결제 기록 저장	누가 뭘 샀는지 자동 기록
사용자 프로필	회원 정보 관리
구독 상태 추적	구독 중인지 만료됐는지 확인

설정 순서 (약 10분, 무료 플랜으로 충분)

Firebase Console → 프로젝트 추가
웹 앱 등록 (</> 아이콘)
설정값을 .env에 복사
Authentication → Google 로그인 활성화
Firestore Database → 데이터베이스 만들기

🛠️ 기술 스택

기술	역할
React	화면을 만드는 핵심 프레임워크
TypeScript	타입을 추가해 오류 방지
Vite	초고속 개발 서버 & 빌드
Tailwind CSS	클래스 기반 스타일링
Framer Motion	애니메이션 라이브러리
Firebase	회원 인증 + NoSQL DB(Firestore)
PayPal / 토스	해외(달러) / 국내(원화) 결제

📂 폴더 구조 (⭐ config 폴더만 수정하면 됩니다)

📦 ConnectAI-LAB-Template/ ├── 📄 .env.example ← 복사해서 .env로 ├── 📁 public/ ← 🎬 영상·이미지 넣기 └── 📁 src/ ├── 📁 config/ ← ⭐ 이 폴더만 수정! │ ├── content.ts ← ✏️ 모든 텍스트 │ └── videos.ts ← 🎬 영상 URL ├── 📁 lib/ ← 외부 서비스 연동 │ ├── firebase.ts firestore.ts │ └── paypal.ts toss.ts ├── 📁 components/payment/ ← 💰 결제 버튼 └── 📄 App.tsx ← 메인 레이아웃

❓ 자주 묻는 질문

PayPal·토스 둘 다 써야?	아니요. 해외만이면 PayPal, 국내만이면 토스만.
모바일도 잘 보이나요?	네, 반응형으로 모바일·태블릿·데스크톱 자동 대응.
배포는 어떻게?	`npm run build` 후 `dist/` 폴더를 Vercel·Netlify·Firebase Hosting에.
실제 결제를 받으려면?	테스트 키를 실서비스 키로 교체 (PayPal Live ID, 토스 `live_ck_`).

🎯 정리 — 총 1시간이면 완성

단계	할 일	시간
1	`npm install` → `npm run dev`	1분
2	`content.ts` 텍스트 수정	10분
3	`videos.ts` 영상 교체	10분
4	`.env` 설정 (Firebase + 결제)	30분
5	테스트 결제 확인	10분
6	`npm run build` → 배포	10분

STEP 1 · 세상에 공개

1웹사이트 배포하기

디자인을 입혀 사이트를 띄우고, 내 도메인으로 전 세계에 공개합니다.

1-1

디자인 적용 + 최종 배포

Stitch로 만든 디자인을 가져와 배포한 뒤, 데스크탑과 스마트폰에서 직접 확인하며 기초 구성을 완료합니다.

▶YouTube에서 보기 ↗ 교재 Stitch 핵심 가이드: AI 기반 UI 디자인 자동화

1-2

브랜드 이름 정하고 도메인 구입하기

나만의 브랜드를 나타내는 고유한 독립 도메인을 검색하고 구입합니다.

▶YouTube에서 보기 ↗

1-3

도메인 ↔ Firebase 호스팅 연결 (DNS)

구입한 도메인을 Firebase 호스팅과 연결하여, 전 세계 어디서든 내 사이트로 접속할 수 있게 만듭니다.

▶YouTube에서 보기 ↗

✅ 여기까지 하면 → 내 도메인으로 살아있는 글로벌 사이트 완성

STEP 2 · 데이터 저장

2데이터베이스 연결하기

회원·데이터를 저장할 백엔드(Firebase / Firestore)를 붙입니다.

2-1

Firebase 백엔드 이해하기

웹 서비스의 든든한 백엔드 Firebase가 무엇인지, 그리고 왜 필요한지 소개합니다.

▶YouTube에서 보기 ↗

2-2

Firebase 연결하기

내 프로젝트에 Firebase를 실제로 연결하고, 데이터를 읽고 쓸 수 있도록 세팅합니다.

▶YouTube에서 보기 ↗

2-3

데이터 실제 저장하기 (Firestore 연동)

이미지를 생성하고 파이어스토어(Firestore)와 연동하여, 데이터를 저장하고 관리하는 방법을 배웁니다.

▶YouTube에서 보기 ↗

✅ 여기까지 하면 → 데이터가 저장되는 사이트 완성

STEP 3 · 결제

3페이팔(PayPal) 결제 연결하기

전 세계 200+ 국가에서 돈을 받을 수 있게 결제를 붙입니다.

3-1

PayPal 결제 연동이란?

상품 등록부터 주문 생성, 결제 캡처까지 — 글로벌 결제 시스템이 어떻게 작동하는지 개념을 잡습니다.

▶YouTube에서 보기 ↗

3-2

페이팔 비즈니스 계정 등록하기

글로벌 결제를 받기 위한 필수 단계! 페이팔 비즈니스 계정 생성·가입 절차를 차근차근 진행합니다.

▶YouTube에서 보기 ↗

3-3

Secret Key 발급받기

PayPal 연동의 핵심! Client ID와 Secret Key를 발급받고 관리하는 방법을 배웁니다.

▶YouTube에서 보기 ↗

3-4

결제 연동 + 테스트 결제까지 개발하기

실제로 결제를 연동하고 내 웹사이트에 결제 버튼을 달아, 테스트 결제까지 진행하는 전 과정을 실습합니다.

▶YouTube에서 보기 ↗

✅ 여기까지 하면 → 실제 결제되는 사이트 완성

시즌 2 · 2강
결제·데이터베이스 실습 교재

🎯템플릿으로 "하나"를 빠르게 만들어라