요즘 디자인을 벤치마킹하기위해 자주 들어가는 사이트 중 하나인 Toss를 방문하는 중에 신기한 애니메이션을 발견했어요. 웹디자이너로서 개발자도구(F11 혹은 Ctrl + i)를 열어 이것저것 뜯어보는 일이 자주 있는데요. Video 혹은 gif라고 생각했던 이미지가 .png 였습니다. PNG가 움직이다니! 오늘은 움직이는 png에 대해서 알아보고자 합니다.
움직이는 PNG :: APNG
APNG(Animated Portable Network Graphics)는 PNG를 확장한 이미지 파일 포맷입니다. 이 포맷은 GIF와 비슷한 방법으로 애니메이션을 구현하면서 기존 PNG 파일과의 하위 호환성을 유지했기 때문에 GIF보다 더 높은 품질을 보여 줍니다. APNG 파일의 첫 프레임을 설정할 수 있으며, APNG가 지원되지 않는다고 해도 PNG파일로 대체됩니다. 대부분의 이미지 라이브러리, 뷰어, 편집기에서 APNG를 지원하지 않기 때문에 아직 대중적으로 사용되지는 않고 있습니다. (출처 : 위키백과)
| GIF | APNG | |
| 애니메이션 지원 | ✔ | ✔ |
| 24비트 컬러를 지원합니다. | ❌ | ✔ |
| 알파 채널을 지원합니다. | ❌ | ✔ |
| 용량 | 상대적으로 작다 | 크다 |
APNG, 써도될까? 지원 사양
그렇다면 APNG는 어떤 웹 브라우저의 어느 버전까지 지원하는지 찾아보았습니다. 현재 IE는 서비스가 종료된 상태이지만 IE를 꼭 지원해야하는 일부 업체 빼고는 PC와 모바일 모두 지원하는 것을 알 수 있습니다. 사실 IE까지 지원해야하는 시스템이나 솔루션을 디자인 할때는 하위 브라우저로 기준을 낮추는 것이아니라 대체 이미지를 사용하셔서 이용하시면 되겠습니다.
APNG 만드는 방법
APNG를 만드는 방법은 라인스티커 제작 가이드라인에서 추천하고 있는 유튜브를 참고하시면 되겠습니다.
혹은 Video를 직접 APNG 로 변환하는 컨버터를 이용하실 수 있습니다.
'CSS HTML JS' 카테고리의 다른 글
| <table><th><td>에 대각선 사선 순수 CSS만 이용해서 넣기 (0) | 2023.01.13 |
|---|---|
| CSS로 스크롤바 디자인 바꾸는 방법 :: Edge, Chrom, Opera AND Firefox까지! (0) | 2023.01.09 |
| CSS Flex 기본 개념 정리 (0) | 2022.10.08 |
| 스크롤 이동시키는 방법 :: $(window).scrollTop() :: scrollTo() (1) | 2022.10.07 |
| 순수 HTML CSS만을 이용한 타이핑 애니메이션 효과 만들기 (0) | 2022.02.14 |
