🚀 Next.js 랜딩페이지 빌더 스킬

이 스킬은 BSD 바이브코딩 수강생들이 Next.js와 Tailwind CSS를 기반으로 전환율 높은 랜딩페이지를 빠르고 쉽게 제작할 수 있도록 돕습니다.

📋 이 스킬이 하는 일

1. 목적 분석: 사용자의 비즈니스 목표와 타겟 고객 파악
2. 구조 설계: 전환율을 극대화하는 섹션 구성
3. 카피라이팅: 설득력 있는 헤드라인과 CTA 작성
4. 디자인 구현: Tailwind CSS를 사용한 프리미엄 디자인
5. 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 실무 레벨의 결과물을 즉시 만들어낼 수 있습니다! 🎉