[Web] 투명도가 있는 애니메이션 포맷 고르기

웹페이지에 투명도 있는 애니메이션/동영상 넣기. 가장 효과적인 방법은 무엇일까요?

 

투명도가 없는 동영상이라면 고민할 것도 없이 video 태그와 함께 mp4를 사용하면 됩니다. 하지만 움짤과 같은 영상이고 투명도가 있다면 고민이 시작됩니다. 크로스 브라우징이 가능해야 할 것이고, 성능과 압축률이 좋아야 합니다. 이 모든 필요 사항을 실제 기기에서 테스트해서, 무엇을 사용하면 된다고 결론을 내려주면 얼마나 좋을까요? 그래서 이 포스팅을 하기로 했습니다.

 

결론부터 말씀드리면 APNG가 가장 괜찮습니다

사실 투명도가 있는 애니메이션, 동영상 포맷을 결정하는 데 있어 정답은 없었습니다. 왜냐하면 최선이 없기 때문입니다.  알려진 방법으로는 WebM, WebP, APNG, GIF, PNG를 여러 장 돌리기 등이 있습니다. IE브라우저는 PNG 돌리기를 제외하면 모든 방법이 통하지 않습니다. 다음은 여러 자료를 읽고 파악한 포맷 간 비교입니다. 대략적으로 각 포맷의 사양을 파악할 수 있습니다.

용량

• PNG 여러 장  >>>  GIF  >  APNG  >  WebP  >=  WebM

성능

• WebP  >=  WebM  >  APNG  >  GIF  >>  PNG 여러 장

호환성

• PNG 여러 장  =  GIF  >  APNG  >  WebP  >=  WebM

 

호환성 체크에서 관건은 Safari 브라우저였습니다. 아이폰 유저가 실전 상황에서 버그 보고를 가장 많이 했기 때문에 신경써서 체크했습니다. iPhone6와 7, 맥북에서 테스트했습니다. 여기서 iPhone6만 구버전 Safari를 이용했습니다.

https://caniuse.com/apng

Animated PNG (APNG) | Can I use... Support tables for HTML5, CSS3, etc

APNG는 무엇보다 사파리 구버전에서도 동작한다는 점이 가장 큰 메리트였습니다. 긴 영상이 아니면 용량도 봐줄 만한 정도입니다. GIF보다 용량이 낮으니 걱정할 것은 호환성밖에 없는 녀석입니다. WebM이 동작하지 않는 사파리였는데 APNG는 잘 동작했습니다. caniuse는 사파리가 2014년 이후 버전이면 동작한다고 말하고 있습니다.

 

 

반면 WebM은 2018년도 버전까지도 동작하지 않고 심저 2022년까지도 부분적으로만 지원합니다. WebM은 애초에 크롬 최적화로 나온 포맷이어서 기대를 접어야 할 것 같습니다. 

 

WebM 탈락

 

브라우저 호환성 비교표

 

WebP는 WebM보다는 사정이 낫습니다. 그렇다 해도 사파리 브라우저 풀 지원을 하지는 않는 상태입니다.

 

WebM은 78퍼센트로 불안정한 모습입니다. iOS에서는 대체로 호환되지 않는 것으로 확인했습니다.

 

APNG는 95.5%의 환경에서 사용 가능하면서, PNG 포맷 기반이므로 활용도가 그나마 높습니다. 모바일 오페라 미니 브라우저에서 점유율이 0.95% 깎였습니다. 부분적 호환은 아예 없습니다. 저에게는 p5.js에서 APNG를 제어할 수 있다는 점도 매력적으로 다가오네요.