이미지몬스터 팀은 서비스의 가치 제안을 단순한 문자의 나열이 아닌 디자인적인 메세지가 들어간 에니메이션 형태의 랜딩페이지를 원했고 리뉴얼 기획은 순조롭게 마무리 되었다 또한 최고의 영상팀(?)인 자체 영상팀에 의뢰해 멋진 에니메이션까지 만드는데 성공했다. 이제 개발팀에 의뢰해 적용만 하면 되는 문제였다.
처음에는 Mp4 동영상을 직접 랜딩페이지에 넣는 방법으로 적용하였지만 문제가 발생하였다. 배경색으로 넣은 부분과 동영상 배경이 미묘하게 색이 차이가 나는 문제였다 … 폭풍 구글링 시작이다 😑
Stack Over Flow 등 구글링을 통해 문제는 GPU 에 따른 Color Preference 의 차이와 브라우저별로 영상을 렌더링 하는 방식에서 발생하는 문제라는것을 찾아냈지만 해결책은 Global 하게 적용될 만한 솔루션이 없었다. (적용하기 뭔가 너무 복잡했음…😥)
두번째 시도한 방법은 영상의 배경을 그냥 투명으로 만들면 되지 않을까 해서 구글링을 통해 구글에서 만든 Alpha(투명) 영역의 Data 를 가지고 있는 영상 포맷인 WebM 파일의 포맷이 있다는것을 찾아냈다.
하지만 또 다른 시련이 있었으니… 사파리를 지원하지 않는다는것이였다.(구글이 사파리의 기본 검색엔진이 되기 위해 한해에도 천문학적 돈을 애플에 지불하는걸로 아는데 .. 이부분은 애플이 양보하기 싫은듯 하다)이미지몬스터는 Mac & Windows 를 모두 지원해야하는 서비스임을 감안했을때 이는 수용할 수 없는 큰 단점이였다.
다른 접근이 필요했다. 조금 더 획기적인 솔루션이…Canvas 기술을 활용해 동영상을 넣는것은 가능했지만 랜딩페이지가 매우 무거워질 수 있기 때문에 가장 마지막으로 고려한 옵션이였고 그부분은 일단 제외하고 다른 방법을 알아보았다.
구글링 + 구글링으로 Bodymovin 이라는 AE 플러그인을 알게 되었는데 우리가 가진 모든 문제를 해결할 수 있을것으로 보이는 솔루션이였다.
성능적 이슈의 해결 그리고 백터에니메이션으로 사용자 ViewPort에 상관없이 호환이 가능하다는 점에서 우리에게 완벽한 솔루션으로 보였다.
하지만 시련은 끝나지 않았으니..
다음편에서 연재됩니다.
가입하기
