▲

GN⁺: 유용한 프론트엔드 confetti 애니메이션 라이브러리

 (github.com/catdad)
5P by neo 13일전 | favorite | 댓글 1개

  • 설치 방법

    • NPM을 통해 모듈로 설치 가능 
      npm install --save canvas-confetti
    • require('canvas-confetti')로 프로젝트에서 사용 가능
    • 클라이언트 컴포넌트이므로 Node에서는 동작하지 않음. webpack 등을 이용해 프로젝트를 빌드해야 함
    • CDN을 통해 HTML 페이지에 직접 포함 가능 
      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
    • 프로젝트에 포함할 때는 releases 페이지에서 최신 버전 사용 권장

  • 애니메이션 감소 모드

    • 일부 사용자는 모션을 선호하지 않으므로 이를 고려해야 함
    • disableForReducedMotion 옵션으로 혼란스러운 애니메이션을 원하지 않는 사용자를 배려할 수 있음
    • 기본적으로 비활성화되어 있지만, 향후 메이저 릴리즈에서 기본값 변경 예정

API

  • confetti([options {Object}]) → Promise|null

    • 단일 옵션 객체를 매개변수로 받음
    • window.Promise를 사용할 수 있으면 Promise를 반환하고, 사용할 수 없으면(IE 등) null 반환
    • Polyfill이나 confetti.Promise를 통해 Promise 구현체 제공 가능
    • 완료되기 전 confetti 여러번 호출하면 같은 Promise 반환. 내부적으로 같은 canvas 요소 재사용
    • 모든 애니메이션이 완료되면 각 호출에서 반환된 Promise 해결(resolve)
    • options 객체의 주요 속성
      • particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex 등

  • confetti.shapeFromPath({ path, matrix? }) → Shape

    • SVG Path 문자열을 사용해 사용자 정의 confetti 모양 생성
    • 단색만 지원하며 Stroke는 미구현
    • 변환 행렬 필요. 직접 전달하거나 helper를 사용해 계산 가능
    • Path2D를 지원하는 브라우저로 제한
    • Shape 객체 반환

  • confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape

    • 이모지 confetti 렌더링을 위한 기능
    • 단일 문자, 특히 이모지 사용 권장
    • 텍스트를 래스터화하므로 생성 후 크기 조정에 적합하지 않음
    • scalar로 크기 조정시 여기서도 같은 값 사용 필요
    • text, scalar, color, fontFamily 옵션

  • confetti.create(canvas, [globalOptions]) → function

    • 사용자 정의 canvas를 사용하는 confetti 함수의 인스턴스 생성
    • canvas의 크기 제한 가능
    • 글로벌 옵션
      • resize : canvas 이미지 크기 설정 및 창 크기 변경시 유지 여부
      • useWorker : 가능한 경우 비동기 웹 워커를 사용해 렌더링할지 여부
      • disableForReducedMotion : 애니메이션 감소 모드 사용자의 경우 confetti 완전 비활성화 여부
    • useWorker: true 사용시 주의사항
      • canvas를 직접 조작하면 안됨. 웹 워커로 제어권 이전

  • confetti.reset()

    • 애니메이션 중지 및 모든 confetti 제거
    • 미해결 Promise 즉시 해결
    • confetti.create로 생성한 인스턴스는 자체 reset 메서드 보유

사용 예제

  • 기본 사용법

    confetti();

  • 다량의 confetti 사용

    confetti({
  particleCount: 150
});

  • 넓게 퍼뜨리기

    confetti({
  spread: 180
});

  • 랜덤한 위치에서 소량 발사

    confetti({
  particleCount: 100, 
  startVelocity: 30,
  spread: 360,
  origin: { 
    x: Math.random(),  
    y: Math.random() - 0.2
  }
});

  • 30초 동안 여러 방향에서 연속 발사

    var duration = 30 * 1000;
var end = Date.now() + duration;

