---
url: "/ko/bannerify/export/html.md"
description: "타임라인에서 레이어 애니메이션을 다 만들었다면 배너를 애니메이션 HTML 배너로 내보낼 수 있어요."
---
# 배너를 HTML로 내보내기
> 타임라인에서 레이어 애니메이션을 다 만들었다면 배너를 애니메이션 HTML 배너로 내보낼 수 있어요.
### 영상 튜토리얼: Figma에서 배너를 HTML/GSAP로 내보내기
Bannerify 플러그인으로 Figma에서 바로 게재할 수 있는 애니메이션 배너를 몇 초 만에 HTML/GreenSock(GSAP)으로 내보내는 방법을 보여 주는 영상이에요.
[Embedded media](https://www.youtube-nocookie.com/embed/SS2J6k5Wo7s)
### 영상 튜토리얼: Figma에서 여러 광고 플랫폼용 HTML 배너 내보내기
Bannerify 플러그인으로 Figma에서 클릭 한 번에 여러 광고 플랫폼용 애니메이션 HTML 배너를 내보내는 방법을 보여 주는 영상이에요.
[Embedded media](https://www.youtube-nocookie.com/embed/Q16MPp9YKjg)
[Video](/assets/videos/bannerify/export/html-export.mp4)
## HTML로 내보내기 {#exporting-to-html}
배너가 마음에 들어서 HTML로 내보내고 싶다면 Bannerify 헤더의 **Export to HTML** 버튼을 클릭하세요. HTML 내보내기 설정이 열려요.
HTML 내보내기 설정을 모두 마쳤다면, 내보내기 패널 아래쪽의 **Export _n_ Banners** 버튼을 클릭해 Figma에서 배너를 HTML로 내보내기 시작하세요.
Bannerify가 배너 처리를 마치면 확인 메시지가 표시돼요. **Download your .zip file** 버튼을 클릭하면 내보낸 배너가 담긴 `.zip` 파일을 다운로드할 수 있어요.
내보낸 배너 파일 이름에는 Figma 프레임 이름의 **Å, Ä, Ö, å, ä, ö** 같은 글자가 그대로 유지돼요. 내보내기 폴더 이름과 메인 ZIP 파일 이름도 악센트가 있는 글자를 지원해요. 다만 경로 구분 기호와 지원되지 않는 문장 부호는 여전히 프레임 파일 이름에서 제거돼요.
Figma에서 `.zip` 파일을 컴퓨터로 다운로드했다면 파일 탐색기에서 파일이 저장된 폴더를 여세요. 내보낸 `.zip` 파일을 **더블클릭**하면 압축이 풀리고, 배너를 원하는 대로 사용할 수 있어요.
> **Note:** **배너를 사용하거나 광고 플랫폼에 업로드하기 전에 먼저 내보낸 `.zip` 파일의 압축을 풀어 주세요**. 내보낸 .zip 파일에는 개별 배너가 모두 들어 있고, 그 안의 `_zips` 폴더에는 광고 플랫폼에 바로 업로드할 수 있도록 배너가 하나씩 미리 압축되어 있어요.
> **Warning:** **브라우저 광고 차단기 때문에 로컬 배너 미리보기가 제대로 재생되지 않을 수 있어요.** 내보낸 HTML 배너가 멈춘 것처럼 보이거나, 애니메이션되지 않거나, 브라우저 미리보기에서 다르게 동작한다면 다시 내보내기 전에 로컬 미리보기 파일에 대해 광고 차단기/개인정보 보호 확장 프로그램을 잠시 끄거나 다른 브라우저에서 테스트하세요.
HTML 출력 형식마다 설정과 패키지 요구 사항이 달라요. 내보내기 전에 [광고 플랫폼 옵션](/ko/bannerify/export/code-output) 가이드를 참고해 올바른 형식을 선택하세요.
> **Tip:** **Figma에서 다운로드한 파일 저장하기** Figma **데스크톱 앱**을 사용한다면 파일을 다운로드하라는 창이 나타나요. 하지만 **웹 브라우저**에서 Figma를 사용한다면 기본적으로 파일이 컴퓨터에 자동으로 다운로드돼요(보통 컴퓨터의 **Downloads** 폴더에 저장돼요).
> **Tip:** **여러 Figma 파일에서 내보내기 설정 재사용하기:** Export to HTML 설정 패널이 열려 있고 포커스된 상태에서 Ctrl + Shift + E를 누르면 현재 내보내기 설정이 `bannerify-export-settings.json`으로 저장돼요. 다른 Figma 파일에서 같은 패널을 열고 Ctrl + Shift + I를 누르면 그 JSON 파일을 찾아 현재 페이지에 설정을 적용할 수 있어요. Windows와 Mac 모두 Control 키를 사용하세요.
## 마스크 안의 사진 자동 자르기 {#automatic-cropping-of-masked-photos}
표준 HTML/CSS + GSAP 내보내기는 직사각형 또는 둥근 모서리 모션 마스크 안에 있는 적합한 JPEG 사진에서 사용되지 않는 영역을 자동으로 제거할 수 있습니다. Bannerify는 지원되는 **Zoom Pan Left** 및 **Zoom Pan Right** 애니메이션 전체에 필요한 영역을 작은 여유 공간과 함께 유지합니다. 정지 사진과 페이드에도 적용될 수 있습니다. Figma 레이어와 애니메이션 위치는 변경되지 않습니다.
방향별 Fade In/Out, Slide In/Out, Wipe In/Out, Instant Show/Hide 및 Scale Up/Down Center도 지원합니다. 진입 및 퇴장 애니메이션이 겹쳐 변형이 결합될 수 있는 경우 원본 이미지를 유지합니다.
이 최적화는 자동으로 적용되며 [이미지 압축 및 파일 크기 목표](/ko/bannerify/export/banner-size-optimization)와 별개입니다. 자른 파일이 더 작을 때만 이미지를 대체합니다. 절감량은 전체 애니메이션 동안 원본 사진의 어느 정도가 마스크 밖에 남는지에 따라 달라집니다.
지원하지 않는 애니메이션, 삽입한 사용자 지정 코드, Figma Motion, 회전되거나 효과가 적용된 이미지 및 다른 내보내기 형식은 원본 이미지를 유지합니다. 자르기에 실패해도 Bannerify는 원본 이미지를 사용하여 내보내기를 계속합니다.
스프레드시트에서 생성한 배리에이션은 각 행에 올바른 사진이 사용되도록 원본 이미지를 유지합니다. 원본 마스터 배너를 포함한 일반 배너에는 자동 자르기가 계속 적용될 수 있습니다.
## 표준 옵션 {#standard-options}
### 모든 배너에 1px 검은색 테두리 추가 {#adding-a-1px-black-border-to-all-banners}
1px 테두리 옵션을 켜면 모든 배너의 CSS에 `1px solid black` 테두리가 자동으로 포함돼요. 배너에 1px 검은색 테두리를 넣는 것을 선호하거나 요구하는 일부 광고 플랫폼에 유용해요.
### 모든 배너에 프리로더 애니메이션 추가 {#adding-a-preloader-animations-to-all-banners}
프리로더 옵션을 켜면 모든 배너의 HTML에 프리로더가 자동으로 포함돼요. 이 로딩 애니메이션은 웹 브라우저에서 배너의 이미지가 모두 로드될 때까지 표시돼요.
## 재생 옵션 {#playback-options}
### 배너 재생 횟수 설정 {#setting-the-number-of-times-to-play-through-banners}
이 옵션으로 모든 배너의 타임라인을 처음부터 끝까지 몇 번 재생할지 지정할 수 있어요. 기본값은 **1**이며, 배너가 애니메이션 타임라인을 처음부터 끝까지 **한 번** 재생한다는 뜻이에요.
숫자 입력란에 **6**처럼 더 큰 숫자를 입력해 바꿀 수 있어요. 그러면 모든 배너의 타임라인 애니메이션이 처음부터 끝까지 **6번** 재생돼요.
### 배너 무한 반복 {#infinitely-looping-your-banners}
**Infinitely loop all banners** 옵션을 켜면 모든 배너의 애니메이션 타임라인이 *끝없이* 반복 재생돼요.
## 배너마다 개별 .zip 파일 포함 {#include-individual-zip-files-for-each-banner}
**Include individual .zip files for each banner** 토글을 켜면 내보낸 파일에 `_zips`라는 폴더가 추가돼요. `_zips` 폴더에는 내보낸 배너마다 개별 zip 파일이 들어 있어요. 광고 플랫폼에서 배너마다 zip 파일을 업로드해야 한다면 유용하고 시간도 아낄 수 있어요.
> **Info:** **zip 파일에 backup.jpg 포함(선택 사항)** 각 zip 안에 `backup.jpg` 이미지 파일을 넣고 싶다면 **Add "backup.jpg" to individual zip files** 토글을 켜세요. 그러면 개별 zip 안에 `backup.jpg` 이미지가 포함돼요. 배너를 개별로 압축하면서 이 토글을 끄고 **Add "backup.jpg"** 토글*도* 켰다면, 모든 백업 이미지는 Bannerify가 내보낸 메인 `.zip` 파일의 루트 폴더 안에 있는 `_backups` 폴더에도 포함돼요.
## HTML 출력 형식 선택 {#choosing-an-html-output-format}
Bannerify는 플랫폼에 종속되지 않는 HTML, 플랫폼별 업로드 패키지, 반응형 레이아웃, 여러 일괄 형식을 내보낼 수 있어요. **Code Output Settings**의 각 옵션에는 [광고 플랫폼 옵션](/ko/bannerify/export/code-output)에 전용 가이드가 있으며, 설정, 클릭 처리, 패키지 구조, 테스트 참고 사항을 다뤄요.
## 내보내기에 배너 포함 또는 제외 {#including-or-excluding-banners-in-your-export}
기본적으로 Bannerify에 배너로 불러온 Figma 파일의 최상위 레이어는 모두 내보내기에 포함돼요. ([선택한 배너를 다시 불러오지](/ko/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners) 않고) 일부 배너를 제외하려면 해당 배너의 타임라인 헤더에서 **Include In Export** 스위치를 “끔”으로 바꾸세요. 그러면 그 배너의 타임라인이 숨겨지고, 어떤 내보내기에도 추가되지 않아요.
## 압축(minified) 코드 내보내기 {#minified-code-exports}
파일 크기를 최적화하기 위해 Bannerify는 기본적으로 내보내는 모든 코드를 압축(minify)하고, 배너마다 `.html` 파일 하나로 저장해요. 코드를 더 읽기 쉽게 하거나 `.html`, `.css`, `.js` 파일로 나눠야 한다면 코드 내보내기 옵션에서 **Minified** 토글을 끄세요.
## 텍스트를 SVG 이미지 대신 문단 태그로 내보내기 {#export-text-as-paragraph-tags-instead-of-svg-images}
기본적으로 Bannerify 타임라인의 텍스트 레이어는 SVG 이미지(이미지 태그 안)로 내보내지지만, **Export text as