패스트캠퍼스 환급챌린지 19일차 미션 (2월 19일) : 인터랙티브 웹 강의 후기
서론
웹 개발 과정에서 사용자의 시각적 경험을 풍부하게 해주는 다양한 이펙트 중 콘페티 이펙트는 특히 인기가 많다. 콘페티 이펙트는 웹사이트의 성공적인 이벤트, 축하 메시지 또는 사용자의 성취를 축하하는 데 자주 사용된다. 지난 시간에는 콘페티 파티클의 기본을 다루며 기초적인 이펙트 제작을 시도했다. 그러나 디테일한 부분을 완성하지 못해 아쉬움이 남았다. 오늘은 그 아쉬움을 해소하고, 더 심화된 기능과 디테일을 추가하여 실감나는 콘페티 이펙트를 완성하는 과정에 대해 이야기하고자 한다.
본론
환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.
- 첫 번째 강의: 콘페티 - 콘페티 파티클 클래스 만들기 2
- 두 번째 강의: 콘페티 - 응용하기
첫 번째 강의: 콘페티 - 콘페티 파티클 클래스 만들기 2
이 강의에서는 콘페티 파티클의 색상과 크기를 랜덤하게 조절하는 방법부터 시작해, 파티클이 공중에서 회전하며 떨어지는 이펙트를 만드는 방법까지 배웠다. 색종이가 빙글빙글 돌면서 떨어지는 이펙트를 구현하기 위해 복잡한 수학 공식을 사용해야 했다. 이 과정에서 Math.cos 함수를 이용해 파티클의 회전 동작을 실현하는 방법을 배웠다. 수학적 개념을 코드로 옮기는 과정이 매우 도전적이었지만, 강사님의 친절한 설명 덕분에 어려움을 극복할 수 있었다.
두 번째 강의: 콘페티 - 응용하기
두 번째 강의에서는 콘페티 이펙트의 다양한 발사 방식을 배웠다. 양쪽에서 쏘아 올리는 방식뿐만 아니라, 아래에서 위로, 중앙에서 퍼져나가는 방식, 그리고 화면 전체에서 랜덤하게 폭발하는 방식 등을 구현하는 방법을 배웠다. 이러한 다양한 발사 방식은 콘페티 이펙트의 활용도를 대폭 높여주었다. 각각의 발사 방식을 구현하면서, 중력 가속도와 마찰과 같은 물리적 요소를 조절하는 방법도 함께 배울 수 있었다. 이를 통해 보다 리얼리틱한 콘페티 이펙트를 만드는 데 성공했다.
결론
콘페티 이펙트 제작을 통해 고급 웹 개발 기술을 실습하고, 다양한 물리적 요소를 웹에 적용하는 방법을 배울 수 있었다. 이 과정은 단순한 코딩 기술을 넘어서, 사용자의 경험을 풍부하게 만드는 창의적인 아이디어를 구현할 수 있는 능력을 키웠다. 또한, 수학과 물리학이 웹 개발에 얼마나 중요한 역할을 하는지 깨달을 수 있는 좋은 기회였다. 앞으로 이러한 지식을 바탕으로 더 많은 인터랙티브한 웹사이트를 만들어 나갈 것이다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.