시네마틱 스크럽 랜딩 페이지 — The Golden Template

히어로 비디오가 마우스에 반응하고 페이지 나머지 부분이 시청자를 5박자 내러티브 아크로 안내하는 프리미엄 브랜드 인지형 랜딩 페이지를 구축하세요. 사용자가 비디오, 선택적으로 로고 + 제품 사진 + 브랜드 컨텍스트를 제공합니다 — 이 스킬은 팔레트 추출, 타이포그래피 선택, RTL/LTR, 스캐폴딩, 모든 키프레임 비디오 재인코딩, 마우스 스크럽 효과, 섹션 라이브러리 및 검증을 처리합니다.

이 스킬이 존재하는 이유

참조 구현은 https://github.com/hoodini/bamba에 있습니다 — 이스라엘 RTL 사이트로, 스낵 "במבה"를 위한 사이트입니다. 아기 비디오가 페이지 전체에서 커서를 따라가고, 아래 4개의 개별 섹션(밝은 노란색 레시피, 크림 향수 앨범, 어두운 묵상 가격, 빨간색 액션 피날레)이 시청자를 갈망 → 기쁨 → 향수 → 묵상 → 행동으로 안내합니다.

마우스 스크럽 비디오와 유리 헤드라인 패널이 있는 히어로

이 스킬의 모든 규칙은 그 빌드에서 추출되었습니다. 하드 규칙 섹션의 항목은 모두 힘들게 얻은 것입니다 — 이는 일반적인 "좋은 코드" 기본값을 재정의합니다.

섹션 갤러리 (당신이 구축할 것)

히어로는 맨 위에 유지됩니다. 그 아래, 라이브러리에서 4개의 섹션을 골라 내러티브 아크를 따르도록 정렬합니다. 각각은 완전 불투명(비디오가 비치지 않음)하고 고유한 브랜드 아이덴티티를 가집니다.

비트	유형	참조
1 — 갈망	히어로 (마우스 스크럽 비디오)
2 — 기쁨	Sun — 밝은 기본-강조 그라데이션, 떠다니는 모티프 SVG, 거대한 고스트 타이포그래피, 통계 카드
3 — 향수	Album — 크림 종이, 점선 마이크로 패턴, 실제 제품 사진이 있는 폴라로이드 벤토
4 — 묵상	Roast — 어두움에 방사형 강조 글로우, 각각 다른 시각적 처리가 있는 3개의 가격 카드
5 — 행동	Signal — 전체 너비 강한 강조(빨간색/주황색/녹색), 거대한 헤드라인 + CTA, 유리로 감싼 패널

기술/SaaS 브랜드의 경우 필요에 따라 섹션 유형을 교체하세요(아래 섹션 라이브러리 참조) — 하지만 항상 Signal 섹션으로 끝나야 합니다.

이 스킬 사용 방법

자산을 깨끗한 작업 디렉토리에 넣습니다:
- 히어로 비디오 (모든 컨테이너 — .mp4, .mov, .webm)
- 로고 (SVG 강력 권장; 투명도 있는 PNG 허용)
- 1-3개의 제품/주제 이미지 (JPG/PNG, 투명 배경 이상적)
사용자에게 간략히 확인합니다 (기본값 제안 후 진행):
- 제품 이름 + 메타 태그라인
- 언어 코드 (RTL/LTR + 폰트 선택 결정)
- 브랜드 컨텍스트 — 시대, 대상, 감정적 핵심, 팔레트 느낌
- 선택 사항: 명시적 팔레트 헥스, 내러티브 아크 비트
아래 워크플로우를 순서대로 실행합니다. 모든 단계는 필수입니다. ffmpeg 재인코딩을 건너뛰지 마세요 — 그것이 스크럽을 부드럽게 만드는 마법입니다.
완료를 보고하기 전에 검증합니다. 9단계에는 12개의 검사 항목이 있습니다. 모두 실행하세요.

INPUTS — 사용자로부터 수집

