kyuhyi 🚀 Next.js 랜딩페이지 빌더 스킬
이 스킬은 BSD 바이브코딩 수강생들이 Next.js와 Tailwind CSS를 기반으로 전환율 높은 랜딩페이지를 빠르고 쉽게 제작할 수 있도록 돕습니다.
📋 이 스킬이 하는 일
- 목적 분석: 사용자의 비즈니스 목표와 타겟 고객 파악
- 구조 설계: 전환율을 극대화하는 섹션 구성
- 카피라이팅: 설득력 있는 헤드라인과 CTA 작성
- 디자인 구현: Tailwind CSS를 사용한 프리미엄 디자인
- Node.js/Next.js 코드 생성: SEO 최적화된 Next.js 컴포넌트 제공
🎯 언제 이 스킬을 사용하나요?
- "Next.js로 제품 판매를 위한 랜딩페이지를 만들고 싶어요"
- "Tailwind CSS를 사용한 모던한 메일 구독 페이지가 필요해요"
- "Vercel에 바로 배포 가능한 랜딩페이지 코드를 짜주세요"
💡 사용 방법
기본 사용법
"온라인 강의 판매를 위한 Next.js 랜딩페이지를 만들어줘.
타겟은 30-40대 직장인이고, 강의 제목은 '바이브코딩 마스터클래스'야."
🛠️ 기술 구현 (Next.js + Tailwind CSS)
모든 코드는 **Next.js 14+ (App Router)**와 Tailwind CSS를 기본으로 생성합니다.
코드 구조 예시
// components/Hero.tsx
import React from "react";
export default function Hero() {
return (
<section className="bg-slate-950 text-white py-20 px-4">
<div className="max-w-6xl mx-auto text-center">
<h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
당신의 비즈니스를 Next.js로 가속화하세요
</h1>
<p className="text-xl text-slate-400 mb-8">
최고의 퍼포먼스와 SEO를 보장하는 랜딩페이지 솔루션
</p>
<button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full font-semibold transition-all shadow-lg shadow-blue-500/20">
지금 바로 시작하기
</button>
</div>
</section>
);
}
🎨 디자인 원칙
- Dark Mode 우선: 고급스러운 다크 모드를 기본으로 적용
- Glassmorphism: subtle한 투명도와 블러 효과 사용
- Micro-animations: Framer Motion을 활용한 부드러운 전환
✍️ 카피라이팅 & SEO
- Semantic HTML:
<h1>,<section>,<article>등 적절한 태그 사용 - Metadata: Next.js의
Metadata API를 사용한 SEO 설정 자동 포함 - Web Vitals: 빠른 LCP와 낮은 CLS를 위한 코드 최적화
💬 예제 대화
사용자: "Next.js로 헬스 코칭 서비스 랜딩페이지 만들어줘"
Claude: "Next.js와 Tailwind CSS를 사용하여 헬스 코칭 시스템의 고성능 랜딩페이지를 구축해드리겠습니다. 다크 모드와 Framer Motion 애니메이션을 포함한 모던한 구조로 제안해 드릴게요..."
🎯 핵심 정리
이 스킬을 사용하면: ✅ Next.js (App Router) 기반의 최신 웹 아키텍처 적용 ✅ Tailwind CSS를 통한 유연하고 아름다운 스타일링 ✅ SEO 최적화 및 빠른 페이지 로딩 속도 ✅ Vercel 등 현대적 호스팅 환경에 즉시 배포 가능
BSD 학생이라면: 이제 HTML/CSS를 넘어 Next.js 실무 레벨의 결과물을 즉시 만들어낼 수 있습니다! 🎉