Skip to content

Worked example: developer-tool SaaS landing page design

Generated by the marketing-page route (skills/design-critique, skills/handoff-spec). Demonstrates the canonical marketing-surface spec format — hero archetype selection, section sequence with above-the-fold reasoning, pricing/plan comparison, testimonial trust elements, CTA copy strategy, and email-client-safe responsive behavior. Adapted from the sweep brief in docs/ROUTE-COVERAGE-SWEEP.md (Phase 768, landing class).

Brief: 개발자 도구 SaaS 랜딩 페이지 설계 — 히어로, 기능 소개, 가격, 후기, CTA 배치.

Cite knowledge/patterns/landing-hero-design.md (hero archetype selection and 5-second comprehension test), knowledge/patterns/landing-page-patterns.md (section sequencing and above-the-fold structure), knowledge/patterns/pricing-page-design.md (plan comparison and toggle patterns), knowledge/patterns/email-design.md (email-client-safe markup for the trial-confirmation follow-up), and knowledge/patterns/brand-identity.md (voice and color-token consistency across the surface) as the grounding for this spec.

# 개발자 도구 SaaS 랜딩 페이지 스펙

> 근거: knowledge/patterns/landing-hero-design.md, knowledge/patterns/landing-page-patterns.md,
> knowledge/patterns/pricing-page-design.md, knowledge/patterns/email-design.md,
> knowledge/patterns/brand-identity.md, knowledge/PRINCIPLES.md

## 1. 히어로 섹션 (Above the fold)

- **아키타입 선택**: 텍스트 주도형(text-led) 히어로. 개발자 도구는 스크린샷보다 "무엇을, 왜, 어떻게"를 5초 안에 전달하는 문장이 전환에 더 크게 기여한다(시각 주도형은 별도 기능 섹션에서 다룬다).
- **헤드라인**: "배포 파이프라인, 코드 3줄로 끝내세요" — 문제(느린 배포)와 해결(3줄 설정)을 동시에 전달. 서브헤드라인은 대상 독자(백엔드 팀)를 명시.
- **CTA 배치**: Primary CTA "무료로 시작하기"(신용카드 불필요 명시) + Secondary "라이브 데모 보기". 위계: Primary는 브랜드 accent 색 + 굵은 버튼 문구, Secondary는 outline 스타일로 시각적 종속 관계를 명확히 한다.
- **스크롤 순서(위계)**: 히어로 → 신뢰 로고 스트립(사용 중인 기업 로고, 폴드 바로 아래) → 기능 3종 → 후기 → 가격 → 최종 CTA. 폴드 위(above the fold)에는 헤드라인·서브헤드·CTA·최소 1개 시각 자료만 배치하고 기능 나열은 폴드 아래로 미룬다.
- 히어로 시각 자료는 실제 터미널/대시보드 스크린샷 또는 코드 스니펫 애니메이션(자동재생 무음, 3초 루프)을 사용하고, 정적 이미지로도 동일 정보를 전달하는 대체 텍스트를 제공한다.

## 2. 기능 소개 섹션

- 3열 그리드(데스크톱), 각 카드: 아이콘 + 소제목(동사형, 예: "자동으로 롤백하세요") + 1문장 설명 + "더 알아보기" 텍스트 링크.
- 기능 카드의 시각 위계는 아이콘 > 소제목 > 설명 순으로, 소제목이 헤드라인보다 한 단계 작은 타이포 스케일을 사용해 히어로와의 종속 관계를 유지한다.
- 각 기능 카드는 실제 제품 스크린샷을 근거로 하며, 추상 일러스트로 대체하지 않는다(개발자 대상 제품은 실물 UI가 신뢰를 만든다).

## 3. 가격 페이지 섹션

