SEO 랜딩페이지
바이브코딩으로
완성.
Cursor AI × Next.js × shadcn/ui
설계 → 구현 → SEO → 배포 → 인덱싱, 한 강의에서 끝
랜딩페이지를 만드는 것은 어렵지 않습니다. 하지만 검색 엔진에 “잘 노출되는” 랜딩페이지를 만드는 것은 완전히 다른 이야기입니다. 메타데이터, 구조화 데이터, 사이트맵, robots.txt, OG 태그, 다국어 라우팅 — 이 모든 것을 올바르게 설정해야 Google이 페이지를 제대로 인덱싱합니다. ludgi 강사의 이 강의는 Cursor AI를 활용한 바이브코딩으로 이 전체 과정을 실시간으로 완성합니다.
특히 이 강의의 차별점은 “현업 인사이트”입니다. 단순히 코드를 짜는 것을 넘어, 실제 시장에서 광고·블로그·댓글 작업의 단가가 얼마인지, 외주 업체들이 SEO 작업을 어떻게 진행하는지, 개발자가 직접 참여했을 때와 외주를 맡겼을 때의 비용 효율 차이까지 — 돈이 되는 지식을 함께 전달합니다.
완성하는 것들
Fig. 1 — 강의 수료 후 결과물
반응형 랜딩페이지
히어로/신뢰/기능/FAQ + 문의 폼
Lighthouse 95+
성능·접근성·SEO 모두 최적화
Vercel 배포
실서비스 운영 가능한 웹사이트
Search Console 등록
검색 인덱싱 요청까지 완료
상세 커리큘럼
Fig. 2 — 6개 섹션, 14강, 총 2시간 17분
1강 · 1분
섹션 1. 강의 시작하기
- 강의에 오신 걸 환영합니다
3강 · 3분
섹션 2. 개발 환경 준비
- Node.js 설치 및 환경 설정 가이드
- Git 설치
- Cursor AI 설치와 활용 준비
3강 · 18분
섹션 3. 랜딩페이지 제작
- Next.js 설치와 shadcn · MCP Server 초기 설정
- tweakcn과 shadcn으로 다크 모드 & 테마 커스터마이징
- 스타일링 완성하기: 랜딩페이지 디자인 마무리
2강 · 28분
섹션 4. 프로젝트 배포
- GoDaddy 도메인 구매 & Vercel 연동
- 배포 파이프라인 설정
2강 · 28분
섹션 5. 노출 전략
- SEO 최적화 (메타데이터, JSON-LD, sitemap)
- 현업 인사이트: 광고·외주 단가, 노출 전략
3강 · 57분
섹션 6. 복습
- 전체 과정 복습 & 심화
- 실전 응용 & 트러블슈팅
- 마무리 정리
강의 미리보기
Fig. 3 — 실제 강의에서 다루는 도구와 결과물
수강평
평점 5.0 / 5.0 — 2개의 수강평
“아주 가성비 좋고 시간아껴주고 산출물 완성도, 수익화 전략까지 챙겨주는 좋은 강의 입니다.”
Learning Path
강의 5단계 학습 흐름
설계
히어로·신뢰·기능·FAQ 섹션 구조 설계
바이브코딩
Cursor AI로 실시간 코딩, 섹션별 완성
SEO 적용
메타데이터, JSON-LD, OG 태그, 사이트맵
성능 최적화
Lighthouse 95+ 달성, 이미지/폰트 최적화
배포 & 인덱싱
Vercel 배포, Search Console 등록
실습 스택
Fig. 3 — 8가지 기술, 하나의 완성된 프로젝트
Cursor AI
AI 코딩 어시스턴트
Next.js
App Router 프레임워크
TypeScript
타입 안전 개발
TailwindCSS
유틸리티 스타일링
shadcn/ui
UI 컴포넌트
MCP
워크플로우 자동화
Vercel
배포 플랫폼
Search Console
검색 인덱싱
Target Audience
누구를 위한
강의인가?
코딩 경험이 없는 기획자부터 SEO 실전 경험이 필요한 주니어 개발자까지, “검색에 노출되는 랜딩페이지”를 직접 만들고 싶은 모든 분을 위한 강의입니다.
비개발자 / 기획자
코딩 없이 AI와 함께 랜딩페이지를 만들고 싶은 분. 바이브코딩으로 코드 경험 없이도 완성 가능합니다.
스타트업 대표 / 마케터
회사 소개 페이지가 필요하지만 외주 비용이 부담스러운 분. 직접 만들면서 SEO까지 챙기세요.
주니어 프론트엔드 개발자
Next.js + SEO 실전 경험이 필요한 분. 배포부터 검색 인덱싱까지 풀 프로세스를 배웁니다.
프리랜서 / 1인 사업자
클라이언트에게 SEO 최적화된 랜딩페이지를 제작·납품하고 싶은 분.
현업 인사이트 — 강의 특전
코드만 배우는 강의가 아닙니다.
시장 단가 공개
광고, 블로그 포스팅, 댓글 작업의 현실적인 단가 범위를 알려드립니다.
외주 업체 작업 방식
SEO·노출 전문 업체들이 실제로 어떻게 작업하는지 내부 프로세스를 공개합니다.
직접 vs 외주 비교
개발자가 직접 참여했을 때와 외주를 맡겼을 때의 비용/효율 차이를 분석합니다.
Start Learning
검색에 노출되는 랜딩페이지,
지금 바로 만들어보세요
바이브코딩으로 코드 경험 없이도 완성 · Lighthouse 95+ 성능 · Search Console 인덱싱까지
인프런에서 수강하기 →자주 묻는 질문
Fig. 4 — FAQ
Q01바이브코딩이 뭔가요? 코딩을 못해도 수강할 수 있나요?+
바이브코딩은 Cursor AI 같은 AI 도구를 활용해 자연어로 지시하면서 코드를 작성하는 방식입니다. 코딩 경험이 없어도 AI와 함께 실시간으로 랜딩페이지를 완성할 수 있도록 강의가 구성되어 있습니다. 다만 HTML/CSS 기초 개념을 알면 더 효과적입니다.
Q02이 강의를 듣고 나면 어떤 결과물을 얻을 수 있나요?+
반응형 회사 소개 랜딩페이지(히어로/신뢰/기능/FAQ 섹션), 문의 폼, Lighthouse 95+ 최적화, Vercel 배포 완료된 실서비스, Search Console 등록 및 인덱싱 요청까지 — 실제 운영 가능한 웹사이트를 완성합니다.
Q03SEO 최적화는 구체적으로 어떤 내용을 다루나요?+
메타데이터(title, description), OpenGraph/Twitter 카드, robots.txt, sitemap.xml, 구조화 데이터(JSON-LD), 다국어 라우팅 설정까지 실습합니다. 강사가 제공하는 SEO 최적화용 MD 파일을 적용하여 검색 엔진에 잘 노출되는 페이지를 만듭니다.
Q04현업 인사이트는 어떤 내용인가요?+
광고/블로그/댓글 작업의 현실적인 단가 범위, 외주 업체들이 실제로 SEO·노출 작업을 진행하는 방법, 개발자가 직접 참여했을 때 vs 외주를 맡겼을 때의 비용/효율 차이 등 실전 시장 정보를 다룹니다.
Q05사용하는 기술 스택은 무엇인가요?+
Cursor AI, Next.js(App Router), TypeScript, TailwindCSS, shadcn/ui, MCP 워크플로우를 사용합니다. Vercel로 배포하며, Google Search Console로 인덱싱을 관리합니다.
에디토리얼 총평.
이 강의의 핵심 가치는 “SEO가 붙은 랜딩페이지”를 한 번에 완성한다는 데 있습니다. 시중에 랜딩페이지 만들기 강의는 많지만, 메타데이터 설정, 구조화 데이터, 사이트맵, 인덱싱 요청까지 한 강의에서 다루는 경우는 드뭅니다. 특히 바이브코딩 방식 덕분에 코딩 경험이 부족한 기획자나 마케터도 수강 가능하다는 점, 그리고 현업 인사이트(외주 단가, SEO 업체 작업 방식)가 포함되어 있다는 점이 차별화 포인트입니다.
4.8
Editorial Rating
실전 적용도: ★★★★★
SEO 커버리지: ★★★★★
현업 인사이트: ★★★★★
진입 장벽: ★★★★☆
가성비: ★★★★★
Related Articles
Tags