Design Atlas
한국어
❝ UX writing

Notification Copy

알림 문구

"You have a new notification" forces an open just to find out what it means. Put the who and what in the notification itself.

Also known as: Push copy
···
html
<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <div class="notif"><span class="avatar"></span><div class="ntext"><p class="ntitle" id="bt"></p></div></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <div class="notif"><span class="avatar good-avatar"></span><div class="ntext"><p class="ntitle" id="gname"></p><p class="nbody" id="gt"></p></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;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}
.notif{display:flex;gap:9px;border-radius:11px;border:1px solid var(--line);background:var(--bg);padding:10px}
.avatar{width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent-2)}
.good-avatar{background:var(--accent-3)}
.ntext{display:flex;flex-direction:column;gap:2px;min-width:0}
.ntitle{margin:0;font:700 11px/1.3 -apple-system,sans-serif;color:var(--fg)}
.nbody{margin:0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted)}
.why{margin:0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted)}
js
const bt = document.getElementById('bt'), bw = document.getElementById('bw');
const gname = document.getElementById('gname'), gt = document.getElementById('gt'), gw = document.getElementById('gw');
const L = {
  ko: { bt: '새 알림이 있습니다', bw: '열어봐야만 알 수 있음', gname: '민수', gt: "댓글을 남겼어요: '멋져요!'", gw: '발신자 + 행동 + 내용이 완결' },
  en: { bt: 'You have a new notification', bw: 'meaningless until you open it', gname: 'Minsu', gt: "commented: 'This looks great!'", gw: 'sender + action + content, self-contained' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  bt.textContent = t.bt; bw.textContent = t.bw;
  gname.textContent = t.gname; gt.textContent = t.gt; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2600);

Push and in-app notifications get read in isolation — on a lock screen, in a notification tray. "You have a new notification" carries zero information there, so users have to open the app just to find out, and eventually turn notifications off entirely.

A good notification packs sender, action, and object into one line: "Minsu commented: 'This looks great!'" The exception is sensitive content (health, finance), where hiding detail behind "You have an update" is the right call — the risk of lock-screen exposure outweighs the convenience.

The demo's ✕ tells you nothing even in the tray; ✓ is complete on its own.

When to use

Include sender and content for comments, likes, and messages. Make an exception for payment or health notifications and keep them vague.