- 3단 플랜 비교: Free / Pro / Enterprise. 월/연 토글 기본값은 연간(할인율 뱃지 "2개월 무료" 병기), 토글 전환 시 가격 숫자만 즉시 갱신되고 페이지 스크롤 위치는 유지된다.
- Pro 플랜 카드는 "가장 인기" 뱃지 + 테두리 강조로 시각 위계를 부여하되, 나머지 플랜과 동일한 카드 구조(기능 체크리스트, CTA 버튼)를 유지한다.
- Enterprise 플랜의 CTA는 가격 대신 "영업팀에 문의하기"로 대체하고, 클릭 시 문의 폼 모달을 연다(신용카드 입력 흐름과 분리).
- 플랜별 기능 체크리스트는 표 형태로 정렬해 스캔 가능하게 하고, 각 행에 툴팁으로 기능 설명을 보강한다. FAQ 아코디언을 가격 표 바로 아래 배치.

## 4. 후기 및 신뢰 요소 (한국형 신뢰 신호)

- 후기 카드 3~4개: 실명 대신 "직책 + 회사명"(예: "백엔드 리드, OO테크") 표기 — 개인정보 노출 최소화와 신뢰 확보를 병행. 실제 도입 기업 로고 병기.
- **한국형 신뢰 요소**: 사업자 정보(상호, 대표자, 사업자등록번호, 통신판매업 신고번호)를 푸터에 명시하고, 결제 수단 아이콘(카카오페이, 토스페이, 카드사 로고)을 가격 섹션 하단에 노출해 결제 신뢰를 보강한다.
- 정량 지표 스트립("설치 도구 12,000개 팀 사용 중", "평균 배포 시간 40% 단축")을 후기 섹션 상단에 배치해 정성 후기 전에 정량 신뢰를 먼저 전달한다.
- 후기 인용문은 자동 캐러셀로 넘기지 않고 정적 그리드로 고정한다 — 자동 전환 캐러셀은 후기를 끝까지 읽기 전에 사라져 신뢰 신호로서의 가치를 잃는다.

## 5. CTA 문구 전략과 전환율

- **한국형 CTA 문구**: "무료로 시작하기"(행동 유도 + 무비용 강조), "지금 데모 예약하기"(긴급성), "영업팀에 문의하기"(Enterprise). 영어 원문 그대로("Get Started", "Sign Up")를 직역하지 않고 한국 사용자에게 익숙한 행동 유도 어휘를 사용한다.
- 전환율을 높이기 위해 Primary CTA는 페이지당 반복 배치(히어로, 기능 섹션 하단, 가격 섹션, 최종 CTA 섹션) — 단, 같은 문구를 반복하지 않고 맥락별로 변주한다("무료로 시작하기" → "지금 무료로 시작하기" → "5분 만에 시작하기").
- 최종 CTA 섹션은 배경색을 전환해(라이트 배경 페이지 중간에 브랜드 accent 배경) 스크롤 종료 지점에서 재진입 지점임을 시각적으로 신호한다.
- 신규 가입 완료 후 발송되는 트라이얼 확인 이메일은 CTA 버튼을 bulletproof 버튼(VML + padding 기반, 이미지 배경 아님)으로 구현해 Outlook 데스크톱에서도 클릭 가능한 버튼으로 렌더링되도록 한다.

## 6. 반응형 동작과 이메일 클라이언트 대응

- **Desktop (1280px+)**: 히어로 텍스트/시각 50-50 분할, 기능 3열 그리드, 가격 3단 나란히 배치.
- **Tablet (768–1024px)**: 히어로는 텍스트 우선 단일 컬럼 + 시각 자료 아래 배치, 기능 2열 그리드, 가격 3단 유지하되 카드 폭 축소.
- **Mobile (360–430px)**: 모든 섹션 단일 컬럼 스택. 가격 플랜은 세로 스와이프 캐러셀로 전환하되 Pro 플랜이 기본 노출 카드가 되도록 스냅한다. Primary CTA는 하단 고정(sticky) 바로 전환해 스크롤 중에도 항상 접근 가능하게 한다.
- **이메일 클라이언트 대응**: 트라이얼 확인 이메일은 600px 고정폭 테이블 기반 레이아웃(div/flexbox 미사용), 다크모드 대응(투명 배경 로고 SVG 대신 PNG + 명시적 배경색 지정으로 Gmail/Outlook 다크모드에서 반전 깨짐 방지), Outlook에서 CSS `background-image` 미지원을 고려해 배경색을 fallback으로 반드시 지정한다.

