프릭션 (좋은 마찰 vs 나쁜 마찰)

.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:12px;overflow:hidden} .tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)} .steps{display:flex;align-items:center;gap:6px} .steps span{width:22px;height:22px;border-radius:6px;background:var(--line)} .steps .target{background:var(--accent)} .ico{width:26px;height:26px;opacity:0} .bad{color:var(--accent-2);animation:blink 2.4s ease-in-out infinite} .ok{color:var(--accent-3);animation:blink 1.6s ease-in-out infinite} .ico path{stroke:currentColor} @keyframes blink{0%,100%{opacity:0;transform:scale(.7)}50%,75%{opacity:1;transform:scale(1)}90%{opacity:0}}

"마찰 없는 UX"가 항상 목표는 아닙니다. 인지심리학자 로버트 비요크(Robert Bjork)가 제안한 "바람직한 어려움(desirable difficulty)" 개념처럼, 어떤 마찰은 의도적으로 남겨야 더 나은 결과를 만듭니다.

**나쁜 마찰**은 목적 없이 사용자를 가로막습니다 — 간단한 정보 열람에 강제 회원가입을 요구하거나, 불필요한 CAPTCHA를 여러 번 반복시키는 경우입니다. **좋은 마찰**은 위험하거나 되돌리기 어려운 행동 앞에 의도적으로 배치됩니다 — 삭제 전 확인 모달, 결제 전 요약 화면, 실수로 보낸 메일을 몇 초간 취소할 수 있게 하는 "실행 취소" 창입니다.

둘을 가르는 기준은 하나입니다: **이 마찰이 사용자를 보호하는가, 아니면 사업자만 이롭게 하는가.** 후자라면 다크 패턴(→ dark-pattern)에 가깝습니다.

데모의 A는 단순 조회에 불필요한 3단계가 끼어들어 좌절 신호가 뜨고, B는 삭제라는 위험한 행동 앞에 확인 1단계가 있어 안전 신호가 뜹니다.

언제 쓰나

플로우를 "더 빠르게" 만들기 전에 그 단계가 나쁜 마찰인지 좋은 마찰인지 구분하세요. 삭제·결제·전송처럼 되돌리기 어려운 동작은 오히려 마찰을 더할지 검토하세요.