coastdigitalgroup/coastai-skills

가격표 UI 시스템

목적

가격표 UI 시스템은 가격 계층의 시각적 구조를 설계하기 위한 방법론을 제공합니다. 사용자가 요금제를 쉽게 비교하고, 가치 차이를 이해하며, 인지 과부하 없이 적절한 옵션을 선택할 수 있도록 보장합니다. 이 시스템은 계층의 공간적 배치, 기능의 계층 구조, 그리고 구매 결정을 지원하는 대화형 요소(예: 청구 토글)에 중점을 둡니다.

사용 사례

• SaaS 애플리케이션의 구독 요금제 그리드 설계
• 계층화된 서비스 상품(예: 에이전시 패키지) 구조화
• 물리적 제품 번들에 대한 비교 매트릭스 생성
• 다중 제품 회사 전반의 가격표 레이아웃 표준화
• 모바일에서도 맥락을 유지하는 반응형 가격 "카드" 구현

사용하지 말아야 할 경우

• 단일 제품 이커머스: 경쟁 계층이 없는 단일 품목의 경우 product-page-optimization 사용
• 엔터프라이즈 전용 맞춤 견적: 모든 가격이 "문의"인 경우 리드 캡처 양식 설계에 집중
• 순수 데이터 비교: 10개 이상 항목의 기술 사양 비교에는 data-table-ui-system 사용
• 동적/경매 가격: 입찰 또는 실시간 시장 변동에 따라 가격이 결정되는 경우

입력

1. 요금제 계층: 각 계층의 이름, 가격 및 대상 고객
2. 기능 목록: 우선순위별로 분류된 포괄적인 기능 목록
3. 청구 주기: 월별 vs. 연간 청구 옵션 및 관련 할인
4. 주요 대상: 어떤 요금제가 "최적" 또는 "최고 가치" 옵션인가?
5. 브랜드 스타일 토큰: 상위 시스템의 간격, 타이포그래피 및 색상 척도

출력

1. 가격 그리드 구조: 계층 카드의 정의 (헤더, 가격, 기능, 행동 유도)
2. 청구 토글 명세: 서로 다른 결제 조건 간 전환을 위한 디자인
3. 기능 비교 로직: 계층 간 기능 표시, 숨김 또는 요약 규칙
4. 계층 강조 전략: 권장 요금제를 강조하는 시각적 방법
5. 반응형 쌓기 계획: 그리드가 모바일 화면에 적응하는 방식

워크플로우

1. 계층 구조 설계

개별 가격 카드에 visual-hierarchy-system 적용:

• 헤더: 요금제 이름 및 간단한 가치 제안 (예: "성장하는 팀을 위한")
• 가격 블록: 통화, 금액 및 간격 (예: "/월"). 금액이 가장 눈에 띄는 요소여야 합니다.
• 기능 목록: 가장 중요한 상위 5-7개 기능
• CTA: 요금제 선택을 위한 고대비 버튼

2. "기준" 계층 설계 (강조)

주 요금제를 식별하고 시각적으로 두드러지게 만듭니다:

• 입체감: 미묘한 그림자나 테두리를 사용하여 "튀어나오게" 만듭니다.
• 색상: 헤더나 CTA 버튼에 브랜드 색상을 사용합니다.
• 배지: "가장 인기 있는" 또는 "최고 가치" 리본/배지를 추가합니다.
• 크기: 주변 카드보다 카드 높이를 약간 늘립니다.

3. 청구 로직 설정

청구 주기 전환(예: 월별 vs. 연간) 메커니즘 설계:

• 토글: 명확한 스위치 또는 탭 인터페이스 사용
• 할인 표시: 연간 옵션 근처에 절약 금액(예: "20% 절약")을 명확히 표시
• 맥락별 가격: 토글 전환 시 가격이 즉시 업데이트되도록 보장

4. 기능 비교 관리

"텍스트의 벽"을 방지하기 위해 기능 구성:

• 주요 기능: 상단에 고유한 가치 동인을 나열
• 기능 그룹화: 목록이 긴 경우 유사한 기능(예: "지원", "보안")을 그룹화
• 체크 표시 vs. 텍스트: 이진 기능(예/아니오)에는 아이콘을 사용하고, 제한 사항(예: "최대 10명")에는 텍스트 사용
• "전체 보기" 링크: 복잡한 계층의 경우 카드를 짧게 유지하고 아래에 전체 비교 테이블 링크 제공

