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

서론

최근 진행된 인터넷 강의는 웹 개발의 세계에서 창의적인 요소를 추가하는 데 있어 매우 흥미로운 주제 두 가지를 다루었다. 첫 번째 강의에서는 애니메이션의 움직임을 미세 조정할 수 있는 cubic-bezier 함수에 대해 배우는 시간을 가졌고, 심지어 이를 더 쉽게 만들어주는 웹사이트까지 소개받았다.

두 번째 강의는 웹 페이지에 깊이감을 주는 페러렐 스크롤 기법과, 이를 활용한 '파이어워치' 게임 웹사이트 클론코딩 프로젝트의 소개였다. 이 두 강의를 통해, 웹 개발에서의 세심한 디테일과 창의적인 접근이 얼마나 중요한지 깊이 깨달을 수 있었다.

본론

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

• 첫 번째 강의: 404 에러 페이지 - 베지어 곡선 모델로 부드러운 애니메이션 적용
• 두 번째 강의: FireWatch 클론 코딩 - Parallax scrolling 기법

첫 번째 강의: 404 에러 페이지 - 베지어 곡선 모델로 부드러운 애니메이션 적용

첫 번째 강의에서는 애니메이션과 전환 효과에 있어 중요한 역할을 하는 cubic-bezier 함수에 초점을 맞췄다. cubic-bezier 함수는 애니메이션의 속도 곡선을 사용자 정의할 수 있게 해주어, 웹 페이지의 애니메이션을 더욱 자연스럽고, 매끄럽게 만들 수 있다. 강의에서는 이러한 함수를 직접 생성하고 조정할 수 있는 웹사이트를 소개함으로써, 이론뿐만 아니라 실제로 cubic-bezier 값을 생성하고 적용하는 방법을 배울 수 있었다. 이 과정을 통해, 단순히 코드를 작성하는 것 이상의, 사용자 경험을 풍부하게 만드는 데 필요한 세세한 조정의 중요성을 이해할 수 있었다.

두 번째 강의: FireWatch 클론 코딩 - Parallax scrolling 기법

두 번째 강의에서는 웹 페이지에 입체감을 부여하는 페러렐 스크롤 기법에 대해 소개하고, 이를 활용한 '파이어워치' 게임 웹사이트 클론코딩 프로젝트의 시작을 알렸다. 페러렐 스크롤은 사용자가 페이지를 스크롤할 때 배경이 여러 층으로 분리되어 각기 다른 속도로 움직이는 기법이다. 이를 통해 웹사이트에 심도와 움직임이 추가되어, 사용자가 보다 몰입할 수 있는 환경이 조성된다. 파이어워치 웹사이트 클론코딩을 통해, 실제로 어떻게 이러한 효과가 구현될 수 있는지를 배울 수 있는 기회였다.

결론

이 두 강의를 통해 배운 cubic-bezier 함수와 페러렐 스크롤 기법은 웹 개발에 있어서 세밀한 사용자 경험을 설계하는 데 매우 중요한 도구임을 깨달았다. 애니메이션의 세심한 조정에서부터 웹 페이지의 깊이감 추가에 이르기까지, 이러한 기술들은 사용자에게 보다 풍부하고 생동감 있는 웹 경험을 제공할 수 있게 해준다. 앞으로 이러한 지식을 바탕으로, 나만의 창의적이고 몰입도 높은 웹사이트를 만드는 데 도전해 볼 것이다. 이번 강의에서 배운 내용을 실제 프로젝트에 적용해보며, 웹 개발자로서 나아갈 길에 더 많은 가능성을 탐색해보고자 한다.

 

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

https://bit.ly/48sS29N