프론트엔드 랜딩 페이지 생성기

멋지고, 빌드 과정 없이 단일 파일로 구성된 HTML 랜딩 페이지를 생성합니다. 큐레이팅된 스타일 프리셋, 부드러운 애니메이션, 반응형 디자인, 다크/라이트 모드를 모두 하나의 파일에 담아냅니다.

시작하기 전에

사용 가능한 미적 스타일을 이해하려면 스타일 프리셋 참조 파일을 먼저 읽어보세요.

references/STYLE_PRESETS.md

두 가지 작동 모드

모드 1: 처음부터 새로 만들기

사용자가 제품 정보를 제공 → 완전한 랜딩 페이지를 생성합니다.

다음 정보를 수집하세요 (제공되지 않은 경우 질문):

제품/브랜드 이름 (필수)
태그라인 / 히어로 헤드라인 (필수)
3~6개의 주요 기능 또는 혜택 (필수)
타겟 고객 (도움이 됨)
주요 CTA (예: "무료 체험 시작", "웨이팅 리스트 참여") — 기본값: "시작하기"
색상 선호도 (선택 사항 — 프리셋이 처리)
스타일 프리셋 (지정되지 않은 경우 프리셋 메뉴 표시)

모드 2: 개선 / 변환

사용자가 기존 HTML, 설명, 스크린샷 또는 URL을 제공 → 더 나은 디자인, 애니메이션 및 반응형으로 개선합니다.

워크플로우:

기존 디자인 분석 (구조, 색상, 타이포그래피, 레이아웃)
개선점 파악 (애니메이션, 반응형, 접근성, 시각적 계층)
적용할 스타일 프리셋을 묻거나 (또는 기존 미적 스타일 유지)
모든 개선 사항이 포함된 단일 파일 HTML로 재생성

스타일 프리셋 시스템

항상 프리셋 메뉴를 제공하세요. 사용자가 이미 선택했거나 특정 미적 스타일을 명확히 설명하지 않은 한, 랜딩 페이지 작업 시작 시 반드시 제공합니다.

프리셋은 다음과 같이 제시하세요:

랜딩 페이지의 시각적 스타일을 선택하세요 (번호 또는 이름 입력):

 1. ☁️  깔끔한 SaaS 미니멀     — 선명한 흰색, 은은한 그림자, 시스템 고유 느낌
 2. 🔮  글래스모픽 모던         — 프로스트 유리 패널, 그라데이션, 반투명
 3. 🏗️  대담한 브루탈리스트     — 원시 콘크리트 질감, 고정폭 서체, 강한 대비
 4. 🌆  사이버펑크 네온         — 어두운 배경, 전광 효과, 스캔라인 효과
 5. ✒️  우아한 세리프 프리미엄   — 편집적 고급스러움, 세리프 헤드라인, 골드 악센트
 6. 🎨  장난기 가득한 그라데이션 — 통통 튀는 애니메이션, 메시 그라데이션, 둥근 모든 것
 7. 🌙  다크 모드 퍼스트        — 깊은 블랙, 네온 악센트, OLED 최적화
 8. 📻  빈티지 레트로           — 따뜻한 세피아 톤, 레트로 서체, 향수 어린 질감
 9. 🌿  오가닉 자연             — 어스 톤, 유기적 형태, 식물 일러스트레이션
10. 🏢  코퍼레이트 프로페셔널   — 네이비/슬레이트 팔레트, 격자 구조, 신뢰감 구축

또는 원하는 커스텀 미적 스타일을 직접 설명해 주세요!

사용자가 선택한 후, references/STYLE_PRESETS.md에서 해당 프리셋의 상세 CSS 변수, 글꼴 스택, 애니메이션 스타일 및 디자인 토큰을 읽어보세요.

출력 요구 사항

단일 파일 HTML 아키텍처

모든 출력은 반드시 완전하고 자체 완결적인 하나의 HTML 파일이어야 합니다. 구조:

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- SEO 메타 태그 -->
  <title>{제품 이름} — {태그라인}</title>
  <meta name="description" content={간결한 제품 설명}>
  <meta property="og:title" content={제품 이름}>
  <meta property="og:description" content={설명}>
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Anime.js 애니메이션 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  <!-- Google Fonts (프리셋별) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={프리셋+폰트}&display=swap" rel="stylesheet">
  
  <!-- Tailwind 설정 + 커스텀 테마 -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // 프리셋별 확장
          fontFamily: { /* 프리셋에서 */ },
          colors: { /* 프리셋에서 */ },
        }
      }
    }
  </script>
  
  <style>
    /* 프리셋의 CSS 커스텀 속성 */
    :root { /* 라이트 테마 변수 */ }
    .dark { /* 다크 테마 변수 */ }
    
    /* 스크롤 트리거 애니메이션 기본 클래스 */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    
    /* 프리셋별 커스텀 스타일 */
  </style>
</head>
<body>
  <!-- 모든 콘텐츠 -->
  
  <script>
    // 다크 모드 토글
    // 스크롤 리빌 관찰자
    // Anime.js 진입 애니메이션
    // 인터랙티브 컴포넌트 (FAQ 아코디언, 가격 토글 등)
  </script>
</body>
</html>

CDN 스택 (다른 것은 허용되지 않음)

Tailwind CSS: https://cdn.tailwindcss.com (인라인 설정 포함)
Anime.js: https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
Google Fonts: 프리셋별 폰트만
아이콘: 인라인 SVG만 (Heroicons 스타일). 절대 아이콘 폰트 CDN을 사용하지 마세요.

모든 출력에 반드시 포함되어야 하는 기능

