파티클 효과 typescript JS라이브러리 『tsParticle』

최근 타입스크립트가 대세다.

 

tsParticle은 타입스크립트 대세론에 편승한 타입스크립트 라이브러리다. 5월 31일 1.15버전을 발표하고, 잉크가 마르지도 않았는데 1.16이 등장했다. 원래 파티클 효과에서 반짝했던 웹개발 라이브러리로는 'particle.js'가 있었다.

 

https://github.com/VincentGarreau/particles.js

VincentGarreau/particles.js

particle.js

 

tsParticle은 업데이트가 멈춰버린 particle.js의 후속작이라 볼 수 있다.

 

이유는 모르겠지만 particle.js는 크게 발전이 없었다. 아마도 openGL ES의 웹버전 webGL이 등장한 이후로 뭔가 필요성을 상실한 게 원인이 아닐까한다. 가령, three.js, babylon.js와 같은 webgl 라이브러리에서 코드 몇줄이면 반응형 edge그래픽을 구현할 수 있기 때문에 굳이 particle.js를 사용할 필요가 없다.

 

타입스크립트 기반에서 뭔가 달라진 게 있을까?

 

https://github.com/matteobruni/tsparticles

matteobruni/tsparticles

어차피 프론트에서는 자바스크립트로 컴파일해야 하는데 굳이 particle.js를 타입스크립트로 변환하는 이유는 '빅데이터'에 있지 않을까한다. 타입스크립트를 사용했을 때 가장 큰 장점은 '프론트-벡'사이의 로스를 최소한으로 줄일 수 있다는 것이다. 자바스크립트를 사용하더라도 json을 통해 서버-프론트 간의 연결을 할 수 있지만 타입스크립트로 모두 통일하는 것보다 느슨하다.    

   

'빅데이터'는 파티클 효과를 가장 효과적으로 사용할 수 있는 분야다. 특히, node.js를 기반으로 하는 타입스크립트일 경우, npm패키지들을 충분히 활용할 수 있기 때문에 서버의 데이터를 시각화하는 데에 있어 유리하다. "크롤링 + typescript + tsParticle" 조합이라면, 프론트와의 손실율을 최소한으로 줄이면서 데이터 시각화를 할 수 있을 듯하다.