배너를 애니메이션 GIF 파일로 내보내기

타임라인에서 레이어 애니메이션을 다 만들었다면 배너를 애니메이션 GIF 파일로 내보낼 수 있어요.

영상 튜토리얼: Figma에서 배너를 GIF로 내보내기

Bannerify 플러그인으로 Figma에서 바로 게재할 수 있는 애니메이션 배너를 GIF로 내보내는 방법을 보여 주는 영상이에요.

배너가 마음에 들어서 GIF, WebM, MP4, 애니메이션 WebP 파일로 내보내고 싶다면 Bannerify 헤더의 Export to GIF/Video 버튼을 클릭하세요. GIF/동영상 내보내기 설정이 열려요.

내보내기에 배너 포함 또는 제외. 기본적으로 Bannerify에 배너로 불러온 Figma 파일의 프레임은 모두 내보내기에 포함돼요. 일부 배너를 제외하려면 해당 배너의 타임라인 헤더에서 Include In Export 스위치를 “끔”으로 바꾸세요. 그러면 그 배너의 타임라인이 숨겨지고, 어떤 내보내기에도 추가되지 않아요.

내보내기에 배너 포함 또는 제외. 기본적으로 Bannerify에 배너로 불러온 Figma 파일의 최상위 레이어는 모두 내보내기에 포함돼요. (선택한 배너를 다시 불러오지 않고) 일부 배너를 제외하려면 해당 배너의 타임라인 헤더에서 Include In Export 스위치를 “끔”으로 바꾸세요. 그러면 그 배너의 타임라인이 숨겨지고, 어떤 내보내기에도 추가되지 않아요.

초당 프레임 수 ​

Frames Per Second 선택 상자 옵션으로 GIF 내보내기의 프레임 속도를 바꿀 수 있어요. 다음 FPS 옵션 중에서 선택할 수 있어요.

  • 60 FPS (Ludicrous Mode)
  • 30 FPS (Ultra Smooth)
  • 24 FPS (Smooth)
  • 18 FPS (Less Smooth)
  • 12 FPS (Least Smooth)
  • 6 FPS (Jittery)

FPS가 높을수록 렌더링 시간이 길어져요. 프레임이 많을수록 내보내는 데 시간이 더 걸리고 파일 크기도 커져요. 예를 들어 5초 타임라인을 24 FPS로 내보내면 배너 하나당 120프레임이 렌더링돼요.

GIF 프레임 지연 시간은 10밀리초 단위로 설정돼요. Bannerify는 전체 재생 속도를 유지하기 위해 필요한 곳에서 프레임 지연 시간을 번갈아 적용해요. 그래서 개별 프레임의 길이가 조금씩 다를 수 있어요. GIF에 60 FPS를 선택하면, 브라우저가 올바른 속도로 재생할 수 있도록 Bannerify가 50 FPS로 샘플링해 내보내요. 내보내기 패널과 ZIP 파일 이름에는 실제 적용되는 50 FPS가 표시돼요. 선택한 프레임 속도는 MP4와 다른 형식에서는 그대로 유지돼요.

무손실 또는 손실 압축 ​

기본적으로 GIF는 무손실 압축으로 내보내져요. 눈에 띄는 품질 저하 없이 파일 크기를 작게 유지한다는 뜻이에요. 품질이 조금 떨어지더라도 GIF를 더 작게 만들어야 한다면 Lossless Compression 토글을 끄고, 사용자 지정 압축 품질 슬라이더를 필요에 맞게 조정하세요.

고급 디더링 옵션 설정. 잘 알고 있다면 GIF 내보내기 설정 패널의 이미지 디더링 드롭다운 옵션을 바꿔, GIF 내보내기에 사용할 디더링 유형을 직접 지정할 수 있어요.

전역 색상 팔레트 사용 ​

모든 프레임의 색상 팔레트가 같고(프레임 사이에 약간의 움직임이나 텍스트 변경 정도만 있는 경우) 색상 아티팩트가 보이는 GIF를 내보낸다면 All GIF frames have the same color palette 토글 옵션을 켜 보세요. GIF 첫 프레임의 색상 팔레트를 재사용해 GIF의 다른 모든 프레임에도 적용해요.

전역 색상 팔레트는 오류가 생길 수 있어요. GIF의 다른 프레임에 있는 일부 색상이 첫 프레임에 없으면 다른 문제가 생길 수 있으므로, 원치 않는 색상 아티팩트나 밴딩이 나타날 때 최후의 수단으로만 이 옵션을 사용하세요.

무한 반복 재생 ​

Infinite Loop 옵션을 켜면 애니메이션 타임라인을 끝없이 반복하는 GIF가 내보내져요. 이 설정을 끄면 GIF가 애니메이션 타임라인을 한 번 재생한 뒤 마지막 프레임에서 멈춰요. 이 옵션은 GIF 내보내기에만 적용돼요.

GIF에 투명 배경 지정 ​

기본적으로 GIF 내보내기에는 투명 배경이 포함되지 않아요. GIF에 투명도가 필요하다면 GIF 내보내기 설정에서 Has Transparent Background 토글을 켜세요.

최종 GIF .zip 파일 다운로드 ​

Bannerify가 배너 처리를 마치면 확인 메시지가 표시돼요. Download your .zip file 버튼을 클릭하면 내보낸 배너가 담긴 .zip 파일을 다운로드할 수 있어요.

Figma에서 다운로드한 파일 저장하기 Figma 데스크톱 앱을 사용한다면 파일을 다운로드하라는 창이 나타나요. 하지만 웹 브라우저에서 Figma를 사용한다면 기본적으로 파일이 컴퓨터에 자동으로 다운로드돼요(보통 컴퓨터의 Downloads 폴더에 저장돼요).

GIF .zip 파일 열기 ​

Figma에서 .zip 파일을 컴퓨터로 다운로드했다면 파일 탐색기에서 파일이 저장된 폴더를 여세요. 내보낸 .zip 파일을 더블클릭하면 압축이 풀리고, 배너를 원하는 대로 사용할 수 있어요.