요금제 페이지 리디자인 구현 계획

대상: src/app/pricing/page.tsx
관련 컴포넌트: PricingTable, PricingCard
목표: ‘무료 체험 시작’ 버튼 클릭률 향상
방향: 신뢰감 있고 담백한 B2B SaaS 톤 유지, 과도한 애니메이션 배제

현재 세션에서는 로컬 파일을 직접 열람할 수 있는 도구가 제공되지 않아 실제 토큰·스타일·컴포넌트 구현은 확인하지 못했습니다. 따라서 아래 계획은 사용자께서 제공한 현재 상태를 기준으로 작성했으며, 구현 전 실제 코드와 디자인 토큰을 대조하는 단계가 필요합니다.

1. 현재 상태 감사

확인된 상태

• 세 가지 요금제 카드가 가로로 나열되어 있음
• 추천 플랜이 시각적으로 구분되지 않음
• 사용자가 어떤 플랜을 선택해야 하는지 판단 기준이 약함
• 핵심 전환 목표는 ‘무료 체험 시작’ 버튼 클릭
• 기존 PricingTable, PricingCard 컴포넌트를 사용 중
• B2B SaaS 특성상 가격 외에도 신뢰, 기능 범위, 적합한 고객 유형이 중요함

구현 전 확인할 항목

• 플랜 데이터가 page.tsx에 직접 선언되어 있는지, 별도 config로 분리되어 있는지
• PricingTable이 레이아웃만 담당하는지, 플랜 비교·추천 상태까지 관리하는지
• PricingCard의 CTA, 가격, 기능 목록, 배지 구조
• 기존 버튼, 카드, 배지, 툴팁, Accordion 컴포넌트
• 색상·간격·타이포그래피 디자인 토큰
• 모바일에서 카드가 세로로 쌓이는 현재 방식
• 무료 체험 버튼의 실제 링크, 이벤트 추적, 로그인/가입 플로우

2. 주요 UX/UI 문제

시각적 문제

• 세 카드의 시각적 무게가 동일해 선택 우선순위가 보이지 않음
• 플랜 간 차이를 빠르게 비교할 수 있는 구조가 부족할 가능성
• 카드가 단순 나열되면 가격만 비교하게 되어 가치 설명이 약해짐
• CTA의 중요도가 플랜명·기능 목록과 경쟁할 수 있음

사용성 문제

• 어떤 플랜이 가장 많은 고객에게 적합한지 알기 어려움
• 추천 플랜을 선택해야 하는 이유가 명확하지 않음
• 가격, 사용자 수, 주요 기능, 지원 수준의 차이를 짧은 시간에 파악하기 어려움
• 무료 체험의 조건과 부담 여부가 CTA 주변에서 충분히 전달되지 않을 수 있음

전환 문제

• CTA가 모든 카드에서 동일하면 추천 플랜의 전환 우선순위가 약함
• ‘무료 체험’이 결제 정보 필요 여부, 체험 기간, 자동 결제 여부와 함께 안내되지 않으면 신뢰를 떨어뜨릴 수 있음
• 페이지 하단에서 망설임을 해소할 FAQ·신뢰 정보가 부족할 수 있음

3. 제안 정보 구조

1. 페이지 헤더
2. 요금제 소개 Hero
3. 결제 주기 선택 영역
4. 요금제 카드 3개
5. 핵심 기능 비교 또는 플랜 선택 가이드
6. 신뢰 보강 정보
7. FAQ
8. 하단 무료 체험 CTA

핵심은 사용자가 다음 흐름으로 자연스럽게 이동하도록 만드는 것입니다.

무엇을 얻는가
  ↓
어떤 플랜이 적합한가
  ↓
무료 체험에 부담이 없는가
  ↓
무료 체험 시작

4. 섹션별 페이지 계획

4.1 Hero

구성:

• 짧고 명확한 제목
• 요금제 선택 기준을 설명하는 한 문장
• 필요 시 “모든 플랜에 무료 체험 포함”과 같은 신뢰 문구

권장 메시지 방향:

팀의 규모와 사용 목적에 맞는 플랜을 선택하세요.

피해야 할 방향:

