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

서론

웹 개발 과정에서 애니메이션과 인터랙티브 요소는 사용자 경험을 풍부하게 하는 중요한 요소 중 하나다. 이번에는 웹 페이지에 즐거움과 축제의 분위기를 더해줄 수 있는 콘페티 이펙트를 만드는 새로운 챕터를 시작했다. 콘페티 이펙트는 이벤트나 축하의 순간을 더욱 돋보이게 해주는 시각적 요소로, 다채로운 색종이가 터지며 떨어지는 모습을 재현한다.

본론

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

• 첫 번째 강의: 콘페티 - 챕터 소개
• 두 번째 강의: 콘페티 - 기초 뼈대 구성하기

첫 번째 강의: 콘페티 - 챕터 소개

새로운 챕터의 시작은 항상 기대를 모으는 순간이다. 첫 번째 강의에서는 콘페티 이펙트에 대한 개요와 그 결과물을 미리 볼 수 있었다. 이번 강의에서는 코드 학습이나 직접적인 실습은 없었지만, 콘페티 이펙트를 구현하기 위한 챕터의 구성과 목차에 대해 설명을 듣는 것만으로도 앞으로의 학습에 대한 기대감을 높일 수 있었다.

 

두 번째 강의: 콘페티 - 기초 뼈대 구성하기

두 번째 강의에서는 콘페티 이펙트를 구현하기 위한 기본적인 준비 작업인 보일러 플레이트 구축에 초점을 맞췄다. 이전 강의들에서 배운 것처럼, 캔버스의 크기와 화질을 설정하고, 프레임 관리 방법을 배우는 것은 어느 프로젝트에서나 기본이 되는 중요한 단계다. 또한, 초기값과 업데이트 값을 관리하는 클래스의 구조화는 이펙트 구현의 효율성과 유지보수의 용이성을 높여준다. 이러한 기본 설정은 복잡한 인터랙션을 구현하는 데 있어 견고한 기반을 마련해준다.

단, 이번 강의에서 조금 달라진 점은 최대 화면을 canvas로 적용하기 때문에 성능을 생각해 dpr 값을 조건으로 만들어 dpr = window.devicePixelRatio > 1 ? 2 :1  성능이슈도 신경썼다는 부분에 있다.

결론

콘페티 이펙트 구현을 위한 새로운 챕터의 시작은 웹 개발 학습 과정에서 흥미로운 변화를 제공한다. 첫 번째 강의를 통해 콘페티 이펙트에 대한 전반적인 이해를 높이고, 두 번째 강의에서는 실제 구현을 위한 준비 작업을 진행함으로써, 앞으로의 프로젝트 구현에 대한 기대감을 더했다. 이러한 단계별 접근 방식은 복잡해 보이는 프로젝트도 체계적으로 학습할 수 있는 자신감을 준다. 콘페티 이펙트와 같은 시각적으로 매력적인 요소를 웹 페이지에 구현하는 능력은 사용자 경험을 풍부하게 하고, 웹 개발자로서의 포트폴리오를 강화하는 데 큰 도움이 될 것이다.

 

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

https://bit.ly/48sS29N