PRODUCT_NAME: "<예: במבה / Bamba / 희망 치타 / Acme CRM>"
TAGLINE: "<메타 메시지 — 예: '그냥 스낵이 아니고, 평생의 추억입니다'>"
LANGUAGE: "<he | en | ar | es | fr | ja | ...>"
IS_RTL: "<true | false>"                                   # he/ar/fa = true; 나머지는 false
HERO_VIDEO_FILE: "<cwd 내 정확한 파일명 — 예: baby2.mp4>"
LOGO_FILE: "<정확한 파일명 — 없으면 비워둠>"
PRODUCT_IMAGE_FILE: "<정확한 파일명 — 없으면 비워둠>"
BRAND_CONTEXT: |
  <2-4 문장: 시대, 대상, 감정적 핵심, 시각적 아이덴티티(따뜻함/차가움/장난기/진지함). 팔레트 + 모티프 결정>
PALETTE: "<선택 사항 — 재정의할 쉼표로 구분된 헥스>"
NARRATIVE_ARC: "<선택 사항 — 5개의 감정 비트; 비어 있으면 AI 제안>"

전체 텍스트 템플릿(동일한 YAML 블록 및 프롬프트 본문 포함)은 references/GOLDEN_PROMPT.md에 있습니다 — 스킬 런타임에 직접 접근할 수 없을 때 YAML을 채워 Claude에 붙여넣으세요.

0단계 — 디자인 계획 (코딩 전 ≤200단어 브리핑 출력)

코드를 작성하기 전에 다음을 출력합니다:

추출된 5색 팔레트: background (가장 어두운 잉크), cream (따뜻한 오프-화이트 텍스트 — 절대 #FFFFFF 아님), accent (기본 브랜드 색상), accent2 (보조 브랜드 색상), support (3차 톤). PALETTE가 주어지지 않은 경우 로고 + 제품 이미지에서 추출합니다. 팔레트는 내부적으로 일관성 있어야 합니다 — 모두 따뜻하거나 모두 차가워야 하며, 혼합되지 않아야 합니다. 따뜻한 브랜드(음식, 자연, 향수, 동물) → 파란색, 청록색, 민트, 사이안 없음. 차가운 브랜드(기술, 금융, 의료, SF) → 작은 강조를 제외하고 따뜻한 톤 없음.
타이포그래피 삼위일체 (표시 / 본문 / 손글씨-강조) 언어별:
- he: Rubik (표시) + Assistant (본문) + Suez One (강조)
- en: Anton (표시) + Inter (본문) + Caveat (강조)
- ar: Cairo (표시) + Tajawal (본문) + Reem Kufi (강조)
- es / fr / it / de: Anton 또는 Bebas Neue (표시) + Inter (본문) + Caveat (강조)
- ja: Noto Sans JP weight 900 (표시) + Noto Sans JP (본문) + Yusei Magic (강조)
- 기타: 스크립트에 맞는 세 개의 Google Fonts 선택, 동일한 display-black / body-clean / handwritten-script 역할
내러티브 아크 — BRAND_CONTEXT에 매핑되는 5개의 감정 비트. 각각을 섹션 라이브러리의 섹션 유형에 매칭합니다.

그런 다음 실행합니다 — 확인을 요청하지 마세요.

1단계 — 자산 준비 (마법 단계)

1a. ffmpeg 확인

which ffmpeg     # 또는 PowerShell에서: Get-Command ffmpeg

없으면 중지하고 사용자에게 설치하라고 알립니다 (brew install ffmpeg / Windows: http://ffmpeg.org).

1b. 모든 프레임을 키프레임으로 히어로 비디오 재인코딩

브라우저는 키프레임으로만 즉시 탐색할 수 있습니다 — 표준 비디오는 약 250프레임당 1개의 키프레임이 있어 마우스 스크럽이 심하게 끊깁니다. 이 하나의 명령이 프로와 아마추어를 가르는 차이입니다:

ffmpeg -y -i <HERO_VIDEO_FILE> -g 1 -keyint_min 1 -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p -an hero.mp4

출력을 확인합니다: hero.mp4는 5-50 MB여야 합니다. > 50 MB이면 -crf 25로 재실행; > 80 MB이면 -crf 28로 재실행. 오디오 제거 (-an) — 히어로는 무음입니다.

1c. 로고 + 제품 이미지 복사

cp <LOGO_FILE>           public/logo.<ext>
cp <PRODUCT_IMAGE_FILE>  public/product.<ext>   # 제공된 경우

2단계 — 스캐폴드

npm create vite@latest site -- --template react-ts
cd site
npm install
npm install lucide-react
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
mkdir -p public
mv ../hero.mp4 public/hero.mp4
# 로고 + 제품 이미지도 public/으로 이동

3단계 — Tailwind 설정

tailwind.config.js를 완전히 교체합니다. 추출된 팔레트와 언어에 적합한 폰트를 사용합니다:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        background: '<잉크/어두움>',
        cream:      '<따뜻한 오프-화이트 — 절대 #FFFFFF 아님>',
        accent:     '<기본 브랜드 색상>',
        accent2:    '<보조>',
        support:    '<3차>',
      },
      fontFamily: {
        sans:    ['<본문 폰트>',         'system-ui', 'sans-serif'],
        display: ['<표시 폰트>',      'sans-serif'],
        accent:  ['"<손글씨 폰트>"', 'cursive'],
      },
    },
  },
  plugins: [],
}

