Trang đích
Trang mà người lần đầu ghé phải hiểu trong năm giây: đây là gì và bấm gì tiếp theo.
Xem trước trực tiếp
Nguồn
<script>document.body.className="dc-bleed"</script>
<div class="dc-lp" id="dc-lp-top">
<header class="dc-lp__bar">
<a class="dc-lp__logo" href="#dc-lp-top">결산kr</a>
<nav class="dc-lp__nav" aria-label="주요 메뉴">
<a class="dc-lp__nav-link" href="#dc-lp-features">기능</a>
<a class="dc-lp__nav-link" href="#dc-lp-price">가격</a>
<a class="dc-lp__nav-link" href="#dc-lp-cases">고객 사례</a>
<a class="dc-lp__nav-link" href="#dc-lp-docs">개발 문서</a>
</nav>
<div class="dc-lp__bar-act">
<a class="dc-lp__ghost" href="#dc-lp-login">로그인</a>
<a class="dc-lp__cta" href="#dc-lp-start">무료로 시작</a>
</div>
</header>
<section class="dc-lp__hero">
<div class="dc-lp__hero-text">
<p class="dc-lp__eyebrow">2026년 전자세금계산서 개정 반영</p>
<h1 class="dc-lp__title">월말 정산, 두 시간이면 끝납니다</h1>
<p class="dc-lp__lead">카드·계좌·오픈마켓 입금을 한자리에 모아 주문과 맞춰 보고, 어긋난 건만 따로 보여 줍니다. 맞은 것은 손대지 않아도 됩니다.</p>
<div class="dc-lp__hero-act">
<a class="dc-lp__cta dc-lp__cta--lg" href="#dc-lp-start">30일 무료로 시작하기</a>
<a class="dc-lp__outline" href="#dc-lp-sales">도입 상담 요청</a>
</div>
<p class="dc-lp__note">카드 등록 없이 시작 · 계좌 연결 3분 · 사업장 1,240곳 사용 중</p>
</div>
<div class="dc-lp__hero-card">
<p class="dc-lp__hero-card-label">8월 정산 · 구월동점</p>
<p class="dc-lp__hero-card-sum">38,420,900원</p>
<ul class="dc-lp__hero-list">
<li class="dc-lp__hero-row"><span>카드 매출</span><span class="dc-lp__hero-num">24,108,400원</span></li>
<li class="dc-lp__hero-row"><span>계좌 입금</span><span class="dc-lp__hero-num">9,860,500원</span></li>
<li class="dc-lp__hero-row"><span>오픈마켓 정산</span><span class="dc-lp__hero-num">5,102,000원</span></li>
<li class="dc-lp__hero-row"><span>환불</span><span class="dc-lp__hero-num">-650,000원</span></li>
</ul>
<p class="dc-lp__hero-foot"><span class="dc-lp__pill">확인 필요 2건</span> 나머지 1,282건은 자동으로 맞췄습니다</p>
</div>
</section>
<section class="dc-lp__features" id="dc-lp-features">
<h2 class="dc-lp__h2">정산에 드는 시간을 줄이는 세 가지</h2>
<ul class="dc-lp__grid">
<li class="dc-lp__feat">
<span class="dc-lp__feat-icon" aria-hidden="true"><svg class="dc-lp__feat-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg></span>
<h3 class="dc-lp__feat-title">입금과 주문 자동 대조</h3>
<p class="dc-lp__feat-text">PG 입금 내역과 주문을 금액·날짜로 맞춰 둡니다. 사람이 들여다볼 것은 어긋난 두세 건뿐입니다.</p>
</li>
<li class="dc-lp__feat">
<span class="dc-lp__feat-icon" aria-hidden="true"><svg class="dc-lp__feat-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v12"/><path d="M7 11l5 5 5-5"/><path d="M5 20h14"/></svg></span>
<h3 class="dc-lp__feat-title">신고 서식 그대로 내보내기</h3>
<p class="dc-lp__feat-text">부가세 신고 서식과 같은 모양의 엑셀·CSV 로 내려받아 세무대리인에게 그대로 넘깁니다.</p>
</li>
<li class="dc-lp__feat">
<span class="dc-lp__feat-icon" aria-hidden="true"><svg class="dc-lp__feat-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0-6 6c0 4-2 5-2 5h16s-2-1-2-5a6 6 0 0 0-6-6z"/><path d="M10 18a2 2 0 0 0 4 0"/></svg></span>
<h3 class="dc-lp__feat-title">이상할 때 먼저 알려 줍니다</h3>
<p class="dc-lp__feat-text">환불률이 평소보다 높거나 입금이 하루 늦으면 알림톡으로 알립니다. 월말에 발견하면 늦습니다.</p>
</li>
</ul>
</section>
<section class="dc-lp__cta-band" id="dc-lp-start">
<h2 class="dc-lp__cta-title">이번 달 정산부터 바꿔 보세요</h2>
<p class="dc-lp__cta-sub">신용카드 등록 없이 30일. 쓰고 있던 엑셀을 올리면 지난 기록도 이어서 봅니다.</p>
<form class="dc-lp__cta-form" action="#dc-lp-start" method="post">
<label class="dc-sr" for="dc-lp-email">업무용 이메일</label>
<input class="dc-lp__cta-input" id="dc-lp-email" name="email" type="email" inputmode="email" autocomplete="email" placeholder="[email protected]">
<button class="dc-lp__cta-btn" type="submit">무료로 시작하기</button>
</form>
<p class="dc-lp__cta-note">언제든 해지할 수 있고, 내려받은 자료는 해지한 뒤에도 그대로 남습니다.</p>
</section>
<footer class="dc-lp__foot" id="dc-lp-docs">
<p class="dc-lp__foot-co">주식회사 결산연구소 · 사업자등록번호 214-88-01923 · 서울 마포구 양화로 45</p>
<nav class="dc-lp__foot-nav" aria-label="약관과 정책">
<a class="dc-lp__foot-link" href="#dc-lp-price">가격</a>
<a class="dc-lp__foot-link" href="#dc-lp-cases">고객 사례</a>
<a class="dc-lp__foot-link" href="#dc-lp-terms">이용약관</a>
<a class="dc-lp__foot-link" href="#dc-lp-privacy">개인정보 처리방침</a>
</nav>
</footer>
</div>.dc-lp { font-family:var(--dc-font); background:var(--dc-bg); color:var(--dc-text); }
.dc-lp__bar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:var(--dc-5); padding:var(--dc-3) var(--dc-6); border-bottom:1px solid var(--dc-line); background:var(--dc-surface); }
.dc-lp__logo { font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); text-decoration:none; }
.dc-lp__nav { display:flex; gap:var(--dc-4); margin-right:auto; }
.dc-lp__nav-link { padding:var(--dc-2) 0; font-size:14px; color:var(--dc-text-sub); text-decoration:none; }
.dc-lp__nav-link:hover { color:var(--dc-text); }
.dc-lp__bar-act { display:flex; align-items:center; gap:var(--dc-2); margin-left:auto; }
.dc-lp__ghost { display:inline-flex; align-items:center; min-height:40px; padding:0 var(--dc-3); border-radius:var(--dc-r-sm); font-size:14px; font-weight:600; color:var(--dc-text-sub); text-decoration:none; }
.dc-lp__ghost:hover { color:var(--dc-text); background:var(--dc-sunken); }
.dc-lp__cta { display:inline-flex; align-items:center; justify-content: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:14px; font-weight:700; text-decoration:none; transition:background var(--dc-fast); }
.dc-lp__cta:hover { background:var(--dc-brand-hi); }
.dc-lp__cta--lg { min-height:52px; padding:0 var(--dc-6); font-size:16px; }
.dc-lp__hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--dc-8); align-items:center; padding:var(--dc-8) var(--dc-6); background:linear-gradient(180deg, var(--dc-brand-soft), var(--dc-bg)); }
.dc-lp__hero-text { display:flex; flex-direction:column; gap:var(--dc-4); }
.dc-lp__eyebrow { align-self:start; padding:var(--dc-1) var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-full); background:var(--dc-surface); color:var(--dc-brand-text); font-size:12px; font-weight:700; }
.dc-lp__title { font-size:40px; line-height:1.15; font-weight:800; letter-spacing:-.03em; }
.dc-lp__lead { max-width:46ch; font-size:16px; color:var(--dc-text-sub); }
.dc-lp__hero-act { display:flex; flex-wrap:wrap; gap:var(--dc-3); }
.dc-lp__outline { display:inline-flex; align-items:center; min-height:52px; padding:0 var(--dc-5); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:16px; font-weight:600; text-decoration:none; }
.dc-lp__outline:hover { background:var(--dc-sunken); }
.dc-lp__note { font-size:13px; color:var(--dc-text-mute); }
.dc-lp__hero-card { 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-2); }
.dc-lp__hero-card-label { font-size:13px; color:var(--dc-text-sub); }
.dc-lp__hero-card-sum { margin-top:var(--dc-1); font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dc-lp__hero-list { margin-top:var(--dc-4); padding-top:var(--dc-3); border-top:1px solid var(--dc-line); display:flex; flex-direction:column; }
.dc-lp__hero-row { display:flex; justify-content:space-between; gap:var(--dc-3); padding:var(--dc-1) 0; font-size:14px; color:var(--dc-text-sub); }
.dc-lp__hero-num { color:var(--dc-text); font-weight:600; font-variant-numeric:tabular-nums; }
.dc-lp__hero-foot { margin-top:var(--dc-4); display:flex; align-items:center; gap:var(--dc-2); font-size:12px; color:var(--dc-text-mute); }
.dc-lp__pill { padding:2px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-warn-soft); color:var(--dc-warn); font-weight:700; }
.dc-lp__features { padding:var(--dc-8) var(--dc-6); }
.dc-lp__h2 { font-size:26px; font-weight:800; letter-spacing:-.02em; text-align:center; }
.dc-lp__grid { margin-top:var(--dc-7); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--dc-4); }
.dc-lp__feat { display:flex; flex-direction:column; gap:var(--dc-2); padding:var(--dc-5); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-lp__feat-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:var(--dc-1); border-radius:var(--dc-r-sm); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-lp__feat-svg { width:22px; height:22px; }
.dc-lp__feat-title { font-size:17px; font-weight:700; }
.dc-lp__feat-text { font-size:14px; color:var(--dc-text-sub); }
.dc-lp__cta-band { margin:0 var(--dc-6) var(--dc-7); padding:var(--dc-8) var(--dc-6); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:var(--dc-sunken); text-align:center; }
.dc-lp__cta-title { font-size:26px; font-weight:800; letter-spacing:-.02em; }
.dc-lp__cta-sub { margin-top:var(--dc-2); font-size:15px; color:var(--dc-text-sub); }
.dc-lp__cta-form { margin:var(--dc-5) auto 0; display:flex; gap:var(--dc-2); max-width:460px; }
.dc-lp__cta-input { flex:1; min-width:0; min-height:52px; padding:0 var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:15px; }
.dc-lp__cta-input::placeholder { color:var(--dc-text-mute); }
.dc-lp__cta-input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-lp__cta-btn { min-height:52px; padding:0 var(--dc-5); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:700; transition:background var(--dc-fast); }
.dc-lp__cta-btn:hover { background:var(--dc-brand-hi); }
.dc-lp__cta-note { margin-top:var(--dc-3); font-size:12px; color:var(--dc-text-mute); }
.dc-lp__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--dc-3); padding:var(--dc-5) var(--dc-6); border-top:1px solid var(--dc-line); }
.dc-lp__foot-co { font-size:12px; color:var(--dc-text-mute); }
.dc-lp__foot-nav { display:flex; flex-wrap:wrap; gap:var(--dc-4); }
.dc-lp__foot-link { font-size:12px; color:var(--dc-text-sub); text-decoration:none; }
.dc-lp__foot-link:hover { color:var(--dc-text); text-decoration:underline; }
@media (max-width:780px) {
.dc-lp__nav { display:none; }
.dc-lp__hero { grid-template-columns:1fr; gap:var(--dc-6); padding:var(--dc-6) var(--dc-4); }
.dc-lp__title { font-size:30px; }
.dc-lp__features { padding:var(--dc-7) var(--dc-4); }
.dc-lp__grid { grid-template-columns:1fr; margin-top:var(--dc-5); }
.dc-lp__cta-band { margin:0 var(--dc-4) var(--dc-6); padding:var(--dc-6) var(--dc-4); }
.dc-lp__cta-form { flex-direction:column; }
}Cách dùng
- Câu đầu của hero viết theo kết quả người dùng nhận được, không viết theo tính năng
- Nút chính ở thanh trên, hero và dải CTA phải dùng đúng một cách gọi; đổi chữ là đổi việc
- Chỉ ba ô tính năng; có cái thứ tư thì bỏ cái yếu nhất và dẫn sang tài liệu
Điểm cần lưu ý
- Trên màn hình hẹp, cho phần chữ lên trước hình minh họa
- Ô email ở dải CTA vẫn phải có label (ẩn bằng dc-sr) — placeholder không phải nhãn