particles.js 플레이그라운드 — 실시간 설정 편집기 및 생성기

컨트롤이나 원본 JSON으로 particles.js 설정을 편집하고, 실시간으로 실행되는 모습을 보며, JSON이나 바로 붙여 넣을 HTML 스니펫을 복사하세요.

문제를 발견하셨거나 개선할 점이 있나요? 모든 메시지를 읽고 빠르게 고칩니다.

이 particles.js 플레이그라운드는 particles.js 설정을 위한 실시간 편집기이자 생성기입니다. 컨트롤로 파티클 개수, 색상과 모양, 연결선, 움직임, 호버와 클릭 효과를 바꾸거나 전체 JSON 설정을 직접 편집하면 입력하는 대로 미리보기가 다시 실행됩니다. 두 화면은 같은 설정을 편집하므로 슬라이더로 대략 잡은 뒤 JSON으로 세밀하게 다듬을 수 있습니다. 원하는 모습이 되면 JSON이나 스크립트 태그와 particlesJS() 호출이 들어간 완전한 HTML 스니펫을 복사하세요.

미리보기는 흉내 낸 것이 아니라 실제 particles.js 2.0.0 라이브러리로 실행되므로, 보이는 모습이 그대로 페이지에 나타납니다. 라이브러리의 특이한 점도 마찬가지입니다. 색상은 16진수만 받고, 밀도를 켜면 파티클 수가 캔버스 크기에 따라 달라지며, 연결선은 금방 무거워집니다. FPS 표시를 보면 휴대폰에 배포하기 전에 설정을 판단하는 데 도움이 됩니다. particles.js 자체는 2015년 2.0.0 이후 업데이트되지 않았지만 현재 브라우저에서도 잘 동작합니다. 유지보수되는 후속 라이브러리인 tsParticles가 더 나은 경우는 아래에서 설명합니다.

사용 방법

시작할 프리셋을 고르거나, JSON 편집기에 자신의 설정을 붙여 넣으세요(particlesjs-config.json, particlesJS("particles-js", {...}) 호출, 일반 객체 모두 가능). .json 파일을 도구에 끌어다 놓아도 됩니다.
컨트롤 탭에서 파티클 개수와 밀도, 색상, 모양, 불투명도, 크기, 연결선, 움직임, 인터랙션을 조정하세요. JSON을 직접 편집해도 됩니다. 오류는 편집기 아래에 표시되고 미리보기는 마지막으로 유효했던 설정을 유지합니다.
페이지에 맞게 미리보기 배경 색상이나 이미지를 설정하고, 미리보기에 마우스를 올리거나 클릭해 인터랙션을 테스트하세요. 확대나 전체 화면으로 실제 크기를 보고 FPS 표시를 확인하세요.
출력 형식을 고르세요. HTML 스니펫, particlesJS.load 버전, React 컴포넌트, JSON 설정 중에서 선택합니다. 컨테이너를 전체 페이지 배경으로 할지 부모 요소를 채우게 할지도 고르세요.
복사하거나 다운로드한 다음, HTML 스니펫을 페이지의 닫는 </body> 태그 바로 앞에 붙여 넣으세요.

자주 묻는 질문

웹사이트에 particles.js를 어떻게 추가하나요?

<div id="particles-js"></div>처럼 id가 있는 빈 요소를 추가하고 CSS로 크기를 지정한 다음, 스크립트 태그로 라이브러리를 불러오고(jsDelivr에서는 cdn.jsdelivr.net/npm/ 뒤에 particles.js@2.0.0/particles.min.js를 붙인 주소로 제공), 그 id와 설정으로 particlesJS("particles-js", { ...config })를 호출하세요. 스크립트는 요소가 생긴 뒤에 실행되어야 하므로 </body> 바로 앞에 두세요. 아무것도 보이지 않는 가장 흔한 이유는 컨테이너에 높이가 없는 것입니다. particles.js는 요소 크기로 캔버스 크기를 정하므로 높이가 0인 div는 높이가 0인 캔버스를 만듭니다. 이 도구의 HTML 스니펫에는 전체 페이지 배경용 또는 부모 요소 채우기용 CSS가 포함되어 있습니다.

React나 Next.js에서 particles.js를 어떻게 쓰나요?

npm install particles.js로 설치한 다음, 브라우저에서만 실행되도록 useEffect 안에서 import하세요(window를 사용하므로 최상위에서 import하면 Next.js의 서버 사이드 렌더링이 깨집니다). 요소가 렌더링되면 window.particlesJS("particles-js", config)를 호출하고, 컴포넌트가 언마운트될 때 정리하세요. window.pJSDom의 각 항목에서 pJS.fn.vendors.destroypJS()를 호출하고 window.pJSDom을 빈 배열로 초기화해야 합니다. 그러지 않으면 애니메이션 루프가 계속 돌고 다음 마운트가 실패합니다. 여기서 제공하는 React / Next.js 출력은 이 작업을 하는 컴포넌트입니다. 새 React 프로젝트라면 유지보수되는 @tsparticles/react 패키지가 더 자연스러운 선택입니다.