4단계 — index.html

완전히 교체합니다. IS_RTL을 존중합니다. 항상 로고를 가리키는 파비콘 링크를 포함합니다:

<!DOCTYPE html>
<html lang="<LANGUAGE>" dir="<rtl|ltr>">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <link rel="apple-touch-icon" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="<선택한 세 폰트에 대한 Google Fonts URL>" rel="stylesheet">
    <title><PRODUCT_NAME> — <TAGLINE></title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

5단계 — index.css (디자인 시스템)

완전히 교체합니다. 아래 모든 유틸리티는 필수입니다. 이름은 앞서 추출된 따뜻한 팔레트를 가정합니다. 차가운 브랜드의 경우 그림자 색조의 "노란색"/"빨간색" 언급을 실제 강조 색상으로 교체합니다.

다음을 포함해야 함:

html { scroll-behavior: smooth; } + section[id] { scroll-margin-top: 90px; } — 앵커된 섹션이 고정 네비게이션 아래로 들어가지 않도록 합니다.
body 배경 = background 색상 (비디오 실패 시 대비). 커서 = crosshair. 기본 폰트 = 본문 sans.
.liquid-glass / .liquid-glass-strong — backdrop-blur + saturate + 내부-밝은 테두리 + 마스크 그라데이션 가장자리 하이라이트. 강한 변형은 accent로 착색된 내부 글로우를 사용합니다.
.glass-pill — 네비게이션 항목 및 작은 배지를 위한 동일한 유리 처리의 콤팩트한 둥근 알약.
.cta-primary — 브랜드 CTA: linear-gradient(135deg, accent-light, accent, accent-shade) + 강조-색상 글로우 그림자(호버 시 강화됨) + translateY(-1px) 들림.
.brand-mark — SVG가 제공되지 않을 때 작은 로고 마크용 작은 사각형/원.
.grid-bg — 어두운 섹션 아래에 사용되는 방사형 페이드 마스크가 있는 미묘한 1px 그리드.
.reveal / .revealed — IntersectionObserver 스크롤-드러내기: opacity 0 → 1 + translateY 28 → 0, 0.9초 동안 cubic-bezier(0.16, 1, 0.3, 1).
.scrim-top / .scrim-bottom — 히어로 전용 그라데이션 오버레이.
섹션별 배경, 색상이 아닌 느낌으로 이름 지정:
- .sun-section — 밝은 기본-강조 그라데이션 + 미묘한 점선 텍스처 ("기쁨 / 봉지 열기" 비트).
- .album-section — 따뜻한 오프-화이트 종이, 방사형 강조 색조 + 점선 마이크로 패턴, 가장자리-마스크 페이드.
- .roast-section — 반대쪽 모서리에 방사형 강조 + accent2 글로우 + 마스킹된 그리드 텍스처가 있는 어두움.
- .signal-section — 액션 피날레를 위한 전체 너비 강한 강조(종종 빨간색/주황색/녹색).
.polaroid — 흰색 카드, 패딩 14px 14px 44px 14px, 부드러운 계층 그림자, 호버 시 translateY(-6px) rotate(0)으로 들림. .polaroid-tape = 상단 중앙에 절대 위치, -4° 회전, 점선 측면 힌트가 있는 노란색/강조 테이프 조각.
.stamp — 강조 색상의 점선-테두리 알약, 대문자, 자간 0.18em.
.ribbon — clip-path 삼각형 하단, 어두운 드롭 섀도우가 있는 가격/인기 배지.
.highlight-circle — ::after를 통해 손으로 그린 느낌의 타원: 인라인 <span> 주위에 3px 회전된 강조-색상 테두리. 큰 제목에서 가장 중요한 단어 하나 주위에 사용합니다 (제목당 최대 하나).
장식 모티프 필터: .peanut-svg / .<motif>-svg에 drop-shadow 사용.
prefers-reduced-motion: reduce 존중 — 미디어 쿼리 내에서 드러내기 애니메이션 + 부드러운 스크롤 비활성화.

