시각화, 애니메이션에 있어서 CSS와 JS의 역할

CSS 애니메이션은 GPU를 사용하여 렌더링하고, JS 애니메이션은 CPU를 사용하여 렌더링한다는 차이가 있다.

 

• CSS 애니메이션
  • 브라우저의 렌더링 엔진에 의해 최적화되어 GPU 사용이 가능하다.
  • 간단하고 성능이 좋지만, 복잡한 애니메이션 구현에는 한계가 있다.
  • `transform`과 `opacity` 속성을 사용할 때 효과적이다.
  • 선언적이어서 코드가 간결하고 이해하기 쉽다.
• JS 애니메이션
  • CPU를 사용하기 때문에 성능에 주의해야 한다.
  • 복잡하고 동적인 구현이 가능하며 유연하다.
  • 낮은 버전의 브라우저에서도 지원이 가능하여 크로스 브라우징 측면에서 유리하다.

 

데일리 CSS 챌린지

100 Days CSS Challenge

 

100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란, 100일간 주어진 문제를 CSS로 구현해 보는 챌린지다.

특이한 점은 Javascript를 쓰지 않고 CSS로만 하는 것을 지향한다는 점이다.

실제로 예시 솔루션을 보면 js는 거의 쓰지 않은 것을 확인할 수 있다.

다른 개발자들의 솔루션을 보고 배우며 피드백을 주고받을 수 있으므로, 꾸준히 학습하기가 좋다.

* 웹 에디터인 codepen 계정이 있어야 코드를 제출할 수 있다. (웹 상에서 애니메이션을 구현한 후 제출하는 형식)

 

D3.js

D3.js 구현 예시

https://d3js.org

 

D3.js는 웹브라우저 상에서 동적이고 인터렉티브한 데이터 시각화를 구현하기 위한 자바스크립트 라이브러리이다.

SVG, HTML5, CSS 등 웹표준에 기반해 구현되어 있다.

 

matplotlib

 

D3.js를 통해 흔히 사용하는 matplotlib 라이브러리보다 정교하게 데이터 시각화할 수 있다.

하지만 기능이 강력한 만큼 학습에 시간이 충분히 필요하다.

 

p5.js

https://p5js.org

 

p5.js는 Lauren McCarthy에 의해 자바스크립트로 만들어진 새로운 라이브러리다.

p5.js는 디자이너와 아티스트들이 좀 더 손쉽게 프로그래밍에 접근할 수 있도록 만들어진

"processing"이라는 프로그램을 기반으로 만들어졌다.

 

그래서 p5.js도 보통 크리에이티브 코딩 하는 사람들이 많이 사용한다.

특히 디자인과에서 코딩을 접목하기 위해 processing과 p5.js를 많이 사용하는 것을 볼 수 있었다. (하드웨어를 위해 아두이노도 사용)

 

 

 

 

 

크리에이티브 코딩, 동적인 웹 디자인은 UI 디자이너들에게 핫한 주제이다.