이메일의 애니메이션 PNG: GIF의 대안?

애니메이션 이미지는 2019년 최고의 이메일 디자인 트렌드 중 하나입니다 . 전 세계의 이메일 마케팅 담당자는 캠페인에 움직임을 추가하기를 원하며 가장 인기 있는 방법은 애니메이션 GIF의 기능을 사용하는 것입니다.

그러나 애니메이션 GIF가 이미지에 움직임을 추가할 수 있는 유일한 파일 유형 은 아닙니다 . 애니메이션 이동식 네트워크 그래픽(APNG)도 탐색할 수 있는 옵션입니다.

이메일에서 APNG를 사용하는 이유

애니메이션 PNG는 이름에서 알 수 있듯이 움직임을 도입하기 위해 결합된 PNG 모음입니다. 따라서 APNG를 특별하게 만드는 요소를 이해하려면 간단한 PNG의 특성을 이해하는 것이 중요합니다.

PNG 형식에는 PNG-8 및 PNG-24의 두 가지 유형이 있습니다. PNG-8 형식은 최대 256색으로 저장된다는 점에서 GIF와 유사합니다. PNG-24 형식은 수백만 가지 색상 을 표시할 수 있습니다. 따라서 애니메이션의 품질이 떨어지는 경우가 많은 GIF의 제한된 색상에 비해 APNG를 사용하면 전체 색상 깊이 를 사용할 수 있습니다 . 이렇게 하면 특히 다양한 색상의 사진을 사용할 때 이미지가 더 선명해 보이지만 고품질에는 항상 대가가 따릅니다. 파일 크기를 주의 깊게 관찰하지 않으면 PNG가 상당히 커질 수 있습니다. 많은 파일을 사용하여 APNG를 만드는 경우 파일 크기가 크면 이메일 로드 시간에 부정적인 영향을 줄 수 있습니다.

또한 GIF와 달리 APNG를 사용하면 투명도 작업을 할 수 있습니다 . GIF는 투명하게 제대로 처리되지 않아 투명한 배경에서 설정될 때 요소 주위에 거친 흰색 가장자리를 적용합니다.

왜 투명한 배경 위에 애니메이션을 사용하고 싶습니까?

이메일의 투명성 및 애니메이션: Litmus의 10월 뉴스레터에 포함된 APNG

올해 할로윈을 주제로 한 10월 뉴스레터를 위해 우리는 독자들에게 밝은 디자인에서 어둡고 으스스한 디자인으로 이메일을 변경하여 "불을 끌" 기회를 주고 싶었습니다. 또한 추가로 으스스한 느낌을 주기 위해 어둠 속에서 무서운 눈을 깜박거리고 유령이 떠다니고 끈적거림이 발생하도록 애니메이션을 포함하기로 결정했습니다. 단, 조명이 꺼진 경우에만 가능합니다.

밝은 버전의 이메일에서 애니메이션을 숨기기 위해 밝은 버전에서 배치된 배경과 동일한 색상으로 애니메이션을 디자인했습니다. 구독자가 "불을 끄면" 배경색이 바뀌었고 놀랍게도 우리의 으스스한 애니메이션이 보입니다!

이 트릭이 작동하려면 애니메이션이 투명한 배경에서 작동해야 했습니다. 이것이 바로 GIF를 사용하는 것이 우리에게 선택 사항이 아닌 이유입니다. 우리는 당신이 혼란을 보니 불이 켜져있을 때 우리의 숨겨진 그래픽을 노출 한 것 우리 일러스트레이션, 주변 사람들 흰색 가장자리를 볼 줄하는 GIF를 사용했다. 반면에 애니메이션 PNG는 투명도 문제를 완벽하게 처리합니다.

CSS 애니메이션 키프레이밍을 사용하여 PNG의 스프라이트 시트에 애니메이션을 적용하여 이 문제를 해결하는 대체 전술을 고려했습니다 . 그러나 이 프로젝트의 맥락에서 각 그래픽에 관련된 CSS의 양은 너무 많은 코드를 포함하는 이메일을 초래했을 것입니다. 그리고 더욱 중요한 것은 애니메이션 PNG에 대한 이메일 클라이언트 지원이 실제로 최근 몇 년 동안 CSS 애니메이션 에 대한 지원을 추월했다는 점 입니다.

APNG에 대한 이메일 클라이언트 지원

많은 인기 있는 이메일 클라이언트는 APNG를 완벽하게 지원합니다. 가장 문제가 되는 예외는 Gmail(웹메일 클라이언트 및 모바일 앱 모두), Outlook.com 및 Windows용 Outlook입니다. 이러한 이메일 클라이언트는 애니메이션의 첫 번째 프레임만 표시합니다.