(function frame() {
  confetti({
    particleCount: 7,
    angle: 60, 
    spread: 55,
    origin: { x: 0 }
  });

  confetti({  
    particleCount: 7,
    angle: 120,
    spread: 55, 
    origin: { x: 1 }
  });

  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());

GN⁺의 의견

  • canvas-confetti는 웹 페이지에서 쉽게 콘페티 효과를 적용할 수 있는 가벼운 라이브러리로 보입니다. NPM을 통한 설치나 CDN 방식 모두 지원해 개발자 편의성이 높아 보입니다.

  • 콘페티 효과의 다양한 설정을 지원해 유연성이 높습니다. 콘페티 개수, 퍼짐 정도, 크기, 모양, 색상 등을 자유롭게 조절할 수 있어 다양한 분위기 연출이 가능할 것 같습니다.

  • 텍스트나 SVG 패스를 이용해 사용자 정의 모양의 콘페티도 만들 수 있는 것이 흥미롭습니다. 특히 이모지를 활용한 콘페티는 재미있는 아이디어라고 생각합니다.

  • Web Worker를 활용해 메인 스레드를 블로킹하지 않고 애니메이션을 실행할 수 있는 것도 장점으로 보입니다. 다만 이 경우 canvas 직접 제어가 불가능해지므로 trade-off가 있습니다.

  • 애니메이션에 민감한 일부 사용자를 배려해 모션 감소 모드를 지원하는 것은 웹 접근성 측면에서 긍정적입니다. 향후 버전에서는 이 모드가 기본으로 활성화 될 예정이라고 하니 참고가 필요합니다.

  • 전반적으로 사용이 쉽고 다양한 옵션을 제공하는 라이브러리로 보입니다. 경쾌한 분위기 연출이 필요한 축하 페이지나 게임 등에 적합할 것 같습니다. 다만 지나친 사용은 사용자 경험을 해칠 수 있으므로 적정선에서 활용하는 것이 바람직해 보입니다.

▲
neo 13일전  [-]
Hacker News 의견
  • 캔버스에 그리고 캔버스를 다른 모든 요소 앞에 두되, 캔버스에서 포인터 이벤트를 비활성화하여 페이지와 상호작용할 수 있게 하는 것이 성능 좋은 애니메이션의 트릭임
  • 2015년 고등학교 시절 웹 개발을 하면서 즐거운 시간을 보냈던 기억이 남. 홈커밍 파티에 여자아이를 초대하기 위해 작은 웹사이트에 색종이 뿌리는 애니메이션을 만들었음 (지금 생각하면 너드스러워 보임). 어린 시절 웹사이트 만드는 것이 초능력처럼 느껴졌던 때가 있었음
  • 순수하게 재미를 위한 작은 프로젝트를 사랑함. 그것이 프로그래밍을 시작한 이유이고 여전히 원동력이 되고 있음
  • 데모 페이지에서 입자 수를 400개 정도로 변경하면 색종이가 균일한 "평평한 원뿔" 모양으로 보이는 실망스러운 광경을 목격할 수 있음. 이는 너무 완벽해 보여서 환상을 깨뜨림
  • 통계 시각화, 영화 소품, 웹사이트 색종이 등 세상에서 이런 종류의 디테일에 대한 관심이 드문데, 어디서든 발견하면 소중히 여김
  • 실제 분포는 가우시안에 근사할 것으로 추측되며, 해결책으로는 무작위 분포를 직접 변경하는 것이 좋을 듯함
  • 쿨하고 유용한 라이브러리일 뿐만 아니라, John Ousterhout가 '소프트웨어 설계 철학'에서 말하는 "딥 모듈"의 좋은 예시이기도 함
  • 가장 기본 버전의 라이브러리(색종이 소환)는 사용하기 매우 쉽지만, 제시된 옵션(눈, 특정 색상, 다양한 색종이 효과 등)을 탐색하면서 많은 것을 얻을 수 있음
  • 영업사원들의 관리자 대시보드에 판매 시 색종이 효과를 추가했는데, 놀랍게도 즐겁고 동기부여가 됨
  • 인상적이고 멋진 반면, 내가 사용하는 웹사이트에서 실행되는 것은 보고 싶지 않음. 특히 뉴스레터 팝업이나 장바구니에 상품을 추가할 때 색종이가 나오는 것은 원치 않음
  • 리셋 함수의 이름을 confetti.resetti()로 지었으면 함
  • 몇 년 전 제품의 일부로 유사한 애니메이션을 만들었음. 새로운 사용자가 가입하고 처음으로 제품을 사용하여 특정 결과물을 만들면 색종이 애니메이션이 표시되는 흐름이었음. 제품 관리자들은 이를 즐겁고 신선한 것으로 여겨 임원들에게 자랑했으나, 이후 UX 리뷰와 접근성 테스트를 거친 후 결국 제품에서 제거됨. 데모에서 보여주기에는 재미있었으나 사용자에게는 성가실 수 있음
  • Party.js 라이브러리도 있음: https://party.js.org/
  • 2005년경 전자상거래 사이트에 눈 내리는 효과를 넣었을 때의 놀라운 느낌이 기억남. 우리가 얼마나 멀리 왔는지 보여줌 (어떤 면에서는!)
답변달기