Dark Pattern

다크 패턴

UI deliberately designed to trick or pressure users into a choice that benefits the business over them — pre-checked subscriptions, guilt-trip copy.

Also known as: Deceptive patternConfirmshaming
···
html
<div class="card">
  <p class="q">이메일로 계속하기</p>
  <label class="chk"><input type="checkbox" checked disabled><span>마케팅 소식 및 파트너 광고 수신에 동의합니다</span></label>
  <button class="go">계속하기 →</button>
  <a class="tiny" href="#">아니요, 저는 좋은 혜택을 놓치고 싶어요</a>
  <div class="warn" id="warn">⚠</div>
</div>
css
.card{position:relative;width:82%;max-width:280px;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;gap:10px}
.q{margin:0;font:700 13px/1.3 sans-serif;color:var(--fg)}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:10.5px;color:var(--muted);line-height:1.4}
.chk input{margin-top:2px}
.go{border:0;border-radius:10px;padding:11px;background:var(--accent);color:#fff;font-weight:800;font-size:13px;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent)}
.tiny{justify-self:center;font-size:9.5px;color:var(--line);text-decoration:underline}
.warn{position:absolute;top:-10px;right:34px;width:22px;height:22px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font:900 12px/1 monospace;opacity:0;transform:scale(.6);animation:pop 2.4s ease-in-out infinite}
@keyframes pop{0%,8%{opacity:0;transform:scale(.6)}18%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}

UX researcher Harry Brignull coined the term in 2010 with darkpatterns.org (now deceptive.design). Common types: pre-checked boxes (turning opt-out into fake opt-in), confirmshaming ("No thanks, I don't want to save money"), hidden costs, and the "roach motel" — easy to get into a subscription, deliberately hard to leave.

It's dangerous precisely because it borrows normal UI language (buttons, checkboxes) and points it against the user — the interface looks legitimate, so people don't even realise they were nudged. Since 2022 the EU has been tightening regulation against these patterns (DSA, Omnibus Directive).

The demo shows a pre-checked marketing opt-in, a tiny greyed-out "no thanks" link, and a big vivid "Continue" button. The warning badge calls out where it crosses the line.

When to use

When designing or reviewing a consent, subscription, or cancellation flow, ask: "if the user skims, do they end up doing the opposite of what they'd choose carefully?" If yes, it's a dark pattern.