6단계 — App.tsx 아키텍처

아키텍처는 협상 불가입니다. 처음에 올바르게 만드세요:

6a. Imports

import { useEffect, useRef, useState } from 'react';
import {
  Menu, X, ArrowLeft, ArrowRight, ArrowDown, ArrowUp, MousePointer2,
  // …plus 4-8 brand-thematic icons (Heart, Sparkles, Cookie, PawPrint, Cpu, Leaf, …)
} from 'lucide-react';

6b. App.tsx 내부에 정의된 재사용 가능한 컴포넌트

useReveal<T>() — ref를 반환하는 IntersectionObserver 훅; 첫 번째 교차 시 (임계값 0.15) revealed 클래스 추가.
GlassCard — 드러내기 훅이 있는 래퍼, 선택적 strong prop, className 허용.
Motif — BRAND_CONTEXT를 테마로 한 단일 장식 SVG 컴포넌트 (음식용 땅콩, 동물용 발, 기술용 회로, 자연용 잎, 음료용 물방울, 에너지용 번개). 어둡거나 밝은 섹션당 3-6곳에 낮은 불투명도로 떠 있습니다.
ScrollToTopButton — RTL에서 bottom-6 left-6 / LTR에서 bottom-6 right-6에 고정. window.scrollY > window.innerHeight * 0.6일 때 나타납니다. 부드럽게 맨 위로 스크롤합니다. 언어에 맞는 짧은 레이블 ("לראש" / "Top" / "أعلى" / "Inicio").

6c. 마우스 스크럽 효과 (핵심)

const videoRef = useRef<HTMLVideoElement>(null);
const stateRef = useRef({ targetTime: 0, isSeeking: false });

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handleLoaded = () => {
    const mid = video.duration / 2;
    video.currentTime = mid;
    stateRef.current.targetTime = mid;
  };

  const handleSeeked = () => {
    const s = stateRef.current;
    s.isSeeking = false;
    if (Math.abs(s.targetTime - video.currentTime) > 0.01) {
      s.isSeeking = true;
      video.currentTime = s.targetTime;
    }
  };

  const handleMouseMove = (e: MouseEvent) => {
    const s = stateRef.current;
    const d = video.duration;
    if (!d || isNaN(d)) return;
    const normalized = e.clientX / window.innerWidth;
    // 주제가 커서에 대해 "뒤로" 움직여 부자연스럽게 느껴지면
    // `1 - (e.clientX / window.innerWidth)`를 대신 사용 — 먼저 사용자에게 물어보십시오.
    s.targetTime = Math.max(0, Math.min(d, normalized * d));
    if (!s.isSeeking) { s.isSeeking = true; video.currentTime = s.targetTime; }
  };

  video.addEventListener('loadedmetadata', handleLoaded);
  video.addEventListener('seeked', handleSeeked);
  window.addEventListener('mousemove', handleMouseMove);
  return () => {
    video.removeEventListener('loadedmetadata', handleLoaded);
    video.removeEventListener('seeked', handleSeeked);
    window.removeEventListener('mousemove', handleMouseMove);
  };
}, []);

isSeeking 가드는 매우 중요합니다 — 이것이 없으면 mousemove가 브라우저가 디코딩할 수 있는 것보다 더 빨리 발생하여 seek-queue 오버플로우 + 눈에 띄는 스터터가 발생합니다.

6d. 클릭 가능한 스크롤-스파이 네비게이션

const navItems: { label: string; target: string }[] = [
  { label: '<demo>',     target: 'top'     },
  { label: '<recipe>',   target: 'joy'     },
  { label: '<memories>', target: 'nostalgia' },
  { label: '<pricing>',  target: 'contemplation' },
  { label: '<buy now>',  target: 'action'   },
];

(라벨은 언어별로 조정해야 합니다.)

useEffect는 각 nav 항목의 section 요소를 관찰하고 현재 navItems 인덱스를 업데이트하여 활성 표시기를 강조 표시합니다. 이는 표준 IntersectionObserver 코드입니다.

7단계 — 섹션 라이브러리 (히어로 이후 4-5개 선택)

