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

Bannerify 플러그인으로 스프레드시트에서 Figma 배너 변형을 HTML이나 동영상/GIF로 일괄 내보내는 방법을 보여 주는 영상이에요.

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

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

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

1단계: 스프레드시트 헤더를 Figma 레이어 이름과 일치시키기

스프레드시트의 첫 번째 행에는 내보낼 때 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;

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

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

지원되는 스프레드시트 셀 값

현재 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 파일 업로드

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

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

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

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

3단계: 변형을 켜고 내보낼 행 선택

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

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

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

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

누락된 폰트와 내보내기 대체 동작

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

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

변형 폴더와 파일 이름 자동 지정

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

내보내기 폴더와 파일 이름 사용자 지정

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 같은 파일이 만들어져요.

스프레드시트 헤더 플레이스홀더 사용

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

• #{headline}
• #{cta}
• #{campaign}
• #{product_name}

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

Bannerify 기본 플레이스홀더 사용

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}

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

ZIP 구조와 미리보기 페이지 동작

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

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

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

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

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

스프레드시트 미디어 파일이 묶이는 방식

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

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

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

실전 팁

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