정답을 맞혔을 때 터지는 환호 — canvas-confetti 마이크로 인터랙션 최적화

학습 웹앱을 만들 때 개발자가 가장 흔히 빠지는 함정이 있습니다. "문제 로직과 채점 기능만 정확하면 되지, 화려한 효과는 군더더기 아닌가?"라는 생각입니다.

하지만 실제 초등 교실에서 아이들을 관찰해 보면 완전히 다릅니다. 정답을 맞혔을 때 화면에 단순히 "정답입니다(O)" 텍스트 하나만 뜨는 앱과, 온 화면에 알록달록한 축하 색종이 가루가 팡 터지는 앱에 대한 아이들의 도파민과 재도전 의지는 하늘과 땅 차이입니다.

엽쌤스쿨의 웹앱들에 적용된 canvas-confetti 마이크로 인터랙션 구현 노하우를 정리합니다.

1. 왜 DOM 요소가 아니라 Canvas 기반인가?

수백 개의 색종이 조각을 <div> 태그로 띄우고 CSS 애니메이션을 먹이면, 저사양 안드로이드 태블릿 25대가 돌아가는 교실에서는 브라우저 렌더 트리가 폭발하며 심각한 프레임 드랍(Jank)이 발생합니다.

반면 canvas-confetti는 단 하나의 <canvas> 컨텍스트 위에서 수천 개의 파티클 물리 연산을 GPU 가속으로 처리하기 때문에, 구형 기기에서도 부드러운 60FPS를 보장합니다.

import confetti from 'canvas-confetti';

export function fireSchoolSuccessConfetti() {
  const count = 200;
  const defaults = {
    origin: { y: 0.7 },
    spread: 360,
    ticks: 100,
    gravity: 1.2,
    decay: 0.94,
    startVelocity: 30,
  };

  confetti({
    ...defaults,
    particleCount: Math.floor(count * 0.25),
    colors: ['#38bdf8', '#818cf8', '#f59e0b', '#10b981'],
  });
}

2. 세심한 교실 배려: 감각 과부하 방지

효과는 강력하지만 남발되면 수업 집중에 방해가 될 수 있습니다.

• 연속 3연속 콤보 시에만 강력한 폭죽 발사
• BGM 설정에 연동되어 조용한 도서관 모드에서는 사운드 없는 무음 폭죽 구동

작은 인터랙션 하나가 아이들에게 "내가 해냈다!"라는 강력한 성취감을 심어줍니다.