새 항목이 나타날 때마다 이전 항목은 흐리게 죽여서, 청중의 시선이 항상 지금 말하는 항목에만 머물게 합니다.
디자인 아틀라스<div class="slide">
<span class="tag" id="tag"></span>
<div class="items">
<p class="item" id="t0"></p>
<p class="item" id="t1"></p>
<p class="item" id="t2"></p>
</div>
</div>.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:9vmin 10vmin;display:flex;flex-direction:column;justify-content:center}
.tag{position:absolute;top:4%;left:4%;font:700 clamp(9px,2.2vmin,12px)/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.items{display:flex;flex-direction:column;gap:clamp(8px,2.4vmin,16px)}
.item{margin:0;font:600 clamp(10px,2.6vmin,14px)/1.35 -apple-system,sans-serif;color:var(--muted);opacity:.4;transition:all .4s ease}
.item.active{color:var(--fg);font-weight:800;opacity:1;font-size:clamp(12px,3.2vmin,17px)}const el = (id) => document.getElementById(id);
const items = [el('t0'), el('t1'), el('t2')];
const L = {
ko: { tag: '지금 강조 중', t: ['문제: 온보딩 이탈률이 40%다', '원인: 첫 화면에 정보가 너무 많다', '해결: 단계를 3개로 줄인다'] },
en: { tag: 'Currently focused', t: ['Problem: onboarding drop-off is 40%', 'Cause: the first screen has too much on it', 'Fix: cut it down to 3 steps'] },
};
let n = 0;
function render() {
const k = n % 3;
const lang = Math.floor(n / 3) % 2 === 0 ? 'ko' : 'en';
const t = L[lang];
el('tag').textContent = t.tag;
items.forEach((it, idx) => { it.textContent = t.t[idx]; it.classList.toggle('active', idx === k); });
}
render();
setInterval(() => { n++; render(); }, 1300);빌드 애니메이션이 "순서대로 등장"에 집중한다면, 점진적 강조는 "등장한 뒤에도 과거형이 되지 않게" 관리하는 기법이다. 세 문장이 모두 진하게 남아 있으면 발표자가 두 번째 문장을 말하는데도 청중의 눈은 세 번째를 미리 읽는다.
데모는 세 항목을 순서대로 밝혀 가면서 이전 항목은 옅은 색으로 죽인다. 지금 강조된 한 줄만 진한 색과 큰 글씨로 남는다 — 화면 전체가 항상 "지금 이 줄"을 가리킨다.
체크리스트: 슬라이드 안에 동시에 진하게 강조된 줄이 두 개 이상 있지 않은가, 지나간 항목이 완전히 사라지지 않고 맥락으로는 남아 있는가, 강조 전환 속도가 말하는 속도와 맞는가.
문제-원인-해결처럼 순서가 중요한 짧은 논증을 한 슬라이드 안에서 이어갈 때 씁니다.