• 기능을 나열하는 긴 헤드라인
• 과장된 할인·한정 문구
• SaaS 업계에서 흔한 추상적인 표현

4.2 결제 주기 선택

월간/연간 결제 옵션이 존재한다면 다음을 권장합니다.

• 세그먼트 컨트롤 또는 라디오 그룹 사용
• 연간 결제 선택 시 절약 금액을 명확히 표시
• 할인율만 강조하지 말고 실제 금액 또는 절약 규모를 함께 표시
• 가격 변경이 카드 전체에서 일관되게 반영되도록 구성

결제 주기가 없다면 새 기능으로 추가하지 않고, 현재 사업 정책을 확인한 뒤 결정합니다.

4.3 요금제 카드 영역

세 카드는 유지하되 각 카드에 역할을 부여합니다.

기본 카드 구조

• 플랜명
• 적합한 고객 유형
• 짧은 가치 설명
• 가격
• 가격 단위 및 과금 기준
• 주요 CTA
• 핵심 기능 목록
• 지원 방식 또는 사용 한도
• 상세 기능 보기

추천 플랜

가운데 카드를 무조건 추천하기보다 실제 사업 목표에 맞는 플랜을 recommended 상태로 지정합니다.

추천 플랜에 적용할 요소:

• 상단 “가장 인기 있음” 또는 “대부분의 팀에 적합” 배지
• 브랜드 강조색의 얇은 테두리
• CTA의 채움형 버튼
• 핵심 혜택 1~2개 별도 강조
• 카드 상단 또는 제목 근처의 추천 이유
• 데스크톱에서 약간 더 높은 시각적 우선순위

과도한 강조는 피합니다.

• 큰 그림자
• 지나치게 넓은 색상 면적
• 카드 크기의 큰 차이
• 강한 움직임이나 자동 강조 애니메이션

CTA 문구

모든 카드의 CTA를 동일하게 반복하기보다 의도를 구분합니다.

• 추천 플랜: 무료 체험 시작
• 하위 플랜: 무료로 시작
• 상위 플랜: 무료 체험 상담 또는 사업 정책에 맞는 CTA

단, 실제 플로우가 동일하다면 버튼 문구는 통일하고 추천 카드의 시각적 우선순위만 높이는 것이 안전합니다.

CTA 주변에는 다음 중 실제 정책에 해당하는 정보만 표시합니다.

• 신용카드 없이 시작
• 14일 무료 체험
• 언제든 취소 가능
• 설정까지 5분

4.4 플랜 선택 가이드 또는 비교 영역

카드 아래에 짧은 선택 가이드를 추가합니다.

예시:

상황	추천 플랜
처음 시작하는 개인 또는 소규모 팀	Basic
여러 팀원이 핵심 기능을 함께 사용하는 경우	Pro
고급 권한·지원·보안이 필요한 조직	Enterprise

긴 기능 비교표가 필요하다면 모바일에서 별도 Accordion으로 전환합니다.

4.5 신뢰 보강 영역

B2B SaaS에서는 가격 카드만으로 결정을 끝내기 어렵기 때문에 다음 중 보유한 자산을 활용합니다.

• 고객사 로고
• 보안·컴플라이언스 정보
• 평균 도입 시간
• 고객 지원 응답 시간
• 실제 고객 평가
• 이용자 수 또는 도입 기업 수

근거가 없는 수치나 로고는 추가하지 않습니다.

4.6 FAQ

최소한 다음 질문을 검토합니다.

• 무료 체험 기간은 얼마인가?
• 신용카드 등록이 필요한가?
• 무료 체험 종료 후 자동 결제되는가?
• 플랜 변경이 가능한가?
• 사용자를 추가하면 어떻게 과금되는가?
• 연간 결제와 월간 결제는 어떻게 다른가?
• 기업용 보안·지원 옵션이 있는가?

Accordion을 사용하되 키보드와 스크린 리더에서 정상 동작해야 합니다.

4.7 하단 CTA

페이지를 끝까지 읽은 사용자를 위한 보조 전환 영역입니다.

