Ship Page
인터랙티브하고 애니메이션이 풍부한 랜딩 페이지를 브라우저에서 단일 HTML 파일로 실행되도록 만듭니다.
이 스킬은 비(非)디자이너가 시각적 탐색("말로 설명하지 말고 보여주세요")을 통해 전문적인 제품 페이지를 제작한 다음, 정적 목업이 아닌 실제 상호작용이 가능한 프로덕션 품질의 랜딩 페이지를 생성할 수 있도록 도와줍니다.
핵심 원칙
- 제로 의존성 — 인라인 CSS/JS와 함께 제공되는 단일 HTML 파일. npm, 빌드 도구, 프레임워크가 필요하지 않습니다. 단일 HTML 파일은 모든 React 프로젝트보다 오래갑니다.
- 말로 설명하지 말고 보여주세요 — 사람들은 자신이 원하는 것을 설명할 수 없지만, 보면 압니다. 시각적 미리보기를 생성하고 선택하게 하세요.
- AI-슬롭 방지 — 흰색 배경에 보라색 그라데이션이 없습니다. 일반적인 SaaS 템플릿이 없습니다. 모든 페이지는 제품에 맞춤 제작된 느낌이어야 합니다.
- 기본적으로 인터랙티브 — 랜딩 페이지는 슬라이드가 아닙니다. 스크롤 애니메이션, 호버 상태, 데이터 카운터, 파티클 효과, 방문자가 머무르게 만드는 마이크로 인터랙션이 있습니다.
- 출시 준비 완료 — 출력물이 즉시 작동합니다. HTML 파일을 GitHub Pages, Vercel, Netlify 등 어디에든 드롭하거나 브라우저에서 그냥 열기만 하면 됩니다.
감지 모드
- 모드 A: 새 페이지 — 처음부터 새로 만듭니다. 1단계로 이동합니다.
- 모드 B: README 변환 — GitHub README나 제품 설명을 랜딩 페이지로 변환합니다. 콘텐츠를 추출한 후 1단계 2단계로 이동합니다(콘텐츠 질문은 건너뛰고 바로 스타일로 이동).
- 모드 C: 개선 — 기존 HTML 랜딩 페이지를 개선합니다. 읽고 구조를 이해한 후 콘텐츠를 유지하면서 개선합니다. 뷰포트 및 섹션 밀도 규칙을 따릅니다.
1단계: 발견
제품을 이해하고 콘텐츠를 수집합니다. 모든 질문을 단일 AskUserQuestion 호출로 질문합니다.
질문 1 — 제품 유형 (헤더: "Product"): 무엇을 만들고 계신가요? 옵션: SaaS / 개발자 도구 / 모바일 앱 / 오픈 소스 프로젝트 / 개인 브랜드 / 기타
질문 2 — 콘텐츠 (헤더: "Content"): 페이지에 무엇을 포함시켜야 하나요? 옵션: 콘텐츠를 붙여넣겠습니다 / README에서 가져오겠습니다 / 설명만 해주세요 / 문서가 있습니다
질문 3 — 주요 섹션 (헤더: "Sections", 다중 선택: true): 어떤 섹션이 필요하신가요? 옵션: CTA가 있는 히어로 / 기능 그리드 / 작동 방식 / 가격 / 사용 후기 / FAQ / 통계 및 지표 / 뉴스레터 가입 / GitHub Stars 배지
질문 4 — 출시 목표 (헤더: "Launch"): 이 페이지는 어디에 게시될 예정인가요? 옵션: GitHub Pages / 독립형 웹사이트 / Product Hunt 출시 / 그냥 둘러보는 중
사용자가 콘텐츠(README, 설명, 문서)를 제공하면 다음으로 진행합니다:
1.1단계: 콘텐츠 분석
제공된 콘텐츠를 구문 분석하고 다음을 추출합니다:
- 제품 이름 및 한 줄 설명
- 주요 기능 (3~6개 목표)
- 대상 고객 신호
- 언급된 모든 지표/숫자
- 클릭 유도 문구 (방문자가 무엇을 해야 하나요?)
AskUserQuestion (헤더: "Content Check")을 통해 확인합니다: "제가 추출한 내용입니다. 맞게 보이나요?" 옵션: 맞습니다 / 조정하겠습니다
2단계: 스타일 발견
이 단계는 "말로 설명하지 말고 보여주세요" 단계입니다. 대부분의 사람들은 디자인 선호도를 말로 표현할 수 없습니다.
2.1단계: 분위기 선택
AskUserQuestion (헤더: "Vibe", 다중 선택: true, 최대 2개)을 통해 질문합니다: 방문자에게 어떤 느낌을 주어야 하나요? 옵션: 미래 지향적 & 기술 / 깔끔하고 미니멀 / 대담하고 에너제틱 / 다크 & 프리미엄 / 장난기 있고 창의적 / 기업적 & 신뢰
2.2단계: 스타일 미리보기 생성
분위기 선택에 따라 3개의 개별 단일 섹션 HTML 미리보기를 생성하여 다음을 보여줍니다:
- 타이포그래피 선택 (제목 + 본문 글꼴 쌍)
- 색상 팔레트 (배경, 텍스트, 강조, CTA)
- 제품 이름이 포함된 히어로 섹션 레이아웃
- 하나의 마이크로 인터랙션 또는 애니메이션
- 전반적인 분위기 (배경 처리, 간격)
각 미리보기는 히어로 섹션만 세 가지 완전히 다른 방식으로 스타일링한 완전하고 작동하는 HTML 파일이어야 합니다. 미리보기를 .ship-page/previews/에 저장합니다.
references/STYLE_PRESETS.md를 읽고 선별된 사전 설정 정의를 확인합니다. 사전 설정을 기반으로 사용한 다음 특정 제품에 맞게 사용자 정의합니다.
AskUserQuestion (헤더: "Pick Your Style")을 통해 확인합니다: "어느 방향이 끌리나요?" 옵션: 스타일 A / 스타일 B / 스타일 C / 요소 혼합 (설명)
2.3단계: 직접 사전 설정 선택 (대안)
사용자가 이미 원하는 것을 알고 있거나 "그냥 어둡게/미니멀/기술적으로 만들어 주세요"라고 말하는 경우:
references/STYLE_PRESETS.md를 읽습니다.- 가장 가까운 사전 설정과 일치시킵니다.
- 미리보기 생성을 건너뛰고 3단계로 이동합니다.
3단계: 랜딩 페이지 생성
1단계의 콘텐츠와 2단계의 스타일을 사용하여 전체 랜딩 페이지를 생성합니다.
구조 규칙
모든 랜딩 페이지는 다음 아키텍처를 따릅니다:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 글꼴, CSS 변수, 모든 스타일 인라인 -->
<!-- Google Fonts + Font Awesome CDN을 제외한 외부 종속성 없음 -->
</head>
<body>
<nav><!-- 제품 이름 + CTA가 있는 고정 탐색 모음 --></nav>
<section class="hero"><!-- 접히는 부분 위: 헤드라인, 부제목, CTA --></section>
<section class="features"><!-- 기능 그리드 또는 쇼케이스 --></section>
<section class="social-proof"><!-- 통계, 사용 후기, 로고 --></section>
<!-- ... 필요에 따라 추가 섹션 ... -->
<section class="cta-final"><!-- 최종 클릭 유도 문구 --></section>
<footer><!-- 링크, 저작권 --></footer>
<script>
// 스크롤 애니메이션, 카운터, 인터랙션 — 모두 인라인
</script>
</body>
</html>
필수 기술 요구 사항
- 뷰포트 맞춤 — 각 섹션은 "가득 차" 있어야 하지만 넘쳐서는 안 됩니다. 히어로에는
min-height: 100vh를 사용하고, 다른 섹션에는 비례하는 높이를 사용합니다. - 반응형 — 모바일에서 작동해야 합니다. 모든 글꼴 크기에
clamp()를 사용하고, 간격에는 뷰포트 상대 단위를 사용합니다. - 스크롤 애니메이션 — 스크롤 시 표시하려면 IntersectionObserver를 사용합니다. 사용자가 스크롤할 때 요소가 애니메이션되어 들어와야 합니다.
- 성능 — CSS 애니메이션이 JS보다 선호됩니다. 애니메이션 요소에는
will-change를 사용합니다. 스크롤 핸들러를 디바운스합니다. - 접근성 — 시맨틱 HTML, 충분한 대비, 모든 애니메이션에
prefers-reduced-motion미디어 쿼리.
섹션 밀도 제한
과밀을 방지하기 위한 섹션 당 제한:
- 히어로: 헤드라인 1개 (최대 8단어), 부제목 1개 (최대 20단어), CTA 1-2개, 배경 효과는 선택 사항
- 기능: 최대 6개 카드. 각 카드: 아이콘 + 제목 (3-4단어) + 설명 (최대 15단어)
- 통계/지표: 최대 4개 카운터
- 사용 후기: 최대 3개 인용문
- 가격: 최대 3개 등급
- FAQ: 최대 6개 항목 (아코디언/접기 사용)
한 섹션에 너무 많은 콘텐츠가 있습니까? 시각적 구분선을 사용하여 두 섹션으로 나눕니다.
CSS 아키텍처
:root {
/* 타이포그래피 — 항상 clamp() 사용 */
--font-display: 'YOUR_CHOICE', sans-serif;
--font-body: 'YOUR_CHOICE', sans-serif;
--heading-size: clamp(2rem, 5vw, 4.5rem);
--body-size: clamp(0.875rem, 1.5vw, 1.125rem);
/* 색상 — 전체 팔레트 정의 */
--bg-primary: #...;
--bg-secondary: #...;
--text-primary: #...;
--text-secondary: #...;
--accent: #...;
--accent-hover: #...;
--cta-gradient: linear-gradient(...);
/* 간격 */
--section-padding: clamp(3rem, 8vw, 8rem);
--content-width: min(90vw, 1200px);
/* 애니메이션 */
--transition-fast: 0.3s ease;
--transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 스크롤 표시 기본 클래스 */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* 움직임 제한 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
JavaScript 필수 사항
항상 다음 패턴을 포함합니다:
// IntersectionObserver를 사용한 스크롤 표시
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// 애니메이션 카운터 (통계 섹션용)
function animateCounter(el, target, duration = 2000) { ... }
// 탐색 링크를 위한 부드러운 스크롤
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });
references/SECTION_LIBRARY.md를 읽고 각 섹션 유형에 대한 HTML, CSS 및 JS 패턴이 포함된 완전한 섹션 템플릿을 확인합니다.
AI-슬롭 방지 체크리스트
생성하기 전에 다음을 확인합니다:
- 글꼴이 Inter, Roboto, Arial 또는 시스템 기본값이 아닙니다.
- 색 구성표가 흰색 위에 보라색 그라데이션이 아닙니다.
- 히어로가 "혁명" 또는 "강화"라는 단어를 사용하지 않습니다.
- CTA 버튼에 색상 변경 이상의 호버 애니메이션이 있습니다.
- 배경에 질감/깊이가 있습니다. — 단색이 아닙니다.
- 예상치 못한 디자인 선택이 하나 이상 있습니다. (비대칭 레이아웃, 굵은 타이포그래피, 창의적인 섹션 구분선)
제공
- HTML 파일을 설명이 포함된 이름으로 저장합니다:
{product-name}-landing.html - 브라우저에서 엽니다:
open {product-name}-landing.html - 사용자에게 제공하고 피드백을 요청합니다.
4단계: 반복
초기 생성 후 AskUserQuestion (헤더: "Feedback")을 통해 질문합니다: "어떻게 보이나요?" 옵션: 출시하세요! / 색상-글꼴 조정 / 레이아웃 변경 / 섹션 추가-제거 / 새 스타일로 처음부터 다시 시작
수정 사항에 대해서는 다음 규칙을 따릅니다:
- 콘텐츠 추가: 먼저 섹션 밀도 제한을 확인합니다. 초과하는 경우 섹션을 나눕니다.
- 스타일 변경: CSS 변수를 업데이트하고 구조를 다시 작성하지 않습니다.
- 섹션 추가: 섹션 템플릿에 대해
references/SECTION_LIBRARY.md를 읽고 논리적 순서로 삽입합니다. - 섹션 제거: 깔끔하게 삭제하고 JS 참조가 끊어지지 않는지 확인합니다.
참고 자료 (점진적 공개)
이 스킬은 점진적 공개를 사용합니다. 필요할 때만 참조 파일을 로드합니다:
| 파일 | 읽을 시기 | 내용 |
|---|---|---|
references/STYLE_PRESETS.md | 2단계 (스타일 발견) | 전체 CSS 변수, 글꼴 쌍, 배경 처리가 포함된 5개의 선별된 스타일 사전 설정 |
references/SECTION_LIBRARY.md | 3단계 (생성) | 모든 섹션 유형 (히어로, 기능, 가격 등)에 대한 완전한 HTML/CSS/JS 템플릿 |