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

서론

카카오 인재영입 페이지 클론코딩 프로젝트를 계속해서 진행하며, 이번에는 해당 챕터의 마지막 두 강의에 집중했다. 이 두 강의는 웹 페이지에서 스크롤에 따른 동적인 요소 제어와 사용자 인터랙션 구현에 초점을 맞추었다. 각 강의의 내용을 깊이 있게 이해하고 실습하면서, 웹 개발에서의 중요한 기능들을 실제 코드로 구현하는 경험을 했다.

본론

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

• 첫 번째 강의: 스크롤에 따라 재생되고 멈추는 비디오 제어의 심화
• 두 번째 강의: 스크롤 위치에 따른 position: fixed 인터랙션 구현

첫 번째 강의: 스크롤에 따라 재생되고 멈추는 비디오 제어의 심화

이 강의에서는 비디오 제어에 관한 기초 지식을 넘어, <video> 태그가 제공하는 다양한 속성들을 실제로 활용하여 복잡한 기능을 구현하는 방법을 배웠다. 핵심적으로 다룬 <video> 태그의 속성들은 다음과 같다:

• currentTime: 비디오의 현재 재생 시간을 설정하거나 반환한다. 스크롤 위치에 따라 비디오 재생 시점을 동적으로 조정할 수 있다.
• duration: 비디오의 전체 길이(시간)를 반환한다. 이를 통해 비디오의 재생이 끝난 시점을 파악할 수 있다.
• volume: 비디오의 볼륨을 조절한다. 사용자 인터랙션에 따라 소리 크기를 조정할 수 있는 기능을 추가할 수 있다.
• muted: 비디오의 음소거 상태를 제어한다. 스크롤 위치나 특정 이벤트 발생 시 자동으로 음소거를 할 수 있다.
• playbackRate: 비디오의 재생 속도를 조절한다. 독특한 사용자 경험을 위해 재생 속도를 다양하게 설정할 수 있다.
  이러한 속성들을 활용하여 스크롤 위치에 따라 비디오의 재생 상태, 볼륨, 재생 속도 등을 제어하는 다양한 인터랙션을 구현해보았다. 이 과정을 통해 웹 페이지에 더욱 동적이고 풍부한 사용자 경험을 제공하는 방법을 배웠다.

두 번째 강의: 스크롤 위치에 따른 position: fixed 인터랙션 구현

두 번째 강의에서는 특정 스크롤 위치에 도달했을 때 요소가 화면에 고정되는 position: fixed 속성을 이용한 인터랙션을 배웠다. 이 기법은 사용자가 스크롤을 내릴 때 요소가 마치 sticky처럼 화면에 고정되어 따라오는 효과를 만들어낸다. position: fixed와 함께 top, bottom, left, right 속성을 조합하여 요소의 위치를 정확하게 제어하는 방법을 배우며, 이를 통해 사용자의 주의를 끌 수 있는 중요한 페이지 요소들을 효과적으로 강조할 수 있게 되었다. 이 강의를 통해 다른 방식으로도 스크롤에 따른 인터랙션을 구현할 수 있다는 것을 배우며, 웹 개발의 다양한 가능성을 탐색하는 재미를 느꼈다.

 

결론

이번 클론코딩 프로젝트의 마지막 두 강의를 통해, 스크롤에 따른 비디오 제어와 position: fixed를 활용한 인터랙션 구현 기술을 심화 학습할 수 있었다. 이러한 기술들은 사용자와의 상호작용을 통해 웹 페이지에 생동감을 부여하고, 보다 직관적이고 흥미로운 사용자 경험을 제공하는 데 중요한 역할을 한다. 앞으로 이러한 지식을 바탕으로 더욱 창의적이고 독특한 웹사이트를 개발하는 데 활용할 계획이다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://bit.ly/48sS29N