확인 다이얼로그 문구

Confirmation Dialog Copy

"정말 삭제하시겠습니까?"는 아무것도 알려주지 않는다 — 무엇이, 왜 되돌릴 수 없는지를 구체적으로 말하는 법.

다른 이름: Alert dialog copy
···
html
<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <div class="dlg"><p class="dtitle" id="bt"></p><div class="drow"><button class="btn ghost">-</button><button class="btn solid-bad">-</button></div></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <div class="dlg"><p class="dtitle" id="gt"></p><div class="drow"><button class="btn ghost">-</button><button class="btn solid-good">-</button></div></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}
.dlg{width:92%;border-radius:12px;border:1px solid var(--line);background:var(--bg);padding:12px;display:flex;flex-direction:column;gap:10px}
.dtitle{margin:0;font:650 clamp(11px,2.8vmin,13px)/1.4 -apple-system,sans-serif;color:var(--fg);min-height:2.8em}
.drow{display:flex;gap:6px;justify-content:flex-end}
.btn{padding:5px 11px;border-radius:7px;font:700 10px/1 -apple-system,sans-serif;border:0}
.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.solid-bad{background:var(--accent-2);color:#fff}
.solid-good{background:var(--accent-3);color:#fff}
.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: "'2024년 예산안.xlsx'를 삭제할까요? 복구할 수 없어요", gw: '대상 + 되돌릴 수 없음을 명시' },
  en: { bt: 'Are you sure?', bw: 'no target, no consequence', gt: "Delete '2024 budget.xlsx'? This can't be undone.", gw: 'names the target + states the risk' },
};
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(); }, 2600);

한국어 다이얼로그에서 가장 흔한 문구는 "정말 삭제하시겠습니까?"입니다. 문법은 맞지만 정보가 없습니다 — 무엇을 삭제하는지, 되돌릴 수 있는지 이 문장만으로는 알 수 없습니다. 반복되면 사용자는 내용을 읽지 않고 반사적으로 버튼을 누르게 됩니다.

좋은 확인 다이얼로그는 대상을 구체적으로 지칭하고("'2024년 예산안.xlsx'를 삭제할까요?"), 결과를 명시합니다("삭제하면 복구할 수 없어요"). 되돌릴 수 있는 동작이면 굳이 다이얼로그를 띄우지 않고 실행 후 취소(→ optimistic-ui)를 주는 편이 더 나을 때도 많습니다.

데모의 ✕는 "정말 진행하시겠습니까?"만 반복하지만, ✓는 대상과 결과를 한 문장에 담습니다.

언제 쓰나

삭제·전송·결제처럼 되돌리기 어려운 동작에만 다이얼로그를 쓰세요. 되돌릴 수 있으면 다이얼로그 대신 실행 후 취소를 고려하세요.