낙관적 UI는 사용자가 행동한 직후 임시 상태를 화면에 합칩니다. 서버가 성공하면 확정하고, 실패하면 임시 상태를 제거하거나 오류를 보여줍니다.
데모는 좋아요 수가 즉시 늘어난 뒤 서버 응답에 따라 확정 또는 롤백되는 두 갈래를 보여줍니다. 돈이나 재고처럼 되돌리기 어려운 작업에는 결과 표현을 신중히 설계하세요.
언제 쓰나
성공 가능성이 높고 되돌리기 쉬운 좋아요·체크·댓글 등의 조작에 적합합니다.
낙관적 UI
Optimistic UI
서버 응답을 기다리지 않고 성공한 것처럼 먼저 보여준 뒤 실패하면 되돌립니다.
···
<div class="scene"><div class="heart">LIKE <b id="count">12</b></div><div class="server" id="server">server: waiting</div><div class="branches"><span id="yes">confirm</span><span id="no">rollback</span></div><div class="label" id="note">tap → show 13 now</div></div>.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.heart{text-align:center;font:700 clamp(28px,11vmin,64px) ui-monospace,monospace;color:var(--accent);margin:clamp(7px,3vmin,20px)}.server{text-align:center;padding:.4em;background:var(--bg);border-radius:6px}.branches{display:flex;justify-content:space-evenly;margin:clamp(12px,4vmin,24px) 0}.branches span{border:1px solid var(--line);border-radius:6px;padding:.3em .6em}.branches .on{border-color:var(--accent);color:var(--accent)}.label{text-align:center}let n=0;function tick(){const s=n%4;document.getElementById("count").textContent=s===0?12:13;document.getElementById("server").textContent=["server: waiting","request in flight","server: accepted","server: rejected"][s];document.getElementById("yes").classList.toggle("on",s===2);document.getElementById("no").classList.toggle("on",s===3);document.getElementById("note").textContent=["tap → show 13 now","optimistic 13","confirmed 13","rollback → 12"][s];if(s===3)document.getElementById("count").textContent=12;n++}tick();setInterval(tick,800)