Pricing Table 월/연 토글 가격 플랜 섹션

SaaS 랜딩의 70% 이상이 가격 테이블을 가진다. 단순한 목록처럼 보이지만 사실

• (1) 정보 위계

• (2) 사용자 결정 유도

• (3) 인터랙션을 한 번에 보여주는 정석 패턴. 토글로 월/연을 전환하는 것까지가 사실상

표준이라, "Pricing Table 한 번 만들어봤다"가 실무 면접/포트폴리오에서 의외로 강한 신호.

구현 포인트

- PLANS 배열로 데이터 분리 마케팅에서 "Pro에 기능 하나 추가"가 가장 흔한 변경. 데이터만 고치면 끝

- formatPrice 헬퍼로 무료(0) / 유료(숫자) / 문의(null) 세 케이스를 한 곳에서 처리

- popular 플랜 강조: scale-[1.02] + 두꺼운 violet 보더 + 그라디언트 CTA + 상단 " 가장 인기" 배지. 시선이 자동으로 가도록

- 토글 UI: role="radiogroup" + aria-checked로 키보드/스크린리더 친화적

알아둘 점

- 연간 가격은 monthly 12 0.83 같이 계산하지 말고 명시하는 게 안전. 마케팅이 종종 둥근 숫자를 원함 ($228 보다 $190이 깔끔)

- "17% OFF" 배지는 토글 안에서 바로 보이게 사용자가 연간을 선택할 동기를 만들어줌

- popular 플랜만 그라디언트 CTA, 나머지는 outline 시선이 한 곳에 집중되도록

- 반응형: 3열에서 lg(1024px)에 1열로 떨어뜨리되 max-w-md mx-auto로 너무 넓어지지 않게 제한

- 가격 옆 단위(/월, /년)는 별도 span 폰트 크기를 작게 해서 숫자가 주인공으로 보이도록

실무 활용 예시

- SaaS / B2B 랜딩 페이지

- 멤버십 / 구독 사이트

- 강의 플랫폼 (한 번 결제 vs 정기 결제)