선택적 주의

Selective Attention

한 가지에 집중하면 명백히 눈에 보이는 다른 것도 놓친다는 인지 현상. "안 보여서" 못 본 게 아니라 "안 봐서" 못 본 겁니다.

다른 이름: Inattentional blindness
···
html
<div class="stage">
  <div class="pane"><div class="tag">A · counting task</div>
    <div class="dots" id="dots"></div>
    <div class="mover" id="m1"></div>
  </div>
  <div class="pane"><div class="tag">B · just watching</div>
    <div class="mover" id="m2"></div>
    <div class="ping" id="ping">!</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted);z-index:2}
.dots{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:30px 14px}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--accent-2)}
.mover{position:absolute;width:16px;height:16px;border-radius:4px;background:var(--accent);top:45%;animation:cross 3.2s linear infinite}
@keyframes cross{0%{left:-8%}100%{left:100%}}
.ping{position:absolute;left:50%;top:45%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font:900 12px/1 monospace;opacity:0;animation:ping 3.2s linear infinite}
@keyframes ping{0%,44%{opacity:0}48%,58%{opacity:1;transform:scale(1.2)}68%,100%{opacity:0}}
js
const dots = document.getElementById('dots');
for (let i = 0; i < 18; i++) dots.appendChild(document.createElement('span'));

대니얼 사이먼스(Daniel Simons)와 크리스토퍼 차브리스(Christopher Chabris)의 1999년 "보이지 않는 고릴라" 실험이 이 현상을 극적으로 보여줬습니다. 피험자에게 사람들이 농구공을 패스하는 횟수를 세라고 시키면, 화면 한가운데를 가로질러 걸어가는 고릴라 옷을 입은 사람을 절반가량이 알아채지 못합니다. 주의가 한 과업에 쏠리면 뇌는 관련 없는 자극을 걸러냅니다.

UI에서는 사용자가 특정 과업(양식 채우기, 결제)에 집중해 있을 때 배너·에러 메시지·성공 알림이 그 옆에서 조용히 지나가버릴 수 있습니다. 특히 화면 가장자리나 눈에 익은 위치(광고 자리)는 평소에도 무시되도록 학습돼 있어(→ banner-blindness) 더 쉽게 놓칩니다.

중요한 알림은 사용자의 현재 시선 위치(입력 중인 필드 근처)에 가깝게, 그리고 명백히 다른 시각적 신호로 배치해야 선택적 주의를 뚫을 수 있습니다.

데모의 A는 "빨간 점 개수 세기"라는 과업에 집중하는 동안 파란 도형이 화면을 가로질러도 알림이 뜨지 않고, B는 과업 없이 지켜볼 때 같은 도형에 알림 표시가 뜹니다.

언제 쓰나

에러·성공 메시지를 화면 어디에 둘지 정할 때. 사용자가 그 순간 시선을 두고 있을 위치 근처에 배치하세요 — 멀리 있는 알림은 과업 중엔 존재하지 않는 것과 같습니다.