가격 페이지
규칙
- 최대 3단계: Free/Starter, Pro, Enterprise — 추천 요금제에는 "Most Popular" 배지 강조
- 월간/연간 전환: 두 가격 모두 표시, 연간 할인 표시 ("20% 할인") — 기본값은 연간
- 가격 표시: 가격은 큰 글꼴, 기간은 작은 글꼴 ("/월") — 연간 가격은 월별 환산 금액으로 표시
- 기능 비교 테이블: 포함된 기능은 체크 표시, 제외된 기능은 대시 — 기능을 카테고리별로 그룹화
- 요금제별 CTA: "시작하기" (무료), "무료 체험 시작" (Pro), "영업팀 문의" (Enterprise) — 카드당 하나의 CTA
- 기능 게이트: 구성 객체에서 요금제별 기능 정의 — 런타임에
user.plan을 기능 구성과 대조 확인
- 사용량 기반 과금: 사용량 단계에 대한 계산기/슬라이더 표시 — 사용자가 조정할 때 동적으로 가격 업데이트
- 사회적 증거: 가격 근처에 고객 수 또는 로고 표시 — "5,000+ 팀이 신뢰합니다"
- 가격 아래 FAQ 섹션 — 일반적인 이의 제기 (취소, 환불, 업그레이드) 해결
기능 게이트 패턴
const PLAN_FEATURES = {
free: { maxProjects: 3, analytics: false, api: false },
pro: { maxProjects: 50, analytics: true, api: true },
enterprise: { maxProjects: Infinity, analytics: true, api: true },
} as const;
function hasFeature(plan: string, feature: string): boolean {
return !!PLAN_FEATURES[plan]?.[feature];
}
가격 카드 레이아웃
[배지: "Most Popular"]
요금제 이름
$XX/월 (연간 청구)
$YY/월 (월간 청구)
- 기능 1 ✓
- 기능 2 ✓
- 기능 3 ✗
[CTA 버튼]
피해야 할 사항
- 4단계 이상 — 결정 장애 유발
- 모든 요금제의 가격을 "영업팀 문의"로 숨기는 것 — 개발자가 이탈함
- 연간 할인 없음 — 연간 요금제는 이탈을 줄이고 현금 흐름 개선
- 명확한 그룹화 없는 기능 비교 — 10개 이상의 기능에서 읽기 어려워짐