각 섹션은 id (히어로: "top"), 전체 너비, min-h-screen, 적절한 배경을 가져야 합니다. 모든 텍스트 콘텐츠는 지정된 cream 텍스트 변수를 사용하고 절대 #FFFFFF를 사용하지 않습니다.

Sun 섹션 (기쁨)

밝은 기본-강조 그라데이션 배경 (.sun-section 클래스)
거대한 고스트 표시 텍스트 (accent의 10%, 절대 위치, z-0)
레시피, 통계 또는 기능 하이라이트를 위한 3개의 떠다니는 카드 — 각각 liquid-glass-strong
2개의 Motif 요소가 카드 사이에 떠 있습니다. 하나는 왼쪽 상단, 다른 하나는 오른쪽 하단
"☀️" 또는 언어에 적합한 이모지가 있는 장식 헤더
선택적: 사진 또는 SVG 일러스트레이션이 있는 마스킹된 이미지 콜라주

Album 섹션 (향수)

따뜻한 오프-화이트 종이 배경 (.album-section)
.grid-bg가 깔끔한 점선 패턴 제공
제품 이미지가 있는 .polaroid 카드 3-4개, 각각 rotate(-3deg) / rotate(1deg) / rotate(5deg)
.polaroid-tape가 하나의 극성 사진 상단에 배치됨
오른쪽에 있는 "스크랩북 저널" 텍스트 블록: 장식 인용 부호가 있는 인용문, .stamp, .highlight-circle로 감싼 단어
향수를 불러일으키는 느낌을 위해 filter: sepia(0.15) hue-rotate(5deg)가 있는 옵션 빈티지 이미지

Roast 섹션 (묵상)

.roast-section — 어두움 (background 또는 support), 반대쪽 모서리에 방사형 강조 글로우
세 가지 가격/제품 카드, 각각 시각적으로 다름:
- 카드 1: .liquid-glass (전체 너비 아님, 가운데 정렬 아님), "인기"를 위한 .ribbon
- 카드 2: 어두운 그라데이션 경계선 + 내부 빛남, 강조-색상 CTA
- 카드 3: 미니멀리스트, 얇은 cream 테두리, .cta-primary 대신 텍스트 전용 CTA
3개의 세부 정보 행이 있는 기능 비교 표 (각 행은 체크 표시 또는 X를 가짐)
가운데에 "하지만 여기 진짜 이유가 있습니다" 유형의 단락, 가로줄로 둘러싸임

Signal 섹션 (행동)

.signal-section — 전체 너비 강한 강조 (레시피/제품에 대해 빨간색/주황색/녹색, 다른 것에 대해 accent)
거대한 표시 헤드라인 + 선 아래 더 작은 문장
.cta-primary 버튼 (로컬라이즈된 레이블 포함)
선택 사항: lucide-react의 화살표 또는 모양 아이콘 사용
CTA 아래 신뢰 신호: "As seen in…" 로고 행, 별점 또는 작은 보증 문구

피해야 할 섹션 유형 (이 템플릿에는 사용하지 않음)

표준 영웅 섹션 (히어로가 이미 전체 비디오 배경 역할을 함)
바닥글 (선택 사항이며, 항상 Signal 섹션 뒤에 오거나 완전히 생략할 수 있음)
캐러셀 (비디오가 이미 스크러빙을 제공함)
"저희에게 연락하세요" 양식 (판매 페이지에는 해당하지 않음)

8단계 — 하드 규칙 (모순되는 모범 사례보다 우선 순위)

이 규칙은 절대 재정의되지 않습니다. 모범 사례와 충돌하는 경우 이 규칙이 적용됩니다.