반응형 디자인 — 모바일 우선. 375px, 768px, 1280px에서 멘탈 모델 테스트.
다크/라이트 모드 — prefers-color-scheme 자동 감지 + 네비게이션에 수동 토글 버튼.
스크롤 애니메이션 — 모든 섹션에 IntersectionObserver 기반 리빌 애니메이션.
부드러운 스크롤 — html의 scroll-smooth + 네비게이션 앵커용 JS.
접근성 — 시맨틱 HTML5, 인터랙티브 요소의 ARIA 레이블, focus-visible 스타일, 콘텐츠로 건너뛰기 링크, 충분한 색상 대비.
SEO 메타 태그 — title, description, og:title, og:description, og:type, twitter:card.
성능 — 이미지 지연 로딩, 효율적인 CSS, 최소한의 JS.

섹션 생성

사용자 입력을 기반으로 다음 섹션을 지능적으로 포함합니다. 모든 섹션이 필요한 것은 아닙니다. 제품 컨텍스트에 맞게 조정하세요.

항상 포함:

네비게이션 — 로고, 링크, 다크 모드 토글, 기본 CTA 버튼이 있는 고정/스티키 네비게이션
히어로 — 큰 헤드라인 + 서브 헤드라인 + CTA 버튼 + 시각적 요소 (그라데이션, 추상적 형태 또는 이미지 플레이스홀더)
기능 — 인라인 SVG 아이콘이 있는 3~6개의 기능 카드/그리드
최종 CTA — 헤드라인 + 버튼이 있는 전체 너비 콜투액션 배너
푸터 — 링크, 저작권, 소셜 아이콘 (인라인 SVG)

애니메이션 플레이북

다음 애니메이션 패턴을 일관되게 사용하세요.

스크롤 리빌 (IntersectionObserver)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

계단식 진입 (Anime.js)

anime({
  targets: '.feature-card',
  opacity: [0, 1],
  translateY: [40, 0],
  delay: anime.stagger(100, { start: 300 }),
  easing: 'easeOutCubic',
  duration: 800
});

히어로 텍스트 애니메이션

anime({
  targets: '.hero-title .word',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: 'easeOutExpo',
  duration: 1200
});

호버 미세 상호작용

호버에는 CSS 전환을 사용하고, 복잡한 시퀀스에만 Anime.js를 사용하세요:

.card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }

카운터 애니메이션

function animateCounter(el) {
  const target = parseInt(el.dataset.target);
  anime({
    targets: el,
    innerHTML: [0, target],
    round: 1,
    easing: 'easeInOutExpo',
    duration: 2000
  });
}

다크 모드 구현

// 시스템 환경 설정 및 저장된 환경 설정 확인
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// 토글 함수 (버튼에 바인딩)
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

네비게이션의 토글 버튼:

<button onclick="toggleDark()" aria-label="다크 모드 전환" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
  <!-- 태양 아이콘 (다크 모드에서 표시) -->
  <svg class="hidden dark:block w-5 h-5" ...>...</svg>
  <!-- 달 아이콘 (라이트 모드에서 표시) -->
  <svg class="block dark:hidden w-5 h-5" ...>...</svg>
</button>

타이포그래피 및 비-일반 규칙

절대 다음 폰트를 사용하지 마세요: Inter, Roboto, Arial, Helvetica, Open Sans, system-ui 기본값.

각 프리셋은 고유한 폰트 쌍을 지정합니다. 항상 Google Fonts CDN에서 로드하세요.

커스터마이즈 없이 기본 Tailwind 색상을 절대 사용하지 마세요. 모든 프리셋은 CSS 변수와 tailwind.config extend를 통해 커스텀 팔레트를 정의합니다.

다른 AI 생성 랜딩 페이지처럼 보이는 페이지를 절대 출력하지 마세요. 각 프리셋에는 고유한 차별점이 있습니다. 이를 존중하세요.

인라인 SVG 아이콘

Heroicons 스타일의 인라인 SVG를 사용하세요. 다음 패턴입니다:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

6~8개의 자주 사용되는 아이콘을 HTML에 직접 포함하세요. 제품 기능에 맞게 컨텍스트에 맞는 아이콘을 선택하세요.

FAQ 아코디언 구현

document.querySelectorAll('.faq-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    const icon = btn.querySelector('.faq-icon');
    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
    
    // 다른 모든 항목 닫기
    document.querySelectorAll('.faq-content').forEach(c => { c.style.maxHeight = '0px'; });
    document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });
    
    if (!isOpen) {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.style.transform = 'rotate(45deg)';
    }
  });
});

가격 토글 구현

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const annualPrices = document.querySelectorAll('.price-annual');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
  annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
});

최종 출력 지침

HTML을 생성한 후, 항상 다음 안내를 추가하세요:

✅ 랜딩 페이지가 준비되었습니다!

사용 방법:
1. 위의 전체 코드를 복사하여 `index.html` 파일에 붙여넣으세요.
2. 브라우저에서 열면 바로 작동합니다. 빌드 단계가 필요 없습니다.

무료로 배포하려면:
• Vercel: vercel.com → New Project → index.html 파일을 드래그 앤 드롭
• Netlify: app.netlify.com → index.html 파일을 드래그 앤 드롭
• GitHub Pages: 저장소에 푸시 → Settings → Pages → 메인 브랜치에서 배포

더 커스터마이즈하려면:
• 색상: :root { } 및 .dark { }의 CSS 변수 편집
• 콘텐츠: 모든 텍스트는 HTML에 직접 있습니다. 찾아서 바꾸기
• 폰트: Google Fonts 링크 및 font-family 값 변경
• 애니메이션: Anime.js 호출 및 CSS 전환에서 타이밍 조정

품질 체크리스트

전달하기 전에 다음을 정신적으로 확인하세요:

프론트엔드 랜딩 페이지 생성