• 짧은 가치 제안
• 기본 CTA: 무료 체험 시작
• 보조 링크: 영업팀에 문의
• 가격 관련 부담을 줄이는 짧은 설명

5. 컴포넌트 인벤토리

재사용

• PricingTable
• PricingCard
• 기존 Button 컴포넌트
• 기존 Badge 또는 Tag 컴포넌트
• 기존 Container, Stack, Grid 레이아웃 primitive
• 기존 Accordion
• 기존 typography 및 color token

확장

PricingCard에 다음 props를 검토합니다.

type PricingCardProps = {
  name: string
  description?: string
  price: string
  billingLabel?: string
  features: string[]
  recommended?: boolean
  recommendationLabel?: string
  primaryAction?: {
    label: string
    href: string
  }
}

PricingTable에는 다음 역할을 추가할 수 있습니다.

• 현재 결제 주기 상태 관리
• 추천 플랜 전달
• 카드 간 동일 높이 유지
• 모바일 순서 제어
• 플랜 선택 가이드 연결

새로 만들 가능성이 있는 컴포넌트

• PricingHero
• BillingToggle
• PlanFitGuide
• PricingTrustSignals
• PricingFaq
• PricingBottomCta

기존에 유사한 컴포넌트가 있으면 새로 만들지 않고 재사용합니다.

6. 재사용·확장·신규 생성 결정

대상	결정	이유
PricingTable	확장	카드 배치와 추천 상태를 유지하면서 구조 개선
PricingCard	확장	추천 상태, 적합 고객, CTA 계층 추가
Button	재사용	디자인 시스템 일관성 유지
Badge	재사용 또는 확장	추천 배지에 기존 패턴 활용
Hero	기존 공통 Hero가 있으면 재사용	페이지 간 헤더 일관성 유지
FAQ	기존 Accordion 재사용	접근성과 상호작용 중복 방지
플랜 비교	신규 또는 확장	현재 기능이 없을 경우 카드 아래 보강
신뢰 영역	신규	가격 페이지의 신뢰 요소 보완

7. 디자인 토큰 변경

기존 토큰을 우선 사용하고, 부족한 경우에만 추가합니다.

색상

• pricing.recommended.border
• pricing.recommended.background
• pricing.badge.background
• pricing.badge.text
• pricing.trust.muted

추천 색상은 브랜드 강조색을 사용하되, 본문 대비와 WCAG 기준을 만족해야 합니다.

간격

다음 계층을 명확히 구분합니다.

• Hero와 가격표 사이의 큰 간격
• 카드 내부 섹션 간 중간 간격
• 기능 목록 항목 간 작은 간격
• CTA와 보조 신뢰 문구 사이의 좁은 간격

임의의 픽셀 값을 추가하기보다 기존 spacing scale을 사용합니다.

테두리와 그림자

• 기본 카드: 중립적인 border
• 추천 카드: 브랜드 컬러 border
• hover: 작은 elevation 변화만 적용
• 추천 카드가 shadow만으로 구분되지 않도록 함

타이포그래피

• 가격 숫자: 가장 강한 시각적 계층
• 플랜명: 가격보다 한 단계 낮은 계층
• 적합 고객 설명: 짧고 읽기 쉬운 보조 텍스트
• 기능 목록: 본문 크기 유지
• 추천 배지: 작지만 충분한 대비 확보

8. 반응형 동작

데스크톱

• 세 카드 가로 배치 유지
• 추천 카드의 시각적 우선순위 강화
• 카드 내부 CTA를 동일한 수평선에 정렬
• 카드 높이를 맞춰 비교 가능성 확보

태블릿

• 카드 폭을 줄이되 기능 목록이 과도하게 줄바꿈되지 않도록 함
• 필요하면 카드 내부 여백을 한 단계 축소
• 추천 배지가 가격과 겹치지 않도록 별도 행 배치

모바일

• 카드를 세로로 쌓음
• 추천 플랜을 첫 번째 또는 두 번째에 배치할지 전환 목표와 사용자 선호를 기준으로 결정
• 가격과 CTA를 카드 상단에 유지
• 긴 기능 목록은 접기 또는 핵심 기능 우선 노출 검토
• 비교표는 가로 스크롤보다 행 기반 Accordion을 우선 검토
• 결제 주기 토글은 충분한 터치 영역 확보
• 하단 CTA는 필요할 경우 sticky로 만들되 콘텐츠를 가리지 않도록 함