## 접근성

- CTA 버튼은 색상 대비 최소 **4.5:1 contrast ratio**(WCAG AA)를 확보하며, accent 배경 위 버튼 텍스트도 동일 기준을 적용한다.
- 모든 CTA와 링크는 키보드 Tab 순회로 도달 가능해야 하며, 포커스 상태는 `focus-visible` 아웃라인으로 명시한다. 가격 토글(월/연)은 `role="switch"` + `aria-checked`로 마크업.
- 히어로 배경 영상/애니메이션은 `prefers-reduced-motion` 대응 정적 대체 이미지를 제공하고, 자동재생 콘텐츠에는 일시정지 컨트롤을 노출한다.
- 스크린 리더: 신뢰 로고 스트립과 후기 회사 로고는 `alt` 텍스트로 회사명을 명시하고, 순수 장식 아이콘은 `aria-hidden="true"` 처리한다.
- 가격 표는 `<caption>`과 `scope="col"` 헤더를 사용해 스크린 리더 사용자도 플랜별 기능을 표로 탐색할 수 있게 한다.

## Don't

- Don't: 폴드 위에 기능 목록까지 욱여넣지 않는다 — 헤드라인·서브헤드·CTA·시각 자료 이상은 스크롤 아래로 미룬다.
- Don't: 가격 토글 전환 시 페이지를 스크롤 상단으로 리셋하지 않는다 — 사용자의 비교 흐름을 끊는다.
- Don't: 후기를 자동 캐러셀로 빠르게 넘기지 않는다 — 신뢰 신호를 읽기도 전에 사라진다.
- Don't: CTA 문구를 페이지 전체에서 동일하게 반복하지 않는다 — 맥락별 변주 없는 반복은 클릭 유인 효과가 떨어진다.
- Avoid: 트라이얼 이메일에 이미지 배경 버튼을 사용하는 것 — Outlook 데스크톱에서 배경 이미지가 렌더링되지 않아 버튼이 사라진다.

Why this is a good marketing-page example

  • Conversion/CTA evidence is explicit and layered — CTA 배치 위계(Primary/Secondary), 반복 배치 전략, 맥락별 문구 변주, 전환율 근거, matching route --check marketing-page's conversion requirement.
  • Visual hierarchy is concrete — hero archetype selection, above-the-fold section sequencing (폴드/스크롤 순서), typographic subordination between headline/subhead/feature titles, matching the visual-hierarchy requirement.
  • Responsive and email-client behavior are both covered — three breakpoints for the page itself, plus a dedicated email-client section (bulletproof buttons, 다크모드 대응, Outlook background-image fallback), matching the responsive/email-client requirement.
  • Grounding is load-bearing — every section traces back to landing-hero-design.md, landing-page-patterns.md, pricing-page-design.md, or email-design.md, cited in the header.
  • Korean specifics are concrete, not decorative — 한국형 CTA 문구 rationale, 사업자 정보 신뢰 요소, 카카오페이/토스페이 결제 아이콘, 고객 후기 신뢰 요소 (직책+회사명 표기, 정량 지표 선행 배치).
  • Accessibility is concrete — explicit 4.5:1 contrast ratio, focus-visible, prefers-reduced-motion, aria-hidden, table <caption>/scope="col" for the pricing table.
  • A Don't section closes the spec — five concrete anti-patterns, each tied back to a rule stated earlier.

Cross-reference