애니메이션 PNG는 다음에서 완전히 지원됩니다.

• 애플 메일
• iOS
• 삼성 메일
• 아웃룩(맥OS)
• 아웃룩닷컴
• Outlook.com 앱
• AOL
• AOL 앱
• 야후
• 야후 앱

첫 번째 프레임만 다음 위치에 표시됩니다.

• 지메일
• 지메일 앱
• 아웃룩(윈도우)

이메일 캠페인을 위한 애니메이션 PNG를 만드는 방법

현재 Adobe Photoshop 또는 Adobe Animate와 같은 소프트웨어에서 애니메이션을 APNG로 저장할 수 없으므로 애니메이션을 만들려면 추가 도구가 필요합니다. 뉴스레터용 애니메이션 PNG를 만든 방법은 다음과 같습니다.

1. Adobe CC에서 애니메이션을 만들고 각 프레임을 PNG로 저장

GIF 또는 APNG에 관계없이 Adobe Animate를 사용하여 애니메이션을 만듭니다. 그러나 차이점은 Adobe Animate가 APNG 파일을 내보내는 기본 옵션을 제공하지 않는다는 것입니다. 대신 각 프레임을 단일 PNG로 내보내야 합니다. 애니메이션을 만든 후 내보내기 > 동영상 내보내기 로 이동하고 드롭다운 메뉴에서 "PNG 시퀀스" 를 선택합니다.

Photoshop의 프로세스는 매우 유사합니다. 파일 > 내보내기 > 비디오 렌더링으로 이동합니다. 비디오 렌더링 창의 드롭다운에서 "Photoshop Image Sequence" 를 선택하고 형식으로 PNG 를 선택합니다. png가 투명하도록 하려면 한 단계 더 수행해야 합니다. 렌더링 옵션 상자의 "알파 채널" 드롭다운에서 "스트레이트 - 무광택" 을 선택합니다. 이미지를 저장할 위치를 선택했으면 렌더링 버튼을 누르십시오.

2. 개별 PNG를 APNG로 결합

이제 개별 이미지 파일을 APNG로 조합할 차례입니다!

PNG 애니메이터 는 OS 사용자인 경우 Apple App Store에서 저렴한 가격으로 구입할 수 있는 훌륭한 소프트웨어입니다. 무료 대안 은 유사한 기능을 제공하는 ezgif.com 의 애니메이션 PNG 메이커입니다 .

우리는 온라인 도구를 사용하여 파일을 완성하기로 결정했습니다. 여기에서 최종 파일에서 필요하지 않은 프레임을 제외하고 각 프레임에 필요한 시간을 설정할 수 있었습니다.

3. 이메일에 사용할 APNG 파일 크기 최적화

GIF와 마찬가지로 APNG도 빠르게 무거워질 수 있습니다. 색상과 사용되는 프레임 수를 줄이면 파일 크기를 작게 유지하는 데 도움이 됩니다. 표준 zlib 압축은 우리 파일에서 작동하는 유일한 옵션인 것처럼 보였고 일단 Make APNG! 버튼을 클릭하면 다운로드하기 전에 애니메이션과 해당 파일 크기의 예를 볼 수 있습니다. 다운로드하기 전에 속도를 변경하거나 프레임을 몇 개 더 제거하는 등의 추가 변경 작업을 수행할 수 있는 좋은 기회입니다.

이메일에 사용할 이미지 파일을 업로드하기 전에 조금 더 압축할 수 있었습니다. 투명도와 애니메이션을 유지하면서 메타데이터를 제거하고 색상을 줄여 파일 크기를 줄이는 TinyPNG를 통해 APNG 를 실행했습니다 . 전체 이미지 파일 크기가 943kb에서 243kb로 줄어들어 파일 크기가 74% 이상 줄어들었습니다! 모든 PNG 압축 도구가 애니메이션을 보존하는 것은 아니므로 이미지가 처리된 후 작업을 다시 확인하십시오.

그리고 그게 다야! 이제 다른 이미지 유형으로 작업하는 것처럼 이메일에 APNG를 추가할 준비가 되었습니다. 실제 뉴스레터 전체를 보려면 여기에서 보거나 Litmus Builder 에서 코드를 확인하세요 .

이메일에서 APNG를 사용하는 것에 대해 어떻게 생각하십니까?

이메일 캠페인에 애니메이션 PNG를 사용한 적이 있습니까? 파일을 만들고 파일 크기를 작게 유지하는 데 사용하는 도구는 무엇입니까? 귀하의 경험에 대해 듣고 싶습니다. 아래 의견에 학습 내용을 공유하십시오.