Design Atlas
한국어
▣ Presentation & slides

Speaker Notes

발표자 노트

Splitting what the audience sees from what only the presenter sees, so the slide stays minimal while the explanation lives in the notes.

Also known as: Presenter viewPresenter notes
···
html
<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="audience">
    <p class="ttl" id="ttl1"></p>
    <div class="ph"></div>
  </div>
  <div class="presenter">
    <div class="thumb">
      <p class="ttl2" id="ttl2"></p>
      <div class="ph2"></div>
    </div>
    <div class="notes">
      <p id="n1"></p>
      <p id="n2"></p>
    </div>
  </div>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:6vmin}
.badge{position:absolute;top:4%;right:4%;z-index:2;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent)}
.audience,.presenter{position:absolute;inset:6%;display:none;flex-direction:column}
.slide:not(.pres) .audience{display:flex}
.slide.pres .presenter{display:flex}
.ttl{margin:0 0 6% 0;font:800 clamp(13px,3.4vmin,19px)/1.2 -apple-system,sans-serif;color:var(--fg)}
.ph{flex:1;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-3));opacity:.25}
.thumb{border:1px solid var(--line);border-radius:8px;padding:4vmin 5vmin;background:var(--bg)}
.ttl2{margin:0 0 4% 0;font:700 clamp(9px,2.2vmin,12px)/1.2 -apple-system,sans-serif;color:var(--fg)}
.ph2{height:clamp(10px,3vmin,18px);border-radius:4px;background:linear-gradient(135deg,var(--accent),var(--accent-3));opacity:.25}
.notes{margin-top:4vmin;padding-top:3vmin;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:3%}
.notes p{margin:0;font:500 clamp(8px,2vmin,11px)/1.4 monospace;color:var(--muted)}
js
const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['청중 화면', '발표자 화면'], ttl: '이번 분기 리텐션', n: ['1. 지난달 대비 8%p 개선 먼저 말하기', '2. 원인은 온보딩 3단계 축소 — 출처: 그로스팀 대시보드'] },
  en: { badge: ['Audience view', 'Presenter view'], ttl: 'Retention This Quarter', n: ['1. Lead with the 8pt improvement vs last month', '2. Cause: cut onboarding to 3 steps — source: growth team dashboard'] },
};
let n = 0;
function render() {
  const pres = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('pres', pres);
  el('badge').textContent = pres ? t.badge[1] : t.badge[0];
  el('ttl1').textContent = t.ttl; el('ttl2').textContent = t.ttl;
  el('n1').textContent = t.n[0]; el('n2').textContent = t.n[1];
}
render();
setInterval(() => { n++; render(); }, 2400);

Speaker notes are supported by PowerPoint, Keynote, and Google Slides alike — the presenter's laptop shows the current and next slide alongside a written script, while the screen behind them shows only the slide. That split means the slide itself never has to carry the full explanation.

The demo alternates between an "audience view" and a "presenter view." The audience sees only a big title and an image; the presenter sees the same slide as a small thumbnail, with notes below spelling out the speaking order and the numbers to emphasize.

Checklist: did details and sources that are not on the slide get moved into the notes, could you recall the speaking order just from reading the notes before the talk, are the notes written as complete sentences, assuming you are reading them cold with no rehearsal.

When to use

Use notes when you want a minimal slide but cannot afford to lose a detail or a citation.