-
-
프론트엔드 개발자를 위한 인터랙티브 웹 애니메이션 - HTML, CSS, JavaScript 기본기부터 React, Three.js를 활용한 3D 애니메이션까지
김영민 지음 / 영진.com(영진닷컴) / 2025년 7월
평점 :

출판사로부터 책을 제공받아 주관적으로 작성한 서평입니다.
평소에 백엔드 개발에만 집중하다 보니 프런트엔드는 항상 어려워 보였습니다. 특히 요즘 웹사이트들을 보면 애니메이션과 인터랙션이 많은데, 어떻게 만드는 건지 궁금했습니다. 그러던 중 『프런트엔드 개발자를 위한 웹 인터랙티브 애니메이션』을 만나게 되었습니다. 처음엔 또 다른 프런트엔드 책인가 싶었는데, 읽어보니 실무 중심으로 잘 구성되어 있더라고요. 가장 마음에 들었던 건 7개의 실전 프로젝트가 포함되어 있다는 점이었습니다. 각 프로젝트마다 QR 코드로 완성된 결과물을 미리 볼 수 있어서 '아, 이런 걸 만들 수 있구나!' 하면서 동기부여가 많이 되었습니다.
책 구성을 보면 HTML 문법, CSS 기초부터 시작해서 자바스크립트 DOM 조작, 리액트, 타입스크립트까지 다루고 있습니다. 개발 환경 설정부터 차근차근 설명해주니까 웹 개발이 처음인 분들도 따라하기 어렵지 않을 것 같습니다. 저는 기본기는 있어서 앞부분은 빠르게 훑고 바로 프로젝트 위주로 봤는데, 이런 식으로 활용할 수 있는 것도 좋았습니다.

개인적으로 가장 흥미로웠던 부분은 3D 애니메이션 관련 내용이었습니다. 예전에 카카오 춘식이가 3D로 움직이는 페이지를 보고 너무 신기해서 공부해보고 싶었는데, 당시에는 제대로 된 자료를 찾기 어려웠거든요. 유료 강의는 가격이 부담스러웠고, 인터넷에서 찾은 코드들은 너무 단편적이었습니다. 그런데 이 책에서는 WebGL, Three.js을 활용해서 직접 움직이는 도넛과 캐릭터를 만들어보는 프로젝트가 있어서 정말 재미있게 따라해볼 수 있었습니다. 물론 더 복잡하고 화려한 3D 애니메이션을 만들려면 추가 학습이 필요하겠지만, 입문용으로는 충분히 만족스러웠습니다. 로딩 페이지나 카드 슬라이드 같은 것들도 어떻게 구현되는지 원리를 알 수 있어서 좋았고요.
날씨 애플리케이션을 만드는 프로젝트도 인상적이었습니다. 외부 API 연동부터 시작해서 날씨에 따라 배경이 바뀌는 애니메이션, 다크 모드 구현까지 실무에서 바로 써먹을 수 있는 내용들이 담겨 있더라고요. API 키 발급받는 과정부터 친절하게 설명해주니까 처음 해보는 분들도 어렵지 않게 따라할 수 있을 것 같습니다.

책과 함께 무료로 제공되는 유튜브 강좌도 있습니다. 책만으로는 이해하기 어려운 부분들을 영상으로 보니까 훨씬 쉽게 이해할 수 있었어요. 핵심 내용을 짧은 시간에 효과적으로 설명해주시더라고요. 현업에서 많이 사용하는 리액트, 타입스크립트, Vite 같은 최신 도구들도 다루고 있어서 실무 활용도가 높다고 생각합니다. 바닐라 자바스크립트나 제이쿼리에서 그치지 않고 요즘 트렌드에 맞는 기술 스택을 다루니까 취업 준비하는 분들에게도 도움이 될 것 같아요.
아쉬운 점이 있다면, 코드 설명이 숫자로 구분되어 않아서 코드와 설명을 연결해서 보기가 조금 불편했습니다. 그리고 개인적으로는 포트폴리오나 이력서 페이지 만드는 프로젝트가 있었으면 더 좋았을 텐데 하는 아쉬움도 있었습니다. 웹 애니메이션과 인터랙티브 디자인에 관심 있는 분들에게는 추천할 만한 책입니다. 기초부터 차근차근 설명해주면서도 실무에서 바로 활용할 수 있는 내용들이 많아서 실용적이고, 프런트엔드 개발에 막 입문하신 분들이나 저처럼 백엔드 위주로 하다가 프런트엔드 역량을 키우고 싶은 분들께 도움이 될 것 같습니다.