# Landing Page Builder

> 비전공자도 쉽게 전환율 높은 랜딩페이지를 만들 수 있도록 돕는 스킬. Next.js와 Tailwind CSS를 사용하여 고성능 랜딩페이지를 생성합니다.

- Skill: `kyuhyi/landing-page-builder` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kyuhyi/landing-page-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kyuhyi/landing-page-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kyuhyi (https://skillmd.com/u/kyuhyi)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/kyuhyi/landing-page-builder

---


# 🚀 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**를 기본으로 생성합니다.

### 코드 구조 예시

```typescript
// 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 실무 레벨의 결과물을 즉시 만들어낼 수 있습니다! 🎉