---
url: "/ko/bannerify/design/scenes.md"
description: "같은 크기의 Figma 프레임 여러 개를 섹션으로 감싸 멀티 씬 배너 하나로 합치고, Bannerify로 애니메이션을 넣어 HTML, GIF, 동영상으로 내보내는 방법을 알아보세요."
---

# Figma 섹션으로 멀티 씬 배너 만들기

> 같은 크기의 Figma 프레임 여러 개를 섹션으로 감싸 멀티 씬 배너 하나로 합치고, Bannerify로 애니메이션을 넣어 HTML, GIF, 동영상으로 내보내는 방법을 알아보세요.

### 영상 튜토리얼: Figma에서 멀티 씬 애니메이션 배너 만들기

Bannerify 플러그인으로 Figma에서 멀티 씬 애니메이션 배너를 만들고 HTML이나 동영상으로 내보내는 방법을 보여 주는 영상이에요.
[Embedded media](https://www.youtube-nocookie.com/embed/_RJoxtwDC04)

## 멀티 씬 배너란? {#what-are-multi-scene-banners}

기본적으로 Bannerify는 최상위 Figma 프레임 하나하나를 별도의 배너로 처리해요.

**Use Figma sections as multi-scene banners**를 켜면 Bannerify는 **Figma 섹션** 하나를 배너 하나로 처리하고, 그 섹션 안에 있는 같은 크기의 프레임을 같은 타임라인의 개별 씬으로 처리해요.

배너 하나를 내보내면서 여러 크리에이티브 상태나 메시지를 순서대로 보여 주고 싶을 때 딱 맞아요.

Bannerify는 섹션 안의 Figma 시각적 프레임 레이어 순서를 따르므로, Figma에서 씬 프레임을 옮기면 배너를 새로 고치고 다시 불러온 뒤 Bannerify의 씬 순서도 바뀌어요.

## 빠른 설정 {#quick-setup}

1. 평소처럼 Figma에서 배너 프레임을 만드세요.
2. 배너 하나의 씬으로 쓸 프레임을 선택하세요.
3. 마우스 오른쪽 버튼을 클릭하고 **Wrap in new section**을 선택하세요.
4. Bannerify에서 **Refresh All Banners**를 클릭해 불러오기 화면으로 돌아가세요.
5. **Use Figma sections as multi-scene banners**를 켜세요.
6. **Load Checked Banners**(또는 **Load All Banners**)를 클릭하세요.

이제 섹션마다 배너가 하나씩 보이고, 타임라인의 레이어가 씬별로 묶여 있을 거예요.

## 단계별 워크플로 {#step-by-step-workflow}

### 1. Bannerify 실행 {#_1-run-bannerify}

Figma 플러그인에서 Bannerify를 여세요.
자주 사용한다면 **Saved plugins** 목록에 저장해 두고 빠르게 실행하세요.

### 2. 기본 동작 확인(선택 사항) {#_2-confirm-default-behavior-optional}

섹션 모드를 켜기 전에는 Bannerify가 최상위 프레임을 각각 별도의 배너로 불러와요.

원본 프레임이 제대로 인식되는지 확인할 때 유용해요.

### 3. 씬 프레임을 섹션으로 감싸기 {#_3-wrap-scene-frames-in-a-section}

멀티 씬 배너 하나로 합칠 프레임을 모두 선택한 뒤 다음 메뉴를 사용하세요.

**Right click -> Wrap in new section**

이제 이 섹션이 섹션 모드에서 하나의 배너 컨테이너가 돼요.

### 4. 다시 불러오고 섹션 모드로 전환 {#_4-reload-and-switch-to-sections-mode}

Bannerify에서 **Refresh All Banners**를 클릭한 뒤 다음 옵션을 켜세요.

**Use Figma sections as multi-scene banners**

이제 Bannerify가 개별 프레임 대신 섹션을 스캔해요.

### 5. 섹션 배너 불러오기 {#_5-load-section-banners}

**Load Checked Banners** 또는 **Load All Banners**를 클릭하세요.

이제 다음 항목이 보여요.
- 섹션마다 배너 하나
- 타임라인의 씬 그룹(Scene 1, Scene 2, Scene 3 등)
- 씬을 반영한 레이어 레이블과 컨트롤

> **Tip:** Scene 3을 Scene 2보다 먼저 보여 주거나 Scene 1을 맨 끝으로 옮기고 싶다면, 섹션 안에서 씬 프레임을 원하는 Figma 시각적 프레임 레이어 순서로 옮긴 다음 Bannerify에서 섹션을 새로 고치고 다시 불러오세요.

### 6. 씬 순서에 맞게 타임라인 길이 조정 {#_6-adjust-timeline-length-for-scene-sequencing}

지금 씬이 서로 겹친다면 타임라인 길이를 늘리고(예: `5s`에서 `15s`로) **Update Timeline Length**를 클릭하세요.

그런 다음 길어진 타임라인에서 각 씬이 차례로 등장하고 퇴장하도록 레이어 타이밍을 조정하세요.

타임라인 길이를 바꾸면 멀티 씬 배너를 포함해 미리보기와 GIF/동영상 내보내기에 바로 적용돼요. 길이를 바꾼 뒤 배너를 다시 불러올 필요가 없어요.

> **Tip:** 레이어를 하나씩 조정하는 대신 그룹으로 묶인 씬 타이밍 컨트롤을 사용하면 씬 타이밍 블록을 더 빠르게 옮길 수 있어요.

### 7. 미리보기 및 내보내기 {#_7-preview-and-export}

미리보기 재생으로 씬 순서와 타이밍을 확인한 다음, 필요에 따라 내보내세요.

- 광고/플랫폼 코드 패키지용 **HTML** 내보내기
- 애니메이션 이미지 출력용 **GIF** 내보내기
- 동영상 결과물용 **MP4/Video** 내보내기

섹션 안의 모든 씬은 하나로 합쳐진 배너 시퀀스로 내보내져요.

## 여러 크기와 여러 섹션 다루기 {#working-with-multiple-sizes-and-multiple-sections}

섹션을 복제해 배너 크기나 변형을 더 만들 수 있어요.

새로 고치면 Bannerify가 각 섹션을 별도의 배너로 불러오고, 배너마다 자체 씬 세트가 들어 있어요.
그래서 여러 크기와 멀티 씬 변형을 한 번에 일괄로 내보낼 수 있어요.

## 중요한 조건: 씬 프레임의 크기가 같아야 해요 {#important-requirement-scene-frames-must-match-dimensions}

프레임이 같은 배너의 씬으로 처리되려면 섹션 안에서 크기가 완전히 같아야 해요.

프레임 하나라도 1px만 달라도 Bannerify가 그 프레임을 섹션의 씬 세트에서 제외할 수 있어요.

> **Warning:** 예: 프레임 두 개가 `269x250`이고 하나가 `268x250`이면 Bannerify는 크기가 일치하는 프레임만 씬으로 불러올 수 있어요.

이런 경우에는 다음과 같이 하세요.

1. 섹션 안의 모든 씬 프레임을 너비와 높이가 정확히 같게 맞추세요.
2. 배너를 새로 고치세요.
3. 섹션 배너를 다시 불러오세요.

## 문제 해결 체크리스트 {#troubleshooting-checklist}

- **일부 씬만 불러와져요**: 섹션 안의 모든 프레임 크기가 같은지 확인하세요.
- **섹션 변경 사항이 반영되지 않아요**: **Refresh All Banners**를 클릭하고 다시 불러오세요.
- **씬 순서가 틀려요**: Figma 섹션 안에서 프레임 순서를 바꾼 다음 **Refresh All Banners**를 클릭하고 다시 불러오세요.
- **씬이 너무 많이 겹쳐요**: 타임라인 길이를 늘리고 타이밍을 다시 배분하세요.
- **내보낸 결과가 미리보기와 달라요**: 타임라인을 바꾼 뒤 레이어 타이밍과 씬 순서를 다시 확인하세요.

## 요약 {#summary}

Bannerify에서 Figma 섹션을 사용하면 모든 것을 거대한 프레임 하나에 억지로 넣지 않고도 길고 이야기가 있는 배너 시퀀스를 가장 빠르게 만들 수 있어요.

각 씬을 일반 프레임으로 디자인하고, 섹션으로 감싸고, 섹션 모드를 켠 다음, 하나로 합쳐진 배너로 애니메이션을 넣고 내보내세요.