particles.js는 아직 유지보수되나요? particles.js vs tsParticles

아닙니다. Vincent Garreau의 particles.js는 2015년에 나온 2.0.0 버전에서 멈췄고, 이후 저장소에 새 릴리스가 없습니다. canvas와 requestAnimationFrame만 사용하기 때문에 현재 브라우저에서도 동작하며, 많은 사이트가 쓰고 있습니다. Matteo Bruni의 tsParticles는 TypeScript 포트로 시작해 활발히 유지보수되는 후속 라이브러리가 되었습니다. 모양과 효과가 더 많고, 공식 React, Vue, Angular, Svelte 컴포넌트와 더 나은 성능 옵션이 있으며, particles.js 옵션 대부분을 읽을 수 있습니다. 정적 페이지에 의존성 없이 빠르게 배경을 넣으려면 particles.js를, 프레임워크 앱이나 몇 년간 유지보수할 프로젝트라면 tsParticles를 고르세요.

particles.js가 모바일에서 웹사이트를 느리게 하나요?

그럴 수 있습니다. 모든 파티클은 매 프레임 다시 그려지고, 연결선을 켜면 각 파티클과 다른 모든 파티클 사이의 거리를 확인하므로 비용이 파티클 수의 제곱으로 늘어납니다. retina_detect는 고해상도 휴대폰에서 그리는 픽셀 수를 2~3배로 늘립니다. 부드럽게 유지하려면 밀도를 켜 두어 작은 화면에서 파티클이 줄어들게 하고, 연결선을 켤 때는 약 100개 이하로 유지하고, FPS가 떨어지면 연결선이나 retina_detect를 끄고, 방문자가 prefers-reduced-motion을 설정했다면 particles.js를 초기화하지 마세요. 브라우저는 백그라운드 탭에서 requestAnimationFrame을 멈추므로 탭이 숨겨져 있을 때는 비용이 들지 않습니다.

particles.js 배경이 왜 보이지 않나요?

다음을 순서대로 확인하세요. 컨테이너에 실제 높이가 있는지(height: 100%는 부모에도 높이가 있어야 동작하므로 스니펫은 position: fixed 또는 absolute를 사용), particlesJS 호출이 요소가 생긴 뒤에 실행되는지, 파티클 색상이 배경색과 다른지, 다른 콘텐츠가 불투명한 배경으로 가리고 있지 않은지, 브라우저 콘솔에 오류가 없는지입니다. particlesJS.load를 쓸 때는 file://에서 JSON 파일을 불러오는 것이 차단되므로 페이지를 http(s)로 제공해야 합니다. 색상을 16진수 대신 이름이나 rgb()로 쓰면 particles.js가 그리기를 멈추며, 이 도구는 이를 경고합니다.

particles.js에서 이미지나 사용자 지정 모양을 쓸 수 있나요?

네. shape.type을 "image"로, shape.image.src를 이미지 URL로 설정하세요. width와 height는 가로세로 비율을, size 옵션은 그려지는 크기를 정합니다. PNG, JPG, GIF, WebP는 일반 이미지로 불러옵니다. SVG 파일은 색상을 바꿀 수 있도록 XMLHttpRequest로 내려받기 때문에 SVG를 호스팅하는 서버가 교차 출처 요청을 허용해야 합니다. 이미지 외에 기본 제공 모양은 circle, edge(사각형), triangle, polygon, star이며, polygon.nb_sides로 변의 수나 별의 꼭짓점 수를 정합니다. 모양을 배열로 지정하면 파티클마다 무작위로 하나씩 고릅니다.

particles.js 설정 레퍼런스: 중요한 옵션

particles.js 설정에는 최상위 키가 세 개 있습니다. particles(무엇을 그리고 어떻게 움직이는지), interactivity(마우스에 어떻게 반응하는지), retina_detect입니다. 생략한 키는 라이브러리 기본값을 따르는데, 이 기본값이 무겁습니다. 반지름 20인 파티클 400개에 연결선이 켜져 있습니다. 그래서 색상만 지정한 설정은 데모처럼 보이지 않습니다.

• particles.number.value와 density: density.enable을 켜면 value는 value_area × 1000제곱픽셀 면적당 개수가 되고, 실제 개수는 캔버스 크기에 따라 달라집니다. value_area 800에 80개라면 1920×1080 화면에서는 약 200개, 휴대폰에서는 수십 개가 됩니다.

