GIF 만들기, 제품 사진을 움직여 상세페이지에 넣는 법
제품 사진 한 장으로 움직이는 이미지를 만들 때는 제품은 멈추고 주변만 움직입니다. GIF · MP4 · WebP 고르는 법, 처음과 끝이 이어지는 반복, 용량을 줄이는 다섯 단계, 자리별 확인을 정리했습니다.

GIF 만들기는 제품 사진 한 장에서 2~4초짜리 반복 장면을 만들고, 올릴 자리에 맞춰 용량을 줄여 저장하는 일입니다. 움직임은 김 · 반짝임 · 천천히 다가가는 카메라처럼 작게 두고, 제품과 라벨은 멈춰 둡니다. 형식은 올릴 자리가 정합니다 — 판매처 상세페이지와 메일은 GIF, 자체몰 · 홈페이지는 짧은 MP4나 WebP, 광고 자리는 매체가 받는 형식입니다. GIF는 한 장면에 256색까지만 담아서 색이 많은 사진은 계단처럼 끊기고, 길고 클수록 파일이 커집니다.
GIF 만들기, GIF · MP4 · WebP 중 무엇으로 만드나요
셋 다 움직이는 이미지로 쓰이지만 담는 방식이 다릅니다. GIF는 거의 모든 곳에서 열리는 대신 색과 용량에서 손해를 봅니다.
| 형식 | 색 | 투명 배경 | 용량 | 맞는 자리 |
|---|---|---|---|---|
| GIF | 한 장면에 256색까지 | 한 색만 완전 투명(반투명 없음) | 셋 중 가장 큼 | 판매처 상세페이지 · 메일 · 메신저 |
| MP4 | 색 수 제한 없음 | 없음 — 배경을 깔아 만듦 | 3.7MB GIF가 551KB MP4로 줄어든 예(web.dev) | 자체몰 · 홈페이지 · 광고 · SNS |
| WebP(움직이는) | 색 수 제한 없음 | 반투명까지 | 손실 WebP로 바꾸면 GIF보다 64% 작다는 구글 자료 | WebP를 받는 자체몰 · 홈페이지 |
MP4를 GIF처럼 쓰려면 소리를 끄고 자동 · 반복 재생으로 겁니다. 웹페이지라면 video 태그에 autoplay · loop · muted · playsinline 네 속성을 붙이면 GIF처럼 저절로, 소리 없이, 계속 돕니다(구글 web.dev 안내). 이미지만 올리는 판매처 상세페이지 칸에는 MP4를 넣을 수 없어 GIF를 씁니다.
제품 사진 한 장은 어떻게 움직이나요
제품은 멈추고 주변만 움직입니다. 사진에 이미 있는 것을 움직이면 AI 영상 도구의 결과가 안정적이고, 제품이 돌거나 손이 들어오는 것처럼 사진에 없던 것을 새로 그려야 하면 모양이 흐트러집니다. 움직임별로 잘 되는 정도는 이미지로 영상 만들기, 사진 한 장에서 되는 움직임에 표로 있습니다. 반복 이미지에서는 세 가지를 더 챙깁니다.
- 처음과 끝 잇기 — 반복 이미지는 끝 장면이 곧바로 첫 장면으로 넘어갑니다. 끝 장면을 넣는 칸이 있는 AI 도구라면 같은 사진을 처음과 끝에 넣고, 없다면 만든 영상을 앞으로 한 번 · 거꾸로 한 번 이어 붙여 왕복으로 만듭니다.
- 움직일 곳만 남기기 — AI로 움직인 영상 위에 원본 사진을 한 장 덮고, 김이 오르는 자리처럼 움직일 곳만 지워 뚫습니다(마스크). 라벨은 원본 사진 그대로 남고, GIF는 첫 장면 다음부터 바뀐 부분만 담기 때문에 파일도 가벼워집니다.
- 회전은 찍어서 — 한 바퀴 도는 장면은 AI가 옆면 · 뒷면을 짐작해 그려야 해서 흐트러지기 쉽습니다. 회전판에 올려 18도마다 한 장씩 20장을 찍으면, 초당 10장으로 2초에 한 바퀴 도는 이미지가 됩니다.
카메라가 다가가는 움직임은 AI 없이도 됩니다. 편집 프로그램에서 사진을 3초 동안 100%에서 108%로 천천히 키우면 라벨이 한 획도 바뀌지 않습니다(값은 예시). 원본 사진이 GIF 폭보다 8% 이상 크면 키우는 동안 흐려지지도 않습니다.
용량은 어떤 순서로 줄이나요
GIF 용량을 정하는 것은 다섯 가지입니다 — 길이 · 초당 장면 수 · 가로세로 크기 · 움직이는 넓이 · 색 수. 앞의 셋은 서로 곱해지는 값이라 효과가 큽니다. 크기를 절반으로 줄이면 한 장면의 픽셀 수가 4분의 1이 되고, 초당 장면 수를 절반으로 줄이면 전체 장면 수가 절반이 됩니다. 아래 순서로 한 단계씩 내리고, 단계마다 저장한 파일 크기를 적어 둡니다.
| 순서 | 바꾸는 값 | 예(가정한 값) | 줄어드는 것 |
|---|---|---|---|
| 1 | 길이 | 4초 → 2초 | 장면 수 절반 |
| 2 | 초당 장면 수 | 20장 → 10장 | 장면 수 절반 |
| 3 | 가로세로 크기 | 1000px → 860px | 한 장면 픽셀 수 약 74%로 |
| 4 | 움직이는 넓이 | 화면 전체 → 김이 오르는 부분만 | 장면마다 바뀌는 부분 |
| 5 | 색 수 | 256색 → 128색 | 색 정보 — 줄무늬가 생기면 되돌림 |
초당 장면 수는 100을 나누어떨어지게 고릅니다. GIF는 장면 사이 간격을 100분의 1초 단위로 적어서 초당 10장(간격 10) · 20장(간격 5) · 25장(간격 4)은 정확히 맞고, 30장은 딱 맞지 않습니다. 반복 횟수도 저장할 때 정합니다. 포토샵은 타임라인 창에서 한 번 · 3번 · 계속 · 기타 가운데 고르고 기본값은 계속입니다(2026년 9월 기준 공식 도움말).
크기는 걸릴 자리의 폭 그대로 저장합니다. 더 또렷하게 보이려고 2배 크기로 저장하면 장면마다 픽셀 수가 네 배가 됩니다. 폭을 정하는 법은 상세페이지 이미지 사이즈 — 폭 · 용량 · 분할과 같습니다.
올릴 자리마다 무엇을 확인하나요
| 자리 | 형식 | 확인할 것(2026년 9월 기준) |
|---|---|---|
| 판매처 상세페이지 | GIF | 판매자 도움말의 이미지 등록 항목에서 GIF를 받는지, 한 장 용량 한도는 얼마인지 — 대표 이미지 칸과 상세 설명 칸을 따로 봄 |
| 자체몰 · 홈페이지 | MP4 · WebP | 자동 · 반복 재생과 소리 끔, 휴대폰에서 저절로 도는지 |
| 메일 | GIF | 아웃룩은 애니메이션이 꺼져 있으면 첫 장면만 보임 — 첫 장면에 제품과 문구를 다 넣음 |
| 광고 자리 | 매체가 받는 형식 | 카카오 모션 비즈보드는 GIF를 받지 않고 3초 · 20MB 이내 동영상을 받음, 구글 이미지 광고는 애니메이션이 30초 안에 끝나야 함 |
스마트스토어 · 쿠팡처럼 많이 쓰는 판매처도 칸마다 기준이 따로일 수 있어, 올리는 날 판매자센터 도움말에서 숫자를 옮겨 적습니다. 같은 장면으로 GIF 한 벌 · MP4 한 벌 · 첫 장면 정지 JPG 한 장을 함께 만들어 두면 어느 칸에서 막혀도 바로 바꿔 올립니다.
자주 묻는 질문
동영상 일부를 GIF로 바꾸려면 어떻게 하나요?
쓸 구간 2~4초를 먼저 잘라 낸 뒤 바꿉니다. 긴 영상을 통째로 변환하고 나서 자르면 기다리는 시간만 늘어납니다. 포토샵은 영상을 불러와 타임라인에서 구간을 고른 뒤 「웹용으로 저장(레거시)」에서 GIF로 내보내고, 온라인 변환 도구도 있습니다 — 예를 들어 Adobe Express의 동영상 → GIF 변환은 1분까지의 파일을 받아 크기를 대 · 중 · 소 가운데 고르게 합니다(2026년 9월 기준 무료). 어느 쪽이든 저장한 뒤 위 다섯 단계로 용량을 맞춥니다.
GIF 배경을 투명하게 만들 수 있나요?
한 색만 완전히 투명하게 만들 수 있고, 반투명은 안 됩니다. 그래서 둥근 제품의 가장자리나 그림자처럼 서서히 옅어지는 부분이 계단처럼 보이거나 흰 테두리가 남습니다. 올릴 자리의 배경색이 정해져 있으면 그 색을 깔고 저장하는 편이 깔끔하고, 반투명이 꼭 필요하면 WebP나 APNG처럼 반투명을 담는 형식을 씁니다.
GIF가 뚝뚝 끊기거나 줄무늬가 생기면 어떻게 하나요?
먼저 볼 원인은 셋입니다. 끝 장면과 첫 장면이 이어지지 않으면 반복될 때마다 한 번 튀고, 초당 장면 수가 너무 낮으면 움직임이 끊기며, 색 수를 줄이면 하늘 · 그림자처럼 색이 서서히 변하는 곳에 줄무늬가 생깁니다. 튀는 곳은 왕복 반복으로, 끊김은 초당 장면 수를 한 단계 올려서, 줄무늬는 색 수를 되돌리거나 그 부분을 단색 배경으로 바꿔서 고칩니다.
무료 AI 도구로 움직인 사진을 상세페이지에 써도 되나요?
무료인지가 아니라 그 요금제의 상업적 이용 조건으로 정합니다. 도구마다 요금제별 허락이 다르고 자주 바뀌므로, 만드는 날 요금제 표 · 약관에서 상업적 이용 · 결과물 권리 · 워터마크 세 줄을 캡처해 GIF 원본과 같은 폴더에 둡니다.
오늘 할 일
상세페이지에서 움직였으면 하는 사진 한 장을 고르고, 그 사진에서 움직일 곳과 멈출 곳을 한 줄씩 적으십시오. 예를 들어 「김 — 움직임, 컵과 라벨 — 멈춤」입니다. 이 두 줄이 AI 도구에 넣을 지시문이자, 원본 사진을 덮고 뚫을 경계가 됩니다.
이어서 읽기 — 무빙 포스터, 만드는 법 3가지와 매체별 규격표 · AI 모션그래픽, 장면 표와 프롬프트 예시 6개



