기존 GIF 또는 MP4 편집

TinyImage로 GIF나 MP4를 불러와 크기 조정, 변형, 트리밍, 타이밍 조정을 하고 편집한 애니메이션을 내보내세요.

개별 Figma 레이어로 다시 만들지 않고 기존 애니메이션 GIF나 MP4를 편집하려면 TinyImage GIF 탭의 GIF Editor를 사용하세요.

영상 튜토리얼: Figma에서 바로 애니메이션 GIF 편집

이 영상에서는 TinyImage로 애니메이션 GIF를 편집하고, 합치고, 트리밍하고, 변형하고, 내보내는 방법을 보여 줘요.

GIF 또는 MP4 불러오기 ​

Figma Design에서 다음 중 하나를 선택하세요.

  • 애니메이션 GIF 채우기가 들어 있는 레이어
  • 중첩 수준과 관계없이 GIF 레이어가 하나 이상 들어 있는 프레임

이런 레이어를 선택한 상태로 GIF Editor를 열면 TinyImage가 자동으로 불러와요. 그렇지 않으면 Use selected Figma GIF layer를 선택하세요. Choose file from your computer를 선택해 로컬 GIF나 MP4를 불러올 수도 있어요.

프레임을 불러오면 TinyImage는 프레임에 보이는 레이어 스택을 모든 애니메이션 프레임에 합쳐 넣어요. 여기에는 중첩된 GIF 레이어 위아래에 있는 콘텐츠, 마스크, 효과, 다른 레이어가 포함돼요. 원래 Figma 프레임과 레이어는 바뀌지 않아요.

프레임에 GIF가 여러 개 있으면 TinyImage가 각 GIF의 프레임 변화를 하나의 편집 가능한 타임라인으로 동기화해요. 안정성을 위해 합쳐진 프레임 애니메이션은 최대 2분 길이, 합친 프레임 최대 500개까지 지원해요.

언제든 Reset을 선택하면 처음 불러온 GIF로 돌아가요.

내보내지 않은 변경 사항이 있는 GIF를 바꾸려고 하면 TinyImage가 먼저 경고해요. 큰 GIF를 불러오면 처리 경고도 표시돼요. GIF는 최대 2,000프레임, 최대 8,192px 크기, 최대 100MB의 소스 파일 크기를 지원해요.

MP4 파일은 최대 60초 길이, 100MB까지 지원해요. TinyImage는 동영상을 초당 10프레임으로 샘플링하며, 안정적인 편집을 위해 필요하면 매우 큰 동영상 크기를 자동으로 줄여요.

애니메이션 크기 조정 및 변형 ​

출력 너비나 높이를 입력하고, 원래 비율을 유지하려면 Lock ratio를 켜 두세요. 모든 프레임의 크기를 조정하려면 Apply size를 선택하세요.

변형 컨트롤로 할 수 있는 작업은 다음과 같아요.

  • 모든 프레임을 왼쪽이나 오른쪽으로 90도 회전
  • 모든 프레임을 가로나 세로로 뒤집기
  • 시각적 선택 영역이나 정확한 X, Y, 너비, 높이 값으로 모든 프레임 자르기

GIF 트리밍 및 타이밍 조정 ​

타임라인 핸들로 남길 첫 프레임과 마지막 프레임을 선택하세요. Speed 드롭다운에서 전체 애니메이션을 50%나 25% 느리게 하거나, 기본 100% 타이밍을 유지하거나, 25%, 50%, 100% 빠르게 할 수 있어요. TinyImage는 각 프레임을 원래 타이밍에서 다시 계산하므로 프레임 사이의 의도된 타이밍 차이가 유지돼요.

미리보기, 타임라인, 내보내는 프레임 순서를 거꾸로 하려면 Reverse를 켜세요. 이미 애니메이션을 트리밍했다면 TinyImage는 선택한 프레임을 그대로 두고 순서만 거꾸로 해요. GIF와 APNG 출력에서 계속 반복하려면 Infinite를 켜 두세요. 애니메이션을 정해진 횟수만큼 재생하려면 Infinite를 끄고 숫자 입력란에 총 반복 횟수를 입력하세요.

출력 설정 및 내보내기 ​

내보내기 버튼 옆의 형식 메뉴에서 편집한 애니메이션을 다운로드할 형식을 선택하세요.

  • 애니메이션 GIF
  • 애니메이션 PNG(APNG)
  • 애니메이션 WebP
  • MP4 동영상
  • WebM 동영상

GIF와 APNG 내보내기에는 반복 컨트롤이, MP4와 WebM 내보내기에는 동영상 반복 컨트롤이 있으며, 애니메이션 WebP는 계속 반복돼요.

GIF Editor는 Create a GIF/MP4와 같은 Quality 슬라이더와 Lossless 옵션을 사용해요. 이 컨트롤은 GIF, APNG, 애니메이션 WebP 내보내기에 적용돼요. Lossless를 켜면 품질 슬라이더가 비활성화되고 이미지 품질이 유지되며, 품질 값을 낮추면 손실 압축으로 파일 크기를 줄일 수 있어요. MP4와 WebM에서는 대신 편집기가 지원하는 가장 높은 동영상 품질을 사용해요.

애니메이션 GIF 출력에서 Size Target을 켜고 최대 크기를 KB 단위로 입력하면 TinyImage가 손실 정도와 색상 팔레트를 자동으로 조정해요. 목표가 활성화된 동안에는 수동 Quality 컨트롤 대신 KB 입력란이 표시되고 Lossless는 숨겨져요. 목표에 도달할 수 없으면 TinyImage는 찾은 결과 중 가장 작은 유효한 결과를 내보내므로, 엄격한 한도가 있는 서비스에 업로드하기 전에 저장된 파일을 확인하세요.

원본 GIF를 편집하지 않았다면 TinyImage는 원래 파일 데이터를 입력으로 사용해, 모든 프레임을 먼저 다시 인코딩하지 않고 선택한 압축을 적용해요. 편집한 GIF는 선택한 압축을 적용하기 전에 이 형식의 최대치인 256색 팔레트로 다시 만들어져요. 다운로드와 Insert GIF to Figma에는 같은 GIF 압축 설정이 사용돼요.

변경할 때마다 재생 미리보기를 확인한 다음 Export GIF, Export APNG, Export WebP, Export MP4, Export WebM 중 하나를 선택하세요. 편집한 애니메이션을 현재 Figma 페이지에 GIF로 추가하려면 Insert GIF to Figma를 선택하세요. TinyImage는 프레임별 내보내기 진행 상황을 보여 주며, 다음 프레임이 처리되기 전에 취소할 수 있어요.