이메일 디자인에 애니메이션 GIF 추가

컴퓨터에 있는 애니메이션 .gif 파일을 이메일 디자인에 인라인 이미지(Column 안)나 배경 이미지(Row, Hero, Wrapper)로 추가할 수 있어요.

영상 튜토리얼: Figma에서 애니메이션 GIF를 추가해 HTML 이메일로 내보내기

Emailify 플러그인으로 이메일 디자인에 애니메이션 GIF를 추가하고, Figma에서 바로 쓸 수 있는 반응형 HTML 이메일을 내보내는 방법을 보여 주는 영상이에요.

애니메이션 GIF 이미지를 업로드하려면 Emailify Pro 라이선스가 필요해요.

플러그인의 무료 체험 버전을 사용하고 있다면 GIF는 정적 이미지로 업로드돼요. 또는 Upload 토글을 off로 설정한 상태에서 Export HTML 옵션을 사용하면 애니메이션 .gif 파일을 HTML 이메일과 함께 로컬에 저장해 다운로드할 수 있어요.

Column 레이어 안에 애니메이션 GIF를 콘텐츠 이미지로 추가 ​

컴퓨터에 있는 .gif 파일을 아무 Column 레이어로 끌어다 놓으면 Figma 이미지 콘텐츠 레이어로 추가돼요.

GIF 품질을 높게 유지하려면 레이어 크기를 비례에 맞게 조정해(Figma 레이어 크기를 조정할 때 Shift 키를 누른 채로) 원래 가로세로 비율을 유지하세요. 그래야 Emailify가 내보낼 때 원본 GIF 파일 데이터를 사용할 수 있어요.

Figma 레이어의 가로세로 비율을 원본 GIF와 다르게 바꾸면, Emailify가 잘린 이미지 영역에 맞추기 위해 GIF 프레임을 완전히 새로운 .gif 파일로 다시 만들어야 해요(HTML 이메일 클라이언트는 CSS 자르기를 지원하지 않기 때문이에요). 그러면 GIF 파일 크기가 커지고 내보내기 시간도 길어져요.

내보낸 GIF가 원본 GIF보다 큰 이유는 무엇인가요? ​

Figma에서 GIF 레이어의 가로세로 비율을 바꾸면, 내보낸 이메일이 잘린 이미지 영역과 일치하도록 Emailify가 GIF 프레임을 새 .gif 파일로 다시 만들어야 해요. HTML 이메일 클라이언트는 Figma가 미리 보여 주는 방식으로 GIF에 CSS 자르기를 적용하지 못하기 때문에, 프레임을 다시 만들면 최종 파일 크기가 커지고 내보내기가 느려질 수 있어요.

내보낸 GIF를 원본 파일 크기에 가깝게 유지하려면 GIF 크기를 비례에 맞게 조정하고 원래 가로세로 비율을 유지하세요.

플러그인 헤더의 Settings 버튼을 사용해 이미지에 대체 텍스트 속성을 설정하거나 클릭할 수 있는 URL 링크를 추가할 수 있어요.

Emailify는 GIF에 투명한 배경이 있는지 자동으로 감지하려고 해요. GIF에 투명도가 꼭 필요한데 플러그인이 스스로 감지하지 못한다면, Figma 레이어 이름 아무 곳에나 Transparent라는 단어를 넣으세요(예: My Layer Name - Transparent). 그러면 투명한 배경을 켠 상태로 강제로 내보내져요.

GIF 파일 형식은 불투명도 0% 또는 100%만 지원하고 그 사이 값은 지원하지 않아요. 그래서 완전히 불투명하게 보이는 요소 뒤에 완전히 투명한 배경이 있는 애니메이션 GIF는 만들 수 있어요. 즉 레이어는 완전히 투명하거나 완전히 불투명해야 해요. 불투명도가 50%보다 낮은 레이어는 투명해지고, 50%보다 높은 레이어는 불투명해져요.

Row, Hero, Wrapper 레이어에 애니메이션 GIF를 배경 이미지로 추가 ​

실제 서식 있는 텍스트 콘텐츠 뒤에 애니메이션 GIF를 배경 이미지로 써야 한다면, 컴퓨터에 있는 .gif 파일을 Row, Hero, Wrapper 프레임의 Figma 채우기로 끌어다 놓으세요. 그러면 프레임 배경에 이미지 채우기로 설정돼요. 이 프레임에 있는 다른 Figma 채우기(예: 색상/그라디언트 오버레이)도 최종 .gif 내보내기에 포함돼요.

이 방법의 장점은 프레임 안의 콘텐츠 레이어가 애니메이션 GIF 배경 위에서 HTML 이메일 내보내기에 개별 서식 있는 콘텐츠 레이어로 그대로 렌더링된다는 거예요.

Emailify는 GIF에 투명한 배경이 있는지 자동으로 감지하려고 해요. GIF에 투명도가 꼭 필요한데 플러그인이 스스로 감지하지 못한다면, Figma 레이어 이름 아무 곳에나 Transparent라는 단어를 넣으세요(예: My Layer Name - Transparent). 그러면 투명한 배경을 켠 상태로 강제로 내보내져요.

GIF 파일 형식은 불투명도 0% 또는 100%만 지원하고 그 사이 값은 지원하지 않아요. 그래서 완전히 불투명하게 보이는 요소 뒤에 완전히 투명한 배경이 있는 애니메이션 GIF는 만들 수 있어요. 즉 레이어는 완전히 투명하거나 완전히 불투명해야 해요. 불투명도가 50%보다 낮은 레이어는 투명해지고, 50%보다 높은 레이어는 불투명해져요.

Outlook의 애니메이션 GIF: 대부분의 이메일 클라이언트는 애니메이션 GIF를 지원하지만, 2019 이하 버전의 Outlook은 애니메이션을 재생하지 않고 GIF의 첫 프레임만 표시해요. 정적 대체 이미지로도 제 역할을 하도록 첫 프레임에 핵심 이미지나 텍스트를 넣어 두세요. Office 365의 Outlook에서는 GIF가 자동으로 세 번 재생된 뒤 멈추고, 다시 재생할 수 있는 재생 버튼이 표시돼요.