패스트캠퍼스 환급챌린지 18일차 미션 (2월 18일) : 인터랙티브 웹 강의 후기

서론

웹 개발자로서의 여정은 끝없는 학습과 발견의 연속이다. 최근 인터랙티브 웹 개발에 대한 나의 이해를 깊게 하기 위해 '캔버스와 Three.js를 활용한 인터랙티브 웹 개발'에 대한 강의를 들었다. 특히 이번 포스팅에서는 웹 페이지에 생동감을 불어넣는 '콘페티 이펙트' 제작에 대해 이야기하려 한다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

• 첫 번째 강의: 콘페티 이펙트의 핵심 원리
• 두 번째 강의: 콘페티 파티클 클래스 만들기

첫 번째 강의: 콘페티 이펙트의 핵심 원리

이 강의에서는 콘페티 이펙트를 구현하기 위한 캔버스의 기본 사용법을 배웠다. 특히 'canvas confetti' 라이브러리를 예로 들어 이펙트의 원리와 구현 방법을 상세히 설명했다. 라이브러리 사용 없이도 데모 사이트에서 보았던 School Pride 이펙트와 비슷한 결과를 직접 구현해보는 계획을 세우며 콘페티 이펙트의 원리와 기본적인 색종이 코드에 대해 배웠다.

두 번째 강의: 콘페티 파티클 클래스 만들기

이 강의는 실제 콘페티 파티클을 생성하고 애니메이션하는 클래스를 만드는 과정에 대해 배웠다. 각 콘페티 파티클이 랜덤한 방향과 속도로 발사되고, 색종이가 쏘아진 후 천천히 마찰과 중력의 영향을 받도록 하는 로직을 구현하는 것은 쉽지 않았지만 매우 유익한 도전이었다. 강의를 통해 개념을 이해하고, 실습을 통해 적용해보면서 이펙트의 실체가 눈앞에 펼쳐지는 것을 볼 수 있었다. 조금 아쉬운 점은 이번 강의가 끝나고 나서도 이펙트가 기대했던 것에 가깝지 않았는데, 다음 두 강의를 통해 나머지 콘페티 이펙트를 완벽히 구현할 수 있다고 들어서, 계속 강의를 들어보려 한다.

결론

콘페티 이펙트는 웹사이트에 축제의 분위기를 더하고 사용자 경험을 향상시키는 훌륭한 방법이다. 이번 강의를 통해 콘페티 이펙트의 기초부터 심화까지 단계별로 학습하며, 복잡한 원리를 이해하고 구현하는 법을 배웠다. 아직 완성도는 높지 않지만, 다음 강의를 통해 더 완벽한 이펙트를 구현할 수 있을 것으로 기대한다. 이러한 학습 과정은 웹 개발 능력을 한 단계 끌어올리는 데 큰 도움이 되었다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N