프로젝트 후기 - 홈 개편

이번 인센스 출시에 맞춰, 홈 섹션을 인센스 제품에 초점을 맞춰 개편하는 프로젝트를 담당하게 되었다. 새롭게 적용해보는 라이브러리, css가 많아 정리를 해본다. 또 생각보다 디바이스 별 대응하는걸로 애를 먹었는데 이것도 정리를 해본다.

패럴랙스 스크롤

기존 웹 사이트에 적용되어 있던 주된 애니메이션은 VisibilitySensor 라이브러리를 사용해서 맵핑 된 HTML 요소가 보이는지 감지해서 보여지는 경우 애니메이션을 적용하는 식이 였다. 유저의 스크롤에 반응하여 인터랙티브하게 애니메이션이 적용되는 거 같았지만 사실 상 요소가 뷰에 보여지는지를 판단하는 것으로 그렇게 보기는 어려웠다. 이번엔 좀 더 유저와 인터랙티브한 효과를 주기 위해 패럴랙스 스크롤 기법을 사용하였다.

• GSAP 패럴랙스에 대해 튜토리얼을 찾아보던 중 가장 많이 쓰이는 라이브러리로 GSAP을 사용하기에 선택하였다. 내가 원하는 스크롤 트리거 선택 가능, 반응형으로 분기를 나눠서 적용가능한 점, 꽤 다양한 기능을 제공 하는 점(일부는 유료이다.)에서 너무 만족스러운 라이브러리였다. 공식문서만 봐도 굉장히 다양한 기능을 제공하는데 사용법이 간단해서 쉽게 적용 가능했다.
• background-attachment 해당 속성은 백그라운드 이미지를 적용했을 때 사용 가능한 속성이다. 속성 값으로 fixed 를 주게 되면 패럴랙스 효과가 적용된 것 처럼 보인다. 배경 이미지가 고정적으로 깔리고 스크롤에 따라 요소가 움직이는 것 처럼 보여 css로만으로 간단하게 패럴랙스 효과를 줄 수 있다. 해당 속성은 모바일 지원이 되지 않아 모바일에선 적용이 불가능하다는 단점이 있다. (모바일에서 이미지를 고정된 배경으로 사용하는 것이 성능상 매우 좋지 않다고 한다.)

iOS 대응

이번 웹 배포는 iOS 관련 이슈가 생각보다 많아서 이슈 해결하는데도 애 먹었다. 새로 배포된 iOS 15.0.2 버젼에서 확인 안되는 문제점들이 많아서 해당 버젼에 대응하는 데도 해결책을 찾고 적용하기까지 어려움이 있었지만 지금은 다 대응이 되어서 다행이다.

• fixed 비디오 가장 큰 문제는 홈섹션 상단에 자동재생되는 비디오가 있고 position: fixed 스타일이 적용되어 배경에 깔린 것 처럼 보여지게 하였는데 iOS 15.0.2 에서만 비디오가 나타나지 않는 문제점이 있었다. 스택오버플로우와 apple 포럼을 찾아본 결과 video 태그에 직접적으로 position 속성이 주어지는 경우 발생하는 이슈로 wrapper 역할을 하는 div 태그로 감싸주어 div 태그에 위치 속성을 적용해주었다.
• 스크롤링 이슈 GSAP 라이브러리를 사용하여 패럴랙스 스크롤을 적용하고 애니매이션을 확인하던 시점에 모바일에선 스크롤링이 굉장히 버벅이는 이슈가 발생하였다. 당연히 무거운 리소스가 추가되어 해당 문제가 일어난 것으로 생각하고 자바스크립트 코드만을 바라보고 있었다. 다른 새로운 라이브러리를 사용하여 앱과 같은 스크롤링도 적용해보고 스크롤을 조정하는 부분의 성능을 어떻게 개선하면 좋을지 해결책을 찾다가 못찾아서 결국 하나씩 걷어가며 원점으로 돌아갈때 CSS 문제인 것을 발견하였다. SOLUTION: Scroll trapped issue on iOS - sticky scroll, overflow css fix 위의 글을 발견하고 코드를 확인해보니 스크롤이 맵핑된 부모 요소에 overflow: hidden 이 적용된 것을 확인하고 걷어내니 스크롤 버벅이는 문제는 사라졌다.

느낀점

• 반응형 웹 반응형 웹으로 개발이 진행되다 보니 각 디바이스 별 지원이 되는 스타일을 적용해야하고 안되는 경우 다른식으로 적용을 해봐야 되었다. 그 전엔 다양한 애니메이션을 적용해보지 않아 웹 개발 후 모바일로 확인할 시에 크게 다른 점이 없었지만 이번엔 개발을 진행하면서 로컬주소로 바로바로 모바일로 확인하며 작업을 했다. 디바이스 별로 애니메이션 속도의 조절에 따라 보여지는게 다르고 브라우저별로도 대응해야 할 점이 많아 이번 프로젝트를 진행하며 좀 더 확장된 범위로도 생각해 볼 수 있던 기회였다.
• 애니메이션 자연스러운 경험을 제공하기 위해 적절한 애니메이션 값을 찾는 것은 매우 힘든 작업이였다. 레퍼런스는 무궁무진하게 많지만 다 각각의 디자인이 있고 기획에 맞춰져 적용이 된 것으로 원하는 적절한 값을 찾기란 어려운 점이였다.
• webGL 레퍼런스를 찾아보던 중 더 그래픽 적인 애니메이션 효과를 주기위해선 webGL 라이브러리를 사용하여 줄 수 있다는 것을 찾았다. 이 부분은 공부를 해서 개인 포폴 사이트 던 추후 디벨롭 될 부분이던 적용해보고 싶다.