요금제(또는 경쟁 제품)별 기능 포함 여부를 행×열 표로 정리해 한눈에 대조하게 하는 섹션.
디자인 아틀라스<table class="cmp">
<thead><tr><th></th><th>Basic</th><th class="hl">Pro</th><th>Enterprise</th></tr></thead>
<tbody>
<tr><td>Projects</td><td>3</td><td class="hl">Unlimited</td><td>Unlimited</td></tr>
<tr><td>Storage</td><td>5GB</td><td class="hl">100GB</td><td>1TB</td></tr>
<tr><td>SSO</td><td class="x">×</td><td class="hl ok">✓</td><td class="ok">✓</td></tr>
<tr><td>Priority support</td><td class="x">×</td><td class="hl x">×</td><td class="ok">✓</td></tr>
</tbody>
</table>.cmp{width:min(92%,700px);border-collapse:collapse;font-size:clamp(7px,1.5vmin,11px)}
.cmp th,.cmp td{padding:clamp(4px,1.2vmin,9px) clamp(6px,1.6vmin,10px);text-align:center;border-bottom:1px solid var(--line)}
.cmp th{color:var(--muted);font-weight:700;font-size:.95em}
.cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--fg);font-weight:600}
.hl{background:color-mix(in oklab,var(--accent) 10%,transparent)}
th.hl{color:var(--accent);border-radius:6px 6px 0 0}
.ok{color:var(--accent-3);font-weight:800}
.x{color:var(--muted);opacity:.5}
.cmp tbody td.ok,.cmp tbody td.x{display:inline-block;animation:pop 2.4s ease-in-out infinite}
.cmp tbody tr:nth-child(2) td.ok,.cmp tbody tr:nth-child(2) td.x{animation-delay:.1s}
.cmp tbody tr:nth-child(3) td.ok,.cmp tbody tr:nth-child(3) td.x{animation-delay:.2s}
.cmp tbody tr:nth-child(4) td.ok,.cmp tbody tr:nth-child(4) td.x{animation-delay:.3s}
@keyframes pop{0%,80%,100%{transform:scale(1)}90%{transform:scale(1.25)}}기능이 많아 `pricing-table`의 짧은 체크리스트로는 다 못 보여줄 때 씁니다. 왼쪽 열에 기능 이름을 세로로 나열하고, 가로로 플랜(또는 경쟁 제품)을 배치해 각 칸에 체크·엑스·구체적인 값(용량, 개수)을 넣습니다.
가장 추천하는(혹은 자사) 플랜 열은 배경을 살짝 다르게 칠하거나 테두리를 강조해서 표 안에서도 시선이 그쪽으로 먼저 가게 합니다. 기능은 카테고리별로 묶고(예: "협업", "보안", "지원") 구분선을 넣어야 행이 많아져도 위치를 잃지 않습니다.
체크마크만 나열하고 숫자·단위 없이 "제한 없음"이라고만 쓰면 오히려 모호합니다. 가능하면 실제 값("저장공간 100GB")을 넣는 게 신뢰를 줍니다. 모바일에서는 열이 옆으로 넘치기 쉬우므로 가로 스크롤이나 플랜별 카드로 전환하는 처리가 필요합니다.
플랜이 3개를 넘거나 기능 차이가 세밀할 때. 플랜이 2~3개고 기능 차이가 단순하면 `pricing-table`의 체크리스트만으로 충분합니다.