-
-
프론트엔드 개발자를 위한 인터랙티브 웹 애니메이션 - HTML, CSS, JavaScript 기본기부터 React, Three.js를 활용한 3D 애니메이션까지
김영민 지음 / 영진.com(영진닷컴) / 2025년 7월
평점 :
*출판사를 통해 도서를 지원받아 작성한 리뷰입니다.
실무에서 바로 써먹는 애니메이션 기법들이 담긴 책
왜 이 책을 읽게 되었나
과거에 에디터 개발을 하면서 사용자 경험을 개선하기 위한 인터랙티브 요소들을 고민 했었던 터라 이 책이 눈에 띄었습니다. 특히 에디터의 기반을 canvas로 변경하면서 웹이 해주던걸 수동으로 구현해야하면서 인터렉션한 개념들이 많이 필요했었습니다.
책의 구성과 첫인상
800페이지가 넘는 두께에 처음엔 좀 부담스러웠는데, 실제로는 앞의 절반 정도가 기초 문법 설명이라 빠르게 인터랙티브한 내용을 읽고 싶다면 뒷부분 부터 봐도 됩니다!! 다만 기초는 언제나 중요하니깐 읽어보는걸 추천합니다.
목차를 보면 단순히 애니메이션 라이브러리 사용법만 다루는 게 아니라, 웹 렌더링 원리부터 차근차근 설명하는 것이 마음에 들었습니다. 에디터 최적화 작업을 하면서 렌더링 성능이 얼마나 중요한지 몸소 체감했기 때문에 이런 내용들이 너무 반가웠습니다.
실무에 도움된 부분들
CSS 기반 애니메이션 최적화
현재 회사에서 텍스트 입력 시 캐럿 렌더링을 비동기로 처리하고 있는데, 이 책에서 CSS transform과 GPU 가속을 활용한 애니메이션 기법들을 보면서 캐럿 애니메이션도 더 부드럽게 개선할 수 있겠다는 아이디어를 얻었습니다.
라이브러리 없는 순수 JS 구현
6~10장에서 다루는 바닐라 JS 기반 인터랙티브 구현이 특히 유용했다. 협업 환경에서 다른 라이브러리들과의 충돌을 최소화하려면 순수 JS로 구현하는 게 안전한 경우가 많은데, 이런 실무적 고민이 잘 반영되어있었습니다.
(특히 에디터는 순수 js의 개념이 많이 들어가서 정말 많이 도움이 됐다)
Three.js와 WebGL 활용
마지막 챕터의 3D 관련 내용은 당장 써먹을 일은 없지만, 요즘 웹에서 3D가 트렌드인 만큼 미리 감을 잡아두기 좋았습니다! 특히 React와 함께 사용하는 예제가 있어서 실제 프로젝트에 적용할 때 참고하기 좋을 것 같습니다!
마무리
개인적으로는 에디터 개발하면서 고민했던 부분들에 대한 힌트를 많이 얻었다. 특히 텍스트 렌더링 최적화나 사용자 인터랙션 부분에서 적용해볼 만한 기법들이 많아서 만족합니다!!
실무에서 "이거 어떻게 구현하지?"라고 막막했던 순간들이 있었는데, 이 책 한 권이면 웬만한 인터랙티브 요소들은 해결할 수 있을 것 같습니다. 무엇보다 저자가 실무 경험을 바탕으로 꼭 필요한 내용들만 엄선해서 넣었다는 게 느껴집니다.