---
url: "/ko/bannerify/design/variants.md"
description: "Bannerify는 내보낼 때 CSV, XLSX, ZIP 스프레드시트의 행을 적용해 Figma 배너 세트 하나에서 HTML, GIF, MP4, WebM, APNG, WebP, 이미지, PDF 배너 변형을 여러 개 내보낼 수 있어요."
---

# 스프레드시트 데이터로 배너 변형 만들기

> Bannerify는 내보낼 때 CSV, XLSX, ZIP 스프레드시트의 행을 적용해 Figma 배너 세트 하나에서 HTML, GIF, MP4, WebM, APNG, WebP, 이미지, PDF 배너 변형을 여러 개 내보낼 수 있어요.

### 영상 튜토리얼: 스프레드시트로 Figma 배너 변형 일괄 내보내기

Bannerify 플러그인으로 스프레드시트에서 Figma 배너 변형을 HTML이나 동영상/GIF로 일괄 내보내는 방법을 보여 주는 영상이에요.
[Embedded media](https://www.youtube-nocookie.com/embed/EiVk0G0nEU4)

[Video](/assets/videos/bannerify/export/banner-spreadsheet-variants.mp4)

Bannerify는 내보낼 때 스프레드시트 행을 하나씩 적용해, 불러온 배너 세트 하나를 여러 변형으로 내보낼 수 있어요. Bannerify는 스프레드시트를 Figma 파일에 영구적으로 동기화하지 않아요. 대신 선택한 행을 임시 내보내기 입력값으로 사용해 배너 변형을 하나씩 생성한 다음, 그 파일들을 최종 `.zip`으로 묶어요.

배너 변형은 다음 내보내기에서 사용할 수 있어요.

- HTML 배너 내보내기
- GIF, MP4, WebM, 애니메이션 WebP, 애니메이션 PNG 내보내기
- 정적 JPG, PNG, WebP, PDF 내보내기

## 1단계: 스프레드시트 헤더를 Figma 레이어 이름과 일치시키기 {#step-1-match-your-spreadsheet-headers-to-figma-layer-names}

스프레드시트의 첫 번째 행에는 내보낼 때 Bannerify가 바꿀 레이어 이름이 들어가야 해요.

텍스트 레이어는 Figma 텍스트 레이어 이름을 스프레드시트 헤더와 정확히 같게 바꾸세요.

이미지 레이어는 이미지 채우기가 적용된 Figma 레이어 이름을 스프레드시트 헤더와 정확히 같게 바꾼 다음, 스프레드시트 셀에 이미지 URL, `data:image/...` 값, ZIP 에셋 참조 중 하나를 넣으세요.

임베드 미디어 레이어는 대상이 되는 텍스트가 아닌 Figma 레이어 이름을 스프레드시트 헤더와 정확히 같게 바꾼 다음, 스프레드시트 셀에 `.mp4`, `.webm`, `.json` 파일로 바로 연결되는 URL을 넣거나, 업로드한 ZIP 소스에 들어 있는 `.mp4`, `.webm`, `.json` 파일 참조를 넣으세요. 내보낼 때 Bannerify는 동영상 값을 임베드 동영상 소스로, `.json` 값을 임베드 Lottie 소스로 처리해요.

스타일 동기화는 대상 레이어 이름을 스프레드시트 헤더와 정확히 같게 바꾼 다음, 스프레드시트 셀에 `color:#ffffff; font-size:48px;`나 `display:none;` 같은 유효한 CSS 선언 문자열을 넣으세요.

표시 여부를 제어하려면 해당 스프레드시트 셀에 `_hide` 또는 `_show`를 넣어, 변형을 내보낼 때 그 Figma 레이어를 숨기거나 표시할 수도 있어요.

간단한 예시예요.

| headline | cta | logo | badge |
| --- | --- | --- | --- |
| Shop now pay later | Download the app | logo-1.png | display:none; |
| Split your payments | Learn more | logo-2.png | opacity:0.5; |
| Flexible spending power | Get started | logo-3.png | background-color:#111111; color:#ffffff; |

데이터 행 하나가 배너 변형 하나가 돼요.

> **Tip:** 일반 `.csv`나 `.xlsx` 대신 `.zip` 파일을 업로드하면, Bannerify는 ZIP 안에서 처음 찾은 스프레드시트 파일을 사용하고, 같은 ZIP에 함께 들어 있는 이미지와 `.mp4`, `.webm`, `.json` 미디어 파일도 파일 이름이나 상대 경로로 찾아 쓸 수 있어요.

## 지원되는 스프레드시트 셀 값 {#supported-spreadsheet-cell-values}

현재 Bannerify는 변형을 내보낼 때 다음 유형의 스프레드시트 값을 적용해요.

- 이름이 일치하는 Figma 텍스트 레이어용 일반 텍스트 값
- 이름이 일치하는 이미지 채우기 레이어용 이미지 참조:
  이미지 URL, `data:image/...` 값, 업로드한 ZIP에 함께 들어 있는 이미지 파일 참조
- 이름이 일치하는 임베드 미디어 레이어용 `.mp4`, `.webm`, `.json` 직접 URL
- 이름이 일치하는 임베드 미디어 레이어용, 업로드한 ZIP에 함께 들어 있는 `.mp4`, `.webm`, `.json` 파일 참조
- 이름이 일치하는 동기화 대상 레이어용 CSS 선언 문자열
- 이름이 일치하는 레이어용 `_hide` 및 `_show` 표시 여부 명령

스프레드시트로 표시 여부나 스타일을 제어하려면 `display:none;`, `opacity:0;`, `left:20px;`, `transform:translateX(40px);` 같은 CSS 값을 사용하세요.

현재 Bannerify가 스프레드시트 값에서 허용하는 CSS 속성은 다음과 같아요.

- `width`, `height`, `opacity`
- `background`, `background-image`, `background-color`
- `border-radius`, `border`, `border-left`, `border-right`, `border-top`, `border-bottom`, `border-color`, `border-width`
- `font-size`, `color`, `font-family`, `font-weight`, `text-transform`, `font-style`, `line-height`, `text-align`, `vertical-align`
- `display`, `flex-direction`, `gap`, `justify-content`, `align-items`
- `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
- `box-shadow`, `filter`, `transform`, `left`, `top`

## 2단계: CSV, XLSX, ZIP 파일 업로드 {#step-2-upload-your-csv-xlsx-or-zip-file}

Bannerify에서 **Variants** 패널을 열고 **Data Source** 섹션에 `.csv`, `.xlsx`, `.zip` 파일을 업로드하세요.

Bannerify가 파일을 읽고 나면 패널 왼쪽에 현재 스프레드시트의 미리보기가 표시돼요. 그래서 내보내기 전에 헤더와 행 값이 올바른지 확인할 수 있어요.

미리보기 표에서는 이미지 값이 썸네일로 강조되고, 동영상 값은 `Video Embed` 또는 `Video URL` 배지로, CSS 선언 값은 스타일 토큰으로, `_hide` / `_show` 값은 레이어 표시 여부 명령으로 표시돼요. 그래서 내보내기 전에 텍스트가 아닌 행을 한눈에 알아볼 수 있어요.

나중에 새 파일을 업로드하면 Bannerify는 현재 파일 기반 소스를 가장 최근 파일로 바꿔요.

## 3단계: 변형을 켜고 내보낼 행 선택 {#step-3-enable-variants-and-choose-which-rows-to-export}

스프레드시트를 불러왔으면 **Enable Banner Variants During Exports**를 켜세요.

표의 체크박스로 변형으로 내보낼 행을 정확히 고를 수 있어요.

- 표 헤더의 체크박스로 모든 행을 선택하거나 선택 해제하세요
- 각 행의 체크박스로 해당 변형을 포함하거나 제외하세요
- 내보낼 때는 체크한 행만 사용돼요

Bannerify는 저장된 스프레드시트 소스의 행 선택을 기억하므로, 플러그인을 다시 열어도 포함하거나 제외한 행이 그대로 유지돼요.

## 누락된 폰트와 내보내기 대체 동작 {#missing-fonts-and-export-fallback-behavior}

변형을 켜면 Bannerify는 내보내기 전에 선택한 배너에 누락된 폰트가 있는지 확인해요.

Figma에서 폰트가 누락된 레이어를 찾으면 Variants 패널에 경고를 표시해요. 이 경우 Bannerify는 깨진 스프레드시트 변형을 렌더링하는 대신 원본 배너를 내보내요.

## 변형 폴더와 파일 이름 자동 지정 {#automatic-variant-folder-and-file-naming}

**Export Folder Structure Naming**을 비워 두면 Bannerify가 내보내는 변형마다 이름을 자동으로 붙여요.

자동 규칙은 다음과 같아요.

1. 스프레드시트 변형과 함께 포함되는 원본 내보내기는 스프레드시트가 작으면 `row-0` 안에, 전체 행 수 때문에 0 채우기가 필요하면 `row-000` 안에 묶여요.
2. 변형 폴더 경로에는 스프레드시트에 `folder` 값이 있으면 그 값이 사용돼요.
3. `folder` 값이 없으면 작은 스프레드시트에서는 `row-1`, `row-2` 같은 이름을 대신 사용하고, 큰 세트에서는 `row-001`, `row-002`처럼 0을 채워요.
4. 내보낸 파일 이름에는 스프레드시트에 `name` 값이 있으면 그 값이 사용돼요.
5. `name` 값이 없으면 Bannerify는 내보낼 때 원래 Figma 배너 이름을 그대로 사용해요.

그래서 이름 필드를 비워 두면 다음과 같은 경로가 만들어질 수 있어요.

- `row-0/300x250_Homepage Hero`
- `product-launch/300x250_Homepage Hero`
- `row-003/300x250_Homepage Hero`

## 내보내기 폴더와 파일 이름 사용자 지정 {#customizing-export-folder-and-file-names}

**Export Folder Structure Naming**에 직접 템플릿을 입력하면 자동 이름 지정을 덮어쓸 수 있어요.

다음 중 하나를 사용하세요.

- `name-only-template`
- `folder/name-template`

마지막 `/` 앞부분은 변형 폴더 경로가 되고, 뒷부분은 내보낸 파일 이름이 돼요.

이름 템플릿만 입력하면 Bannerify는 그 결과값을 내보낸 항목의 경로로 사용해요. HTML 내보내기에서는 `#{Item_Name}`이 `summer-sale` 같은 폴더를 만들고 그 안에 `index.html`이 들어가요. 이미지나 동영상 내보내기에서는 `summer-sale.png`, `summer-sale.gif`, `summer-sale.mp4` 같은 파일이 만들어져요.

### 스프레드시트 헤더 플레이스홀더 사용 {#using-spreadsheet-header-placeholders}

스프레드시트 헤더는 다음과 같이 감싸서 동적 토큰으로 사용할 수 있어요.

- `#{headline}`
- `#{cta}`
- `#{campaign}`
- `#{product_name}`

헤더에 공백이나 문장 부호가 있으면 밑줄로 정규화한 형태도 지원돼요. 예를 들어 `CTA Label`이라는 헤더는 `#{CTA Label}` 또는 `#{cta_label}`로 사용할 수 있어요.

### Bannerify 기본 플레이스홀더 사용 {#using-bannerify-s-built-in-placeholders}

Bannerify는 몇 가지 기본 제공 값도 지원해요.

- `#{row_number}`: 현재 행 번호(`1`부터 시작)
- `#{row_index}`: 0부터 시작하는 행 인덱스
- `#{figma_name}`: Figma 배너 이름
- `#{figma_width}`: 배너 너비
- `#{figma_height}`: 배너 높이
- `#{figma_size}`: `300x250` 같은 배너 크기
- `#{source}`: 스프레드시트 소스 이름
- `#{source_slug}`: 소스 이름을 슬러그로 바꾼 값
- `#{platform}`: 현재 내보내기 플랫폼

예시:

- `#{campaign}/#{figma_size}_#{figma_name}`
- `#{row_number}_#{headline}`
- `exports/#{campaign}/#{figma_name}`
- `exports/#{row_number}_#{figma_size}`

> **Tip:** 스프레드시트 헤더가 `name`이나 `folder`처럼 기본 토큰 이름과 겹친다면 `#{csv_name}`이나 `#{csv_folder}`로 스프레드시트의 원래 값을 명시적으로 참조할 수 있어요.

## ZIP 구조와 미리보기 페이지 동작 {#zip-structure-and-preview-page-behavior}

변형을 켜면 Bannerify는 최종 `.zip` 파일 안에서 각 행을 자체 변형 폴더로 내보내요.

HTML 내보내기에서는 생성된 미리보기 `index.html`이 각 변형 배너의 내보낸 경로를 자동으로 가리켜요.

GIF, MP4, WebM, 애니메이션 WebP, 애니메이션 PNG, 정적 이미지 같은 캔버스 기반 내보내기에서도 미리보기 `index.html`은 같은 변형 폴더와 파일 이름 규칙을 따라요.

즉, 미리보기 페이지는 다음 항목과 항상 일치해요.

- 선택한 스프레드시트 행
- 사용자 지정 폴더 및 파일 이름 템플릿
- `row`, `folder`, `name`을 기준으로 한 자동 대체 경로

## 스프레드시트 미디어 파일이 묶이는 방식 {#how-spreadsheet-media-files-are-packaged}

스프레드시트 행이 임베드 미디어 레이어를 바꾸면, Bannerify는 소스 유형에 따라 미디어를 처리해요.

- `.mp4`, `.webm`, `.json` 직접 URL은 내보낸 HTML 배너에 원격 URL로 남아요
- ZIP에 함께 들어 있는 `.mp4`, `.webm`, `.json` 파일은 내보낸 각 HTML 배너 폴더로 복사되어 로컬로 참조돼요
- GIF, MP4, WebM, 애니메이션 WebP, 애니메이션 PNG 같은 캔버스 기반 내보내기에서는 렌더링할 때 원격 미디어 URL이나 ZIP 미디어 파일을 읽은 다음, 그 임시 미디어 소스를 내보낼 프레임에 사용해요

Bannerify는 이런 스프레드시트 미디어 값을 내보낼 때만 적용해요. Figma 레이어에 저장된 원래 미디어 URL을 영구적으로 덮어쓰지 않아요.

## 실전 팁 {#practical-tips}

- 스프레드시트 헤더는 짧고 알아보기 쉽게 지으세요
- 초안 행은 삭제하지 말고 행 체크박스로 제외하세요
- 스프레드시트와 함께 로컬 이미지 에셋이나 로컬 `.mp4`, `.webm`, `.json` 미디어 파일을 묶고 싶다면 ZIP 소스를 사용하세요
- `.mp4`, `.webm`, `.json` 파일이 이미 온라인에 호스팅되어 있다면 직접 미디어 URL을 사용하세요
- GIF 파일을 바꿀 때는 이미지 채우기 레이어를 사용하세요. 현재 임베드 미디어 변형은 `.mp4`, `.webm`, `.json`을 지원해요
- 사용자 지정 폴더 구조가 필요하지 않다면 이름 필드는 비워 두세요
- 새 이름 템플릿을 도입한다면 먼저 하나만 내보내 테스트해 보세요