파티클 이펙트 생성기이란?
웹사이트나 앱에 활용할 파티클 애니메이션을 디자인하고 미리 볼 수 있습니다. 파티클 수, 속도, 크기, 색상, 모양, 상호작용 방식, 물리 속성을 설정하여 눈, 색종이, 반딧불이, 은하 패턴 등 다양한 효과를 만들고 바로 사용 가능한 코드로 내보내세요.
내부 엔진이 tsParticles라서 복사한 JSON 그대로 React, Vue, 순수 자바스크립트 프로젝트에 붙여 넣으면 됩니다. 마우스 오버와 클릭 상호작용(밀어내기, 잡기, 버블, 푸시, 제거), 투명도 페이드, 색상(색조) 애니메이션이 기본으로 동작하며, HTML 내보내기는 CDN으로 엔진을 같이 가져오기 때문에 빌드 과정 없이 정적 페이지에 그대로 붙여서 쓸 수 있습니다. 라이브 미리보기를 움직이는 GIF로 녹화해 어디서든 효과를 공유할 수도 있습니다.
사용 방법
- 프리셋 효과(눈, 색종이, 반딧불이, 거품, 은하, 네트워크, 불꽃놀이, 불, 연기)를 선택하거나 처음부터 직접 만드세요.
- 파티클 속성을 세밀하게 조정하세요: 개수, 속도, 크기 범위, 색상, 모양, 불투명도, 중력과 반발력 같은 물리 파라미터.
- 라이브 미리보기로 애니메이션을 확인한 후 tsParticles JSON 설정을 복사하거나 독립 실행형 HTML 코드로 내보내거나 미리보기를 움직이는 GIF로 캡처하세요.
사용 시기
- 시즌 이벤트 페이지나 제품 출시 랜딩에 눈/꽃가루 레이어를 얹고 싶을 때.
- 디자이너에게 넘기기 전에 SaaS 메인의 히어로 배경을 시안 수준으로 만들 때.
- 포트폴리오 첫 화면이나 게임 메뉴에 은하 또는 반딧불 배경을 깔고 싶을 때.
결과
웹 개발자가 눈 프리셋을 선택하고 파티클 수를 200으로 늘린 뒤 약간의 바람 효과를 추가하여 JSON 설정을 복사하고, 크리스마스 랜딩 페이지에 겨울 분위기를 연출합니다.
자주 묻는 질문
- 내보낸 JSON은 어떤 프론트엔드 프레임워크에서나 쓸 수 있나요?
- 쓸 수 있습니다. tsParticles와 호환되는 설정이라 React, Vue, Svelte, Angular, 바닐라 JS용 공식 래퍼가 모두 있습니다. 맞는 패키지를 설치하고 JSON을 options prop으로 넘기면 여기 미리보기와 똑같이 렌더됩니다.
- 입자가 얼마나 많아지면 끊기기 시작하나요?
- 최근 노트북에서는 200~400개까지 60fps를 유지합니다. 500을 넘기면 중급 스마트폰에서 프레임 드롭이 보이기 시작합니다. 별·다각형은 패스 렌더링 때문에 원보다 무겁습니다. 모바일 대응은 100~150개에 인터랙션 줄이는 게 안전합니다.
- HTML로 내보낸 후에 애니메이션이 다르게 보이는 이유는?
- HTML 스니펫은 캔버스를 부모 컨테이너 크기에 맞춰 늘립니다. 작은 div에 붙이면 입자들이 좁아 보입니다. 래퍼에 100vh나 400px 같은 고정 높이를 주면 캔버스도 따라서 늘어납니다.
- 직접 만든 이미지를 입자 모양으로 쓸 수 있나요?
- UI에서는 못 바꾸지만 엔진 자체는 지원합니다. JSON을 내보낸 다음 shape.options.image 항목을 PNG나 SVG 경로로 바꾸면 됩니다. 이미지는 시뮬레이션이 각 입자에 부여한 크기·투명도 그대로 그려집니다.
- 이 애니메이션이 페이지 성능 점수에 영향을 주나요?
- 엔진 자체가 gzip 기준 30~80KB이고 캔버스 재그리기 비용도 계속 들어갑니다. Lighthouse 점수를 지키려면 모바일에서는 입자 수를 줄이고 인터랙션을 꺼주세요. 히어로가 보인 뒤 엔진을 지연 로딩하면 LCP는 깨끗하게 유지됩니다.