--- url: "/ko/emailify/content/gifs.md" description: "컴퓨터에 있는 애니메이션 .gif 파일을 이메일 디자인에 인라인 이미지(Column 안)나 배경 이미지(Row, Hero, Wrapper)로 추가할 수 있어요." --- # 이메일 디자인에 애니메이션 GIF 추가 > 컴퓨터에 있는 애니메이션 .gif 파일을 이메일 디자인에 인라인 이미지(Column 안)나 배경 이미지(Row, Hero, Wrapper)로 추가할 수 있어요. ### 영상 튜토리얼: Figma에서 애니메이션 GIF를 추가해 HTML 이메일로 내보내기 Emailify 플러그인으로 이메일 디자인에 애니메이션 GIF를 추가하고, Figma에서 바로 쓸 수 있는 반응형 HTML 이메일을 내보내는 방법을 보여 주는 영상이에요. [Embedded media](https://www.youtube-nocookie.com/embed/Jmy2Tuzzwjg) > **Warning:** 애니메이션 GIF 이미지를 업로드하려면 Emailify Pro 라이선스가 필요해요. > **Note:** 플러그인의 무료 체험 버전을 사용하고 있다면 GIF는 정적 이미지로 업로드돼요. 또는 **Upload** 토글을 **off**로 설정한 상태에서 **Export HTML** 옵션을 사용하면 애니메이션 `.gif` 파일을 HTML 이메일과 함께 로컬에 저장해 다운로드할 수 있어요. ## Column 레이어 안에 애니메이션 GIF를 콘텐츠 이미지로 추가 {#add-an-animated-gif-as-a-content-image-inside-your-column-layers} [Video](/assets/videos/emailify/content/inline-animated-gif.mp4) 컴퓨터에 있는 `.gif` 파일을 아무 **Column** 레이어로 끌어다 놓으면 Figma 이미지 콘텐츠 레이어로 추가돼요. GIF 품질을 높게 유지하려면 레이어 크기를 비례에 맞게 조정해(Figma 레이어 크기를 조정할 때 **Shift** 키를 누른 채로) 원래 가로세로 비율을 유지하세요. 그래야 Emailify가 내보낼 때 원본 GIF 파일 데이터를 사용할 수 있어요. Figma 레이어의 가로세로 비율을 원본 GIF와 다르게 바꾸면, Emailify가 잘린 이미지 영역에 맞추기 위해 GIF 프레임을 완전히 새로운 `.gif` 파일로 다시 만들어야 해요(HTML 이메일 클라이언트는 CSS 자르기를 지원하지 않기 때문이에요). 그러면 GIF 파일 크기가 커지고 내보내기 시간도 길어져요. ## 내보낸 GIF가 원본 GIF보다 큰 이유는 무엇인가요? {#why-is-my-exported-gif-larger-than-the-original-gif} Figma에서 GIF 레이어의 가로세로 비율을 바꾸면, 내보낸 이메일이 잘린 이미지 영역과 일치하도록 Emailify가 GIF 프레임을 새 `.gif` 파일로 다시 만들어야 해요. HTML 이메일 클라이언트는 Figma가 미리 보여 주는 방식으로 GIF에 CSS 자르기를 적용하지 못하기 때문에, 프레임을 다시 만들면 최종 파일 크기가 커지고 내보내기가 느려질 수 있어요. 내보낸 GIF를 원본 파일 크기에 가깝게 유지하려면 GIF 크기를 비례에 맞게 조정하고 원래 가로세로 비율을 유지하세요. > **Tip:** 플러그인 헤더의 Settings 버튼을 사용해 이미지에 [대체 텍스트](/ko/emailify/content/alt-text) 속성을 설정하거나 [클릭할 수 있는 URL 링크](/ko/emailify/content/link-images)를 추가할 수 있어요. > **Note:** Emailify는 GIF에 투명한 배경이 있는지 자동으로 감지하려고 해요. GIF에 투명도가 꼭 필요한데 플러그인이 스스로 감지하지 못한다면, Figma 레이어 이름 아무 곳에나 **Transparent**라는 단어를 넣으세요(예: `My Layer Name - Transparent`). 그러면 투명한 배경을 켠 상태로 강제로 내보내져요. GIF 파일 형식은 불투명도 0% 또는 100%만 지원하고 그 사이 값은 지원하지 않아요. 그래서 완전히 불투명하게 보이는 요소 뒤에 완전히 투명한 배경이 있는 애니메이션 GIF는 만들 수 있어요. 즉 레이어는 완전히 투명하거나 완전히 불투명해야 해요. 불투명도가 50%보다 낮은 레이어는 투명해지고, 50%보다 높은 레이어는 불투명해져요. ## Row, Hero, Wrapper 레이어에 애니메이션 GIF를 배경 이미지로 추가 {#add-an-animated-gif-as-a-background-image-on-a-row-hero-or-wrapper-layer} [Video](/assets/videos/emailify/content/gif-background-image.mp4) *실제* 서식 있는 텍스트 콘텐츠 뒤에 애니메이션 GIF를 배경 이미지로 써야 한다면, 컴퓨터에 있는 `.gif` 파일을 Row, Hero, Wrapper 프레임의 Figma 채우기로 끌어다 놓으세요. 그러면 프레임 배경에 이미지 채우기로 설정돼요. 이 프레임에 있는 다른 Figma 채우기(예: 색상/그라디언트 오버레이)도 최종 `.gif` 내보내기에 포함돼요. 이 방법의 장점은 프레임 안의 콘텐츠 레이어가 애니메이션 GIF 배경 위에서 HTML 이메일 내보내기에 개별 서식 있는 콘텐츠 레이어로 그대로 렌더링된다는 거예요. > **Note:** Emailify는 GIF에 투명한 배경이 있는지 자동으로 감지하려고 해요. GIF에 투명도가 꼭 필요한데 플러그인이 스스로 감지하지 못한다면, Figma 레이어 이름 아무 곳에나 **Transparent**라는 단어를 넣으세요(예: `My Layer Name - Transparent`). 그러면 투명한 배경을 켠 상태로 강제로 내보내져요. GIF 파일 형식은 불투명도 0% 또는 100%만 지원하고 그 사이 값은 지원하지 않아요. 그래서 완전히 불투명하게 보이는 요소 뒤에 완전히 투명한 배경이 있는 애니메이션 GIF는 만들 수 있어요. 즉 레이어는 완전히 투명하거나 완전히 불투명해야 해요. 불투명도가 50%보다 낮은 레이어는 투명해지고, 50%보다 높은 레이어는 불투명해져요. > **Warning:** **Outlook의 애니메이션 GIF:** 대부분의 이메일 클라이언트는 [애니메이션 GIF를 지원](https://www.caniemail.com/features/image-gif/)하지만, *2019 이하 버전*의 Outlook은 애니메이션을 재생하지 않고 GIF의 **첫 프레임**만 표시해요. 정적 대체 이미지로도 제 역할을 하도록 첫 프레임에 핵심 이미지나 텍스트를 넣어 두세요. **Office 365의 Outlook**에서는 GIF가 자동으로 *세 번* 재생된 뒤 멈추고, 다시 재생할 수 있는 *재생 버튼*이 표시돼요.