AI인사이트 로고AI Insight
AI 랩으로 돌아가기
🌐

사이트 성장

Next.js 14 + Vercel — 바이브코딩만으로 만든 AI 정보 플랫폼

AI 모델 랭킹, 303개 직업 영향도, 203개 도구 디렉토리, 37개 가격 비교를 갖춘 풀스택 플랫폼. 기획부터 개발, SEO, 자동화 파이프라인까지 코딩 없이 구축한 과정입니다.

600+
총 페이지
1,200+
SEO 키워드
8개
자동화 스크립트
2개월
개발 기간

왜 만들었나

AI 도구가 쏟아지는데 "결국 뭘 써야 하지?"라는 질문에 답하는 곳이 없었습니다. 랭킹은 매일 바뀌고, 직업마다 필요한 도구가 다르고, 가격도 제각각. 바이브코딩으로 웹사이트를 만들어서 이 모든 걸 한 곳에서 비교할 수 있는 AI 정보 플랫폼을 구축하기로 했습니다.

핵심 콘텐츠

AI 모델 랭킹(매일 자동 업데이트), 303개 직업별 AI 영향도 분석, 203개 AI 도구 디렉토리, 37개 서비스 가격 비교, 33개 시리즈(239 챕터) 학습 콘텐츠. 모든 데이터는 정기적으로 검증·업데이트됩니다.

자동화 파이프라인

AI 모델 랭킹은 매일 자동으로 업데이트되고, 시리즈 콘텐츠는 Gemini API로 리서치부터 작성까지 자동 생성됩니다. 새 페이지가 만들어지면 sitemap 갱신, IndexNow 제출, 소셜 배포까지 자동으로 처리됩니다. 사람이 개입할 일이 거의 없는 콘텐츠 파이프라인입니다.

기술 스택

Next.js 14
프레임워크 — App Router + SSG로 빠른 정적 페이지
Vercel
배포 — Git push만으로 자동 빌드·배포·CDN
Tailwind CSS
스타일링 — 다크 모드 전용 커스텀 디자인 시스템
Gemini API
AI 콘텐츠 — 시리즈 자동 생성, 랭킹 변동 분석
GA4 + Search Console
분석 — 트래픽/검색 데이터 자동 수집·시각화
Upstash Redis
실시간 카운터 — 페이지뷰/방문자 수 추적
Framer Motion
애니메이션 — 스크롤 진입 효과, 인터랙션
IndexNow
SEO — 새 페이지 즉시 검색엔진 제출

시스템 구조

1
프론트엔드
Next.js 14 SSGTailwind + Framer Motion다크 모드 전용
2
데이터
JSON 정적 데이터 (직업/도구/가격)Upstash Redis (조회수)GA4 API (트래픽)
3
자동화
랭킹 매일 업데이트시리즈 자동 생성 (Gemini)소셜 자동 배포
4
배포/SEO
Vercel (자동 빌드)sitemap + IndexNowJSON-LD 구조화 데이터

개발 타임라인