5. 반응형 쌓기 정의

더 작은 화면에서 그리드가 축소되는 방식 매핑:

• 가로 스크롤 vs. 세로 쌓기: 모바일에서는 가독성을 위해 계층을 세로로 쌓습니다.
• 고정 헤더: 세로 쌓기의 경우 사용자가 기능을 스크롤할 때 요금제 이름과 가격을 계속 표시하는 고정 막대를 고려합니다.
• 요금제 비교 모드: 모바일에서 세로 쌓기가 너무 긴 경우 사용자가 계층 간에 "스와이프"하여 가로로 비교할 수 있도록 허용합니다.
• 컨테이너 쿼리: 가격 그리드가 다양한 너비 컨텍스트(예: 홈페이지 섹션 vs. 전체 가격 페이지)에 포함되는 경우가 많으므로, 계층 카드 자체에는 뷰포트 중단점보다 컨테이너 쿼리를 선호합니다.

결정 규칙

• 3의 법칙: 세 가지 계층(예: Basic, Pro, Enterprise)이 선택 피로를 줄이기에 최적의 수입니다.
• 가격 강조: 가격은 "최고 가치" 배지 다음으로 두 번째로 눈에 띄는 요소여야 합니다.
• 일관된 CTA: 모든 계층은 동일한 세로 위치(보통 카드 하단에 정렬)에 CTA가 있어야 합니다.
• "숨은 약관 없음" 규칙: 항상 가격 근처에 청구 빈도를 표시합니다(예: "연간 청구 시 월 $29").
• 이진 명확성: 포함된 기능에는 명확하고 대비가 높은 체크 표시를 사용하고, 제외된 기능에는 흐릿한 "X"를 사용하거나 생략하여 부정적인 시각적 노이즈를 피합니다.

제약 조건

• 접근성: 토글은 키보드로 접근 가능해야 하며 aria-checked 또는 aria-pressed를 통해 상태를 노출해야 합니다. 가격 텍스트는 WCAG AA 대비(4.5:1)를 충족해야 하며, 모든 대화형 대상(토글, CTA 버튼)은 WCAG 2.2 24x24px 최소 대상 크기(2.5.8)를 충족해야 합니다.
• 반응성: 가격 카드는 고정 너비를 가져서는 안 되며, responsive-grid-system 내에서 유동적이어야 합니다.
• 통화 지원: 다양한 통화 기호 길이(예: "$10" vs. "1,000 kr")를 위해 설계하고, RTL 로케일에 맞게 레이아웃이 올바르게 조정되도록 논리적 CSS 속성(margin-inline, padding-inline)을 사용합니다.

일반적인 실패 패턴

• 기능 과부하: 단일 카드에 20개 이상의 기능을 나열하여 스캔이 불가능하게 만듭니다.
• 보이지 않는 토글: 청구 주기 스위치를 너무 작게 만들어 사용자가 할인을 받을 수 있다는 사실을 인지하지 못하게 합니다.
• "떠다니는 CTA": 카드 전체에 걸쳐 정렬되지 않은 버튼으로 인해 그리드가 지저분해 보입니다.
• 모호한 가격: 결제 시점까지 가격이 사용자당 요금인지 고정 요금인지 명확히 하지 않습니다.
• 계층 차별화 부족: 요금제가 너무 비슷해 사용자가 어떤 것을 선택해야 할지 모릅니다.

검증 기준

• 계층 간 명확한 시각적 계층 구조가 있습니다 (권장 계층이 강조됨).
• 가격이 계층 이름 다음으로 가장 눈에 띄는 요소입니다.
• 청구 토글이 명확하게 보이고 즉시 가격을 업데이트합니다.
• 기능이 카드당 상위 5-7개로 제한됩니다.
• CTA가 그리드의 모든 카드에서 가로로 정렬됩니다.
• 모바일 보기에서 카드를 세로로 쌓거나 접근 가능한 스와이프 패턴을 제공합니다.
• 모든 대화형 요소(토글, 버튼)가 키보드로 접근 가능합니다.
• 가격 및 배지의 대비 비율이 WCAG AA를 충족합니다.