홈 화면 애니메이션 화질 관련

문제 :
버스가 도로를 가로지르는 움직임을 넣기 위해 gif파일 삽입을 이용하였으나, gif로 변환하는 과정에서 화질저하가 발생해 화질이 너무 안좋아짐. 또한 페이지 실행후 gif로딩에 걸리는 시간때문에 페이지실행과 gif실행에 시간간격이 생김

+사진으로 보니 티가 별로 안나지만 실제로 화질 저하가 너무 심해서 완성도 자체가 떨어져 보였다

​

시도 :

• 어도비를 이용해 gif 화질 자체를 개선을 하려 했으나 유료임. (나 거지)

• 화질이 덜 깨지는 gif 변환 프로그램을 이용해봤으나 여전히 화질은 안좋음.

• gif에 들어가는 이미지 자체를 작게 줄여서 삽입 : 화질이 깨지는 부분의 면적을 아예 줄여보면 어떨까라는 발상으로 시도해봄. 티는 덜 났으나 여전히 근본적인 문제는 해결되지 않음

해결방법 :

내가 멍청이였다.. 그냥 배경을 background로 삽입 후 버스를 css애니메이션 기능을 이용해 도로를 달리는 것처럼 꾸몄다. 결국 gif로 넣을 것이 아니라 css애니메이션을 이용하면 간단히 해결될 방법이였는데... 아무리 프론트가 미숙했더라도 개발자로써 애니메이션 넣을 생각보다 gif넣을 생각을 먼저한게 진짜 어이가 없음

+애니메이션으로 넣으니 화질도 안깨지고 훨씬 깔끔해졌다!
+페이지로딩과 gif로딩 시간 다름으로 생기는 시간간격도 자동으로 해결되었음.