• particles.color.value: 16진수 문자열, 16진수 문자열 배열(파티클마다 하나 선택), "random", 또는 {r, g, b} 객체. 색상 이름과 rgb() 문자열은 지원되지 않으며 애니메이션을 멈추게 합니다.

• particles.shape.type: circle, edge, triangle, polygon, star, image 또는 이들의 배열. stroke는 외곽선을 추가하고, polygon.nb_sides는 polygon의 변 수와 star의 꼭짓점 수를 정합니다.

• opacity와 size: value는 최댓값이고, random은 파티클마다 0과 그 값 사이에서 무작위로 고르며, anim은 지정한 속도로 opacity_min / size_min과 value 사이를 오가며 깜박이게 합니다.

• line_linked: distance 픽셀보다 가까운 파티클 사이에 선을 그리며, 거리에 따라 흐려집니다. color는 16진수 값 하나여야 합니다.

• move: speed, direction(none 또는 8방향 중 하나), random(속도 다양화), straight(흔들림 없음), out_mode(out은 반대편으로 넘어가고 bounce는 가장자리에서 튕김), bounce(파티클끼리 충돌), attract.

• interactivity.events: onhover 모드는 grab(커서까지 선 그리기), bubble(가까이서 커지거나 흐려짐), repulse(밀어내기), onclick 모드는 push(파티클 추가), remove, bubble, repulse입니다. 세기는 interactivity.modes에서 정합니다. detect_on은 기본값이 canvas이며, window로 하면 콘텐츠가 캔버스를 가려도 뷰포트 좌표로 반응합니다.

particles.js 설치: CDN, npm, 직접 호스팅

CDN 사용: src가 cdn.jsdelivr.net/npm/ 뒤에 particles.js@2.0.0/particles.min.js를 붙인 주소인 스크립트 태그(위 HTML 스니펫에 전체 태그가 있음). @latest 대신 이렇게 버전을 고정하세요. npm 패키지에는 압축되지 않은 particles.js만 들어 있고, .min.js 파일(약 23 KB)은 요청 시 jsDelivr가 생성합니다. 생성되는 파일이므로 jsDelivr는 SRI integrity 해시를 붙이지 말라고 권장합니다.

npm 사용: npm install particles.js@2.0.0 후 클라이언트 측 코드에서 import "particles.js"를 하세요. 패키지는 아무것도 export하지 않으며, import하면 window.particlesJS와 window.pJSDom이 정의됩니다. TypeScript 타입이 없으므로 TypeScript 프로젝트에서는 declare module "particles.js" 한 줄이 필요하고, window를 통해 호출해야 합니다.

직접 호스팅: npm 패키지의 particles.js(또는 jsDelivr의 압축 파일)를 정적 파일 폴더에 복사하고 스크립트 태그가 그 파일을 가리키게 하세요. 라이브러리는 eval을 쓰지 않으므로 자체 스크립트를 허용하는 엄격한 Content-Security-Policy에서도 동작합니다. 이미지 모양은 img-src에 해당 호스트가 필요하고, SVG 이미지나 particlesJS.load는 connect-src에도 호스트가 필요합니다.

particles.js는 MIT 라이선스이므로 파일에 라이선스 고지가 남아 있는 한 상업 프로젝트에도 쓸 수 있습니다.

빠르고 접근성 좋은 파티클 배경 만들기

움직이는 배경은 장식이므로 방해가 되어서는 안 됩니다. 방문자가 움직임 줄이기를 요청하지 않았을 때만 시작해 그 설정을 존중하세요: if (!matchMedia("(prefers-reduced-motion: reduce)").matches) particlesJS("particles-js", config). 또는 배경은 유지하되 move.enable을 false로 설정하면 정지된 프레임 하나만 그립니다.

텍스트를 읽기 쉽게 유지하세요. 텍스트 색상을 배경색, 파티클 색상, 선 색상과 대비해 확인하고, 필요하면 텍스트 아래에 반투명 오버레이를 넣으세요. position: relative와 더 높은 z-index로 콘텐츠를 캔버스 위에 두고, 캔버스가 클릭을 가로채면 안 된다면 pointer-events: none을 주고 호버 효과에는 detect_on: "window"를 쓰세요.

실제 휴대폰에서 테스트하세요. 이 플레이그라운드의 FPS 표시는 내 컴퓨터를 기준으로 한 것이고, 중급 휴대폰은 그 3분의 1 정도밖에 내지 못할 수 있습니다. 파티클 수 줄이기, value_area 늘리기, retina_detect 끄기, 연결선 끄기가 이 순서대로 가장 효과가 큰 변경입니다.