Pricing page
The screen that makes people choose a plan — use it when options sit side by side and one of them is your recommendation.
Live preview
Source
<script>document.body.className="dc-bleed"</script>
<div class="dc-prc">
<header class="dc-prc__head">
<nav class="dc-prc__nav" aria-label="주요 메뉴">
<span class="dc-prc__brand">단비근로</span>
<ul class="dc-prc__links">
<li><a class="dc-prc__link" href="#">기능</a></li>
<li><a class="dc-prc__link" href="#" aria-current="page">요금</a></li>
<li><a class="dc-prc__link" href="#">고객 사례</a></li>
<li><a class="dc-prc__link" href="#">도움말</a></li>
</ul>
<a class="dc-prc__nav-cta" href="#">14일 무료로 시작</a>
</nav>
</header>
<main class="dc-prc__main">
<div class="dc-prc__hero">
<h1 class="dc-prc__h1">직원 수만큼만 냅니다</h1>
<p class="dc-prc__lead">쓰지 않은 달은 청구하지 않습니다. 언제든 요금제를 바꾸거나 해지할 수 있습니다.</p>
<div class="dc-prc__seg" role="group" aria-label="결제 주기">
<button class="dc-prc__seg-btn dc-prc__seg-btn--on" type="button" aria-pressed="true">월 결제</button>
<button class="dc-prc__seg-btn" type="button" aria-pressed="false">연 결제</button>
<span class="dc-prc__seg-save">연 결제는 두 달 무료</span>
</div>
</div>
<div class="dc-prc__cards">
<article class="dc-prc__card">
<h2 class="dc-prc__plan">무료</h2>
<p class="dc-prc__desc">직원 5명까지, 서류를 처음 전자화하는 곳</p>
<p class="dc-prc__price"><span class="dc-prc__amount">0원</span> <span class="dc-prc__per">/ 기간 제한 없음</span></p>
<p class="dc-prc__note">카드 등록 없이 바로 시작</p>
<a class="dc-prc__cta dc-prc__cta--ghost" href="#">무료로 시작하기</a>
<ul class="dc-prc__feats">
<li class="dc-prc__feat">근로계약서 월 3건</li>
<li class="dc-prc__feat">급여명세서 한국어</li>
<li class="dc-prc__feat">서류 보관 1년</li>
</ul>
</article>
<article class="dc-prc__card dc-prc__card--hi">
<p class="dc-prc__tag">가장 많이 고릅니다</p>
<h2 class="dc-prc__plan">스탠다드</h2>
<p class="dc-prc__desc">직원 30명까지, 외국인 근로자가 있는 사업장</p>
<p class="dc-prc__price"><span class="dc-prc__amount">29,000원</span> <span class="dc-prc__per">/ 월 · 1인당</span></p>
<p class="dc-prc__note">연 결제로 바꾸면 1인당 24,167원</p>
<a class="dc-prc__cta" href="#">14일 무료로 시작</a>
<ul class="dc-prc__feats">
<li class="dc-prc__feat">근로계약서 무제한</li>
<li class="dc-prc__feat">급여명세서 6개 언어</li>
<li class="dc-prc__feat">전자서명 · 본인확인</li>
<li class="dc-prc__feat">4대보험 신고 자료 내보내기</li>
</ul>
</article>
<article class="dc-prc__card">
<h2 class="dc-prc__plan">프로</h2>
<p class="dc-prc__desc">직원 30명 이상, 지점이 여러 곳인 법인</p>
<p class="dc-prc__price"><span class="dc-prc__amount">59,000원</span> <span class="dc-prc__per">/ 월 · 1인당</span></p>
<p class="dc-prc__note">연 결제로 바꾸면 1인당 49,167원</p>
<a class="dc-prc__cta dc-prc__cta--ghost" href="#">영업팀과 이야기하기</a>
<ul class="dc-prc__feats">
<li class="dc-prc__feat">스탠다드의 모든 기능</li>
<li class="dc-prc__feat">지점별 권한 · 승인선</li>
<li class="dc-prc__feat">급여 시스템 API 연동</li>
<li class="dc-prc__feat">전담 담당자 · 1영업일 응대</li>
</ul>
</article>
</div>
<section class="dc-prc__faq" aria-labelledby="dc-prc-faq-t">
<h2 class="dc-prc__faq-title" id="dc-prc-faq-t">자주 묻는 것</h2>
<details class="dc-prc__q" open>
<summary class="dc-prc__q-sum">직원 수가 달의 중간에 늘면 어떻게 계산되나요?</summary>
<p class="dc-prc__q-body">남은 날수만큼만 일할 계산해서 다음 청구서에 더합니다. 줄어든 달은 다음 달 요금에서 빼 드립니다.</p>
</details>
<details class="dc-prc__q">
<summary class="dc-prc__q-sum">무료 요금제로 근로계약서를 보낼 수 있나요?</summary>
<p class="dc-prc__q-body">달마다 3건까지 보낼 수 있습니다. 전자서명과 보관은 같고, 6개 언어 번역은 스탠다드부터입니다.</p>
</details>
<details class="dc-prc__q">
<summary class="dc-prc__q-sum">세금계산서를 받을 수 있나요?</summary>
<p class="dc-prc__q-body">결제 다음 영업일에 전자세금계산서를 사업자 이메일로 보냅니다. 카드·계좌이체 모두 같습니다.</p>
</details>
</section>
<p class="dc-prc__fine">모든 금액은 부가세 별도입니다. 연간 결제는 1년치를 한 번에 청구합니다.</p>
</main>
</div>.dc-prc { background:var(--dc-bg); color:var(--dc-text); font-family:var(--dc-font); min-height:700px; }
.dc-prc__head { position:sticky; top:0; z-index:2; background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-prc__nav { display:flex; align-items:center; gap:var(--dc-5); max-width:1040px; margin-inline:auto; padding:var(--dc-3) var(--dc-5); }
.dc-prc__brand { font-size:15px; font-weight:800; letter-spacing:-.01em; }
.dc-prc__links { display:flex; align-items:center; gap:var(--dc-4); margin-right:auto; }
.dc-prc__link { display:inline-flex; align-items:center; min-height:44px; color:var(--dc-text-sub); font-size:14px; text-decoration:none; }
.dc-prc__link:hover { color:var(--dc-text); }
.dc-prc__link[aria-current="page"] { color:var(--dc-brand); font-weight:700; }
.dc-prc__nav-cta { display:inline-flex; align-items:center; min-height:40px; padding:0 var(--dc-4); border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:13px; font-weight:700; text-decoration:none; }
.dc-prc__nav-cta:hover { background:var(--dc-brand-hi); }
.dc-prc__main { max-width:1040px; margin-inline:auto; padding:var(--dc-7) var(--dc-5) var(--dc-8); display:flex; flex-direction:column; gap:var(--dc-7); }
.dc-prc__hero { display:flex; flex-direction:column; align-items:center; gap:var(--dc-3); text-align:center; }
.dc-prc__h1 { font-size:32px; font-weight:800; letter-spacing:-.025em; }
.dc-prc__lead { max-width:520px; font-size:15px; color:var(--dc-text-sub); }
.dc-prc__seg { display:flex; align-items:center; gap:var(--dc-2); margin-top:var(--dc-2); padding:var(--dc-1); border:1px solid var(--dc-line); border-radius:var(--dc-r-full); background:var(--dc-sunken); }
.dc-prc__seg-btn { min-height:40px; padding:0 var(--dc-4); border:none; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-text-sub); font-size:13px; font-weight:600; }
.dc-prc__seg-btn--on { background:var(--dc-surface); color:var(--dc-text); box-shadow:var(--dc-sh-1); }
.dc-prc__seg-save { padding-right:var(--dc-3); color:var(--dc-ok); font-size:12px; font-weight:600; }
.dc-prc__cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--dc-4); align-items:start; margin-top:var(--dc-2); }
.dc-prc__card { position:relative; display:flex; flex-direction:column; gap:var(--dc-2); padding:var(--dc-5); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-prc__card--hi { border-color:var(--dc-brand); box-shadow:var(--dc-sh-2); }
.dc-prc__tag { position:absolute; top:0; left:var(--dc-5); transform:translateY(-50%); padding:var(--dc-1) var(--dc-2); border:1px solid var(--dc-brand); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:11px; font-weight:700; }
.dc-prc__plan { font-size:17px; font-weight:700; }
.dc-prc__desc { min-height:40px; font-size:13px; color:var(--dc-text-sub); line-height:1.5; }
.dc-prc__price { display:flex; align-items:baseline; gap:var(--dc-1); flex-wrap:wrap; margin-top:var(--dc-2); }
.dc-prc__amount { font-size:28px; font-weight:800; letter-spacing:-.02em; }
.dc-prc__per { font-size:13px; color:var(--dc-text-sub); }
.dc-prc__note { min-height:34px; font-size:12px; color:var(--dc-text-mute); line-height:1.45; }
.dc-prc__cta { display:inline-flex; align-items:center; justify-content:center; min-height:46px; margin-top:var(--dc-1); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:700; text-decoration:none; }
.dc-prc__cta:hover { background:var(--dc-brand-hi); }
.dc-prc__cta--ghost { background:var(--dc-surface); border-color:var(--dc-line-field); color:var(--dc-text); }
.dc-prc__cta--ghost:hover { background:var(--dc-sunken); }
.dc-prc__feats { display:flex; flex-direction:column; gap:var(--dc-2); margin-top:var(--dc-3); padding-top:var(--dc-3); border-top:1px solid var(--dc-line); }
.dc-prc__feat { position:relative; padding-left:var(--dc-5); font-size:13px; color:var(--dc-text); line-height:1.5; }
.dc-prc__feat::before { content:"✓"; position:absolute; left:0; color:var(--dc-ok); font-weight:700; }
.dc-prc__faq { display:flex; flex-direction:column; gap:var(--dc-2); max-width:720px; width:100%; margin-inline:auto; }
.dc-prc__faq-title { margin-bottom:var(--dc-2); font-size:19px; font-weight:700; letter-spacing:-.01em; }
.dc-prc__q { border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); }
.dc-prc__q-sum { display:flex; align-items:center; min-height:52px; padding:0 var(--dc-4); font-size:14px; font-weight:600; cursor:pointer; }
.dc-prc__q-body { padding:0 var(--dc-4) var(--dc-4); font-size:13px; color:var(--dc-text-sub); line-height:1.6; }
.dc-prc__fine { max-width:720px; width:100%; margin-inline:auto; font-size:12px; color:var(--dc-text-mute); }
@media (max-width:880px) {
.dc-prc__cards { grid-template-columns:1fr; }
.dc-prc__links { display:none; }
.dc-prc__seg { flex-wrap:wrap; justify-content:center; }
}How to use it
- Three plans at most; with four, people stop comparing and leave
- Badge exactly one plan as recommended and place it in the middle
- Keep the monthly/yearly switch directly above the prices — below them, nobody notices the numbers change
- Write each plan’s first line about who it fits, not about features
Watch out for
- State whether tax is included next to the price; a different number at checkout loses the sale
- If the period switch is buttons, expose the current state with aria-pressed
- Check marks in the feature list are decoration — hide them from screen readers or say it in words