9. 접근성 고려사항

• 추천 플랜을 색상만으로 구분하지 않기
• 추천 플랜 텍스트 배지를 함께 제공
• 버튼은 링크인지 동작 버튼인지 역할을 명확히 구분
• 모든 CTA에 충분한 focus 스타일 제공
• 텍스트와 배경의 대비 WCAG AA 이상 확보
• 가격 단위와 결제 주기를 스크린 리더가 자연스럽게 읽도록 구성
• 결제 주기 토글은 적절한 radio/segmented control semantics 사용
• Accordion은 키보드로 열고 닫을 수 있어야 함
• 장식용 아이콘은 aria-hidden
• 기능 목록의 체크 아이콘에 의미가 없으면 숨김 처리
• 모바일에서 버튼 최소 터치 영역 확보
• 애니메이션은 최소화하고 prefers-reduced-motion 존중

10. 구현 순서

1. 실제 page.tsx, PricingTable, PricingCard 및 관련 토큰 확인
2. 기존 플랜 데이터 구조와 CTA 링크·이벤트 추적 방식 확인
3. 추천 플랜과 무료 체험 정책 확정
4. 가격 카드의 정보 구조와 콘텐츠 우선순위 정리
5. PricingCard에 추천 상태와 CTA 계층 확장
6. PricingTable의 반응형 레이아웃과 카드 높이 정리
7. Hero 및 결제 주기 영역 구성
8. 플랜 선택 가이드 추가
9. FAQ와 신뢰 보강 영역 추가 또는 기존 컴포넌트 연결
10. 모바일 레이아웃 및 순서 검토
11. 접근성 키보드·스크린 리더·대비 점검
12. 기존 프로젝트의 native lint, typecheck, test 실행
13. CTA 클릭 이벤트가 정상 기록되는지 확인
14. 분석 도구에서 추천 플랜·비추천 플랜 클릭률을 분리 측정
15. 실제 사용자 데이터 기반으로 추천 플랜 위치와 문구 조정

11. 리스크와 오픈 질문

오픈 질문

• 추천 플랜은 실제로 어떤 플랜인가?
• 무료 체험 기간과 신용카드 등록 여부는 무엇인가?
• 플랜별 CTA가 동일한 가입 플로우로 연결되는가?
• 월간/연간 결제 옵션이 존재하는가?
• 플랜별 가장 중요한 차이는 기능, 사용자 수, 보안, 지원 중 무엇인가?
• 가격 페이지에서 영업 문의도 주요 전환인가?
• 고객사 로고·후기·보안 인증 등 사용할 수 있는 신뢰 자산이 있는가?
• 추천 플랜을 모바일에서 첫 번째로 노출해도 비즈니스 정책상 문제가 없는가?

주요 리스크

• 추천 플랜을 과도하게 강조하면 다른 플랜을 비교하기 어려워질 수 있음
• 실제 차별점이 불명확한 상태에서 시각적 강조만 추가하면 신뢰도가 오히려 낮아질 수 있음
• 긴 기능 목록을 유지하면 모바일 전환율이 떨어질 수 있음
• 가격 변경 시 카드 내부 높이와 CTA 정렬이 깨질 수 있음
• 무료 체험 정책과 CTA 문구가 불일치하면 이탈과 문의가 증가할 수 있음
• 이벤트 추적을 놓치면 리디자인 효과를 측정하기 어려움

권장 1차 방향

가장 먼저 적용할 변경은 다음 세 가지입니다.

1. 실제 전환에 중요한 플랜을 추천 플랜으로 명확히 지정
2. PricingCard에 추천 배지, 추천 이유, 우선 CTA 추가
3. 가격표 아래에 짧은 플랜 선택 가이드와 무료 체험 조건 추가

이 범위는 기존 컴포넌트를 최대한 유지하면서도 사용자의 선택 부담과 무료 체험 클릭 전 망설임을 동시에 줄일 수 있는 1차 개선안입니다.