성공 메시지

Success Message

"완료"만으로는 부족합니다 — 무엇이 어떻게 됐는지, 그다음엔 뭘 할 수 있는지까지 말해야 안심이 됩니다.

다른 이름: Confirmation toast
···
html
<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <div class="toast"><span class="dot"></span><p class="copy" id="bt"></p></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <div class="toast"><span class="dot good-dot"></span><p class="copy" id="gt"></p></div>
    <p class="why" id="gw"></p></div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:16px 14px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.toast{width:90%;display:flex;align-items:center;gap:9px;border-radius:11px;border:1px solid var(--line);background:var(--bg);padding:10px 12px}
.dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--muted)}
.good-dot{background:var(--accent-3)}
.copy{margin:0;font:600 clamp(10px,2.7vmin,13px)/1.35 -apple-system,sans-serif;color:var(--fg)}
.why{margin:0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted);text-align:center}
js
const bt = document.getElementById('bt'), bw = document.getElementById('bw');
const gt = document.getElementById('gt'), gw = document.getElementById('gw');
const L = {
  ko: { bt: '완료', bw: '뭐가 어떻게 됐는지 모름', gt: '저장했어요 · 모든 기기에 동기화돼요', gw: '결과 + 범위까지 알려줌' },
  en: { bt: 'Done', bw: "doesn't say what happened", gt: 'Saved — synced across all your devices', gw: 'states the result and its scope' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  bt.textContent = t.bt; bw.textContent = t.bw; gt.textContent = t.gt; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2400);

성공 메시지는 실패만큼 자주 소홀히 다뤄집니다. "완료"는 동작이 끝났다는 사실만 말하고, 정말 저장이 서버까지 갔는지·동기화됐는지·무엇이 바뀌었는지는 알려주지 않습니다.

구체적인 성공 메시지는 신뢰를 만듭니다. "저장했어요"보다 "저장했어요 · 모든 기기에 동기화돼요"가 사용자에게 더 많은 확신을 줍니다. 여지가 있다면 되돌릴 수 있는 방법(실행 취소)도 같은 자리에 두면 좋습니다.

데모의 ✕는 끝났다는 사실만 말하지만, ✓는 결과와 범위까지 알려줍니다.

언제 쓰나

저장·전송·결제 완료처럼 사용자가 "정말 됐나?"를 걱정할 수 있는 순간마다 구체적인 결과를 덧붙이세요.