CSS 요금제 표 생성기

기본 골격 구조

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

반응형 3열 그리드

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit과 minmax(240px, 1fr)를 함께 쓰면 데스크톱에서는 3열 레이아웃, 모바일에서는 1열 스택이 되며 별도로 설정할 것이 없습니다.

강조 요금제

시선을 끄는 시각적 신호는 다음과 같습니다.

• 컬러 테두리: 브랜드 강조색과 맞춥니다.
• 살짝 띄우기: 음수 margin-top 또는 translateY(-4px)를 사용합니다.
• 더 큰 CTA 버튼: 보통 브랜드 색상으로 채우고, 다른 요금제는 외곽선 버튼으로 둡니다.
• 배지: “가장 인기”, “가성비 최고” 같은 문구를 카드 상단에 absolute로 배치합니다.
• 더 높은 카드: 시선을 끌 수 있지만 요금제 간 비교가 어려워질 수 있습니다.

위 방법을 전부 쓰지는 마세요. 두세 가지만 고르면 충분합니다. 신호가 너무 많으면 오히려 시각적 위계가 무너집니다.

월간 / 연간 토글

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

토글은 보통 약간의 JavaScript로 가격 값을 바꾸거나, 라디오 버튼의 :checked 상태를 활용합니다. 할인율이나 절약 금액(예: “연간 결제 시 20% 할인”)을 토글 문구에 함께 표시하세요. 많은 요금제 표에서 가장 설득력이 큰 단일 요소입니다.

기능 행 스타일링

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

“포함”에는 체크 표시를, “미포함”에는 회색 텍스트나 옅은 X 표시를 사용하세요. 대비를 낮추지 않은 채 취소선만 그으면 오히려 강조처럼 읽히므로 피해야 합니다.

CTA를 눈에 띄게 유지하기

요금제마다 CTA는 하나씩, 시각적으로는 일관되게 둡니다. 요금제별로 문구를 다르게 쓰는 것(“무료로 시작”, “Pro로 업그레이드”, “영업팀 문의”)은 전혀 문제가 없으며, 오히려 사용자를 알맞은 흐름으로 안내하는 데 도움이 됩니다.

훑어보기 쉽게 만들기

사용자는 요금제 표를 왼쪽에서 오른쪽으로 꼼꼼히 읽지 않습니다. 가격을 먼저 훑고, 그다음 CTA, 마지막으로 기능 차이를 봅니다. 이 순서에 맞춰 최적화하세요.

1. 요금제 이름과 가격을 카드 상단에 크게 배치합니다.
2. CTA는 카드를 스크롤하지 않아도 보이게 합니다.
3. 기능 목록은 그 아래에 둡니다. 모든 요금제에 똑같은 기능을 반복하기보다 요금제 간 차이를 부각하세요.

접근성 체크리스트

• 각 요금제는 자체 <h3>를 가진 <article> 요소입니다.
• “가장 인기” 배지는 색상만이 아니라 눈에 보이는 텍스트 배지여야 합니다(색맹 사용자 배려).
• CTA 버튼에는 “여기를 클릭”이 아니라 “Pro 체험 시작”처럼 설명이 담긴 문구를 넣습니다.
• 결제 주기 토글에는 aria-pressed나 라디오 버튼 시맨틱을 적용합니다.
• JavaScript로 구현했다면 토글에 따른 가격 변경을 aria-live="polite"로 알립니다.