기발자의 개발 노트

기획자에게 키즈가오에 적용해야 할 여러 가지 애니메이션 효과를 들었을 때 어떻게 구현해야 할지 몰라 막막했다. 당시에는 CSS 애니메이션 속성이 있는지조차 몰랐고 모든 기능과 효과는 자바스크립트 언어로만 구현할 수 있다고 생각했기 때문이다. 한 달 정도는 자바스크립트로 애니메이션 효과를 구현하기 위해 노력했지만 프로그래밍에 갓 입문한 필자의 능력으로는 감당하기 어렵다는 사실을 깨달았다.

여러 개발자 커뮤니티에 질문을 올려가며 답을 구하던 중 우연히 CSS 언어에도 애니메이션 효과를 구현할 수 있는 속성이 있다는 걸 알게 되었다. 유레카! 자바스크립트 언어로는 며칠이 걸리는 작업도 CSS 애니메이션 속성을 사용하면서 몇 십분 안에 해결할 수 있었다.

Day 10에서도 언급했지만 CSS3 신조어가 등장하기 전에는 회전이나 수평 이동 등 간단한 애니메이션조차 자바스크립트 언어로 구현해야 했다. 웹에 적용되는 자바스크립트 언어를 파악하고 복잡한 논리 구조를 만드는 과정이 웹 개발 영역에 발을 들인 지 얼마 안 된 입문자에게는 큰 고난이었다.

하지만 CSS 애니메이션 속성을 사용하면 자바스크립트 언어보다 더 직관적이고 쉽고 빠르게 간단한 효과를 제작할 수 있다.

국내외 블로그를 살펴보면 CSS 애니메이션과 자바스크립트 언어를 대결 구도로 만들어 성능을 비교한 글을 자주 본다. 두 언어의 성능 차이는 작성자마다 이견이 있으므로 상황이나 형편을 고려하여 잘 맞는 언어를 선택하면 된다.

다음 링크는 CSS3 애니메이션과 자바스크립트 성능을 비교한 블로그 주소이다. 참고하면 도움이 될 것이다.

CSS3 애니메이션 어떻게 사용하고 계신가요? URL
https://brunch.co.kr/@99-life/2

CSS3 Animations vs JavaScript URL
https://css-tricks.com/myth-busting-css-animations-vs-javascript/