절대 #FFFFFF를 사용하지 마세요 — 텍스트/카드의 경우 항상 추출된 cream 변수를 사용합니다. 순수한 흰색은 영화적 느낌을 깨뜨리고 값싸게 보입니다.
히어로 비디오는 항상 -an (오디오 없음) — 사운드가 없으면 루프가 깨끗하고 주의를 분산시키지 않습니다.
모든 섹션은 완전히 불투명 — 비디오는 어떤 콘텐츠 섹션 아래에서도 비치지 않습니다. 히어로는 자체 포함됩니다.
정확히 1개의 CTA — Signal 섹션에 하나만 있습니다. 두 개 이상은 방문자를 혼란스럽게 합니다.
팔레트는 색조가 순수함 — 모두 따뜻하거나 모두 차가움. 절대 섞지 않습니다. 따뜻한 브랜드에는 파란색 그림자/아쿠아 글로우가 없습니다.
Google Fonts는 항상 <head>에 preconnect를 포함 — @import는 렌더링 차단하므로 절대 사용하지 않습니다.
prefers-reduced-motion 존중 — 움직임을 줄이는 설정이 활성화된 경우 모든 드러내기 + 부드러운 스크롤을 제거합니다.
검증 없는 배포 금지 — 9단계를 거치지 않은 프로덕션 코드 없음.
font-display: swap 유지 — 레이아웃 시프트를 방지하기 위해 항상 링크 태그에 포함합니다.
히어로 비디오는 mcguffin이 아닌 주제에 초점 — 사용자가 주제 움직임에 집중할 수 있도록 배경을 최소화합니다.
네비게이션 스크롤-스파이 — 항상 적절한 scroll-margin-top을 가집니다.
스크럽은 양방향 — 좌측은 비디오 시작 부분, 우측은 끝 부분에 매핑됩니다. (사용자가 주제가 "뒤로" 움직여야 한다고 요청하면 1 - normalized를 사용합니다.)
로고+제품 이미지가 있는 경우 항상 헤더에 배치 — 그렇지 않으면 로고가 없음을 수락합니다.
사용 가능한 경우 SVG 사용, PNG 허용 — SVG는 어떤 크기에서도 선명하게 유지됩니다.
단계는 순서가 있음 — 단계 순서를 절대 바꾸지 않습니다: 디자인 → 자산 → 스캐폴드 → 구성 → 마크업 → 스타일 → 컴포넌트 → 섹션 → 하드 규칙 → 검증.

9단계 — 검증 (완료 선언 전 필수)

다음 각 검사를 완료했다고 표시합니다:

검증 후: "랜딩 페이지가 완료되어 실행 중입니다"라고 선언하고 요약 제공(사용한 팔레트, 폰트, 각 섹션 매핑 방법)을 제공합니다.

현재 디렉토리에 없는 경우 참조 파일 가져오기

이 스킬의 참조 파일(GOLDEN_PROMPT.md, 예제 비디오 등)은 이 저장소에 있습니다. 현재 디렉토리 외부에서 이 스킬을 실행하는 경우:

# 이 스킬이 포함된 저장소의 경로를 찾습니다 (예: 전역 설치 또는 다른 프로젝트에서)
# 그런 다음 참조 디렉토리를 복사하거나 링크합니다
cp -r /path/to/this/skill/references ./references

참조 디렉토리에는 다음이 포함됩니다:

GOLDEN_PROMPT.md — 이 스킬의 전체 텍스트 프롬프트로, AI 채팅 인터페이스에 붙여넣을 준비가 되었습니다.
예제 자산 및 시연 파일.

기술 스택 요약

빌드 도구: Vite (React + TypeScript 템플릿)
스타일링: Tailwind CSS v3 + 사용자 정의 CSS (유틸리티 + 구성 요소 클래스 포함)
아이콘: lucide-react
비디오 처리: ffmpeg (모든-키프레임 재인코딩)
호스팅: 정적; Netlify, Vercel, GitHub Pages, Cloudflare Pages 등에 배포 가능
글꼴: Google Fonts (언어별 표시/본문/손글씨)

문제 해결

비디오가 스크럽되지 않음/끊김: 비디오가 -g 1 -keyint_min 1로 재인코딩되었는지 확인합니다. 브라우저가 H.264를 지원하는지 확인합니다. isSeeking 가드가 있는지 확인합니다.
잘못된 방향으로 스크럽됨: e.clientX / window.innerWidth를 1 - (e.clientX / window.innerWidth)로 변경합니다.
비디오가 로드되지 않음: public/hero.mp4가 올바른 경로에 있는지, 파일이 손상되지 않았는지 확인합니다.
글꼴이 적용되지 않음: Google Fonts URL이 유효한지, 폰트 이름이 CSS에서 정확한지 확인합니다 (" 포함).
RTL 레이아웃 깨짐: dir="rtl"이 html 태그에 있는지 확인합니다. Tailwind RTL 유틸리티가 올바르게 적용되었는지 확인합니다.

즐겨 사용하는 AI에게 물어보기

미리보기

문서