.gif)
해당 게시물은 애플 웹사이트 인터렉션 클론 강의를
수강한 내용을 바탕으로 작성되었습니다!
에어팟 프로 공식 홈페이지
https://www.apple.com/kr/airpods-pro/ 링크에서 확인할 수 있는 홈페이지의 인상깊은 특징이 있다면, 아래의 gif와 같이 사용자가 스크롤을 함에 따라서 동영상이 재생되는 비디오 인터랙션이다.
.gif)
마침 해당 내용에 대한 강의를 발견하였고, 똑같이 따라하는 것에 비해 새로운 내용으로 도전해 보는 것도 흥미로울 것 같아서 사랑하는 강아지의 영상과 사진을 활용하여 AirKong Pro를 제작해보기로 하였다.(총 소요 기간 2주)
AirKong Pro 첫번째 섹션
.gif)
아쉬운 점
실제 애플의 공식 홈페이지는 고화질의 영상을 각 프레임별로 캡쳐한 이미지를, 해당 섹션의 전체 스크롤 대비 현재 스크롤의 비율을 정수로 변환하여 해당 정수에 맞는 순서의 프레임을 보여주는 방식을 사용하고 있다. 에어콩의 첫번째 섹션의 영상 역시 고화질의 비디오였으나, 프레임별로 캡쳐를 하는 과정에서 영상 편집 프로그램이 없는 관계로 웹에서 무료로 프레임별 캡쳐를 진행하였는데, 해당과정에서 영상의 화질이 낮아진 점이 아쉽다.
AirKong Pro 세번째 세션
.gif)
AirKong Pro 네번째 세션
.gif)
어려웠던 점
예상외로 가장 어려웠던 부분이었다. canvas의 크기를 각각의 기기에 딱 맞게 맞추는 것이 어려웠기 때문인데, img를 잘라내는 부분을 최소화하면서 지나치게 사진이 늘어나지 않도록 하는 부분이 까다로웠다. 또한, 화면을 가득 채우는 순간의 scroll에 맞춰서 해당 canvas가 스크롤되어 올라가도록 하는 처리에도 어려움을 겪었다.
CanvasRenderingContext2D.drawImage() 에 대해 많이 배우게 되는 계기가 되었고, 완벽하지는 않을지라도 만족스러운 결과를 얻게 되었다.
AirKong Pro 로딩 화면
.gif)
배운 점
svg의 animation과 stroke-dasharray,stroke-dashoffset 기능을 활용하여, 3초 주기로 360도 회전을, 1초 주기로 하얀색의 stroke가 한바퀴를 돌도록 설정하였다. 막연히 gif를 활용할 것이라고 추측했는데, css에 이런 기능이 있다는 것도 알게 되었다.
AirKong Pro @ iphone 11 & ipad mini 5
iphone 11
.gif)
ipad mini 5
.gif)
매우 어설프긴 해도 각각의 환경에서 구동이 됨을 확인하였다.
더욱 세밀한 최적화를 위해서는 @media를 활용해야 할 것 같다.
짧은 후기
프로젝트라기엔 조금 허술하지만, 클론코딩 프로젝트 로서는 마음에 드는 뿌듯한 작품이 하나 완성되었다. 앞으로도 조금 더 시간을 들여 잔잔한 버그들을 수정해가며 더욱 완성도 있는 작품이 되었으면 한다. 가장 어렵고 답답했던 점은 resize를 스스로 반복하며 '이게 왜 안돼' 혹은 '이건 왜 돼'라고 생각하며 반응형 디자인을 적용하는 점이었는데, 아직도 완벽한 반응형은 아니지만 이는 스크롤을 활용하는 디자인이라는 점에서 실력이 많이 늘었다고 생각한다.
해당 project를 진행하며 배운 가장 큰 성과는 클론 코딩을 더 이상 무시하지 않게 되었다는 것이다. 물론, 이전에도 "클론 코딩은 그냥 따라하면 되는거 아니야?"와 같은 건방진 생각을 갖고있지는 않았지만, 완성된 화면을 보고, 어떤 원리로 이 화면이 구성되었는가를 상상하며 코드를 작성하는 경험은 훗날 디자이너의 디자인을 바탕으로 웹사이트를 구현하는 것과 비슷한 방식일 것이라는 생각이 들었다. 또한 클론코딩의 과정에서 특정 웹사이트를 그대로 베끼는 것이 아닌, 자신만의 방식으로 개인화 하는 방식을 통해 새로운 기능의 구현에도 유연하게 대처하는 능력이 길러진 것 같다.
