디자인 아틀라스
EN
⌘ UX 용어·법칙

사회적 증거

Social Proof

남들이 이미 하고 있다는 신호가 행동을 유도한다는 설득 원리. 리뷰 수·이용자 수 표시가 대표적입니다.

다른 이름: Social validation
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <button class="btn">Sign up</button>
    <div class="cur" id="c1">&#10148;</div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="social"><span class="av"></span><span class="av"></span><span class="av"></span><b id="cnt">1,204</b></div>
    <button class="btn">Sign up</button>
    <div class="cur" id="c2">&#10148;</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;gap:10px;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.btn{border:0;border-radius:9px;padding:9px 18px;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.social{display:flex;align-items:center;gap:4px;font:700 10.5px/1 monospace;color:var(--muted)}
.av{width:16px;height:16px;border-radius:50%;background:var(--accent-3);border:2px solid var(--surface);margin-left:-8px}
.av:first-child{margin-left:0}
.cur{position:absolute;font-size:14px;color:var(--fg);transform:rotate(-45deg)}
#c1{animation:hesit 2.8s ease-in-out infinite}
#c2{animation:direct 1.2s ease-out infinite}
@keyframes hesit{0%,100%{left:16%;top:80%}30%{left:40%;top:55%}45%{left:30%;top:70%}70%{left:55%;top:50%}100%{left:55%;top:50%}}
@keyframes direct{0%{left:16%;top:80%}85%,100%{left:52%;top:52%}}

심리학자 로버트 치알디니(Robert Cialdini)가 저서 《설득의 심리학》(1984)에서 정리한 6가지 설득 원칙 중 하나입니다. 사람은 무엇이 옳은 행동인지 불확실할 때 타인의 행동을 참고합니다 — 리뷰 4.8점, "이번 주 1,204명 가입", 후기 사진이 전부 같은 원리로 작동합니다.

UI에서는 가입 버튼 옆에 숫자나 아바타를 더하는 것만으로 전환율이 올라간다는 게 여러 실험으로 확인됐습니다. 근거가 진짜일 때는 유용한 정보지만, 가짜 리뷰나 조작된 숫자로 신뢰를 사면 곧 다크 패턴(→ dark-pattern)입니다.

데모는 신호가 없는 버튼(A)보다 아바타 스택 + 숫자가 있는 버튼(B)에 커서가 더 빠르고 확신 있게 움직이는 걸 보여줍니다.

언제 쓰나

가입·구매 버튼 근처에 사회적 증거를 더할 때. 표시하는 숫자·리뷰가 실시간·실제 데이터인지 먼저 검증하세요.