참조 기반 프리미엄 랜딩 페이지 빌더은(는) 무엇을 하나요?
한국어 출력 스타일: 사용자 대상 텍스트(HITL 질문, 상태 보고서, 답변)에는
$CLAUDE_PLUGIN_ROOT/docs/development/korean-style.md의 §"HITL 질문 작성 규칙" 및 §"답변·보고 원칙"을 적용합니다. 디스크에 작성되는 한국어 파일은 korean-style PostToolUse 훅에 의해 자동으로 스타일 검사됩니다.
세 가지 관행을 결합하여 전문적인 수준의 독립형 랜딩 페이지를 제작하며, 이는 일반적인 AI 출력과 차별화됩니다:
- 시각적 참조 우선 — 디자인 결정 전에 실제 브라우저로 Pinterest(및 관련 갤러리)에서 실제 애니메이션/레이아웃 참조를 수집한 후, 참조 기반 디자인 브리프로 정리합니다(복사 금지).
- 디자인 소재로서의 AI 비디오 — 히어로 배경은 Google Veo 3.1로 생성된 시스루프 비디오로, 디자인 토큰에 맞춰 아트 디렉션되고 웹용으로 후처리되며, 루프 이음새를 숨기는 무한 루프 스크립트를 통해 재생됩니다.
- 수렴, 원샷 아님 — 완성된 페이지는 완료로 보고되기 전에 적대적
screen-quality-loop를 통과합니다.
핵심 원칙:
- 참조 기반, 참조 복사 금지 — 참조는 패턴(레이아웃 원형, 모션 어휘, 팔레트 방향)에 기여합니다. 특정 디자인이 재현되지 않으며 타사 에셋이 결과물에 포함되지 않습니다.
- DESIGN.md는 법칙 —
docs/design-system/DESIGN.md가 존재하면 해당 토큰과aesthetic_rules가 0단계에서 파생된 톤 기본값을 재정의합니다. - 모든 외부 의존성의 우아한 저하 — Pinterest 접근 불가, Veo 도구 없음, ffmpeg 없음, 브라우저 없음 모두 생존 가능합니다. 각 폴백은 최종 보고서에 명시되며, 조용히 대체되지 않습니다.
- 비용 규율 — 기본 생성 예산은 정확히 1개의 정적 이미지 + 1개의 Veo 클립(8초,
veo-3.1-lite)입니다. 그 이상은 명시적인 사용자 요청이 필요합니다(references/veo-loop-video.md§6의 제한된 원회 Seam-QA 재생성은 기본 예산의 일부이며 초과가 아닙니다). - 모션 접근성은 선택 사항이 아님 —
prefers-reduced-motion폴백, 눈에 보이는 일시 정지 컨트롤(WCAG 2.2.2), 포스터 우선 LCP 전략은 필수이며, 단순한 개선 사항이 아닙니다.
출력 위치: landing/{slug}/ (결과물) + landing/{slug}/.work/ (원본 클립, 스틸 이미지, QA 증거 — 페이지에서 참조하지 않음).
🌐 언어 규칙: 이 스킬을 실행하기 전에 프로젝트의
CLAUDE.md를 읽고## Language섹션을 확인하여 프로젝트 언어를 감지하세요. 프로젝트 언어가 한국어(ko)가 아닌 경우, 모든 사용자 대상 페이지 카피와 보고서 출력을 프로젝트 언어로 번역하세요. 기술 식별자(파일 경로, CSS 변수, 클래스 이름)는 번역되지 않은 상태로 유지됩니다.CLAUDE.md또는## Language섹션이 없으면 한국어를 기본값으로 사용합니다.
실행 절차
0단계: 인테이크 및 디자인 톤
A. 인수 파싱
| 인수 | 동작 |
|---|---|
텍스트 브리프 (예: 프리랜서를 위한 AI 회계 SaaS) | 제품/브랜드 브리프로 사용 |
| URL | WebFetch로 페이지 로드 — 제품, 대상, 기존 브랜드 큐 추출 |
docs/planner/{NNN}-*/ 경로 | 플래너 결과물(페르소나, KPI, 화면 디자인)을 브리프로 읽기 |
--refs=<dir> | 사용자 자신의 <dir> 내 참조 이미지 사용; 1단계 캡처 건너뛰기 (분석은 계속 실행) |
--slug=<name> | 결과물 디렉토리 이름; 그렇지 않으면 브랜드/기능에서 케밥 케이스 파생 |
--no-video | Veo 완전 건너뛰기 — 히어로는 CSS 애니메이션 폴백(경로 C) 사용 |
--auto | HITL 없음 — 명시된 가정으로 진행(파이프라인 사용용) |
| (빈 값) | docs/planner/에서 최신 패키지 검색; 없으면 한 줄 브리프 요청 |
B. 모호성 검사 (코딩 전에 생각하기 — 최대 1개의 HITL)
브리프에서 (1) 대상 청중과 (2) 단일 기본 전환 액션(가입/구매/연락/다운로드)을 특정하지 않은 경우, 해석 옵션과 함께 한 번 질문합니다. --auto에서는 가장 가능성 있는 해석을 선택하여 최종 보고서의 "가정"에 기록합니다. 한 번 이상의 인테이크 질문을 하지 마십시오.
C. 디자인 SSoT 로드
docs/design-system/DESIGN.md존재 → 토큰 +aesthetic_rules로드; 아래 톤 테이블은 간격만 채웁니다.- 그 외 → 브리프에서 디자인 톤 파생:
| 브랜드/제품 신호 | 디자인 톤 | 히어로 모션 방향 |
|---|---|---|
| SaaS / 개발자 도구 / AI 제품 | 다크 그래디언트 테크 | 느린 오로라/그래디언트 드리프트, 드문 입자 필드 |
| 럭셔리 / 프리미엄 상품 | 에디토리얼 럭셔리 | 매크로 소재 드리프트(실크, 액체 금속), 얕은 심도 |
| 소비자 앱 / 라이프스타일 / 웰니스 | 소프트 앰비언트 | 소프트 포커스 장면, 드리프트 라이트 릭, 부드러운 시차 |
| 금융 / B2B / 엔터프라이즈 | 자신 있는 미니멀 | 추상 기하학, 느린 라인 및 메쉬 모션, 절제된 팔레트 |
| 창작 스튜디오 / 이벤트 / 포트폴리오 | 대담한 키네틱 | 고대비 형태, 스위핑 컬러 필드 |
- 두 가지 UX 가이드 로드 — 이 가이드는 2~4단계의 모든 미적 및 모션 결정을 규율합니다:
$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-design-guide.md(§4 프롬프팅 기술, §4.1 안티-AI 미학, §4.2 참조 기반 프롬프트)$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-animation-guide.md(§15 모션 접근성, §18 AI 생성 비디오 배경)
D. 메인 워크트리 가드 및 개발 동기화
랜딩 페이지는 계획 단계 결과물입니다 — 다른 개발 동기화 스킬과 마찬가지로 dev의 메인 워크트리에서 실행합니다:
PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(find ~/.claude/plugins/cache -maxdepth 3 -type d -path '*/astra-methodology/*' 2>/dev/null | sort -V | tail -1)}"
if [ -z "$PLUGIN_ROOT" ] || [ ! -f "$PLUGIN_ROOT/scripts/worktree-helpers.sh" ]; then
echo "ERROR: CLAUDE_PLUGIN_ROOT not found. Check the plugin cache path." >&2; exit 1
fi
source "$PLUGIN_ROOT/scripts/worktree-helpers.sh"
astra_ensure_main_worktree || exit 1
그런 다음 /catalog-generator 0단계 G와 정확히 동일한 방식으로 dev를 동기화합니다(브랜치 확인 → 더티면 스태시 → git fetch origin dev && git checkout dev && git pull origin dev → 스태시 팝; dev가 없으면 main/master로 폴백).
1단계: 참조 수집 (Pinterest)
디자인하기 전에 6~12개의 애니메이션/레이아웃 참조를 수집합니다. 전체 절차, 쿼리 레시피, 팝업 처리 및 보드 템플릿: 이 단계를 시작하기 전에 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/reference-collection.md를 읽으십시오.
A. 브라우저 백엔드 확인
플러그인 전체 순서(ego 기본 → Chrome MCP 폴백; SSoT: $CLAUDE_PLUGIN_ROOT/docs/development/browser-backend-policy.md)에 따름:
command -v ego-browser >/dev/null 2>&1 && echo ego || echo ""
출력이 비어 있으면 → mcp__chrome-devtools__* 도구가 있을 때 chrome-mcp. 둘 다 없으면 → 캡처 폴백: 현재 랜딩 페이지/애니메이션 쇼케이스 설명(어워드 갤러리, 모션 쇼케이스)을 WebSearch하고 텍스트 전용 참조 보드를 구축합니다. 최종 보고서에 "참조 보드: 검색 기반 (브라우저 없음)"을 명시합니다.
B. 검색 및 캡처
{톤} + {산업} + 매체에서 4~5개의 Pinterest 검색 쿼리 빌드(레시피는 참조 파일에 있음).- 쿼리당:
https://www.pinterest.com/search/pins/?q={query}열기, 오버레이 모달 닫기,window.scrollTo(0, 0)(ego 빈 프레임 가드), 결과 그리드 캡처, 상위 1~2개 핀을 열고 세부 보기 캡처. - ego 모드: 하나의 heredoc = 하나의 라운드, 하나의 캡처는 3회 이상의 라운드 필요(이동 → 준비 프로브 → 스윕+캡처; 한 번에 압축 금지, 그렇지 않으면 빈 캡처가 발생함 — 참조 파일 참조); 작업 공간
astra landing {slug};captureScreenshot은 절대 경로 사용; 완료되면completeTaskSpace('astra landing {slug}', { keep: false })로 종료. - 캡처를
landing/{slug}/design/references/ref-{NN}.png에 저장. Pinterest에 연결할 수 없는 경우(로그인 장벽 지속/네트워크 차단) → 참조 파일에 나열된 관련 갤러리에서 동일한 쿼리 재시도; 여전히 실패하면 1단계 A의 캡처 폴백.
C. 비전 분석 → 참조 보드
각 캡처에 대해 구조화된 레코드 추출(분석 프롬프트는 참조 파일에 있음): 레이아웃 원형, 히어로 처리, 모션 어휘(무엇이 움직이는지, 얼마나 느리게, 어떤 이징), 팔레트 방향, 타이포그래피 특성, 밀도, 적응할 가치가 있는 하나의 독특한 세부 사항. 가능하면 mcp__fect-mcp__vision_analyze 사용; 그렇지 않으면 각 PNG를 직접 Read(멀티모달 읽기).
landing/{slug}/design/reference-board.md 작성 — 이미지별 레코드 + 종합 섹션("이 참조들이 동의하는 내용"). 보드가 존재한다고 주장하기 전에 [ -f ]로 확인.
독창성 가드: 보드는 패턴을 기록하며, 특정 핀을 재현하라는 지시는 절대 기록하지 않습니다. 참조 캡처는 내부 작업 자료로 design/references/에 남습니다. index.html에서 링크되지 않으며 페이지 에셋으로 제공되지 않습니다.
2단계: 디자인 방향 합성
참조 보드 + 디자인 톤 + DESIGN.md를 landing/{slug}/design/direction.md의 확정된 디자인 브리프로 정리하고, 정확히 다음 결정을 포함합니다:
- 레이아웃 원형 — 예: 전체 뷰포트 비디오 히어로 + 교대 기능 밴드 + 마무리 CTA.
- 모션 어휘 — 참조 보드에서 추출하고
vibe-coding-animation-guide.md기술에 매핑된 페이지 전체 모션 규칙(지속 시간, 이징, 스크롤 공개 스타일). - 히어로 미디어 계획 — 경로 A/B/C 결정(3단계 표), 비디오의 주제, 분위기 및 카메라 동작.
- 팔레트 + 타이포그래피 — DESIGN.md 토큰이 있으면 그것을 사용; 그렇지 않으면 톤 + 참조에서 파생(OKLCH 값, 하나의 디스플레이 + 하나의 본문 패밀리).
- 안티-AI 독특 요소 — 최소 2개의 구체적인 독특한 선택(디자인 가이드 §4.1 / DESIGN.md
aesthetic_rules기준): 예: 비대칭 그리드, 에디토리얼 세리프 페어링, 그레인/노이즈 텍스처, 사용자 정의 스크롤 표시기, 과장된 숫자. 일반적인 중앙 히어로 + 세 개의 카드 + 보라색 그라디언트 출력은 결함이며 기준선이 아닙니다.
HITL (--auto에서는 건너뛰기): 5가지 결정을 간결한 요약으로 제시하고 단일 확인/조정 질문을 합니다. 이것이 마지막 결정 게이트입니다. 이후의 모든 작업은 자동으로 실행됩니다.
3단계: 히어로 루프 비디오 제작 (Veo 3.1)
이 단계 전에 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/veo-loop-video.md를 읽으십시오 — 여기에는 프롬프트 레시피, 도구 호출 템플릿 및 모든 ffmpeg 명령이 포함되어 있습니다.
A. 경로 결정
| 조건 | 경로 |
|---|---|
mcp__fect-mcp__veo_* 존재 그리고 mcp__fect-image__nanobanana_text2img 존재 | A — 북엔드 루프 (기본값) |
mcp__fect-mcp__veo_* 존재, fect-image 부재 | B — text2video + 크로스페이드 루프 |
Veo 도구 부재 또는 --no-video | C — CSS 애니메이션 히어로 (비디오 없음; 템플릿은 references/video-integration.md에 있음) |
도구 존재 여부는 세션에서 사용 가능한 도구로 결정됩니다(fect-mcp 서버는 사용자 수준이며 번들로 제공되지 않음 — 부재는 정상이며 오류가 아닙니다). 선택한 경로를 기록합니다. 최종 보고서에는 경로를 명시하고, B/C의 경우 그 이유를 명시해야 합니다.
B. 경로 A — 북엔드 루프 (첫 번째 프레임 == 마지막 프레임)
시스루프 비법: 아트 디렉션된 스틸 이미지를 하나 생성한 다음, Veo가 그 프레임에서 다시 그 프레임으로 애니메이션을 적용하게 합니다 — veo_img2video에 lastImagePath를 sourceImagePath와 동일한 파일로 설정합니다. 클립의 첫 번째 프레임과 마지막 프레임은 픽셀 단위로 동일하므로 눈에 보이는 이음새 없이 반복되며, 스틸 이미지는 LCP 포스터 역할을 겸합니다.
- 스틸 이미지:
mcp__fect-image__nanobanana_text2img→landing/{slug}/.work/hero-frame.png— 16:9, 토큰 일치 팔레트, 헤드라인이 위치할 조용한 네거티브 공간, 텍스트, 로고, 얼굴 없음(톤별 프롬프트 템플릿은 참조 파일에 있음). - 클립:
mcp__fect-mcp__veo_img2video—sourceImagePath=lastImagePath=hero-frame.png,durationSeconds: 8,resolution: "1080p"(1080p는 8초 필요),aspectRatio: "16:9", 기본 모델(veo-3.1-lite— 라이트 출력이 Seam QA에서 두 번 실패하는 경우에만fast/전체로 상향). 프롬프트 = 순환 앰비언트 모션으로 시작으로 눈에 띄게 돌아옴(톤별 레시피는 참조 파일에 있음; 컷, 새 주제, 텍스트 없음). - 확인 (확인 없이 주장 금지):
[ -f ]로 mp4 확인 +ffprobe지속 시간 ≥ 7초. 누락/짧음 → 한 번 재생성; 여전히 실패하면 경로 B; Veo가 완전히 오류를 발생시키면 경로 C. - Seam QA: 첫 번째 + 마지막 프레임 추출,
mcp__fect-mcp__vision_compare(또는Read둘 다)로 비교. 눈에 띄는 점프가 있으면 참조 파일의 ffmpeg 크로스페이드 루프를 위에 적용.
C. 경로 B — text2video + 크로스페이드 루프
루프 친화적인 프롬프트 레시피로 mcp__fect-mcp__veo_text2video 실행, 그런 다음 ffmpeg 자체 크로스페이드(마지막 1초를 처음 1초와 혼합; 명령은 참조 파일에 있음)로 시스루프를 만듭니다. 포스터 = 추출된 첫 번째 프레임.
D. 후반 작업 (모든 비디오 경로)
ffmpeg(command -v ffmpeg)로: 오디오 제거(-an — 배경 비디오는 항상 음소거됨; Veo의 기본 오디오 트랙은 데드 웨이트), hero-desktop.mp4(1920 w, H.264 CRF 24, +faststart) + hero-mobile.mp4(720 w, CRF 26) 계층 인코딩, hero-poster.jpg 생성(경로 A: hero-frame.png에서 변환; 경로 B: 첫 번째 프레임). 출력은 landing/{slug}/assets/video/에 저장됩니다.
ffmpeg 없음 → 원시 Veo mp4를 두 변형으로 모두 사용; JS 크로스페이드 플레이어(4단계)가 잔여 이음새를 마스킹합니다. 최종 보고서에 압축 누락을 명시하십시오. 페이지를 크기 최적화된 것으로 제시하지 마십시오.
예산 게이트: hero-desktop.mp4 ≤ 4MB, hero-mobile.mp4 ≤ 1.5MB, 포스터 ≤ 200KB (stat -f%z / du -k로 확인). 예산 초과 시 → CRF를 높이고 진행하기 전에 다시 인코딩하십시오.
9:16 세로 변형(두 번째 Veo 생성)은 명시적인 사용자 요청이 있는 경우에만 생성됩니다. 기본 모바일 전략은 720 w 다운스케일 + 포스터 우선 로딩입니다.
4단계: 페이지 구현
이 단계 전에 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/video-integration.md를 읽으십시오 — 여기에는 히어로 마크업, 전체 loop-video.js 무한 루프 플레이어, C...
... [번역을 위해 잘림]