belt CLI 스킬 설치: npx skills add belt-sh/cli
랜딩 페이지 디자인
inference.sh CLI를 통해 AI 생성 비주얼로 고전환 랜딩 페이지를 디자인하세요.
빠른 시작
inference.sh CLI(belt) 필요. 설치 안내
belt login
belt app run falai/flux-dev-lora --input '{
"prompt": "professional person smiling while using a laptop showing a clean dashboard interface, bright modern office, natural lighting, warm and productive atmosphere, lifestyle marketing photography",
"width": 1248,
"height": 832
}'
belt app run tavily/search-assistant --input '{
"query": "best SaaS landing page examples 2024 conversion rate"
}'
Above-the-Fold 공식
스크롤 없이 보이는 모든 요소는 5초 안에 가치를 전달해야 합니다.
┌─────────────────────────────────────────────────┐
│ [로고] [내비게이션] [CTA 버튼] │
│ │
│ 헤드라인 (6-12 단어) │
│ ───────────────────────── │
│ 서브헤드라인 (15-25 단어) [히어로 이미지]│
│ 제품이 아닌 │
│ [기본 CTA 버튼] 결과(OUTCOME)를 │
│ "무료 체험 시작" 보여주세요 │
│ │
│ 소셜 프루프: "10,000+ 팀이 신뢰합니다" │
│ [로고] [로고] [로고] [로고] [로고] │
└─────────────────────────────────────────────────┘
5가지 요소
| 요소 | 규칙 | 예시 |
|---|
| 헤드라인 | 6-12 단어, 결과를 명시 | "몇 분 만에 문서를 배포하세요" |
| 서브헤드라인 | 15-25 단어, 방법을 설명 | "코드베이스에서 자동으로 문서를 작성하는 AI 기반 도구. 템플릿이 필요 없습니다." |
| 히어로 이미지 | 제품이 아닌 결과(OUTCOME)를 보여줌 | UI 스크린샷이 아닌, 결과에 만족하는 사람 |
| 기본 CTA | 행동 동사 + 가치 | "무료 체험 시작" ("제출" 또는 "더 알아보기" 아님) |
| 소셜 프루프 | 로고, 수치, 또는 짧은 사용후기 | "[로고] 회사 10,000+ 팀이 신뢰합니다" |
헤드라인
전환율을 높이는 공식
| 공식 | 예시 |
|---|
| [결과] without [고통] | "디자인 실력 없이도 아름다운 문서를" |
| [결과] in [기간] | "5분 만에 사이트를 런칭하세요" |
| The [더 나은 방법] to [일반적인 작업] | "더 빠른 API 구축 방법" |
| Stop [고통]. Start [결과]. | "추측은 그만. 확실함을 시작하세요." |
| [숫자] [것] to [결과] | "모든 데이터를 관리하는 하나의 도구" |
헤드라인의 실패 요인
❌ "플랫폼에 오신 것을 환영합니다" (가치에 대해 아무 말도 하지 않음)
❌ "세계에서 가장 진보된 AI 기반 솔루션" (허황된 말, 구체성 없음)
❌ "우리는 비즈니스 성장을 돕습니다" (모호하고 일반적임)
❌ "차세대 엔터프라이즈 소프트웨어" (무엇을 하는지 알 수 없음)
✅ "고객 피드백을 자동으로 제품 기능으로 전환하세요"
✅ "데이터베이스처럼 생각하는 스프레드시트"
✅ "사용자가 발견하기 전에 버그를 찾아 수정하세요"
히어로 이미지
제품이 아닌 결과를 보여주세요
❌ 대시보드 스크린샷 (지루하고 한눈에 파악하기 어려움)
❌ 추상적인 기하학적 배경 (아무 정보도 주지 않음)
❌ 악수하는 스톡 사진 (진부함)
✅ 화면에서 명확한 결과를 보고 만족하는 사람
✅ 전/후 비교 변환
✅ 제품을 사용한 최종 결과
belt app run falai/flux-dev-lora --input '{
"prompt": "happy professional team celebrating around a laptop showing positive growth charts, bright modern office, natural sunlight, authentic candid moment, marketing photography style, warm tones",
"width": 1248,
"height": 832
}'
belt app run bytedance/seedream-4-5 --input '{
"prompt": "clean modern laptop on a minimalist desk showing a beautiful analytics dashboard, floating UI elements emerging from the screen, soft gradient background, product marketing style, professional",
"size": "2K"
}'
CTA 버튼
텍스트
| 좋은 CTA | 나쁜 CTA |
|---|
| "무료 체험 시작" | "제출" |
| "무료로 시작하기" | "여기를 클릭" |
| "실제로 확인하기" | "더 알아보기" (약한 약속) |
| "첫 번째 리포트 만들기" | "가입하기" (모호함) |
| "14일 무료 체험" | "등록" |
공식: 행동 동사 + 가치/결과 + (선택: 위험 완화)
디자인
| 요소 | 규칙 |
|---|
| 색상 | 배경과 높은 대비 — 가장 눈에 띄는 요소여야 함 |
| 크기 | 최소 44px 높이 (터치 대상), 텍스트 + 여백을 위한 충분한 너비 |
| 위치 | Above-the-fold, 각 주요 섹션 후에 반복 |
| 여백 | 버튼 주변에 충분한 여백, 붐비지 않게 |
| 보조 CTA | 필요한 경우 아래에 텍스트 링크 사용 ("또는 데모 보기") |
섹션 순서
랜딩 페이지에 검증된 순서:
| 섹션 | 목적 | 핵심 요소 |
|---|
| 1. 히어로 | 핵심 가치, 기본 CTA | 헤드라인 + 이미지 + CTA |
| 2. 소셜 프루프 | 신뢰 구축 | 로고, 숫자, 배지 |
| 3. 문제 | 공감대 형성 | 사용자가 인식하는 고통점 |
| 4. 솔루션/특징 | 해결 방법 제시 | 시각 자료와 함께 3가지 핵심 기능 |
| 5. 작동 방식 | 복잡성 감소 | 3단계: 가입, 설정, 혜택 |
| 6. 사용후기 | 효과 증명 | 2-3개의 구체적인 고객 인용문 |
| 7. 가격 | 결정 도움 | 명확한 등급, 추천 강조 |
| 8. FAQ | 이의제기 처리 | 5-7개의 일반적인 질문 |
| 9. 최종 CTA | 남은 방문자 포착 | 긴급성을 더해 기본 CTA 반복 |
소셜 프루프 유형
| 유형 | 영향 | 배치 |
|---|
| 회사 로고 | 가장 빠른 처리, 높은 신뢰 | 히어로 아래 |
| 사용자 수 | 규모 신호 | 히어로 또는 소셜 프루프 바 |
| 별점 | 제품 품질 | CTA 근처 |
| 사용후기 | 상세한 신뢰도 | 전용 섹션 |
| 사례 연구 통계 | 구체적인 증거 | 기능 섹션 |
| 신뢰 배지 | 보안/규정 준수 | 양식, 가격, 푸터 근처 |
belt app run exa/answer --input '{
"question": "What is the average conversion rate for SaaS landing pages with social proof vs without?"
}'
양식 디자인
| 규칙 | 영향 |
|---|
| 모든 필드는 전환율을 약 11% 감소시킴 | 필드 최소화 |
| 이름 + 이메일 = 가입 최대치 | 전화, 회사, 직함 묻지 않음 |
| 단일 열 레이아웃 | 다중 열 양식 사용 금지 |
| 인라인 유효성 검사 | 제출 시가 아닌 즉시 오류 표시 |
| 명확한 오류 메시지 | "필드 3 오류"가 아닌 "이메일을 입력하세요" |
| 제출 버튼 텍스트 = 행동 | "제출"이 아닌 "계정 만들기" |
모바일 최적화
| 규칙 | 이유 |
|---|
| CTA 버튼 전체 너비 | 엄지로 쉽게 탭 가능 |
| 스크롤 시 고정 CTA | 항상 접근 가능 |
| 가로 스크롤 없음 | 모바일 레이아웃 깨짐 |
| 글꼴 최소 16px | iOS는 16px 미만 입력을 확대함 |
| 탭 대상 최소 48x48px | Apple HIG, Google Material |
| 이미지 반응형 | 뷰포트 넘지 않음 |
| 헤드라인 + CTA 우선 | Above-the-fold 단순화 |
공유용 OG 이미지
belt app run falai/flux-dev-lora --input '{
"prompt": "clean professional social sharing card, product name and tagline on modern gradient background, minimal design, corporate tech aesthetic, 1200x630 aspect ratio equivalent",
"width": 1200,
"height": 630
}'
belt app run infsh/html-to-image --input '{
"html": "<div style=\\