패스트캠퍼스 환급챌린지 16일차 미션 (2월 16일) : 인터랙티브 웹 강의 후기
서론
웹 개발 공부를 계속해 나가며, 오늘은 지난 번에 배운 LG카운트다운 인터랙션의 클론코딩 실습을 진행했다. 이번 과정은 실제로 코드를 작성하며 인터랙션을 구현하는 실습 위주의 학습이었다. 특히, 작은 점들을 활용해 동적이고 시각적으로 매력적인 효과를 만들어내는 과정은 매우 흥미로웠다.
본론
환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 이번에도 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.
- 첫 번째 강의: 불꽃놀이 - 파티클 배치하기
- 두 번째 강의: 불꽃놀이 - 파티클 애니메이션 구현
첫 번째 강의: 파티클 배치하기
이번 첫 번째 강의에서는 JavaScript를 활용하여 파티클 시스템을 구현하는 방법을 배웠다. 우리가 이전 강의에서 준비한 클래스 구조를 바탕으로, Particle 클래스 내에서 constructor, update, draw 함수들을 정의하고 구현하는 방법을 실습했다. 특히, draw 함수에서는 캔버스의 컨텍스트(ctx)를 사용하여 beginPath, arc, fillStyle, fill, closePath 등의 메소드를 사용해 실제로 화면에 점을 그리는 과정을 배웠다. 이렇게 생성된 점들을 캔버스 위의 랜덤한 위치에 배치하면서, 시각적으로 흥미로운 효과를 만들어내는 방법을 학습했다.
두 번째 강의: 파티클 애니메이션 구현
두 번째 강의에서는 이전에 배치한 점들을 활용하여 동적인 애니메이션을 만드는 방법에 대해 배웠다. 점들이 시계 방향으로 회전하며 점점 커지는 애니메이션을 구현하기 위해, Math.cos, Math.sin, Math.PI 등의 수학 함수를 사용하는 방법을 배웠다. 처음에는 이러한 수학적 계산이 어렵게 느껴졌지만, 천천히 하나씩 따라해보니 예상한 대로의 결과를 얻을 수 있었고, 이 과정에서 많은 만족감을 느꼈다.
결론
LG카운트다운 인터랙션 클론코딩을 통해, 실제로 인터랙티브한 웹 요소를 구현해보는 경험을 했다. 이번 실습을 통해 JavaScript와 캔버스 API를 활용한 복잡한 인터랙션의 구현 방법에 대해 심도 깊게 이해할 수 있었다. 특히, 복잡해 보이는 수학적 계산을 코드로 옮겨내면서, 웹 개발에 있어 수학적 사고의 중요성을 다시 한 번 깨닫게 되었다. 앞으로도 이러한 실습을 통해 더욱 다양하고 복잡한 인터랙션을 구현할 수 있는 능력을 키워나가고자 한다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.