사용 시기
- 사용자가 새로운 랜딩 페이지(제품, 서비스, 이벤트, 포트폴리오, 대기자 명단)를 원할 때
- 기존 랜딩 페이지를 전문적이고 독특하게 리디자인하고 싶을 때
- 마케팅 페이지에 애니메이션, 스크롤 효과 또는 마이크로인터랙션을 요청할 때
- 기획 단계(어떤 섹션, 어떤 메시지, 어떤 구조)에 있을 때
스택 (및 그 이유)
| 구성 요소 | 선택 | 이유 | 제외된 대안 |
|---|---|---|---|
| 프레임워크 | Astro 5 | 기본적으로 정적(JS 0), 컴포넌트, astro:assets 이미지, 배포 = dist/ 업로드 | Next.js (랜딩에 오버스펙, 배포 복잡), 일반 HTML (컴포넌트 및 최적화 없음) |
| 스타일 | Tailwind CSS v4 | CSS에서 @theme을 통한 자체 토큰, JS 설정 불필요, 자동 퍼지 | UI 키트 (shadcn/DaisyUI/Flowbite → 일반적인 디자인), 순수 CSS (반복 작업에 느림) |
| 애니메이션 | GSAP 3.13+ (ScrollTrigger, SplitText) | 스크롤/타임라인 업계 표준; v3.13부터 모든 플러그인이 무료 | Framer Motion (React 종속), AOS (제한적, 템플릿 느낌) |
| 부드러운 스크롤 | Lenis | 가벼움 (~4kb), ScrollTrigger와의 문서화된 통합 | Locomotive Scroll (더 무겁고, 유지 관리 부족) |
| 배포 | Netlify / Cloudflare Pages / Vercel | 저장소 연결 → 푸시 → 배포; 서버 없는 정적 출력 | VPS (정적 사이트에 불필요) |
확고한 규칙: UI 컴포넌트 라이브러리를 설치하지 마십시오. 디자인은 자체적으로 합니다. 이것이 바로 이 스킬을 템플릿과 구분 짓는 요소입니다.
워크플로우 (필수, 이 순서대로)
절대 코드부터 시작하지 마십시오. 브리핑 없는 랜딩은 다른 이름의 템플릿일 뿐입니다.
- 브리핑 — 사용자와 함께 assets/brief-template.md를 작성합니다. 목표, 대상, CTA(행동 유도)가 누락된 경우: 계속하기 전에 질문하십시오.
- 디자인 방향 — references/design-direction.md를 따릅니다: 개성 → 타이포그래피 → 색상 → 레이아웃 → 시각적 시그니처. assets/design-tokens.css에 구체화합니다.
- 섹션 아키텍처 — 내러티브 아크(아래 표)와 마크업 전 헤드라인 카피를 정의합니다.
- 구축 — 섹션별, 모바일 우선(390px 먼저). references/animation-recipes.md를 사용한 애니메이션.
- 감사 — 전달 체크리스트(아래). 통과하지 않으면 전달되지 않습니다.
- 배포 — 정적 빌드 + 호스팅(아래 명령어).
내러티브 아크 (기본 구조)
| # | 섹션 | 역할 |
|---|---|---|
| 1 | 히어로 | 5초 이내에 이해되는 가치 제안 + 기본 CTA |
| 2 | 문제 / 맥락 | 방문자가 공감하는 불편함을 명명 |
| 3 | 솔루션 / 혜택 | 문제 해결 방법 — 기능이 아닌 혜택 |
| 4 | 사회적 증명 | 실제 사용 후기, 로고, 지표 |
| 5 | 작동 방식 | 단계, 데모, 스크린샷 |
| 6 | 반론 처리 | FAQ, 보증, 가격 |
| 7 | 최종 CTA | 히어로와 동일한 단일 행동 반복 |
브리핑에 따라 섹션을 조정, 병합 또는 제거하십시오. 모든 랜딩이 7개를 모두 필요로 하는 것은 아닙니다.
중요 패턴
- 단일 전환: 전체 페이지가 하나의 행동으로 유도됩니다. 두 개의 다른 CTA = 잘못된 브리핑.
- 진정한 모바일 우선: 디자인과 구축을 먼저 390px로 합니다; 데스크톱은 확장이지, 그 반대가 아닙니다.
- LCP 건드리지 않음: LCP 요소(히어로의 헤드라인 또는 이미지)는 절대 CSS에서
opacity: 0이 되지 않습니다. 진입은gsap.from()으로 이루어지며(JS가 없어도 페이지가 완전히 보임), 총 지속 시간은 ≤ 1초입니다. prefers-reduced-motion: 모든 애니메이션은gsap.matchMedia()내부에 있습니다. 예외는 없습니다.- 최소한의 Island: JS는 실제 상호작용이 있는 곳에만 사용합니다. FAQ 아코디언은
<details>이며, 수화된 컴포넌트가 아닙니다. - 이미지: 항상
astro:assets(<Image>), AVIF/WebP, 명시적 크기,loading="lazy"(히어로 제외). - 폰트: 셀프 호스팅(로컬 woff2 또는 Fontsource),
font-display: swap, 최대 2개 패밀리, 디스플레이 폰트 프리로드.
전달 전 체크리스트
- Lighthouse 모바일 성능, 접근성, SEO ≥ 95
- CLS = 0 (이미지 크기, 폰트 폴백 조정)
-
prefers-reduced-motion: reduce로 애니메이션 비활성화 - 대비 AA: 텍스트 4.5:1, 큰 UI 3:1
- 키보드 탐색 가능, 포커스 표시, 단일
h1 - 메타 설명, OG 태그, 파비콘, 고유 제목
- 390px, 768px, 1440px에서 테스트 완료
- 브랜드 테스트: 로고를 가렸을 때, 페이지가 다른 회사의 것처럼 보일 수 있습니까? 그렇다면 → 2단계로 돌아가기
명령어
# 프로젝트 생성
pnpm create astro@latest mi-landing -- --template minimal --typescript strict
cd mi-landing
pnpm astro add tailwind
pnpm add gsap lenis
# 개발 및 빌드
pnpm dev
pnpm build && pnpm preview
# 배포 (하나 선택; Netlify/Vercel/Cloudflare: build "pnpm build", output "dist")
npx wrangler pages deploy dist # Cloudflare Pages 직접
npx netlify deploy --prod --dir=dist # Netlify 직접
리소스
- 템플릿: assets/brief-template.md — 기획 질문지; assets/design-tokens.css — 자체 디자인 시스템 기초 (Tailwind v4
@theme) - 가이드: references/design-direction.md — 일반적이지 않은 아트 디렉션; references/animation-recipes.md — 적용 준비가 된 GSAP/ScrollTrigger/Lenis 레시피