영상 튜토리얼: Figma에서 멀티 씬 애니메이션 배너 만들기
Bannerify 플러그인으로 Figma에서 멀티 씬 애니메이션 배너를 만들고 HTML이나 동영상으로 내보내는 방법을 보여 주는 영상이에요.
멀티 씬 배너란?
기본적으로 Bannerify는 최상위 Figma 프레임 하나하나를 별도의 배너로 처리해요.
Use Figma sections as multi-scene banners를 켜면 Bannerify는 Figma 섹션 하나를 배너 하나로 처리하고, 그 섹션 안에 있는 같은 크기의 프레임을 같은 타임라인의 개별 씬으로 처리해요.
배너 하나를 내보내면서 여러 크리에이티브 상태나 메시지를 순서대로 보여 주고 싶을 때 딱 맞아요.
Bannerify는 섹션 안의 Figma 시각적 프레임 레이어 순서를 따르므로, Figma에서 씬 프레임을 옮기면 배너를 새로 고치고 다시 불러온 뒤 Bannerify의 씬 순서도 바뀌어요.
빠른 설정
- 평소처럼 Figma에서 배너 프레임을 만드세요.
- 배너 하나의 씬으로 쓸 프레임을 선택하세요.
- 마우스 오른쪽 버튼을 클릭하고 Wrap in new section을 선택하세요.
- Bannerify에서 Refresh All Banners를 클릭해 불러오기 화면으로 돌아가세요.
- Use Figma sections as multi-scene banners를 켜세요.
- Load Checked Banners(또는 Load All Banners)를 클릭하세요.
이제 섹션마다 배너가 하나씩 보이고, 타임라인의 레이어가 씬별로 묶여 있을 거예요.
단계별 워크플로
1. Bannerify 실행
Figma 플러그인에서 Bannerify를 여세요. 자주 사용한다면 Saved plugins 목록에 저장해 두고 빠르게 실행하세요.
2. 기본 동작 확인(선택 사항)
섹션 모드를 켜기 전에는 Bannerify가 최상위 프레임을 각각 별도의 배너로 불러와요.
원본 프레임이 제대로 인식되는지 확인할 때 유용해요.
3. 씬 프레임을 섹션으로 감싸기
멀티 씬 배너 하나로 합칠 프레임을 모두 선택한 뒤 다음 메뉴를 사용하세요.
Right click -> Wrap in new section
이제 이 섹션이 섹션 모드에서 하나의 배너 컨테이너가 돼요.
4. 다시 불러오고 섹션 모드로 전환
Bannerify에서 Refresh All Banners를 클릭한 뒤 다음 옵션을 켜세요.
Use Figma sections as multi-scene banners
이제 Bannerify가 개별 프레임 대신 섹션을 스캔해요.
5. 섹션 배너 불러오기
Load Checked Banners 또는 Load All Banners를 클릭하세요.
이제 다음 항목이 보여요.
- 섹션마다 배너 하나
- 타임라인의 씬 그룹(Scene 1, Scene 2, Scene 3 등)
- 씬을 반영한 레이어 레이블과 컨트롤
Scene 3을 Scene 2보다 먼저 보여 주거나 Scene 1을 맨 끝으로 옮기고 싶다면, 섹션 안에서 씬 프레임을 원하는 Figma 시각적 프레임 레이어 순서로 옮긴 다음 Bannerify에서 섹션을 새로 고치고 다시 불러오세요.
6. 씬 순서에 맞게 타임라인 길이 조정
지금 씬이 서로 겹친다면 타임라인 길이를 늘리고(예: 5s에서 15s로) Update Timeline Length를 클릭하세요.
그런 다음 길어진 타임라인에서 각 씬이 차례로 등장하고 퇴장하도록 레이어 타이밍을 조정하세요.
타임라인 길이를 바꾸면 멀티 씬 배너를 포함해 미리보기와 GIF/동영상 내보내기에 바로 적용돼요. 길이를 바꾼 뒤 배너를 다시 불러올 필요가 없어요.
레이어를 하나씩 조정하는 대신 그룹으로 묶인 씬 타이밍 컨트롤을 사용하면 씬 타이밍 블록을 더 빠르게 옮길 수 있어요.
7. 미리보기 및 내보내기
미리보기 재생으로 씬 순서와 타이밍을 확인한 다음, 필요에 따라 내보내세요.
- 광고/플랫폼 코드 패키지용 HTML 내보내기
- 애니메이션 이미지 출력용 GIF 내보내기
- 동영상 결과물용 MP4/Video 내보내기
섹션 안의 모든 씬은 하나로 합쳐진 배너 시퀀스로 내보내져요.
여러 크기와 여러 섹션 다루기
섹션을 복제해 배너 크기나 변형을 더 만들 수 있어요.
새로 고치면 Bannerify가 각 섹션을 별도의 배너로 불러오고, 배너마다 자체 씬 세트가 들어 있어요. 그래서 여러 크기와 멀티 씬 변형을 한 번에 일괄로 내보낼 수 있어요.
중요한 조건: 씬 프레임의 크기가 같아야 해요
프레임이 같은 배너의 씬으로 처리되려면 섹션 안에서 크기가 완전히 같아야 해요.
프레임 하나라도 1px만 달라도 Bannerify가 그 프레임을 섹션의 씬 세트에서 제외할 수 있어요.
예: 프레임 두 개가 269x250이고 하나가 268x250이면 Bannerify는 크기가 일치하는 프레임만 씬으로 불러올 수 있어요.
이런 경우에는 다음과 같이 하세요.
- 섹션 안의 모든 씬 프레임을 너비와 높이가 정확히 같게 맞추세요.
- 배너를 새로 고치세요.
- 섹션 배너를 다시 불러오세요.
문제 해결 체크리스트
- 일부 씬만 불러와져요: 섹션 안의 모든 프레임 크기가 같은지 확인하세요.
- 섹션 변경 사항이 반영되지 않아요: Refresh All Banners를 클릭하고 다시 불러오세요.
- 씬 순서가 틀려요: Figma 섹션 안에서 프레임 순서를 바꾼 다음 Refresh All Banners를 클릭하고 다시 불러오세요.
- 씬이 너무 많이 겹쳐요: 타임라인 길이를 늘리고 타이밍을 다시 배분하세요.
- 내보낸 결과가 미리보기와 달라요: 타임라인을 바꾼 뒤 레이어 타이밍과 씬 순서를 다시 확인하세요.
요약
Bannerify에서 Figma 섹션을 사용하면 모든 것을 거대한 프레임 하나에 억지로 넣지 않고도 길고 이야기가 있는 배너 시퀀스를 가장 빠르게 만들 수 있어요.
각 씬을 일반 프레임으로 디자인하고, 섹션으로 감싸고, 섹션 모드를 켠 다음, 하나로 합쳐진 배너로 애니메이션을 넣고 내보내세요.