피그마 GIF 용량 줄이기, 상세페이지에 넣기 전 바꿔볼 설정

같은 그래프를 30fps와 15fps로 저장한 결과. 249.7KB에서 139.7KB로 줄었어요.

249.7KB → 139.7KB. 그래프 크기는 그대로 두고, 프레임 속도를 30fps에서 15fps로 바꾼 결과예요. 이번 파일은 용량이 약 44% 줄었어요.

상세페이지에 넣을 GIF가 무겁다고 이미지 크기부터 줄이고 계셨나요? 글자가 작고 흐릿해졌다면, 크기는 유지하고 프레임 속도부터 조절해 보세요.

이번에는 피그마에서 만든 그래프를 두 가지 설정으로 저장했어요. 어떤 차이가 있는지 보고, 내 상세페이지에 맞는 쪽을 고르면 돼요.

1. 상세페이지에 들어갈 크기를 먼저 맞춰요

가로 860px로 쓸 이미지를 430px로 저장한 뒤 늘리면 글자와 선도 함께 확대돼요. 용량은 줄어도 결과가 흐려질 수 있어요.

이번 그래프는 860×1080 프레임을 1x로 저장했어요. 내 상세페이지의 이미지 폭에 맞춰 크기를 정하고, 그다음 움직임을 조절할 거예요.

사진이 들어간 GIF라면 원본 사진도 확인해 주세요. 작은 사진을 크게 늘린 상태에서는 내보내기를 2x로 바꿔도 없던 디테일이 생기지는 않아요.

fps는 1초에 보여주는 화면 수예요. 숫자가 높으면 움직임이 더 촘촘해지고, 저장할 화면도 많아져요.

막대가 올라오거나 제목이 나타나는 짧은 모션이라면 15fps부터 비교해 보세요. 움직임이 끊겨 보이면 24fps나 30fps로 올리면 돼요.

피그마에서 그래프 전체를 담은 프레임을 선택한 뒤, 아래 순서로 저장해 주세요.

피그마의 애니메이션 내보내기에서 GIF와 15fps, 루프를 선택하는 화면

애니메이션 탭이 안 보이면 안쪽 글자나 도형 대신 캔버스에 놓인 최상위 프레임을 선택했는지 확인해 주세요.

같은 그래프와 타임라인에서 프레임 속도만 바꿔 저장한 파일이에요.

내보내기 설정	이미지 크기	실제 파일 용량
30fps · 1x	860×1080	249.7KB
15fps · 1x	860×1080	139.7KB

크기를 줄이지 않고 110KB 정도를 덜었어요. 위 비교 영상에서 막대가 올라오는 모습을 보고, 원하는 부드러움과 용량 사이에서 고르면 돼요.

저장된 GIF의 한 번 재생 길이는 각각 약 3.7초와 4.4초였어요. 프레임 속도를 바꾼 뒤에는 파일 용량과 함께 동작 속도와 반복 타이밍도 확인해 주세요.

프레임 수는 움직임을 조절하는 설정이라 글자를 더 선명하게 만들어주지는 않아요. 작게 저장한 파일을 늘려 쓰는지, 원본 이미지부터 흐릿한지 먼저 확인해 보세요.

피그마 화면에서는 괜찮은데 GIF에서만 색이 거칠게 보인다면, 넓은 그라데이션이나 복잡한 그림자도 살펴보세요. 비교 그래프처럼 단순한 구성은 단색으로 정리해 보는 것도 방법이에요.

참고로 GIF에는 MP4처럼 ‘품질 높음’을 고르는 옵션이 없어요. 내보내기에서 크기와 프레임 속도를 바꾸고, 실제 파일을 보면서 맞추면 돼요.

그래프를 만드는 과정부터 필요하다면 피그마에서 움직이는 상세페이지 그래프 만들기에 정리해뒀어요.

상세페이지에 넣을 간단한 GIF는 요즘 피그마 대신 상세뚝딱에서 만들고 있어요. 만들어둔 상세페이지에 바로 움직임을 넣고 GIF로 내려받을 수 있거든요.

오렌지 상세페이지도 제목을 직접 고친 뒤, 글자가 하나씩 나타나는 효과를 넣어봤어요 🍊

상세뚝딱에서 오렌지 상세페이지 제목에 글자별 등장 효과를 넣어 만든 GIF

문구를 고치고 움직임을 넣는 작업을 같은 편집기에서 할 수 있어서, 간단한 제목 효과를 넣을 때 쓰고 있어요.