2026년 1월 26일
Next.js + Vercel로 AI 정보 플랫폼 처음 만들기
myaegiswealth.com 도메인으로 Next.js 14 블로그 엔진 v1 완성. SEO(sitemap, robots, OG 이미지) 기본 설정까지 하루 만에 구축.
2026년 1월 27일
AI로 매일 자동으로 블로그 글을 생성하는 시스템 만들기
트렌드 뉴스를 크롤링하고 AI가 분석 글을 자동 생성하는 파이프라인 구축. Bing RSS + AI 프롬프트 조합.
2026년 1월 31일
네이버 블로그 + 텔레그램 자동 배포 시스템 구축
글이 생성되면 네이버 블로그와 텔레그램 채널에 자동 배포하는 Aegis Direct Distributor 구현.
2026년 3월 6일
AI 모델 랭킹 시스템을 5개 카테고리로 확장하기
텍스트/이미지/영상/보이스/음악 5개 카테고리별 AI 모델 순위 시스템 구축. Anthropic SDK에서 Gemini API로 전환.
2026년 3월 10일
AI 콘텐츠 자동 생성 프로세스를 처음부터 다시 설계한 이유
주제 선정 프로세스 전면 재설계. 키워드 중복 방지, 생성 로그 저장, 품질 검증 단계 추가.
2026년 3월 11일
AI 시리즈(전자책) 시스템 구축 — 단발 글에서 체계적 콘텐츠로
WikiDocs 스타일 시리즈 리더 구현. 챕터별 마크다운 + JSON 메타데이터로 체계적 콘텐츠 관리 시작.
2026년 3월 13일
AI로 시리즈 콘텐츠를 대량 생산하는 파이프라인 만들기
리서치 → 아웃라인 → 챕터 작성 → 품질 검수까지 AI 자동화 파이프라인. 시리즈별 OG 이미지 자동 생성.
2026년 3월 16일
AI 프롬프트 라이브러리 1,263개 자동 추출 시스템
시리즈 챕터에서 프롬프트를 자동 추출하여 카테고리별로 검색할 수 있는 /prompts 페이지 구현.
2026년 3월 17일
AI 직업 영향도 계산기 303개 직업 데이터베이스 구축
303개 직업의 AI 대체 위험도를 분석하는 /job-impact 페이지. 개별 직업 SSG 페이지 + FAQPage JSON-LD.
2026년 3월 17일
AI 도구 디렉토리 203개 검증 도구 데이터베이스 구축
203개 AI 도구를 카테고리/가격/한국어 지원으로 필터링하는 /tools 페이지. 모든 URL과 로고를 직접 검증.
2026년 3월 18일
AI로 시리즈 콘텐츠 23개 173챕터 대량 생산 완료
2주 만에 23개 시리즈 173챕터를 AI로 생산. 50챕터 품질 검수(Phase A-F) 완료. 홈페이지 UX 개선.
2026년 3월 20일
홈페이지 전면 리뉴얼 + 쿠팡/애드핏 광고 시스템 구축
홈 디자인 리뉴얼, 전체 UI 통일, 쿠팡 파트너스 + 카카오 애드핏 광고 시스템을 하루 만에 구축.
2026년 3월 21일
프로그래매틱 SEO — AI 비교 페이지 대량 생성으로 검색 유입 늘리기
AI 모델 비교 12개 + 직업 카테고리 14개 + 도구 카테고리 25개 = 51개 SEO 페이지를 한 번에 생성.
2026년 3월 25일
GA4 데이터 기반 SEO 최적화 — 659명에서 성장 시작
GA4 28일 데이터 분석: 659명, 일 98→126명 성장. 롱테일 SEO 최적화, 239개 챕터 seoTitle 추가, 크로스링크 강화.
2026년 3월 27일
AI 서비스 가격 비교 페이지 구축 — 37개 서비스 한눈에
ChatGPT, Claude, Gemini 등 37개 AI 서비스의 플랜별 가격을 비교하는 /pricing 페이지 신규 추가.
2026년 3월 28일
AI 모델 비교 페이지 30개로 확장 — LLM+이미지+영상+보이스
ChatGPT vs Claude, DALL-E vs Gemini 등 30개 비교 페이지 대폭 확장. GA4+GSC 통합 리포트 스크립트 추가.
2026년 4월 2일
서버에서 Next.js 홈페이지 개발 환경 구축 — 빌드 테스트 + Vercel 배포 파이프라인
원격 서버에서 blog repo clone, npm install, 로컬 빌드 테스트, git push → Vercel 자동 배포까지 전체 파이프라인 구축. Vercel API 연동으로 배포 상태도 실시간 확인 가능.
2026년 4월 2일
Next.js SEO 필터 페이지 대량 생성 — AI 도구 가격별·한국어별 + 직업 위험도별
프로그래매틱 SEO 전략으로 12개 필터 페이지 신규 생성. AI 도구를 가격대별(무료/부분무료/유료/기업용), 한국어 지원별(완전/부분/없음), AI 직업영향 위험도별(5단계) 분류 페이지 추가. AI 연구소 페이지도 투자 성과 + 사이트 성장 대시보드로 리뉴얼.

바이브코딩 실전 팁

SSG로 600+ 페이지를 빠르게
Next.js의 generateStaticParams()로 빌드 시점에 모든 페이지를 미리 생성합니다. 서버 비용 제로, 로딩 속도 최대화.
AI로 콘텐츠 대량 생산
Gemini API로 시리즈 리서치→아웃라인→챕터 작성을 자동화했습니다. 2주 만에 33개 시리즈 239챕터를 생성했습니다.
SEO는 데이터가 답
GA4 + Search Console 데이터를 매주 분석하여 어떤 페이지가 잘 되는지 추적합니다. 데이터 기반으로 우선순위를 정하니 효율이 극대화됩니다.

자주 묻는 질문

바이브코딩으로 이런 규모의 사이트를 만들 수 있나요?
네. 600개 이상의 페이지를 가진 이 플랫폼은 100% Claude Code 바이브코딩으로 만들었습니다. Next.js, Tailwind CSS, API 연동까지 자연어 지시만으로 구현했습니다.
운영 비용은 얼마인가요?
Vercel 무료 플랜으로 호스팅하고, Upstash Redis도 무료 티어입니다. 도메인 비용(연 1-2만원)과 Claude 구독만 있으면 됩니다. 개발 시에는 Claude Max($100/월)를 사용하고, 유지보수만 할 때는 Pro($20/월)로도 충분합니다.
트래픽은 어떻게 늘렸나요?
SEO 최적화가 핵심입니다. 구조화 데이터(JSON-LD), sitemap 자동 생성, IndexNow 즉시 제출, 그리고 매일 업데이트되는 랭킹 데이터가 검색 엔진 노출을 높였습니다.
AI 검색 엔진(ChatGPT, Perplexity)에서도 노출되나요?
네. llms.txt 파일과 구조화 데이터 덕분에 ChatGPT.com과 Perplexity.ai에서 레퍼럴 트래픽이 유입되고 있습니다. AI 검색 최적화는 기존 SEO와 별도로 신경 써야 하는 영역입니다.